chore: final mint step and share (#174)

* chore: final mint step and share

* chore: fix comments PR

* Update ui/src/views/mint/mint-stepper.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* Update ui/src/views/mint/mint.context.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

---------

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

ui/src/constants/env.ts

@@ -16,4 +16,7 @@ export const env = Object.freeze({
     appId: import.meta.env.VITE_FIREBASE_APP_ID || '',
     measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID || '',
   },
+  twitter: {
+    url: import.meta.env.VITE_TWITTER_URL || '',
+  },
 });

ui/src/views/home/nfa-list/nfa-list.tsx

@@ -1,10 +1,12 @@
-import { lastMintsPaginatedDocument, totalTokensDocument } from '@/graphclient';
+/* eslint-disable react/react-in-jsx-scope */
-import { Button, Card, Flex, NoResults } from '@/components';
-import { FleekERC721 } from '@/integrations/ethereum/contracts';
 import { useQuery } from '@apollo/client';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import { Button, Card, Flex, NoResults } from '@/components';
+import { lastMintsPaginatedDocument, totalTokensDocument } from '@/graphclient';
+import { FleekERC721 } from '@/integrations/ethereum/contracts';
+
 const pageSize = 10; //Set this size to test pagination
 
 export const NFAList = () => {
@@ -65,15 +67,19 @@ export const NFAList = () => {
           Next page
         </Button>
       </Flex>
-      <Flex css={{ gap: '$2' }}>
+      <div>
         {dataMintedTokens && dataMintedTokens.newMints.length > 0 ? (
           dataMintedTokens.newMints.map((mint) => (
-            <Card.Container key={mint.tokenId}>
+            <Card.Container
+              key={mint.tokenId}
+              css={{ display: 'inline-block', m: '$2' }}
+            >
               <Card.Heading title={mint.name} />
               <Card.Body css={{ display: 'flex', flexDirection: 'column' }}>
                 <a
                   target="_blank"
                   href={`https://testnets.opensea.io/assets/mumbai/${FleekERC721.address}/${mint.tokenId}`}
+                  rel="noreferrer"
                 >
                   <u>Open NFA on Opensea</u>
                 </a>
@@ -84,7 +90,7 @@ export const NFAList = () => {
         ) : (
           <NoResults />
         )}
-      </Flex>
+      </div>
     </Flex>
   );
 };

ui/src/views/mint/mint-stepper.tsx

@@ -4,35 +4,46 @@ import { GithubStep } from './github-step';
 import { MintStep } from './mint-step';
 import { WalletStep } from './wallet-step';
 import { NFAStep } from './nfa-step';
+import { Mint } from './mint.context';
+import { NftMinted } from './nft-minted';
 
 export const MintStepper = () => {
-  return (
+  const {
-    <Stepper.Root initialStep={1}>
+    transaction: { isSuccess },
-      <Stepper.Container>
+  } = Mint.useTransactionContext();
-        <Stepper.Step>
-          <MintStep header="Connect your Ethereum Wallet to mint an NFA">
-            <WalletStep />
-          </MintStep>
-        </Stepper.Step>
 
-        <Stepper.Step>
-          <MintStep header="Connect GitHub and select repository">
-            <GithubStep />
-          </MintStep>
-        </Stepper.Step>
 
-        <Stepper.Step>
+  if (!isSuccess) {
-          <MintStep header="Finalize a few key things for your NFA">
+    return (
-            <NFAStep />
+      <Stepper.Root initialStep={1}>
-          </MintStep>
+        <Stepper.Container>
-        </Stepper.Step>
+          <Stepper.Step>
+            <MintStep header="Connect your Ethereum Wallet to mint an NFA">
+              <WalletStep />
+            </MintStep>
+          </Stepper.Step>
 
-        <Stepper.Step>
+          <Stepper.Step>
-          <MintStep header="Review your NFA and mint it on Polygon">
+            <MintStep header="Connect GitHub and select repository">
-            <MintPreview />
+              <GithubStep />
-          </MintStep>
+            </MintStep>
-        </Stepper.Step>
+          </Stepper.Step>
-      </Stepper.Container>
+
-    </Stepper.Root>
+          <Stepper.Step>
-  );
+            <MintStep header="Finalize a few key things for your NFA">
+              <NFAStep />
+            </MintStep>
+          </Stepper.Step>
+
+          <Stepper.Step>
+            <MintStep header="Review your NFA and mint it on Polygon">
+              <MintPreview />
+            </MintStep>
+          </Stepper.Step>
+        </Stepper.Container>
+      </Stepper.Root>
+    );
+  } else {
+    return <NftMinted />;
+  }
 };

ui/src/views/mint/mint.context.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 
 import { ComboboxItem, DropdownItem } from '@/components';
 import { EthereumHooks } from '@/integrations';
-import { GithubState, useFleekERC721Billing } from '@/store';
 import { AppLog, createContext } from '@/utils';
+import { GithubState, useFleekERC721Billing } from '@/store';
 
 export type MintContext = {
   billing: string | undefined;
@@ -118,8 +118,10 @@ export abstract class Mint {
           config={{
             transaction: {
               onSuccess: (data) => {
-                AppLog.successToast('Successfully minted!');
+                AppLog.info('Transaction:', data);
-                alert('transaction hash: ' + data.transactionHash);
+              },
+              onError: (error) => {
+                AppLog.errorToast(error.message);
               },
             },
           }}

ui/src/views/mint/nft-minted.tsx

@@ -1,10 +1,19 @@
 import { Icon } from '@/components';
+import { env } from '@/constants';
+import { useNavigate } from 'react-router-dom';
 import { NftCard } from './nft-card';
 
 export const NftMinted = () => {
+  const navigate = useNavigate();
+  const handleButtonClick = () => {
+    window.open(env.twitter.url, '_blank'); //TODO replace with twitter share
+    navigate('/home');
+  };
+
   return (
     <NftCard
       title="Mint Successful"
+      isLoading={false}
       leftIcon={
         <Icon
           name="check-circle"
@@ -13,9 +22,7 @@ export const NftMinted = () => {
       }
       message="You have successfully minted your NFA."
       buttonText="Tweet about your NFA!"
-      onClick={() => {
+      onClick={handleButtonClick}
-        alert('TODO: Tweet about your NFA!');
-      }}
       leftIconButton={<Icon name="twitter" />}
     />
   );

ui/yarn.lock

@@ -5442,32 +5442,6 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^5.45.0":
-  version "5.54.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.54.1.tgz#0c5091289ce28372e38ab8d28e861d2dbe1ab29e"
-  integrity sha512-a2RQAkosH3d3ZIV08s3DcL/mcGc2M/UC528VkPULFxR9VnVPT8pBu0IyBAJJmVsCmhVfwQX1v6q+QGnmSe1bew==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.54.1"
-    "@typescript-eslint/type-utils" "5.54.1"
-    "@typescript-eslint/utils" "5.54.1"
-    debug "^4.3.4"
-    grapheme-splitter "^1.0.4"
-    ignore "^5.2.0"
-    natural-compare-lite "^1.4.0"
-    regexpp "^3.2.0"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/parser@^5.45.0":
-  version "5.54.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.54.1.tgz#05761d7f777ef1c37c971d3af6631715099b084c"
-  integrity sha512-8zaIXJp/nG9Ff9vQNh7TI+C3nA6q6iIsGJ4B4L6MhZ7mHnTMR4YP5vp2xydmFXIy8rpyIVbNAG44871LMt6ujg==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.54.1"
-    "@typescript-eslint/types" "5.54.1"
-    "@typescript-eslint/typescript-estree" "5.54.1"
-    debug "^4.3.4"
-
 "@typescript-eslint/scope-manager@5.54.1":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.54.1.tgz#6d864b4915741c608a58ce9912edf5a02bb58735"
@@ -5476,16 +5450,6 @@
     "@typescript-eslint/types" "5.54.1"
     "@typescript-eslint/visitor-keys" "5.54.1"
 
-"@typescript-eslint/type-utils@5.54.1":
-  version "5.54.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.54.1.tgz#4825918ec27e55da8bb99cd07ec2a8e5f50ab748"
-  integrity sha512-WREHsTz0GqVYLIbzIZYbmUUr95DKEKIXZNH57W3s+4bVnuF1TKe2jH8ZNH8rO1CeMY3U4j4UQeqPNkHMiGem3g==
-  dependencies:
-    "@typescript-eslint/typescript-estree" "5.54.1"
-    "@typescript-eslint/utils" "5.54.1"
-    debug "^4.3.4"
-    tsutils "^3.21.0"
-
 "@typescript-eslint/types@5.54.1":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.54.1.tgz#29fbac29a716d0f08c62fe5de70c9b6735de215c"
@@ -5504,7 +5468,7 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.54.1", "@typescript-eslint/utils@^5.10.0":
+"@typescript-eslint/utils@^5.10.0":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.54.1.tgz#7a3ee47409285387b9d4609ea7e1020d1797ec34"
   integrity sha512-IY5dyQM8XD1zfDe5X8jegX6r2EVU5o/WJnLu/znLPWCBF7KNGC+adacXnt5jEYS9JixDcoccI6CvE4RCjHMzCQ==
@@ -12868,11 +12832,6 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-natural-compare-lite@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
-  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"