apibara/starknet-react

Implement add token to wallet hook

Oshioke-Salaki opened this issue · 15 comments

Oshioke-Salaki commented

There is no hook to add tokens to a connected wallet.

Oshioke-Salaki commented

I would like to assigned this

fracek commented

Yes, happy for you to add this hook. You can use useAddChain as a starting point. Make sure to make the PR against the develop branch.

okhaimie-dev commented

@fracek can you assign this to me

okhaimie-dev commented

Just to clarify, should I make a branch off next-v3?

fracek commented

Assigned to you, and yes it should be against next-v3.

  • 👍1
PoulavBhowmick03 commented

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Poulav Bhowmick, a software engineer at Invisible Studios with a robust background in TypeScript, Rust, Solidity Cairo, fullstack development and blockchain technology. My experience includes building robust applications, optimizing functionalities and blockchain integration. I have actively participated in events and open source contributions, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Starknet community🇷.

How I plan on tackling this issue

Implement a Custom Hook
Since there’s no built-in hook, I would create a custom hook to add tokens to a connected wallet. This hook will interact with a smart contract to perform the addition.
The hook would need to:
Connect to the Starknet wallet.
Interact with the token contract to transfer or add tokens to the wallet.
Handle errors, loading states, and success notifications.
Here’s a rough implementation:

typescript
Copy code
import { useStarknet, useStarknetInvoke } from '@starknet-react/core';
import { useCallback, useState } from 'react';

export function useAddToken(tokenContractAddress: string) {
  const { account } = useStarknet();
  const { invoke } = useStarknetInvoke({ contract: { address: tokenContractAddress } });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const addToken = useCallback(
    async (amount: number) => {
      if (!account) {
        setError('No wallet connected');
        return;
      }
      setLoading(true);
      setError(null);

      try {
        // Replace with actual contract interaction method
        await invoke('addTokens', { amount, to: account });
        setSuccess(true);
      } catch (err) {
        setError('Failed to add tokens');
      } finally {
        setLoading(false);
      }
    },
    [account, invoke]
  );

  return { addToken, loading, error, success };
}
  1. Integrate and Test the Hook
    Integration: Integrate this hook into the relevant components where users can add tokens. Provide UI feedback for loading, errors, and success.
    Testing: Test the hook thoroughly with various scenarios, including different token contracts, network conditions, and wallet types.
ikemHood commented

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey, I am ikem Peter. a fullstack software developer with 3+ years of working experience, I would love to help out with this issue...

How I plan on tackling this issue

I'd start by creating a custom React hook that interacts with MetaMask's wallet_watchAsset method. This hook will handle adding an ERC-20 token to the user's wallet when called.

Here's a high-level overview of the code:

const useAddToken = () => {
  const addToken = async ({ tokenAddress, tokenSymbol, tokenDecimals, tokenImage }) => {
    if (!window.ethereum) return;  // Ensure MetaMask is installed
    await window.ethereum.request({
      method: 'wallet_watchAsset',
      params: {
        type: 'ERC20',
        options: {
          address: tokenAddress,
          symbol: tokenSymbol,
          decimals: tokenDecimals,
          image: tokenImage,
        },
      },
    });
  };

  return { addToken };
};
Benjtalkshow commented

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @frack

I'm available to work on creating a hook to add tokens to a connected wallet. My name is Benjamin, and I have extensive experience in developing custom hooks for wallet management and token interactions. My background includes integrating various wallet features to enhance user experience in decentralized applications.

Understanding the Issue

Currently, there is no hook available for adding tokens to a connected wallet. To improve functionality and user experience, we need to develop a custom hook that allows users to add tokens directly to their wallets.

How I plan on tackling this issue

Develop Token Addition Hook

  • Hook Creation: I will create a custom hook that allows users to add tokens to their connected wallet.
  • Parameters:
    • tokenAddress: The address of the token contract.
    • tokenSymbol: The symbol of the token (e.g., ETH, DAI).
    • tokenDecimals: The number of decimals used by the token.
    • tokenImage: Optional image URL for the token (for display purposes).
    • onSuccess: Callback for when the token is successfully added.
    • onError: Callback for handling errors during the token addition process.

Implementation Steps

  • Create Hook Function: Implement the hook function to handle adding tokens, including interaction with the wallet’s API.
  • Integration: Ensure that the hook integrates seamlessly with existing wallet management systems.
  • Testing: Thoroughly test the hook to confirm that it correctly adds tokens and handles errors appropriately.
  • Documentation: Provide clear documentation on how to use the hook, including examples and parameter descriptions.

Tasks

Develop Hook

  • Implement Hook Functionality: Create the hook to manage token addition, including interaction with the wallet’s API for token management.
  • Integration: Ensure compatibility with the wallet’s existing token management features.

