Skip to content

Latest commit

 

History

History
180 lines (133 loc) · 6 KB

README.md

File metadata and controls

180 lines (133 loc) · 6 KB
Raw

solana-arweave-react-mint-nft-example

Mint NFT with React on Arweave and Solana chain for customizable example.
Experiment purpose only.

This sample uses only Web3.js(Arweave, Solana and Metaplex) on React.
I don't use Candy Machine v2 CLI, Metaplex Storefront, Next.js and Redux.

I tried to make minimal example so I don't think good UI/UX.
Please refine depends on your project.

Run

% npm install
% npm start

Open Developer Tools in Chrome.
It will show log at "Console" menu.

Frameworks / Packages Summary

Frontend

Wallet

Metadata

Reinstall Pacakges

If you need to reinstall, run following

npm add @solana/web3.js
npm add @project-serum/anchor
npm add arweave
npm add @metaplex/js

npm add @solana/wallet-adapter-base \
         @solana/wallet-adapter-react \
         @solana/wallet-adapter-react-ui \
         @solana/wallet-adapter-wallets \
         @solana/web3.js
npm add @mui/material \
         @emotion/react \
         @emotion/styled

npm add assert
npm add chai
npm add stream
npm add @types/chai

npm add jest @types/jest ts-jest -D

Screenshot

1. Connect ArConnect

2. Connect Phantom

3. Upload Metadata

4. Mint NFT

TSX Main Compoment Structure

// --- index.tsx ----------------------------------------------------------
<App />

  // --- App.tsx ----------------------------------------------------------
  <Theme />

    // --- Theme.tsx ------------------------------------------------------
    <ThemeProvider theme={theme}>
      <Header />
      <ArweaveClusterContextProvider>     // Global value of selected Arweave Cluster
        <ArTransactionIdContextProvider>  // Global value of Arweave TX ID
          <SolanaClusterContextProvider>  // Global value of selected Solana Cluster
            <HorizontalLinearStepper />   // MUI Step Navigation


              // --- StepNavigation.tsx -----------------------------------


                // Navigation Step 1
                <Arconnect />             // Connect to ArConnect

                  // --- Arconnect.tsx ------------------------------------
                  <ArweaveClusterSelect>  // Select Arweave Cluster


                // Navigation Step 2
                <WalletAdapter step={step} />

                  // --- WalletAdapter.tsx --------------------------------
                  <ConnectWallet />       // Connect to Phantom

                    // --- ConnectWallet.tsx ------------------------------
                    <SolanaClusterSelect> // Select Solana Cluster


                // Navigation Step 3
                <WalletAdapter step={step} />

                    // --- WalletAdapter.tsx -------------------------------
                    <UploadMetadata />    // Upload Metadata to Arweave

                    // --- UploadMetadata.tsx -------------------------------
                    <UploadFile />        // Upload Image to Arweave
                    <ArweaveTools />      // Arweave Tools(get balance, airdrop)


                // Navigation Step 4
                <WalletAdapter step={step} />

                    // --- WalletAdapter.tsx -------------------------------
                    <MintNft />

                      // --- MintNft.tsx -----------------------------------
                      <MintEdition />     // Mint Edition(Copy NFT from Master)

Troubleshooting

If you get no response when send transaction,

  • check your cluster settings(devnet/testnet) on your Wallet(ArConnect/Phantom).
  • check your balance.

Note

If you need more easy to upload image and metadata for Arweave, check Metaplex web3.js. They have very useful SDK.

Write only this code for upload image and metadata! like this:

  const metaplex = Metaplex.make(connection)
      .use(keypairIdentity(wallet))
      .use(bundlrStorage({
          address: 'https://devnet.bundlr.network',
          providerUrl: 'https://api.devnet.solana.com',
          timeout: 60000,
      }));

  const { uri } = await metaplex
      .nfts()
      .uploadMetadata({
          name: "My NFT Metadata",
          description: "My description",
          image: "https://placekitten.com/200/300",
      })
      .run();

  const { nft } = await metaplex
      .nfts()
      .create({
          uri: uri,
          name: "My NFT",
          sellerFeeBasisPoints: 500, // Represents 5.00%.
          maxSupply: toBigNumber(1),
      })
      .run();

Reference