22 |
61 | );
62 | }
63 |
64 | export default ToolContainer;
65 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { ConnectButton } from '@rainbow-me/rainbowkit';
2 | import type { NextPage } from 'next';
3 | import Head from 'next/head';
4 | import { useAccount } from 'wagmi';
5 | import { useEffect, useState } from 'react';
6 | import CommsaurProvider from '../components/CommsaurProvider';
7 | import ToolContainer from '../components/ToolContainer';
8 |
9 | const Home: NextPage = () => {
10 | const { data: account } = useAccount();
11 | const [hasAccount, setHasAccount] = useState(false);
12 | useEffect(() => {
13 | setHasAccount(!!account);
14 | }, [account]);
15 |
16 | return (
17 | <>
18 |
19 |
23 |
43 | 24 | Your Commsaurs{' '} 25 | ({commsaurAmount}) 26 |
27 | {herd.length != commsaurAmount && ( 28 |29 | Herding {herd.length}/{commsaurAmount}... 30 |
31 | )} 32 |
33 | {herd.map((dino) => (
34 |
42 |
44 | {commsaur == -1 && (
45 |
60 |
46 |
51 | )}
52 | {commsaur >= 0 && (
53 | 47 | Select one of your Commsaurs to access it's 48 | tools! 49 |
50 |
54 | saur.id == commsaur)!}
56 | />
57 |
58 | )}
59 |
22 | {!hasAccount && (
23 |
84 |
86 | )}
87 |
88 |
89 | );
90 | };
91 |
92 | export default Home;
93 |
--------------------------------------------------------------------------------
/components/UnwrapButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState } from 'react';
2 | import {
3 | useAccount,
4 | useContractRead,
5 | useContractWrite,
6 | useWaitForTransaction,
7 | } from 'wagmi';
8 | import { pfpAddress } from '../abis/commsaur';
9 | import { Commsaur, useCommsaurContext } from './CommsaurProvider';
10 | import pfpAbi from '../abis/commsaur_pfp_abi.json';
11 | import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';
12 | import LoadingSpinner from './LoadingSpinner';
13 |
14 | type Props = {
15 | dino: Commsaur;
16 | setError: (error: string) => void;
17 | };
18 |
19 | function UnwrapButton({ dino, setError }: Props) {
20 | const { data: account } = useAccount();
21 | const [isApproved, setIsApproved] = useState(false);
22 | const addRecent = useAddRecentTransaction();
23 | const [transactionHash, setTransactionHash] = useState
24 |
34 | {({
35 | mounted,
36 | account,
37 | chain,
38 | openConnectModal,
39 | openChainModal,
40 | openAccountModal,
41 | }) => {
42 | if (!mounted || !account || !chain) {
43 | return (
44 |
52 | );
53 | }
54 |
55 | if (chain.unsupported) {
56 | return (
57 |
65 | );
66 | }
67 |
68 | return (
69 |
77 | );
78 | }}
79 |
80 |
81 | )}
82 | {hasAccount && (
83 | 25 | Commsaur Tools 26 |
27 |28 | Connect your wallet to access the Commsaur tools, 29 | wrap your Commsaur into it's PFP version, 30 | download high-res JPEGs, and more! 31 |
32 | 33 |
40 |
45 | 41 | {dino.wrapped && 'Wrapped '}Commsaur #{dino.id} 42 |
43 |
46 |
130 |
47 | })
52 | {error && (
53 |
99 | 54 | {error} 55 |
56 | )} 57 | {!dino.wrapped && ( 58 |
69 |
74 |
78 |
98 | 79 | View on LooksRare 80 |
81 | 82 | 83 | 88 | 92 |93 | View on OpenSea 94 |
95 | 96 | 97 |
100 | {rarity.traits.map((trait) => {
101 | if (trait.trait_value === 'None') return;
102 | return (
103 |
129 |
107 |
121 | );
122 | })}
123 | 108 | {trait.trait_type} / {trait.trait_value} 109 | 110 | {' '} 111 | ({trait.percent}%) 112 | 113 |
114 |
115 |
119 |
120 | 124 | This Commsaur is ranked #{rarity.rank} with a rarity 125 | score of {rarity.rarity_score}. Data provided by 126 | RaritySniper. 127 |
128 |