|
| 1 | +### Configure Portkey Provider & Write Connect Wallet Function |
| 2 | + |
| 3 | +We'll set up our Portkey provider to allow users to connect their Portkey wallets to our app and interact with the aelf smart contracts. We'll be interacting with the already deployed multi-token contract for this tutorial. |
| 4 | + |
| 5 | +**Step 1. Locate the File:** |
| 6 | + |
| 7 | +- Go to the `src/hooks/useNFTSmartContract.ts` file. |
| 8 | + |
| 9 | +**Step 2. Fetch the Smart Contract:** |
| 10 | + |
| 11 | +- Find the comment `//Step A - Function to fetch a smart contract based on the chain symbol and the contract address.` |
| 12 | + |
| 13 | +- Replace the existing **`fetchContract`** function with this updated code: |
| 14 | + |
| 15 | +```javascript title="useNFTSmartContract.ts" |
| 16 | +//Step A - Function to fetch a smart contract based on the chain symbol and the contract address |
| 17 | +const fetchContract = async ( |
| 18 | + symbol: "AELF" | "tDVW", |
| 19 | + contractAddress: string |
| 20 | +) => { |
| 21 | + try { |
| 22 | + // If no provider is available, return null |
| 23 | + if (!provider) return null; |
| 24 | + |
| 25 | + // Fetch the chain information using the provider |
| 26 | + const chain = await provider.getChain(symbol); |
| 27 | + if (!chain) throw new Error("Chain not found"); |
| 28 | + |
| 29 | + // Get the smart contract instance from the chain |
| 30 | + const contract = chain.getContract(contractAddress); |
| 31 | + |
| 32 | + // Return the smart contract instance |
| 33 | + return contract; |
| 34 | + } catch (error) { |
| 35 | + console.error("Error in fetchContract", { symbol, contractAddress, error }); |
| 36 | + } |
| 37 | +}; |
| 38 | +``` |
| 39 | + |
| 40 | +**Explanation:** |
| 41 | + |
| 42 | +- **`fetchContract`** **Function**: This function fetches a smart contract based on the given chain symbol (e.g., "AELF" or "tDVW") and the contract address. |
| 43 | + |
| 44 | + - **Check Provider** : If no provider is available, the function returns null. |
| 45 | + - **Fetch Chain** : The function fetches chain information using the provider. |
| 46 | + - **Get Contract** : It retrieves the smart contract instance from the chain. |
| 47 | + - **Error Handling** : If an error occurs, it logs the error to the console. |
| 48 | + |
| 49 | +**Step 3. Initialize and Fetch the Smart Contracts:** |
| 50 | + |
| 51 | +- Find the comment `// Step B - Effect hook to initialize and fetch the smart contracts when the provider changes.` |
| 52 | + |
| 53 | +- Replace the existing **`useEffect`** hook with this updated code: |
| 54 | + |
| 55 | +```javascript title="useNFTSmartContract.ts" |
| 56 | +// Step B - Effect hook to initialize and fetch the smart contracts when the provider changes |
| 57 | + useEffect(() => { |
| 58 | + (async () => { |
| 59 | + // Fetch the MainChain Testnet Contract |
| 60 | + const mainChainContract = await fetchContract( |
| 61 | + "AELF", |
| 62 | + "JRmBduh4nXWi1aXgdUsj5gJrzeZb2LxmrAbf7W99faZSvoAaE" |
| 63 | + ); |
| 64 | + setMainChainSmartContract(mainChainContract as IContract); |
| 65 | + |
| 66 | + // Fetch the dAppChain Testnet Contract |
| 67 | + const sideChainContract = await fetchContract( |
| 68 | + "tDVW", |
| 69 | + "ASh2Wt7nSEmYqnGxPPzp4pnVDU4uhj1XW9Se5VeZcX2UDdyjx" |
| 70 | + ); |
| 71 | + setSideChainSmartContract(sideChainContract as IContract); |
| 72 | + })(); |
| 73 | + }, [provider]); // Dependency array ensures this runs when the provider changes |
| 74 | +``` |
| 75 | + |
| 76 | +**Explanation:** |
| 77 | + |
| 78 | +- **`useEffect`** **Hook** : This hook initializes and fetches the smart contracts when the provider changes. |
| 79 | + |
| 80 | + - **Check Provider** : If no provider is available, the function returns null. |
| 81 | + - **Fetch Contracts** : It fetches and sets the smart contracts for the main chain, side chain, and cross chain. |
| 82 | + - **MainChain Contract** : Fetches the MainChain Testnet Contract and sets it in the state. |
| 83 | + - **dAppChain Contract** : Fetches the dAppChain Testnet Contract and sets it in the state. |
| 84 | + |
| 85 | +By following these steps, we'll configure the Portkey provider to connect users' wallets to your app and interact with the multi-token smart contract including NFT related functionalities. This setup will enable our frontend components to perform actions like `create NFTs`, `validate NFTs`, and `transfer NFTs`. |
| 86 | + |
| 87 | +### Configure Connect Wallet Function |
| 88 | + |
| 89 | +**Step 1: Locate the File** |
| 90 | + |
| 91 | +- Go to the `src/components/layout/header/index.tsx` file. |
| 92 | + |
| 93 | +**Step 2: Write the Connect Wallet Function** |
| 94 | + |
| 95 | +- The `header/index.tsx` file is the header of our NFT dApp. It allows users to connect their Portkey wallet with the NFT dApp. |
| 96 | + |
| 97 | +- Before users can interact with the smart contract, we need to write the `Connect Wallet` function. |
| 98 | + |
| 99 | +- Find the comment `// Step C - Connect Portkey Wallet`. |
| 100 | + |
| 101 | +- Replace the existing connect function with this code snippet: |
| 102 | + |
| 103 | +```javascript title="header/index.tsx" |
| 104 | +const connect = async (walletProvider?: IPortkeyProvider) => { |
| 105 | + // Step C - Connect Portkey Wallet |
| 106 | + const accounts = await (walletProvider ? walletProvider : provider)?.request({ |
| 107 | + method: MethodsBase.REQUEST_ACCOUNTS, |
| 108 | + }); |
| 109 | + const account = accounts?.AELF && accounts?.AELF[0]; |
| 110 | + if (account) { |
| 111 | + setCurrentWalletAddress(account.replace(/^ELF_/, "").replace(/_AELF$/, "")); |
| 112 | + setIsConnected(true); |
| 113 | + } |
| 114 | + !walletProvider && toast.success("Successfully connected"); |
| 115 | +}; |
| 116 | +``` |
| 117 | +
|
| 118 | +**Explanation:** |
| 119 | +
|
| 120 | +- **`connect`** **Function** : This function connects the user's Portkey wallet with the dApp. |
| 121 | +
|
| 122 | + - **Fetch Accounts** : It fetches the wallet accounts using the provider. |
| 123 | + - **Log Accounts** : Logs the accounts to the console for debugging. |
| 124 | + - **Set Wallet Address** : Sets the current wallet address state variable with the fetched account. |
| 125 | + - **Update Connection Status** : Updates the state to indicate that the wallet is connected. |
| 126 | + - **User Notification** : Displays an alert to notify the user that their wallet is successfully connected. |
| 127 | +
|
| 128 | +In this code, we fetch the Portkey wallet account using the provider and update the wallet address state variable. An alert notifies the user that their wallet is successfully connected. |
| 129 | +
|
| 130 | +With the Connect Wallet function defined, we're ready to write the remaining functions in the next steps. |
0 commit comments