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