thirdweb-dev/js

Mismatched network calling `approve` on ERC721

Closed this issue · 4 comments

szekelyisz commented

I'm trying to call approve on a ERC721 token contract. The entire app is running on the Gnosis Chiado testnet, but the call returns with this error:

User rejected. Calling [eth_sendTransaction] ERROR: Mismatched networks. Please switch OneKey Wallet current network to chainId=1

Code snippet I'm using:

import { getContract, prepareContractCall, sendTransaction } from 'thirdweb';

const nftContract = getContract({
  client: accountStore.client,
  chain: accountStore.chain,
  address: process.env.NFT_CONTRACT as string,
});

const transaction = prepareContractCall({
  contract: nftContract,
  method:
    'function approve(address _approved, uint256 _tokenId) external payable',
  params: [marketplaceContract.address, BigInt(props.tokenId)],
});

assert(accountStore.account !== undefined);

console.log('transaction :>> ', transaction);
console.log('accountStore.account :>> ', accountStore.account);

sendTransaction({
  transaction: transaction,
  account: accountStore.account,
})
  .then(({ transactionHash }) =>
    $q.dialog({
      title: 'Transaction successful',
      message: `Hash: ${transactionHash}`,
    })
  )
  .catch((error) =>
    $q.dialog({
      title: 'Transaction failed',
      message: `Error: ${error}`,
    })
  );

According to console logs, nftContract.chain definitely has value 10200... I wonder what it's trying to do on Ethereum Mainnet, any ideas?

entin-hun commented

I asked ChatGPT how to use the built-in smart wallet on Gnosis chain rather the seemingly default OneKey on ERC20.

Using Thirdweb's built-in SmartWallet on the Gnosis chain involves leveraging Thirdweb's SDK to manage wallet creation, transactions, and interactions with smart contracts. Here’s a step-by-step guide to set up and use Thirdweb’s SmartWallet on the Gnosis chain:

  1. Install Thirdweb SDK:
    Ensure you have the Thirdweb SDK installed in your project. If not, install it using npm or yarn:

    npm install @thirdweb-dev/sdk

    or

    yarn add @thirdweb-dev/sdk

  2. Configure Thirdweb SDK:
    Initialize the Thirdweb SDK with the Gnosis chain configuration.

    import { ThirdwebSDK } from '@thirdweb-dev/sdk';

const gnosisChainId = 100; // Chain ID for Gnosis Mainnet
const gnosisRpcUrl = 'https://rpc.gnosischain.com'; // RPC URL for Gnosis Chain

const sdk = new ThirdwebSDK({
  chainId: gnosisChainId,
  rpcUrl: gnosisRpcUrl,
});

  3. Create and Use a SmartWallet:
    Create and interact with the SmartWallet. The following example demonstrates how to create a SmartWallet, connect to it, and call the approve function on an ERC721 contract.

    import { ThirdwebSDK, SmartWallet } from '@thirdweb-dev/sdk';

const gnosisChainId = 100; // Chain ID for Gnosis Mainnet
const gnosisRpcUrl = 'https://rpc.gnosischain.com'; // RPC URL for Gnosis Chain

const sdk = new ThirdwebSDK({
  chainId: gnosisChainId,
  rpcUrl: gnosisRpcUrl,
});

async function setupSmartWallet() {
  // Assuming you have the user's wallet address
  const userAddress = '0xYourUserAddress'; 

  // Create or connect to a SmartWallet for the user
  const smartWallet = await sdk.wallet.createSmartWallet({
    ownerAddress: userAddress,
  });

  // Now you can use the SmartWallet to interact with your contracts
  const nftContractAddress = process.env.NFT_CONTRACT; // Your NFT contract address

  // Prepare the approve transaction
  const approveTx = await smartWallet.prepareTransaction({
    to: nftContractAddress,
    data: sdk.contracts.erc721.encode('approve', [
      marketplaceContract.address, // Address to approve
      BigInt(props.tokenId),       // Token ID
    ]),
  });

  // Send the transaction
  const txReceipt = await smartWallet.sendTransaction(approveTx);

  console.log('Transaction successful:', txReceipt.transactionHash);
}

setupSmartWallet().catch((error) => {
  console.error('Transaction failed:', error);
});

  4. Handling User Interaction:
    Ensure you handle user interaction correctly in your DApp. This may involve prompting the user to connect their wallet, switching networks, or signing transactions.

Complete Example:

Below is a complete example of how to initialize Thirdweb SDK, create a SmartWallet, and call the approve method on an ERC721 contract using the Gnosis chain.

import { ThirdwebSDK, SmartWallet } from '@thirdweb-dev/sdk';
import { marketplaceContract } from './contracts'; // Import your marketplace contract

const gnosisChainId = 100; // Chain ID for Gnosis Mainnet
const gnosisRpcUrl = 'https://rpc.gnosischain.com'; // RPC URL for Gnosis Chain

const sdk = new ThirdwebSDK({
  chainId: gnosisChainId,
  rpcUrl: gnosisRpcUrl,
});

async function setupSmartWallet() {
  try {
    // Assuming you have the user's wallet address
    const userAddress = '0xYourUserAddress'; 

    // Create or connect to a SmartWallet for the user
    const smartWallet = await sdk.wallet.createSmartWallet({
      ownerAddress: userAddress,
    });

    // Now you can use the SmartWallet to interact with your contracts
    const nftContractAddress = process.env.NFT_CONTRACT; // Your NFT contract address

    // Prepare the approve transaction
    const approveTx = await smartWallet.prepareTransaction({
      to: nftContractAddress,
      data: sdk.contracts.erc721.encode('approve', [
        marketplaceContract.address, // Address to approve
        BigInt(props.tokenId),       // Token ID
      ]),
    });

    // Send the transaction
    const txReceipt = await smartWallet.sendTransaction(approveTx);

    console.log('Transaction successful:', txReceipt.transactionHash);

    // Optionally, show a success dialog to the user
    $q.dialog({
      title: 'Transaction successful',
      message: `Hash: ${txReceipt.transactionHash}`,
    });
  } catch (error) {
    console.error('Transaction failed:', error);

    // Optionally, show an error dialog to the user
    $q.dialog({
      title: 'Transaction failed',
      message: `Error: ${error.message}`,
    });
  }
}

setupSmartWallet();

Notes:

  • Ensure the user's wallet is correctly connected to your DApp.
  • Handle network switching within the wallet if needed.
  • Manage user interactions smoothly to provide a good user experience.
  • Adjust the code to fit your specific application logic and environment setup.

By following these steps, you can utilize Thirdweb's SmartWallet on the Gnosis chain and perform actions like approving ERC721 tokens.

szekelyisz commented

Works with Metamask instead of OneKey.

  • 👍1
szekelyisz commented

Works with Metamask instead of OneKey.

Actually... Works with Metamask on desktop, but again wants to switch to ethereum mainnet with Metamask on mobile.

joaquim-verges commented

@szekelyisz can you try calling await wallet.switchChain(your_chain) before doing the approval?

  • 👍1