Testing

  • Functionality Testing: Verify that the hook correctly adds tokens to the connected wallet.
  • Error Handling: Test the hook’s error handling to ensure it manages issues that arise during token addition.
  • User Experience: Ensure that the process for adding tokens is smooth and intuitive.
LukePereyra commented

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Software Engineer Frontend with experience in React

How I plan on tackling this issue

I will implement the hook useAddToken(..) to connect it to the wallet and to add the token to token list.

estherbreath commented

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a full-stack developer, well experienced in smart contracts, front-end as well as back-end.

On the front-end, using my experience in React, I will create user-friendly interfaces for wallet management.
On the back-end, my knowledge of blockchain and smart contracts comes into play. I will utilize the existing contract to handle the logic for adding tokens to a wallet.
Your full-stack development skills enable you to ensure secure communication between the client and server, implement robust error handling, and conduct thorough testing for both front-end components and back-end services.

How I plan on tackling this issue

To create a hook for adding tokens to a wallet, here's a concise plan of what I will do:
1. Review Existing Code: Understand how wallets are handled.
2. Define Requirements: Clarify what "adding tokens" means.
3. Design the Hook: Plan its functionality based on requirements.
4. Implement the Hook: Write the code, focusing on simplicity and efficiency
5. Test Thoroughly: Ensure reliability and accuracy.
5. Document and Deploy: Share knowledge and integrate the new feature.

deeseeker commented

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a React developer with over 2 years of experience and have recently developed a strong interest in blockchain technology, particularly Starknet React. I have successfully tackled various complex business challenges, particularly in the areas of authentication, authorization, and token management. I've been exploring Starknet React and came across an open issue on the "Add Token to Wallet" hook. As someone who is still learning, I’m excited to take on this challenge.

How I plan on tackling this issue

Clone the project on my pc
Spin it up following the documentation
Review the existing codebase to understand how current hooks are implemented
I plan to create a hook, useAddTokenToWallet, that will allow users to add tokens to their connected wallet
Implement the Hook
Test the Hook
Document the Hook

JoelVR17 commented

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Web Developer with a solid background in front-end and back-end development. So it will be a pleasure to contribute for the first time to this great project. I am a member of the Dojo Coding community.

How I plan on tackling this issue

  1. Understand Wallet Integration Requirements:

    • I would start by researching how popular wallets allow users to add custom tokens. This involves understanding the wallet_watchAsset method provided by the Ethereum provider that facilitates this process.
    • The goal is to identify the parameters required by the wallet to add a token, such as type, options (token address, symbol, decimals, image), and ensure that these can be dynamically provided by the hook.

  2. Define the Hook Interface:

    • The hook would need to accept parameters such as:
      • tokenAddress: The address of the token contract.
      • tokenSymbol: The symbol of the token (e.g., "USDC").
      • tokenDecimals: The number of decimals used by the token (e.g., 18).
      • tokenImage: (Optional) A URL pointing to the token's logo.
    • Additionally, the hook should provide a method to trigger the token addition process, which can be called from the user interface.

  3. Design and Implementation:

    • I would implement the hook using a structure similar to other wagmi or ethers.js hooks, ensuring consistency with existing patterns. The hook might look like: 
      import { useAddToken } from 'wagmi'

function useAddToken() {
  const addToken = async ({ tokenAddress, tokenSymbol, tokenDecimals, tokenImage }) => {
    try {
      const wasAdded = await ethereum.request({
        method: 'wallet_watchAsset',
        params: {
          type: 'ERC20',
          options: {
            address: tokenAddress,
            symbol: tokenSymbol,
            decimals: tokenDecimals,
            image: tokenImage,
          },
        },
      });

      if (wasAdded) {
        console.log('Token added!');
      } else {
        console.log('Token not added');
      }
    } catch (error) {
      console.error('Error adding token:', error);
    }
  };

  return addToken;
}
    • This hook would handle the connection to the wallet and make the appropriate request to add the token.

  4. Testing and Verification:

    • I would write unit tests for the hook to ensure it handles all possible outcomes (token added successfully, user rejects the addition, errors during the process).
    • Additionally, I would test the hook within a development environment to ensure it interacts correctly with popular wallets, handling any edge cases (e.g., when the wallet is not connected).

  5. Documentation:

    • I would create detailed documentation on how to use the hook, including setup instructions, usage examples, and common troubleshooting steps. This would make it easy for other developers to understand how to implement the hook in their own projects.

  6. Integration:

    • I would ensure the hook integrates seamlessly with the existing codebase, following your project’s specific standards. This may include adapting the hook to work within the current state management system or other architectural constraints.
    • Finally, I would validate the integration by incorporating the hook into a demo component and confirming that it works as intended in various scenarios.
fracek commented

Hey @deeseeker have a go at the issue. I think you can leverage useWalletRequest to implement this issue easily. Remember to include tests.

deeseeker commented
jaipaljadeja commented

Resolved with #490