feat: pay with credit card (#2526)

* crossmint setup * crossmint integration * fix: cross mint * success urls * fix * fix * fix * fix * fix * fix * post crossmint message to parent window * fix * fix * fix: auth check in buy * fixes redirect
showtime-xyz · Nov 15, 2023 · d696cf2 · d696cf2
1 parent 466bb0e
commit d696cf2
Show file tree

Hide file tree

Showing 9 changed files with 440 additions and 11 deletions.
diff --git a/apps/next/package.json b/apps/next/package.json
@@ -14,6 +14,7 @@
     "@amplitude/analytics-browser": "^2.1.0",
     "@builder.io/partytown": "^0.8.0",
     "@coinbase/wallet-sdk": "^3.7.1",
+    "@crossmint/client-sdk-react-ui": "^1.1.2-alpha.0",
     "@growthbook/growthbook-react": "^0.17.0",
     "@hcaptcha/react-hcaptcha": "^1.8.1",
     "@headlessui/react": "^1.7.15",

diff --git a/apps/next/src/pages/_app.tsx b/apps/next/src/pages/_app.tsx
@@ -231,7 +231,6 @@ function App({ Component, pageProps, router }: AppProps) {
         <VerifyPhoneNumberScreen />
         <UnlockedChannelScreen />
         <CreatorTokenBuyScreen />
-        <CreatorTokensShareModalScreen />
         <CreatorTokenInviteSignInScreen />
         <InviteCreatorTokenScreen />
         <CreatorTokensSelfServeExplainerScreen />

diff --git a/apps/next/src/pages/creator-token/[username]/share.tsx b/apps/next/src/pages/creator-token/[username]/share.tsx
@@ -0,0 +1 @@
+export { Fragment as default } from "react";
diff --git a/packages/app/components/creator-token/buy-creator-token.tsx b/packages/app/components/creator-token/buy-creator-token.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { Linking } from "react-native";
 
+import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
 import { useWallets } from "@privy-io/react-auth";
 import { createParam } from "solito";
 
@@ -28,8 +29,10 @@ import { useCreatorTokenPriceToSellNext } from "app/hooks/creator-token/use-crea
 import { useCreatorTokenSell } from "app/hooks/creator-token/use-creator-token-sell";
 import { useWalletUSDCBalance } from "app/hooks/creator-token/use-wallet-usdc-balance";
 import { useRedirectToCreatorTokensShare } from "app/hooks/use-redirect-to-creator-token-share-screen";
+import { useUser } from "app/hooks/use-user";
 import { useWallet } from "app/hooks/use-wallet";
 import { useWalletETHBalance } from "app/hooks/use-wallet-balance";
+import { useNavigateToLogin } from "app/navigation/use-navigate-to";
 
 import { toast } from "design-system/toast";
 import { Toggle } from "design-system/toggle";
@@ -241,13 +244,15 @@ export const BuyCreatorToken = () => {
             : wallet.isMagicWallet
             ? "Connect"
             : paymentMethod === "ETH"
-            ? "Buy"
-            : "Approve & Buy"}
+            ? "Buy with ETH"
+            : "Buy with USDC"}
         </Button>
       );
     }
   };
 
