diff --git a/package.json b/package.json index 555751b..b2b19fb 100644 --- a/package.json +++ b/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": [ diff --git a/src/App.tsx b/src/App.tsx index c857c8d..450ae95 100644 --- a/src/App.tsx +++ b/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", }, }, diff --git a/src/assets/shefi-nft.gif b/src/assets/shefi-nft.gif new file mode 100644 index 0000000..465d8c8 Binary files /dev/null and b/src/assets/shefi-nft.gif differ diff --git a/src/clients/capsule.ts b/src/clients/capsule.ts index 4b70957..2fd4846 100644 --- a/src/clients/capsule.ts +++ b/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", +}); diff --git a/src/constants.ts b/src/constants.ts index c5dd825..23d7f59 100644 --- a/src/constants.ts +++ b/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"; \ No newline at end of file +export const INFURA_HOST = + "https://sepolia.infura.io/v3/961364684c7346c080994baab1469ea8"; diff --git a/src/hooks/api/useMintNFT.ts b/src/hooks/api/useMintNFT.ts index 75411dd..2b2fcd7 100644 --- a/src/hooks/api/useMintNFT.ts +++ b/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"); diff --git a/src/index.css b/src/index.css index 32ce12b..f34b8fc 100644 --- a/src/index.css +++ b/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; +} diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 8f1aa41..51d1fdd 100644 --- a/src/pages/home/Home.tsx +++ b/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" > - + + + ); diff --git a/src/pages/home/components/FundWallet/FundWallet.tsx b/src/pages/home/components/FundWallet/FundWallet.tsx index b267166..d06ba71 100644 --- a/src/pages/home/components/FundWallet/FundWallet.tsx +++ b/src/pages/home/components/FundWallet/FundWallet.tsx @@ -51,7 +51,7 @@ export const FundWallet = ({ walletId }: FundWalletProps) => { return ( - 1. Fund your wallet + 1. Fund your wallet { isFaucetPending || localHasUsedFaucet || isHasUsedFaucetLoading } onClick={handleUseFaucet} + _disabled={{ + backgroundColor: localHasUsedFaucet + ? "green" + : isFaucetPending + ? "blue" + : "#080B0F", + }} + borderWidth={localHasUsedFaucet || isFaucetPending ? 0 : 1} + borderColor={"white"} > {localHasUsedFaucet diff --git a/src/pages/home/components/Header/Header.tsx b/src/pages/home/components/Header/Header.tsx index a368d19..7fb9d7d 100644 --- a/src/pages/home/components/Header/Header.tsx +++ b/src/pages/home/components/Header/Header.tsx @@ -3,13 +3,13 @@ import { Heading, VStack, Text } from "@chakra-ui/react"; const Header = () => { return ( - + Capsule Demo App - + An onboarding + NFT mint experience, powered by Capsule. - + Check it out and let us know what you think! diff --git a/src/pages/home/components/MainContent/MainContent.tsx b/src/pages/home/components/MainContent/MainContent.tsx index e672ae4..6fa7cf2 100644 --- a/src/pages/home/components/MainContent/MainContent.tsx +++ b/src/pages/home/components/MainContent/MainContent.tsx @@ -48,7 +48,7 @@ const MainContent = () => { { updateLoginStatus(); @@ -64,7 +64,7 @@ const MainContent = () => { {loggedIn && walletId && walletAddress && ( - Instructions + Instructions @@ -74,8 +74,10 @@ const MainContent = () => { href={link} target="_blank" variant="link" - colorScheme="black" textDecoration="underline" + fontSize={16} + fontWeight={700} + color="white" > View Wallet diff --git a/src/pages/home/components/MintNFT/MintNFT.tsx b/src/pages/home/components/MintNFT/MintNFT.tsx index 3ee04ed..685afbe 100644 --- a/src/pages/home/components/MintNFT/MintNFT.tsx +++ b/src/pages/home/components/MintNFT/MintNFT.tsx @@ -65,7 +65,7 @@ export const MintNFT = ({ walletId, walletAddress }: MintNFTProps) => { return ( - 2. Mint the NFT + 2. Mint the NFT { ? "green" : "#080B0F" } + borderWidth={ + isSendTxError || + isSendTxPending || + isSendTxSuccess || + localHasMintedNFT + ? 0 + : 1 + } + borderColor={"white"} _hover={{ backgroundColor: "#080B0F80" }} onClick={handleSendTx} isDisabled={ diff --git a/src/pages/home/components/NFT/NFT.tsx b/src/pages/home/components/NFT/NFT.tsx index 3f34c41..8c70da6 100644 --- a/src/pages/home/components/NFT/NFT.tsx +++ b/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 = () => { > Capsule NFT