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.
% npm install
% npm start
Open Developer Tools in Chrome.
It will show log at "Console" menu.
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
// --- 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)
If you get no response when send transaction,
- check your cluster settings(devnet/testnet) on your Wallet(ArConnect/Phantom).
- check your balance.
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();