feat: Add support for Paymaster by Avnu

[akiraonstarknet]

Paymaster is the ability of the user to pay gas in any tokens.

It will look something like this feature on app.avnu.fi. Go here, click the button showed below, user will be allowed to select multiple tokens to pay gas in.

Requirements:

1. Token list: ETH, STRK, xSTRK, USDT, USDC, DAI
2. If user has xSTRK balance, it should be the default token. If not, it should be whatever token user has balance in (with priority going from ETH, STRK to other tokens)
3. This feature should not be visible if wallet is not connected
4. Design:
   
5. On clicking this button, show dropdown of all tokens user can select from. Show their balances too.
   Reference design (only use the layout, colors have to be endur colors)
   
6. For now, use token logos from here:
   https://github.com/strkfarm/starkfarm-client/blob/c8b2b745e8b15ec94102218df2145cb4002a467a/src/constants.ts#L6
   xSTRK logo: http://endur.fi/logo.svg

Documentation:
https://doc.avnu.fi/avnu-paymaster/overview

Learn more:
https://www.starknet.io/blog/paymaster-with-avnu-video/

[jahrulezfrancis]

I would love this to be my first task with STRKFarm.

[akiraonstarknet]

@jahrulezfrancis can u share your plan for implementation? The more the technical details, the better it is to get selected.

[codebestia]

Can I contribute to this one?

[jahrulezfrancis]

I'd be glad to share a detailed implementation plan. However, I noticed the task description is a bit limited, and having more context or specific requirements would allow me to craft a more thorough and technically precise approach. Could you kindly provide additional details or clarify any key objectives?

@jahrulezfrancis can u share your plan for implementation? The more the technical details, the better it is to get selected.

[petersdt]

Can I take this issue?
To handle this task i would be needing more information in the task description kindly provide some more details.

[emarc99]

Could I be assigned to this?
ETA 2 days

[Benjtalkshow]

Hi @akiraonstarknet
Can i hop on this task?

I will integrate this paymaster solution by using the Avnu Gasless SDK, which provides gasless transaction capabilities. First, I will install the necessary packages such as @avnu/gasless-sdk, ethers, and get-starknet to enable interactions with Starknet, handle gasless transactions, and manage the wallet connection. The app will connect to Starknet via a wallet, allowing users to interact with the blockchain without paying gas fees directly. Instead, the paymaster mechanism covers the gas fees for them.

I will use the executeCalls function from the Avnu SDK to handle transactions, manage gas fees, and fetch the user's compatibility with gasless transactions and available rewards. I will estimate the gas fees using estimateInvokeFee and display the paymaster rewards in the UI. If the user is eligible for rewards, no gas fees will be required; otherwise, they will select a gas token.

I will calculate the required gas tokens using fetched prices and ensure the maximum amount is within the available transaction budget. After setting up the gas token or rewards, I will submit the transaction using executeCalls, and display the transaction hash with a link to the Sepolia explorer upon success.

Overall, I will integrate the paymaster solution to allow users to perform transactions without directly paying gas fees, utilizing rewards and gas tokens.

I have also taken my time to go through the Paymaster avnu documentation and determine the best approach for this integration and I have choosen to utilize paymaster avnu sdk instead of paymaster rest api.

I have also gone through some paymaster integration examples.

[pheobeayo]

Mind if I try this one?

[john310897]

I would like to contribute, can i get more information on this issue?

[akiraonstarknet]

@pheobeayo @emarc99 @Benjtalkshow @jahrulezfrancis @john310897 issue description is updated. please comment ur technical plan.

[jahrulezfrancis]

@akiraonstarknet I've checked the description out, and here's how I plan to approach the implementation of the Paymaster feature:

First, I’ll focus on integrating the token list and fetching user balances for the specified tokens (ETH, STRK, xSTRK, USDT, USDC, DAI). I'll ensure that the token with the highest priority (xSTRK first, followed by ETH, STRK, and others) is automatically set as the default if the user has a balance in it. This logic will dynamically update based on the user’s wallet state.

For the UI, I’ll ensure the feature is only visible when a wallet is connected. The dropdown will be designed to list all tokens with their respective balances and will follow the reference design layout while adhering to Endur's color scheme. I’ll use the provided token logos and the xSTRK logo to maintain consistency.

Once implemented, users will be able to select any token from the dropdown for gas payments, and the selected token will be prominently displayed. I’ll also include a brief user message or tooltip to confirm their selection.

Finally, I'll thoroughly test the feature to ensure that:

The visibility logic works as expected.
Default token selection follows the specified priority.
The dropdown displays accurate balances with a design that aligns with the reference.
This approach will provide a seamless and intuitive user experience while fulfilling the outlined requirements. I’d be happy to clarify or adjust this plan based on any additional preferences you have.

