Updates for Shefi NFT

package.json

@@ -29,7 +29,8 @@
     "start:gated": "PORT=3007 REACT_APP_GATED=true craco start",
     "build": "craco build",
     "serve-build": "PORT=3007 serve -s build",
-    "deploy-beta": "yarn && yarn build && aws s3 sync build/ s3://capsule-beta-example --acl public-read --profile beta"
+    "deploy-beta": "yarn && REACT_APP_ENV=beta yarn build && aws s3 sync build/ s3://capsule-beta-example --acl public-read --profile beta",
+    "deploy-prod": "yarn && REACT_APP_ENV=prod yarn build && aws s3 sync build/ s3://capsule-prod-example --acl public-read --profile prod"
   },
   "eslintConfig": {
     "extends": [

src/App.tsx

@@ -10,14 +10,14 @@ const theme = extendTheme({
   components: {
     Text: {
       baseStyle: {
-        textColor: "black",
-        fontSize: 18,
+        textColor: "white",
+        fontSize: 16,
         fontFamily: "Hanken Grotesk, sans-serif",
       },
     },
     Heading: {
       baseStyle: {
-        textColor: "black",
+        textColor: "white",
         fontFamily: "Hanken Grotesk, sans-serif",
       },
     },

src/clients/capsule.ts

@@ -1,9 +1,23 @@
 import { Environment } from "@usecapsule/web-sdk";
 import Capsule from "@usecapsule/web-sdk";
+import { isProd } from "../constants";
 
 // Get an api key at usecapsule.com
-const TEST_API_KEY = "d0b61c2c8865aaa2fb12886651627271";
+const API_KEY = isProd
+  ? "ea0dbf5ed0ebbc6f1256b753672a6a18"
+  : "d0b61c2c8865aaa2fb12886651627271";
 
-export const environment = Environment.DEVELOPMENT;
+export const environment = isProd ? Environment.PROD : Environment.DEVELOPMENT;
 
-export const capsule = new Capsule(environment, TEST_API_KEY);
+export const capsule = new Capsule(environment, API_KEY, {
+  emailPrimaryColor: "#FE452B",
+  emailTheme: "light" as any,
+  homepageUrl: "https://www.usecapsule.com",
+  supportUrl: "mailto:support@usecapsule.com",
+  xUrl: "https://twitter.com/usecapsule",
+  linkedinUrl: "https://www.linkedin.com/company/usecapsule",
+  portalBackgroundColor: "#000000",
+  portalPrimaryButtonColor: "#FE452B",
+  portalPrimaryButtonTextColor: "#FFFFFF",
+  portalTextColor: "#FFFFFF",
+});

src/constants.ts

@@ -1,15 +1,29 @@
+import { Environment } from "@usecapsule/web-sdk";
+
+export const ENV = process.env.REACT_APP_ENV
+  ? (process.env.REACT_APP_ENV.toUpperCase() as Environment)
+  : Environment.SANDBOX;
+
+export const isProd = ENV === Environment.PROD;
+
 export const MINTER_CONTRACT_ADDRESS =
   "0x00005ea00ac477b1030ce78506496e8c2de24bf5";
 export const DEFAULT_CHAIN_ID = "11155111";
-export const MINT_PRICE = "0.0000001";
+export const MINT_PRICE = "0";
 export const MINTER_FEE_RECIPIENT =
   "0x0000a26b00c1F0DF003000390027140000fAa719";
 export const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
 export const MINTER_IF_NOT_PAYER = ZERO_ADDRESS;
 export const MINTER_QUANTITY = "1";
 
-export const NFT_CONTRACT_ADDRESS =
+export const SANDBOX_NFT_CONTRACT_ADDRESS =
   "0xdAfB9d117B585E406A74E84977Fa82DdEE8B0a32";
+export const PROD_NFT_CONTRACT_ADDRESS =
+  "0x68065f2a65c3b01c65eb1d31042ed77f2e7ec728";
+
+export const NFT_CONTRACT_ADDRESS = isProd
+  ? PROD_NFT_CONTRACT_ADDRESS
+  : SANDBOX_NFT_CONTRACT_ADDRESS;
 
-  export const INFURA_HOST =
-  "https://sepolia.infura.io/v3/961364684c7346c080994baab1469ea8";
+export const INFURA_HOST =
+  "https://sepolia.infura.io/v3/961364684c7346c080994baab1469ea8";

src/hooks/api/useMintNFT.ts

@@ -29,8 +29,8 @@ export const useMintNFT = (walletAddress: string, walletId: string) => {
         MINTER_CONTRACT_ADDRESS,
         MINT_PRICE,
         "140000",
-        null,
-        "3",
+        "1",
+        "5",
         nonce,
         DEFAULT_CHAIN_ID,
         JSON.stringify(MINTER_CONTRACT_ABI),
@@ -45,7 +45,7 @@ export const useMintNFT = (walletAddress: string, walletId: string) => {
       );
 
       const txResponse = await ethersSigner.sendTransaction(tx as any);
-      const txReceipt = await txResponse.wait(1, 10_000);
+      const txReceipt = await txResponse.wait(1, 15_000);
 
       if (txReceipt?.status !== 1) {
         throw new Error("TX Failed");

src/index.css

@@ -105,7 +105,7 @@
   --marquee-gutter: var(--marquee-fade-width);
   --marquee-duration: 16s;
   --marquee-duration-modifier: 1;
-  --chakra-colors-brand-addressColor: "black" !important;
+  --chakra-colors-brand-addressColor: white !important;
 }
 
 .theme-dark {
@@ -125,3 +125,7 @@
   background-color: var(--color-background);
   color: var(--color-text);
 }
+
+.css-xfmv2t {
+  border: 1px solid white !important;
+}

src/pages/home/Home.tsx

@@ -18,11 +18,20 @@ const Home = () => {
         position="relative"
         py={24}
         display="flex"
-        flexDirection="column"
-        minHeight="100vh"
-        gap={8}
+        justifyContent="center"
       >
-        <MainContent />
+        <Box
+          display="flex"
+          flexDirection="column"
+          gap={8}
+          backgroundColor="#000000D9"
+          borderRadius={16}
+          pt="20px"
+          pb={33}
+          px={78}
+        >
+          <MainContent />
+        </Box>
       </Container>
     </Box>
   );

src/pages/home/components/FundWallet/FundWallet.tsx

@@ -51,7 +51,7 @@ export const FundWallet = ({ walletId }: FundWalletProps) => {
 
   return (
     <HStack width="100%" justifyContent="space-between">
-      <Text>1. Fund your wallet</Text>
+      <Text fontWeight={700}>1. Fund your wallet</Text>
       <Tooltip
         placement="right"
         color="white"
@@ -69,6 +69,15 @@ export const FundWallet = ({ walletId }: FundWalletProps) => {
             isFaucetPending || localHasUsedFaucet || isHasUsedFaucetLoading
           }
           onClick={handleUseFaucet}
+          _disabled={{
+            backgroundColor: localHasUsedFaucet
+              ? "green"
+              : isFaucetPending
+              ? "blue"
+              : "#080B0F",
+          }}
+          borderWidth={localHasUsedFaucet || isFaucetPending ? 0 : 1}
+          borderColor={"white"}
         >
           <Text color="white" fontSize="14px">
             {localHasUsedFaucet

src/pages/home/components/Header/Header.tsx

@@ -3,13 +3,13 @@ import { Heading, VStack, Text } from "@chakra-ui/react";
 const Header = () => {
   return (
     <VStack>
-      <Heading as="h1" size="2xl" textAlign="center">
+      <Heading as="h1" fontSize={40} textAlign="center">
         Capsule Demo App
       </Heading>
-      <Text textAlign="center">
+      <Text textAlign="center" fontSize={16} color="#BDBDBD" maxW={318}>
         An onboarding + NFT mint experience, powered by Capsule.
       </Text>
-      <Text textAlign="center">
+      <Text textAlign="center" fontWeight={700}>
         Check it out and let us know what you think!
       </Text>
     </VStack>

src/pages/home/components/MainContent/MainContent.tsx

@@ -48,7 +48,7 @@ const MainContent = () => {
         <CapsuleButton
           capsule={capsule}
           appName={"Capsule Demo App"}
-          oAuthMethods={[OAuthMethod.GOOGLE, OAuthMethod.DISCORD]}
+          oAuthMethods={[OAuthMethod.GOOGLE]}
           overrides={{
             onCloseOverride: () => {
               updateLoginStatus();
@@ -64,7 +64,7 @@ const MainContent = () => {
       </Flex>
       {loggedIn && walletId && walletAddress && (
         <VStack>
-          <Heading>Instructions</Heading>
+          <Heading fontSize={32}>Instructions</Heading>
           <VStack minW={350}>
             <FundWallet walletId={walletId} />
             <MintNFT walletAddress={walletAddress} walletId={walletId} />
@@ -74,8 +74,10 @@ const MainContent = () => {
             href={link}
             target="_blank"
             variant="link"
-            colorScheme="black"
             textDecoration="underline"
+            fontSize={16}
+            fontWeight={700}
+            color="white"
           >
             View Wallet
           </Button>

src/pages/home/components/MintNFT/MintNFT.tsx

@@ -65,7 +65,7 @@ export const MintNFT = ({ walletId, walletAddress }: MintNFTProps) => {
   return (
     <VStack width="100%">
       <HStack width="100%" justifyContent="space-between">
-        <Text>2. Mint the NFT</Text>
+        <Text fontWeight={700}>2. Mint the NFT</Text>
         <Tooltip
           placement="right"
           color="white"
@@ -84,6 +84,15 @@ export const MintNFT = ({ walletId, walletAddress }: MintNFTProps) => {
                 ? "green"
                 : "#080B0F"
             }
+            borderWidth={
+              isSendTxError ||
+              isSendTxPending ||
+              isSendTxSuccess ||
+              localHasMintedNFT
+                ? 0
+                : 1
+            }
+            borderColor={"white"}
             _hover={{ backgroundColor: "#080B0F80" }}
             onClick={handleSendTx}
             isDisabled={

src/pages/home/components/NFT/NFT.tsx

@@ -1,5 +1,7 @@
 import { Heading, VStack, Image, Flex } from "@chakra-ui/react";
 import nft from "../../../../assets/nft.png";
+import shefiNft from "../../../../assets/shefi-nft.gif";
+import { isProd } from "../../../../constants";
 
 export const NFT = () => {
   return (
@@ -14,7 +16,7 @@ export const NFT = () => {
       >
         <Heading color="white">Capsule NFT</Heading>
         <Image
-          src={nft}
+          src={isProd ? shefiNft : nft}
           alt="NFT"
           w="75%"
           maxW={200}

src/react-app-env.d.ts

@@ -2,3 +2,4 @@ declare module "*.png";
 declare module "*.svg";
 declare module "*.jpeg";
 declare module "*.jpg";
+declare module "*.gif";