Merge pull request #42 from avnu-labs/feature/paymaster-rewards

:sparkless: Adding paymaster rewards

example/package.json

@@ -11,39 +11,34 @@
     "lint:fix": "tsc --noEmit && prettier --write \"src/**/*.{ts,tsx,js,json,css,yml,md}\" && eslint 'src/**/*.{js,ts,tsx,json}' --quiet --fix"
   },
   "dependencies": {
+    "@avnu/gasless-sdk": "file:../dist",
     "@starknet-react/chains": "0.1.7",
     "@starknet-react/core": "2.8.0",
-    "@avnu/gasless-sdk": "file:../dist",
-    "starknet": "6.8.0",
     "ethers": "6.12.1",
     "get-starknet-core": "3.3.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "starknet": "6.8.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "15.0.6",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "29.5.12",
+    "@types/node": "20.12.8",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "7.8.0",
     "@typescript-eslint/parser": "7.8.0",
     "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",
+    "eslint-config-react": "1.1.7",
     "eslint-plugin-import": "2.29.0",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-simple-import-sort": "10.0.0",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "15.0.6",
-    "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.12",
     "prettier": "3.2.5",
-    "@types/node": "20.12.8",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
-    "typescript": "5.4.5",
-    "react-scripts": "5.0.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "react-scripts": "5.0.1",
+    "typescript": "5.4.5"
   },
   "browserslist": {
     "production": [

example/src/Form.tsx

@@ -1,18 +1,20 @@
-import { useAccount, useNetwork, useProvider } from '@starknet-react/core';
 import { FC, useCallback, useEffect, useState } from 'react';
-import Connect from './Connect';
-import { AccountInterface, Call, EstimateFeeResponse, stark, transaction } from 'starknet';
 import {
   executeCalls,
   fetchAccountCompatibility,
+  fetchAccountsRewards,
   fetchGasTokenPrices,
   GaslessCompatibility,
   GaslessOptions,
   GasTokenPrice,
   getGasFeesInGasToken,
+  PaymasterReward,
   SEPOLIA_BASE_URL,
 } from '@avnu/gasless-sdk';
+import { useAccount, useNetwork, useProvider } from '@starknet-react/core';
 import { formatUnits } from 'ethers';
+import { AccountInterface, Call, EstimateFeeResponse, stark, transaction } from 'starknet';
+import Connect from './Connect';
 
 const options: GaslessOptions = { baseUrl: SEPOLIA_BASE_URL };
 const initialValue: Call[] = [
@@ -38,6 +40,7 @@ const Form: FC = () => {
   const { provider } = useProvider();
   const [loading, setLoading] = useState(false);
   const [tx, setTx] = useState<string>();
+  const [paymasterRewards, setPaymasterRewards] = useState<PaymasterReward[]>([]);
   const [calls, setCalls] = useState(JSON.stringify(initialValue, null, 2));
   const [gasTokenPrices, setGasTokenPrices] = useState<GasTokenPrice[]>([]);
   const [gasTokenPrice, setGasTokenPrice] = useState<GasTokenPrice>();
@@ -47,7 +50,8 @@ const Form: FC = () => {
 
   useEffect(() => {
     if (!account) return;
-    fetchAccountCompatibility(account.address).then(setGaslessCompatibility);
+    fetchAccountCompatibility(account.address, options).then(setGaslessCompatibility);
+    fetchAccountsRewards(account.address, { ...options, protocol: 'gasless-sdk' }).then(setPaymasterRewards);
   }, [account]);
 
   // The account.estimateInvokeFee doesn't work...
@@ -90,14 +94,14 @@ const Form: FC = () => {
   }, [calls, account, gasTokenPrice, gaslessCompatibility, estimateCalls]);
 
   const onClickExecute = async () => {
-    if (!account || !gasTokenPrice) return;
+    if (!account) return;
     setLoading(true);
     setTx(undefined);
     return executeCalls(
       account,
       JSON.parse(calls),
       {
-        gasTokenAddress: gasTokenPrice.tokenAddress,
+        gasTokenAddress: gasTokenPrice?.tokenAddress,
         maxGasTokenAmount,
       },
       options,
@@ -106,8 +110,9 @@ const Form: FC = () => {
         setTx(response.transactionHash);
         setLoading(false);
       })
-      .catch(() => {
+      .catch((error) => {
         setLoading(false);
+        console.error(error);
       });
   };
 
@@ -133,26 +138,44 @@ const Form: FC = () => {
         style={{ minHeight: '500px', minWidth: '1000px' }}
       />
       <div>
-        <p>Gas tokens</p>
-        {gasTokenPrices.map((price) => (
-          <button disabled={price.tokenAddress === gasTokenPrice?.tokenAddress} onClick={() => setGasTokenPrice(price)}>
-            {price.tokenAddress}
-          </button>
-        ))}
+        <p>
+          <strong>Paymaster rewards</strong>
+        </p>
+        {paymasterRewards.length == 0 ? <p>No reward</p> : <p>{JSON.stringify(paymasterRewards)}</p>}
+      </div>
+      <div>
+        <p>
+          <strong>Gas tokens</strong>
+        </p>
+        {paymasterRewards.length > 0 ? (
+          <p>No gas fees to pay. You have a reward.</p>
+        ) : (
+          gasTokenPrices.map((price) => (
+            <button
+              disabled={price.tokenAddress === gasTokenPrice?.tokenAddress}
+              onClick={() => setGasTokenPrice(price)}
+            >
+              {price.tokenAddress}
+            </button>
+          ))
+        )}
       </div>
       {tx && (
         <a href={`https://sepolia.voyager.online/tx/${tx}`} target={'_blank'} rel='noreferrer'>
           Success:{tx}
         </a>
       )}
       {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
-      {!gasTokenPrice && <p>Select a gas token</p>}
+      {paymasterRewards.length == 0 && !gasTokenPrice && <p>Select a gas token</p>}
       {maxGasTokenAmount !== undefined && gasTokenPrice !== undefined && (
         <p>Max gas fees in gas token: {formatUnits(maxGasTokenAmount, gasTokenPrice.decimals)}</p>
       )}
       <div>
         {account && (
-          <button disabled={!isValidJSON(calls) || loading || !gasTokenPrice} onClick={onClickExecute}>
+          <button
+            disabled={!isValidJSON(calls) || loading || (!gasTokenPrice && paymasterRewards.length == 0)}
+            onClick={onClickExecute}
+          >
             {loading ? 'Loading' : 'Execute'}
           </button>
         )}

example/src/StarknetProvider.tsx

@@ -1,6 +1,6 @@
+import { FC, ReactNode } from 'react';
 import { sepolia } from '@starknet-react/chains';
 import { InjectedConnector, publicProvider, StarknetConfig } from '@starknet-react/core';
-import { FC, ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;