Crossmint improvements (#190)

* docs: update readme file * chore: teaser page layout cleanup * chore: added github workflow to commit empty message to trigger Vercel build under my name * chore: testing with repo url * chore: testing with repo owner logic * chore: synced schedule dates * chore: update footer design + layout * feat: replace next-image with img to avoid caching issues * empty commit * feat: restructure validation logic to support zora and external, external unfinished * feat: show max per user mint in button message * feat: refactor to enable zora write tx * feat: allow zora native minting * fix: sync useValidate * feat: add zora test mint * feat: new crossmint id * fix: crossmint working with zora * empty commit * chore: add links to footer * chore: undo mobile nav styles * chore: implement new mobile nav design * fix: top margin for community Signed-off-by: Arpit Srivastava <[email protected]> * empty commit * fix: padding issue Signed-off-by: Arpit Srivastava <[email protected]> * empty commit * feat: remove console.log * fix: lint fixes on add-zora branch * feat: make address pill an external link * fix: schedule issue * empty commit * feat: replace next-image with img to avoid caching issues * feat: remove console.log * empty commit * empty commit * fix: schedule issue * feat: restructure validation logic to support zora and external, external unfinished * feat: show max per user mint in button message * feat: refactor to enable zora write tx * feat: allow zora native minting * fix: sync useValidate * feat: add zora test mint * feat: new crossmint id * fix: crossmint working with zora * empty commit * fix: lint fixes on add-zora branch * feat: add zora contract to test-contracts and add minttype * fix: fix base config for testnet * chore: update footer links * feat: typography styles * chore: add featured title community page * feat: custom typography responsive * chore: fix nav button sizing * feat: trending page layout * chore: changed mobile navbar globally * fix: banner icon to be used in past and upcoming both * chore: redirect to live stream from /live path * chore: added anirud-samala in git workflow * feat: mint analytics events * fix: undo change * fix: undo change from other repo * empty commit * chore: update tending page and component designs * empty commit * chore: fix trending page top spacing * chore: fix partnerhero position on home page * chore: remove empty space * feat: new images on community page, make clickable * empty commit * chore: fix PageContainer logic * empty commit * feat: use mintWithRewards for zora * feat: update zora test contracts * empty commit * chore: base banner image updated * chore: undo page container changes * fix: twitter module null error * chore: not writing to file if no data is returned * chore: silent failure * chore: partially updated schedule * chore: deleting file only when writing to it * feat: button using base text size and disabled state * chore: made tweet cards clickable * chore: updated schedule partners and base contract * empty commit * chore: work * chore: empty commit * chore: base config update * feat: add checking for home page, fix partnerhero placement * fix: add check for window obj * fix: catch user rejected request on mint dot fun mint * empty commit * chore: dummy arweave ID for testing * feat: navbar typography and layout fixes * chore: base day one config * empty commit * chore: change base day one to aug 9 * feat: page layout * chore: clamping to nearest work * chore: updated tweets file * feat: make mint.fun clickable * chore: added spacing and took away dollar sign from community grant section * empty commit * feat: mobile nav fixed * feat: not found typography * chore: added spacing between total and number * feat: partner hero typography * feat: restyle arweve component * feat: trending and drop card typographies * feat: trending and tabs typography * fix: add more spacing Signed-off-by: Arpit Srivastava <[email protected]> * empty commit * feat: community page typography * chore: add new icon for base * chore: updated community start and end dates * empty message * feat: add prop house Signed-off-by: Arpit Srivastava <[email protected]> * empty commit * empty commit * empty commit * fix: remove color from typography * chore: update arweave for base day one and partner descriptions * chore: add dev arweave for base day one * empty commit * feat: mobile nav layout shift fix * feat: mint dialog typography * feat: remove commented old layout * empty commit * chore: base day one completely separate * feat: use tailwind prose for article * chore: updated description of partners based on the execution tracker sheet * feat: line clamp on calendar card description * chore: changed contract address * chore: actioned column X of the tracker sheet * empty commit * empty commit * chore: actioned brand color and name for base day one * chore: changed * chore: fix copy * chore: change docs to help center * chore: fix mobile menu close bug * fix: scroll area in partner hero full height * feat: round price to 4 digits * chore: arweave script * chore: getting article from arweave file * Wrap article in try catch (#157) * chore: seo optimizations * chore: using generate tweets instead of on the fly tweets fetch * fix: build issue * chore: marked view more links as external to open in new tab * chore: changed schedule api to respect the time constants * fix: spoof date from query param in getNow util * fix: remove spoof date from getDateRangeValidation * docs: update readme file * chore: teaser page layout cleanup * chore: added github workflow to commit empty message to trigger Vercel build under my name * chore: testing with repo url * chore: testing with repo owner logic * chore: synced schedule dates * chore: update footer design + layout * feat: replace next-image with img to avoid caching issues * empty commit * feat: restructure validation logic to support zora and external, external unfinished * feat: show max per user mint in button message * feat: refactor to enable zora write tx * feat: allow zora native minting * fix: sync useValidate * feat: add zora test mint * feat: new crossmint id * fix: crossmint working with zora * empty commit * chore: add links to footer * chore: undo mobile nav styles * chore: implement new mobile nav design * fix: top margin for community Signed-off-by: Arpit Srivastava <[email protected]> * empty commit * fix: padding issue Signed-off-by: Arpit Srivastava <[email protected]> * empty commit * feat: remove console.log * fix: lint fixes on add-zora branch * feat: make address pill an external link * fix: schedule issue * empty commit * feat: replace next-image with img to avoid caching issues * feat: remove console.log * empty commit * empty commit * fix: schedule issue * feat: restructure validation logic to support zora and external, external unfinished * feat: show max per user mint in button message * feat: refactor to enable zora write tx * feat: allow zora native minting * fix: sync useValidate * feat: add zora test mint * feat: new crossmint id * fix: crossmint working with zora * empty commit * fix: lint fixes on add-zora branch * feat: add zora contract to test-contracts and add minttype * fix: fix base config for testnet * chore: update footer links * feat: typography styles * chore: add featured title community page * feat: custom typography responsive * chore: fix nav button sizing * feat: trending page layout * chore: changed mobile navbar globally * fix: banner icon to be used in past and upcoming both * chore: redirect to live stream from /live path * chore: added anirud-samala in git workflow * feat: mint analytics events * fix: undo change * fix: undo change from other repo * empty commit * chore: update tending page and component designs * empty commit * chore: fix trending page top spacing * chore: fix partnerhero position on home page * chore: remove empty space * feat: new images on community page, make clickable * empty commit * chore: fix PageContainer logic * empty commit * feat: use mintWithRewards for zora * feat: update zora test contracts * empty commit * chore: base banner image updated * chore: undo page container changes * fix: twitter module null error * chore: not writing to file if no data is returned * chore: silent failure * chore: partially updated schedule * chore: deleting file only when writing to it * feat: button using base text size and disabled state * chore: made tweet cards clickable * chore: updated schedule partners and base contract * empty commit * chore: work * chore: empty commit * chore: base config update * feat: add checking for home page, fix partnerhero placement * fix: add check for window obj * fix: catch user rejected request on mint dot fun mint * empty commit * chore: dummy arweave ID for testing * feat: navbar typography and layout fixes * chore: base day one config * empty commit * chore: change base day one to aug 9 * feat: page layout * chore: clamping to nearest work * chore: updated tweets file * feat: make mint.fun clickable * chore: added spacing and took away dollar sign from community grant section * empty commit * feat: mobile nav fixed * feat: not found typography * chore: added spacing between total and number * feat: partner hero typography * feat: restyle arweve component * feat: trending and drop card typographies * feat: trending and tabs typography * fix: add more spacing Signed-off-by: Arpit Srivastava <[email protected]> * empty commit * feat: community page typography * chore: add new icon for base * chore: updated community start and end dates * empty message * feat: add prop house Signed-off-by: Arpit Srivastava <[email protected]> * empty commit * empty commit * empty commit * fix: remove color from typography * chore: update arweave for base day one and partner descriptions * chore: add dev arweave for base day one * empty commit * feat: mobile nav layout shift fix * feat: mint dialog typography * feat: remove commented old layout * empty commit * chore: base day one completely separate * feat: use tailwind prose for article * chore: updated description of partners based on the execution tracker sheet * feat: line clamp on calendar card description * chore: changed contract address * chore: actioned column X of the tracker sheet * empty commit * empty commit * chore: actioned brand color and name for base day one * chore: changed * fix: wrap article fetching in try/catch --------- Signed-off-by: Arpit Srivastava <[email protected]> Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: Djordje <[email protected]> Co-authored-by: wilsoncusack <[email protected]> Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: Wilson Cusack <[email protected]> Co-authored-by: Arpit Srivastava <[email protected]> Co-authored-by: Lukas Rosario <[email protected]> Co-authored-by: AshishYelekar <[email protected]> * sync cb (#159) * Wilson/lazr sync (#145) * chore: seo optimizations * chore: using generate tweets instead of on the fly tweets fetch * fix: build issue * chore: marked view more links as external to open in new tab * chore: changed schedule api to respect the time constants * fix: spoof date from query param in getNow util * fix: remove spoof date from getDateRangeValidation * docs: update readme file --------- Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: lauchness <[email protected]> Co-authored-by: Lauchlan Chisholm <[email protected]> * Wilson/lazr sync (#145) * chore: seo optimizations * chore: using generate tweets instead of on the fly tweets fetch * fix: build issue * chore: marked view more links as external to open in new tab * chore: changed schedule api to respect the time constants * fix: spoof date from query param in getNow util * fix: remove spoof date from getDateRangeValidation * docs: update readme file --------- Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: lauchness <[email protected]> Co-authored-by: Lauchlan Chisholm <[email protected]> * chore: debugging * fix: revert docker file change, run tweets locally * fix: new tweets * Wilson/lazr sync (#145) * chore: seo optimizations * chore: using generate tweets instead of on the fly tweets fetch * fix: build issue * chore: marked view more links as external to open in new tab * chore: changed schedule api to respect the time constants * fix: spoof date from query param in getNow util * fix: remove spoof date from getDateRangeValidation * docs: update readme file --------- Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: lauchness <[email protected]> Co-authored-by: Lauchlan Chisholm <[email protected]> * fix: update tweets * chore: update tweets * Wilson/lazr sync (#145) * chore: seo optimizations * chore: using generate tweets instead of on the fly tweets fetch * fix: build issue * chore: marked view more links as external to open in new tab * chore: changed schedule api to respect the time constants * fix: spoof date from query param in getNow util * fix: remove spoof date from getDateRangeValidation * docs: update readme file --------- Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: lauchness <[email protected]> Co-authored-by: Lauchlan Chisholm <[email protected]> --------- Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: lauchness <[email protected]> Co-authored-by: Lauchlan Chisholm <[email protected]> * empty commit * empty commit * chore: removed console log * chore: password protect endpoint * empty commit * chore: update fwb description * feat: remove est time from getNow * feat: fix spacing in partner hero * feat: fix tz date formatting for app/page and app/[slug]/page * fix: format today string based on UTC values * feat: get drop date formatting * fix: don't listen to minting events unless we have an order id * feat: update crossmint version allow cm to handle email input --------- Signed-off-by: Arpit Srivastava <[email protected]> Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: Djordje <[email protected]> Co-authored-by: wilsoncusack <[email protected]> Co-authored-by: Azim Ahmed <[email protected]> Co-authored-by: Wilson Cusack <[email protected]> Co-authored-by: Arpit Srivastava <[email protected]> Co-authored-by: Lukas Rosario <[email protected]> Co-authored-by: AshishYelekar <[email protected]>
base-org · Aug 10, 2023 · 10bb957 · 10bb957
1 parent c540940
commit 10bb957
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@commitlint/cli": "^17.6.5",
-    "@crossmint/client-sdk-react-ui": "^0.2.8-alpha.3",
+    "@crossmint/client-sdk-react-ui": "^1.0.1-alpha.4",
     "@eth-optimism/sdk": "^0.0.0-develop-20230720165249",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.3",

diff --git a/src/components/MintDialog/MintDialog.tsx b/src/components/MintDialog/MintDialog.tsx
@@ -240,7 +240,7 @@ export const MintDialog: FC<{ size?: ButtonProps['size'] }> = ({ size }) => {
         <Dialog.Overlay className={dialogClasses.overlay} />
         <Dialog.Content
           className={clsx(
-            'data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[90vh] w-[90vw] max-w-[450px] lg:max-w-[75vw] translate-x-[-50%] translate-y-[-50%] rounded-[24px] p-5 shadow-large bg-white focus:outline-none z-40 lg:p-16 overflow-initial h-auto lg:h-auto lg:overflow-hidden',
+            'data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[90vh] w-[90vw] max-w-[450px] lg:max-w-7xl translate-x-[-50%] translate-y-[-50%] rounded-[24px] p-5 shadow-large bg-white focus:outline-none z-40 lg:p-16 overflow-initial h-auto lg:h-auto lg:overflow-hidden',
             { '!h-full': isDisplayingCrossMintForm }
           )}
         >

diff --git a/src/components/MintDialog/pages/CrossMint/CrossMint.tsx b/src/components/MintDialog/pages/CrossMint/CrossMint.tsx
@@ -37,33 +37,35 @@ export const CrossMint: FC<CrossMintProps> = ({
   }) // Specifying the environment is optional. It defaults to "production"
   const logEvent = useLogEvent()
 
-  listenToMintingEvents({ orderIdentifier }, (event) => {
-    switch (event.type) {
-      case 'order:process.started':
-        break
-      case 'order:process.finished':
-        break
-      case 'transaction:fulfillment.succeeded':
-        if (isTransactionFulfillmentPayload(event.payload)) {
-          const { contractAddress, tokenIds, txId } = event.payload
-          setTxDetails({
-            hash: txId,
-          })
-          logEvent?.(events.crossMintSuccess)
-          setPage(ModalPage.MINT_SUCCESS)
-        }
-        break
-      case 'transaction:fulfillment.failed':
-        if (isTransactionFulfillmentFailedPayload(event.payload)) {
-          const { orderIdentifier } = event.payload
-          // TODO: Get txhash from crossmint
-        }
-        setPage(ModalPage.MINT_ERROR)
-        break
-      default:
-        break
-    }
-  })
+  if (orderIdentifier) {
+    listenToMintingEvents({ orderIdentifier }, (event) => {
+      switch (event.type) {
+        case 'order:process.started':
+          break
+        case 'order:process.finished':
+          break
+        case 'transaction:fulfillment.succeeded':
+          if (isTransactionFulfillmentPayload(event.payload)) {
+            const { contractAddress, tokenIds, txId } = event.payload
+            setTxDetails({
+              hash: txId,
+            })
+            logEvent?.(events.crossMintSuccess)
+            setPage(ModalPage.MINT_SUCCESS)
+          }
+          break
+        case 'transaction:fulfillment.failed':
+          if (isTransactionFulfillmentFailedPayload(event.payload)) {
+            const { orderIdentifier } = event.payload
+            // TODO: Get txhash from crossmint
+          }
+          setPage(ModalPage.MINT_ERROR)
+          break
+        default:
+          break
+      }
+    })
+  }
 
   const isPending = page === ModalPage.CROSS_MINT_PENDING
 

diff --git a/src/components/MintDialog/pages/CrossMint/CrossMintForm.tsx b/src/components/MintDialog/pages/CrossMint/CrossMintForm.tsx
@@ -40,33 +40,21 @@ export const CrossMintForm: FC<CrossMintFormProps> = ({
   quantity,
   totalPrice,
 }) => {
-  const {mintType, crossMintClientId: clientId, creatorAddress} = useMintDialogContext();
+  const {
+    mintType,
+    crossMintClientId: clientId,
+    creatorAddress,
+  } = useMintDialogContext()
   const [prepared, setPrepared] = useState(false)
   const paymentProcessing = page === ModalPage.CROSS_MINT_PENDING
   const { address: walletAddress } = useAccount()
   const [email, setEmail] = useState('')
-  
+
   return (
     <div className="flex flex-col w-full h-full items-center overflow-scroll hide-scrollbar">
       <h3 className="my-2 font-medium text-lg">Mint with Credit Card</h3>
-      {prepared ? (
-        <div className="w-full max-w-[294px] flex flex-col gap-1 mb-2.5 font-inter mt-0.5 ml-0.5 mr-0.5 px-0.5">
-          <label
-            htmlFor="crossmint-email"
-            className="text-sm font-medium leading-[1.15] text-black"
-          >
-            Email
-          </label>
-          <input
-            id="crossmint-email"
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            className="p-3 border border-[#e6e6e6] rounded-[100px] text-[16px] leading-[18.8px] outline-none shadow-crossMintEmail focus:border-[hsla(210,96%,45%,50%)] focus:shadow-crossMintEmailFocus transition-[background_0.15s_ease,border_0.15s_ease,box-shadow_0.15s_ease,color_0.15s_ease]"
-          />
-        </div>
-      ) : null}
       <CrossmintPaymentElement
+        emailInputOptions={{ show: true }}
         clientId={clientId || ''}
         environment={environment}
         recipient={{
@@ -75,23 +63,26 @@ export const CrossMintForm: FC<CrossMintFormProps> = ({
         }}
         currency="USD" // TODO: Do we support EUR?
         locale="en-US" // TODO: Do we support es-ES?
-        mintConfig={mintType == MintType.Zora ?  {
-          recipient: walletAddress,
-          quantity: quantity,          
-          comment: "",
-          mintReferral: creatorAddress,
-          totalPrice: totalPrice,
-        } : {
-          quantity,
-          totalPrice,
-        }}
+        mintConfig={
+          mintType == MintType.Zora
+            ? {
+                recipient: walletAddress,
+                quantity: quantity,
+                comment: '',
+                mintReferral: creatorAddress,
+                totalPrice: totalPrice,
+              }
+            : {
+                quantity,
+                totalPrice,
+              }
+        }
         uiConfig={{
           fontSizeBase: '1rem',
           spacingUnit: '0.25rem',
           borderRadius: '100px',
           fontWeightSecondary: '500',
         }}
-        // @ts-expect-error
         onEvent={function onEvent(event) {
           switch (event.type) {
             case 'payment:preparation.succeeded':
@@ -128,7 +119,7 @@ export const CrossMintForm: FC<CrossMintFormProps> = ({
               // TODO: Inform error
               setPage(ModalPage.MINT_ERROR)
               break
-            default: 
+            default:
               console.log(`Unmatched crossmint ${event}`)
           }
         }}

diff --git a/yarn.lock b/yarn.lock
@@ -724,20 +724,20 @@
   dependencies:
     chalk "^4.1.0"
 
-"@crossmint/client-sdk-base@^0.2.8-alpha.5":
-  version "0.2.8-alpha.5"
-  resolved "https://registry.yarnpkg.com/@crossmint/client-sdk-base/-/client-sdk-base-0.2.8-alpha.5.tgz#9f880dfe3ce2db8637fac027cabb3ff3b73699d6"
-  integrity sha512-LRUolEkJiAl7SHcRODxKDlOeQD2x/GqOAtUGbQaPYUxSh/DPsKn6vkR9xrwwwpQsPn35aq/8AgjKbIq7N/kuQg==
+"@crossmint/client-sdk-base@^1.0.1-alpha.4":
+  version "1.0.1-alpha.4"
+  resolved "https://registry.yarnpkg.com/@crossmint/client-sdk-base/-/client-sdk-base-1.0.1-alpha.4.tgz#1686854c5d97cf9ab567d712d892aba5280ecb1d"
+  integrity sha512-xVZjJj2dcXvp/6bEvztywP0+pqxrnQ6GRS2AorqSHSavVpOE4hmG5kZBYDbsQsxSL0qG9xMVOYr1KaMU3ize3g==
   dependencies:
     exponential-backoff "^3.1.1"
     uuid "^8.3.2"
 
-"@crossmint/client-sdk-react-ui@^0.2.8-alpha.3":
-  version "0.2.8-alpha.3"
-  resolved "https://registry.yarnpkg.com/@crossmint/client-sdk-react-ui/-/client-sdk-react-ui-0.2.8-alpha.3.tgz#38dd9c990c1d2ba6b4ab5d76dd51671fa92f1d76"
-  integrity sha512-4utH3qVhnVbYQJ+IMcGDOgdtcvhJKhHpYkOTqQWlg4gsn7AABBdm9YJTV2LZaijjRu/BUG7hDozum7JcZf9bRA==
+"@crossmint/client-sdk-react-ui@^1.0.1-alpha.4":
+  version "1.0.1-alpha.4"
+  resolved "https://registry.yarnpkg.com/@crossmint/client-sdk-react-ui/-/client-sdk-react-ui-1.0.1-alpha.4.tgz#6b52c13c92c9854e97e0dad52592aa5d78d8a76b"
+  integrity sha512-I/UcHqUbINnxKP1FJWuMgY5JxyWfpexT6rPeu8B0zTXXDvLAbfQ9eh7r/TwT5DGAq1k1rlLt477/rqkp8Xr0+Q==
   dependencies:
-    "@crossmint/client-sdk-base" "^0.2.8-alpha.5"
+    "@crossmint/client-sdk-base" "^1.0.1-alpha.4"
     react-jss "10.9.2"
     uuid "^8.3.2"