+  const navigateToLogin = useNavigateToLogin();
+  const { isAuthenticated } = useUser();
   useEffect(() => {
     if (selectedAction === "sell" && typeof tokenBalance.data !== "undefined") {
       setTokenAmount(Math.min(1, Number(tokenBalance.data)));
@@ -263,6 +268,26 @@ export const BuyCreatorToken = () => {
   }, [selectedAction, tokenBalance.data]);
   const isDark = useIsDarkMode();
 
+  const crossmintConfig = {
+    collectionId: profileData?.data?.profile.creator_token?.crossmint_id,
+    projectId: process.env.NEXT_PUBLIC_CROSSMINT_PROJECT_ID,
+    mintConfig: {
+      totalPrice: (
+        Number(priceToBuyNext.data?.totalPrice) / 1000000
+      ).toString(),
+      _numOfTokens: tokenAmount,
+      _maxPayment: priceToBuyNext.data?.totalPrice?.toString(),
+    },
+    mintTo: wallet.address,
+    environment:
+      process.env.NEXT_PUBLIC_STAGE === "production" ? "production" : "staging",
+    successCallbackURL:
+      typeof window !== "undefined"
+        ? window.location.origin +
+          `/creator-token/${profileData?.data?.profile.username}/share`
+        : undefined,
+  } as const;
+
   return (
     <BottomSheetModalProvider>
       <>
@@ -480,6 +505,28 @@ export const BuyCreatorToken = () => {
             </Text>
           </View>
         </View>
+        {selectedAction === "buy" && crossmintConfig.collectionId ? (
+          <>
+            <View tw="mx-auto my-2 h-[1px] w-[20%] rounded-full bg-gray-400" />
+            <CrossmintPayButton
+              style={{
+                borderRadius: 100,
+                marginLeft: 16,
+                marginRight: 16,
+                fontWeight: 600,
+              }}
+              onClick={(e) => {
+                if (!isAuthenticated) {
+                  navigateToLogin();
+                  e.preventDefault();
+                  return;
+                }
+                router.pop();
+              }}
+              {...crossmintConfig}
+            />
+          </>
+        ) : null}
         <ModalSheet
           snapPoints={[400]}
           title=""

diff --git a/packages/app/components/creator-token/creator-tokens-share.tsx b/packages/app/components/creator-token/creator-tokens-share.tsx
@@ -45,13 +45,30 @@ const { useParam } = createParam<{
   username: string;
   type: TokenShareType;
   collectedCount: string;
+  p: string;
 }>();
 
 export const CreatorTokensShareModal = memo(function CreatorTokens() {
   const linearOpaticy = useSharedValue(0);
   const [username] = useParam("username");
-  const [collectedCount] = useParam("collectedCount");
-  const [type] = useParam("type");
+  let [collectedCount] = useParam("collectedCount");
+  let [type] = useParam("type");
+
+  // Redirect from crossmint
+  // https://docs.crossmint.com/docs/redirect-url#redirection-payload
+  const [p] = useParam("p");
+
+  if (p) {
+    try {
+      const params = JSON.parse(p);
+      if (params && params[0] && params[0].type === "purchase.succeeded") {
+        collectedCount = params?.[0]?.tokenIds?.length;
+        type = "collected";
+      }
+    } catch (e) {
+      // noop
+    }
+  }
 
   const { data: userInfo } = useUserProfile({ address: username });
   const profileData = userInfo?.data?.profile;

diff --git a/packages/app/screens/creator-token/creator-token-social-share.tsx b/packages/app/screens/creator-token/creator-token-social-share.tsx
@@ -6,7 +6,7 @@ export const CreatorTokenSocialShareScreen = withModalScreen(
   CreatorTokenSocialShare,
   {
     title: "",
-    matchingPathname: "/creator-token/[username]/share",
+    matchingPathname: "/creator-token/[username]/social-share",
     matchingQueryParam: "creatorTokenSocialShareModal",
     snapPoints: ["100%"],
     enableHandlePanningGesture: true,

diff --git a/packages/app/types.ts b/packages/app/types.ts
@@ -182,6 +182,7 @@ export interface Profile {
     | "opted_in";
   creator_token?: {
     address: `0x${string}`;
+    crossmint_id: string | null;
     id: number;
   };
 }

diff --git a/packages/app/types/environment.d.ts b/packages/app/types/environment.d.ts
@@ -3,6 +3,7 @@ export {};
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
+      NEXT_PUBLIC_STAGE: "development" | "staging" | "production";
       NEXT_PUBLIC_MAGIC_PUB_KEY: string;
       NEXT_PUBLIC_WEBSITE_DOMAIN: string;
       NEXT_PUBLIC_STRIPE_KEY: string;
@@ -11,6 +12,7 @@ declare global {
       NEXT_PUBLIC_ALCHEMY_API_KEY: string;
       E2E: string;
       NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: string;
+      NEXT_PUBLIC_CROSSMINT_PROJECT_ID: string;
       NEXT_PUBLIC_PRIVY_APP_ID: string;
     }
   }