Merge pull request #13 from Apillon/develop

Updated EW

Author: dimitrov-d

.env

@@ -0,0 +1,15 @@
+# Uncomment the chain you are using:
+VITE_CHAIN_ID=1287
+
+# Paste the address of the contract.
+VITE_CONTRACT_ADDRESS=''
+
+# Paste UUID of the embedded wallet.
+VITE_EMBEDDED_WALLET_CLIENT=''
+
+# Paste WalletConnect project ID if you want to offer WalletConnect.
+VITE_WALLET_CONNECT_PROJECT=''
+
+# Define logo and cover images.
+VITE_IMG_LOGO=''
+VITE_IMG_COVER=''

.env.example

@@ -69,6 +69,7 @@ typings/
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

.gitignore

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@apillon/wallet-react": "^2.1.2",
+    "@apillon/wallet-react": "^3.0.3",
     "@tanstack/react-query": "^5.76.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package-lock.json

@@ -66,21 +66,6 @@ function App() {
         </div>
       </div>
 
-      {connected && collectionInfo?.name && (
-        <div className='max-w-lg mx-auto my-12'>
-          <h3>
-            The collection you are viewing supports nesting NFTs you own. To setup the nested relationship between NFTs,
-            you first have to own them.
-          </h3>
-          <strong>Instructions:</strong>
-          <ol>
-            <li>Mint one or multiple NFTs</li>
-            <li>Once minted, click on “My NFTs”</li>
-            <li>The NFTs you own will be displayed</li>
-          </ol>
-        </div>
-      )}
-
       {connected && collectionInfo?.name && (
         <div className='mb-6'>
           <h2 className='text-center'>Show NFTs:</h2>

package.json

@@ -24,7 +24,7 @@ const Btn = ({
   }
 
   return (
-    <button {...attrs} className={disabled ? 'relative disabled' : 'relative'} onClick={(e) => handleClick(e)}>
+    <button {...attrs} className={disabled ? 'relative btn disabled' : 'relative btn'} onClick={(e) => handleClick(e)}>
       {loading && <Spinner />}
       <span className={loading ? 'opacity-0' : ''}>{children}</span>
     </button>

src/App.tsx

@@ -43,7 +43,7 @@ export default function Mint() {
 
       toast.info('NFT minting has started');
 
-      const receipt = await publicClient.waitForTransactionReceipt({ hash: tx });
+      const receipt: any = await publicClient.waitForTransactionReceipt({ hash: tx });
       toast.success('NFT has been successfully minted');
 
       const logs = receipt?.logs || receipt.data?.logs;
@@ -78,7 +78,7 @@ export default function Mint() {
         <label htmlFor='amount'>Number of tokens (1-5):</label>
         <input type='number' min='1' max='5' value={amount} onChange={() => handleChange} />
       </div>
-      <button className='btn-mint' id='btnMint' onClick={() => mint()}>
+      <button className='btn btn-mint' onClick={() => mint()}>
         {loading ? <Spinner /> : 'Mint'}
       </button>
     </div>

src/components/Btn.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useAccount, useConnect, useChains } from 'wagmi';
-import { EmbeddedWallet } from '@apillon/wallet-react';
-import { useWallet } from '@apillon/wallet-react';
+import { type Network } from '@apillon/wallet-sdk';
+import { EmbeddedWallet, useWallet } from '@apillon/wallet-react';
 import { useWalletConnect } from '../hooks/useWalletConnect';
 import { EMBEDDED_WALLET_CLIENT } from '../lib/config';
 import { shortHash } from '../lib/strings';
@@ -22,9 +22,9 @@ export default function WalletConnect() {
   const networks = chains.map((chain) => ({
     name: chain.name,
     id: chain.id,
-    rpcUrl: chain.rpcUrls.default.http[0],
-    explorerUrl: chain.blockExplorers?.default?.url,
-  }));
+    rpcUrl: chain.rpcUrls.default.http[0]||'',
+    explorerUrl: chain.blockExplorers?.default?.url||'',
+  } as Network));
 
   function openModal() {
     scrollLock.enable();
@@ -53,6 +53,14 @@ export default function WalletConnect() {
     setConnectorName(conn.name);
     connect({ connector: conn });
   };
+  
+  const  disconnect =() => {
+    if (isConnected) {
+      disconnectWallet();
+    } else if (wallet) {
+      wallet.events.emit('open', true);
+    }
+  }
 
   useEffect(() => {
     if (isConnected) closeWallet();
@@ -68,7 +76,7 @@ export default function WalletConnect() {
             variant='secondary'
             disabled={false}
             loading={false}
-            onClick={() => disconnectWallet()}
+            onClick={() => disconnect()}
           >
             Disconnect
           </Btn>

src/components/Mint.tsx

@@ -59,27 +59,38 @@ export function useContract() {
     return Number(collectionInfo.balance);
   };
 
-  const mintToken = async (price: bigint, amount = 1): Promise<Address | void> => {
+  const mintToken = async (price: bigint, amount = 1): Promise<Address | null> => {
+    if(!walletAddress) return null;
+
     const value = price * BigInt(amount);
     const args = [walletAddress, amount];
-    const gas = await publicClient.estimateContractGas({
-      address: CONTRACT_ADDRESS,
-      abi: nftAbi,
-      functionName: 'mint',
-      args,
-      account: walletAddress,
-      value,
-    });
-    const gasLimit = (gas * 110n) / 100n;
 
     if (info.activeWallet?.address) {
-      return await mintEW(args, value, gasLimit);
+      return await mintEW(args, value);
     }
 
     await initContract(true);
+    const gasLimit = await calcGas(args, value);
     return await contract.write.mint(args, { value }, { gasLimit });
   };
 
+  async function calcGas(args: Array<any>, value: bigint): Promise<bigint>{
+    try {
+      const gas = await publicClient.estimateContractGas({
+      address: CONTRACT_ADDRESS,
+      abi: nftAbi,
+      functionName: 'mint',
+      args,
+      account: walletAddress as Address,
+      value,
+    });
+      return (gas * 110n) / 100n;
+    } catch (e: any) {
+      console.error(e);
+      return 250000n;
+    }
+  }
+
   const loadCollectionInfo = async () => {
     await initContract();
     await Promise.all([