[Benjtalkshow]

Hi @akiraonstarknet Can i hop on this task?

I will integrate this paymaster solution by using the Avnu Gasless SDK, which provides gasless transaction capabilities. First, I will install the necessary packages such as @avnu/gasless-sdk, ethers, and get-starknet to enable interactions with Starknet, handle gasless transactions, and manage the wallet connection. The app will connect to Starknet via a wallet, allowing users to interact with the blockchain without paying gas fees directly. Instead, the paymaster mechanism covers the gas fees for them.

I will use the executeCalls function from the Avnu SDK to handle transactions, manage gas fees, and fetch the user's compatibility with gasless transactions and available rewards. I will estimate the gas fees using estimateInvokeFee and display the paymaster rewards in the UI. If the user is eligible for rewards, no gas fees will be required; otherwise, they will select a gas token.

I will calculate the required gas tokens using fetched prices and ensure the maximum amount is within the available transaction budget. After setting up the gas token or rewards, I will submit the transaction using executeCalls, and display the transaction hash with a link to the Sepolia explorer upon success.

Overall, I will integrate the paymaster solution to allow users to perform transactions without directly paying gas fees, utilizing rewards and gas tokens.

I have also taken my time to go through the Paymaster avnu documentation and determine the best approach for this integration and I have choosen to utilize paymaster avnu sdk instead of paymaster rest api.

I have also gone through some paymaster integration examples.

@akiraonstarknet
Here is my updated plan to tackle this issue

• To implement the paymaster solution in the Endur-fi client, I will utilize the Avnu Gasless SDK for Starknet, I will begin by setting up the necessary packages and integrating the SDK into my project. I will implement wallet connection functionality, ensuring the gas payment feature is only accessible when a wallet is connected. I will also check the user's account compatibility with gasless service by calling fetchAccountCompatibility from Avnu Gasless SDK

• I will define and manage a list of supported gas tokens, including ETH, STRK, xSTRK, USDT, USDC, and DAI. I will also implement logic to fetch token balances and select a default gas payment token, prioritizing xSTRK if available, followed by ETH, STRK, and others.

• To enhance user experience, I will create a dropdown UI component to display and select gas payment tokens, showing token logos, symbols, and balances. Using Starknet.js, I will implement balance fetching and optimize performance with caching or state management.

• For transaction handling, I will use the Avnu SDK's executeCalls function to estimate gas fees, check for gasless transaction eligibility, and manage gas fee payments. If the user qualifies for rewards, I will proceed without gas fees; otherwise, I will allow token selection for gas payment.

• I will implement transaction submission using executeCalls, handling responses, and displaying the transaction hash with a link to the Sepolia explorer. I will also ensure proper error handling for edge cases and scenarios.

• I will also ensure proper error handling for edge cases and scenarios.

• I will utilize a state management solution to maintain the selected token, balances, and wallet connection state across the app. To optimize performance, I will use techniques like debouncing, throttling, and memoization. This approach will provide a seamless user experience, enabling gas fee payment with chosen tokens and supporting gasless transactions when eligible.

@akiraonstarknet I will really love to tsckle this issue.

[mimisavage]

I'd like to handle this task

[emarc99]

To implement the Paymaster feature;

1. Install Necessary Dependencies

• @avnu/gasless-sdk

• Update Starknet React dependencies to ensure compatibility with the latest features.

2. Implement the usePaymaster Hook

• Develop a custom React hook named usePaymaster to manage gasless transactions.

3. Map Token Addresses to Names

• Create a utility function to map token addresses to their respective names.

  const supportedTokens = [
    { symbol: 'ETH', address: '0x...' },
    { symbol: 'STRK', address: '0x0059907104adaad5ab2cee1151028af1311ecd527063da87bdf9089025b7fd4e' },
    { symbol: 'xSTRK', address: '0x...' },
    { symbol: 'USDT', address: '0x...' },
    { symbol: 'USDC', address: '0x...' },
    { symbol: 'DAI', address: '0x...' },
  ];

• Implement logic to select the default token based on the user's balances, prioritizing xSTRK if available, followed by ETH, STRK, and other tokens.

4. Track Wallet Connection Status and Update the User Interface

• Conditional Display: Ensure the gas payment feature/button is visible only when the wallet is connected.

• Button Implementation: Built by following the given design.

• Dropdown Menu: Implement a dropdown that appears upon clicking the button, listing the supported tokens (ETH, STRK, xSTRK, USDT, USDC, DAI) along with their respective balances.

• Default Token Selection: Set xSTRK as the default token if the user has a balance.
  If not, default to the first token in which the user has a balance, following the priority: ETH, STRK, USDT, USDC, DAI.

5. Functional Testing

• Verify that gasless transactions are executed correctly using the Paymaster.

ETA - 2- 3 days!