jeffemmett
/
non-fungible-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Camila Sosa Morales 2023-03-14 07:44:25 -05:00 committed by GitHub
parent 7985bb35bb
commit 2c0cfd9b9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 99 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
ui/src/app.tsx
View File

@ -1,31 +1,31 @@
import { HashRouter, Route, Routes, Navigate } from 'react-router-dom';
import { themeGlobals } from '@/theme/globals';
import { ComponentsTest, Home, Mint } from './views';
import { ConnectKitButton } from 'connectkit';
import { MintTest } from './views/mint-test';
import { ToastProvider } from './components';
import { CreateAP } from './views/access-point';
export const App = () => {
themeGlobals();
return (
<>
<div style={{ position: 'absolute', top: '1.25rem', left: '1.25rem' }}>
{/* TODO remove after adding NavBar */}
<ConnectKitButton />
</div>
<ToastProvider />
<HashRouter>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/mint" element={<Mint />} />
<Route path="/create-ap/:id" element={<CreateAP />} />
{/** TODO remove for release */}
<Route path="/components-test" element={<ComponentsTest />} />
<Route path="/mint-test" element={<MintTest />} />
<Route path="*" element={<Navigate to="/home" />} />
</Routes>
</HashRouter>
</>
);
};
import { HashRouter, Route, Routes, Navigate } from 'react-router-dom';
import { themeGlobals } from '@/theme/globals';
import { ComponentsTest, Home, Mint } from './views';
import { ConnectKitButton } from 'connectkit';
import { MintTest } from './views/mint-test';
import { ToastProvider } from './components';
import { CreateAP } from './views/access-point';
export const App = () => {
themeGlobals();
return (
<>
<div style={{ position: 'absolute', top: '1.25rem', left: '1.25rem' }}>
{/* TODO remove after adding NavBar */}
<ConnectKitButton />
</div>
<ToastProvider />
<HashRouter>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/mint" element={<Mint />} />
<Route path="/create-ap/:id" element={<CreateAP />} />
{/** TODO remove for release */}
<Route path="/components-test" element={<ComponentsTest />} />
<Route path="/mint-test" element={<MintTest />} />
<Route path="*" element={<Navigate to="/home" />} />
</Routes>
</HashRouter>
</>
);
};

3
ui/src/constants/env.ts
View File

@ -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 || '',
},
});

18
ui/src/views/home/nfa-list/nfa-list.tsx
View File

@ -1,10 +1,12 @@
import { lastMintsPaginatedDocument, totalTokensDocument } from '@/graphclient';
import { Button, Card, Flex, NoResults } from '@/components';
import { FleekERC721 } from '@/integrations/ethereum/contracts';
/* eslint-disable react/react-in-jsx-scope */
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>
);
};

63
ui/src/views/mint/mint-stepper.tsx
View File

@ -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 (
<Stepper.Root initialStep={1}>
<Stepper.Container>
<Stepper.Step>
<MintStep header="Connect your Ethereum Wallet to mint an NFA">
<WalletStep />
</MintStep>
</Stepper.Step>
const {
transaction: { isSuccess },
} = Mint.useTransactionContext();
<Stepper.Step>
<MintStep header="Connect GitHub and select repository">
<GithubStep />
</MintStep>
</Stepper.Step>
<Stepper.Step>
<MintStep header="Finalize a few key things for your NFA">
<NFAStep />
</MintStep>
</Stepper.Step>
if (!isSuccess) {
return (
<Stepper.Root initialStep={1}>
<Stepper.Container>
<Stepper.Step>
<MintStep header="Connect your Ethereum Wallet to mint an NFA">
<WalletStep />
</MintStep>
</Stepper.Step>
<Stepper.Step>
<MintStep header="Review your NFA and mint it on Polygon">
<MintPreview />
</MintStep>
</Stepper.Step>
</Stepper.Container>
</Stepper.Root>
);
<Stepper.Step>
<MintStep header="Connect GitHub and select repository">
<GithubStep />
</MintStep>
</Stepper.Step>
<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 />;
}
};

8
ui/src/views/mint/mint.context.tsx
View File

@ -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!');
alert('transaction hash: ' + data.transactionHash);
AppLog.info('Transaction:', data);
},
onError: (error) => {
AppLog.errorToast(error.message);
},
},
}}

13
ui/src/views/mint/nft-minted.tsx
View File

@ -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={() => {
alert('TODO: Tweet about your NFA!');
}}
onClick={handleButtonClick}
leftIconButton={<Icon name="twitter" />}
/>
);

43
ui/yarn.lock
View File

@ -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"