Add Fee Grant

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 yarn-error.log
 .vscode/launch.json
+.DS_Store

package.json

@@ -12,7 +12,7 @@
     "@cosmjs/stargate": "0.26.5",
     "@emotion/react": "11.6.0",
     "@emotion/styled": "11.6.0",
-    "@keplr-wallet/cosmos": "0.9.6",
+    "@keplr-wallet/cosmos": "0.11.12",
     "@mui/icons-material": "5.1.1",
     "@mui/lab": "5.0.0-alpha.55",
     "@mui/material": "5.1.1",
@@ -32,7 +32,7 @@
     "secretjs": "1.4.4"
   },
   "devDependencies": {
-    "@keplr-wallet/types": "0.8.13",
+    "@keplr-wallet/types": "0.11.12",
     "@types/react": "17.0.24",
     "@types/react-copy-to-clipboard": "5.0.1",
     "@types/react-dom": "17.0.9",

src/App.tsx

@@ -5,11 +5,17 @@ import ReactDOM from "react-dom";
 import { Breakpoint, BreakpointProvider } from "react-socks";
 import { SecretNetworkClient } from "secretjs";
 import { chains, tokens, snips } from "./config";
+import { faucetURL } from "./commons";
 import "./index.css";
 import { KeplrPanel } from "./KeplrStuff";
 import TokenRow from "./TokenRow";
 import { Buffer } from "buffer";
-import { Flip, ToastContainer } from "react-toastify";
+import { Button } from "@mui/material";
+import { timelineClasses } from "@mui/lab";
+import { Result } from "secretjs/dist/protobuf_stuff/cosmos/base/abci/v1beta1/abci";
+import { responseResultTypeToJSON } from "secretjs/dist/protobuf_stuff/ibc/core/channel/v1/tx";
+import { Flip, ToastContainer, toast} from "react-toastify";
+
 globalThis.Buffer = Buffer;
 declare global {
   interface Window extends KeplrWindow {}
@@ -85,6 +91,7 @@ export default function App() {
   const [prices, setPrices] = useState<Map<string, number>>(new Map());
   const [loadingCoinBalances, setLoadingCoinBalances] =
     useState<boolean>(false);
+  const [useFeegrant, setUseFeegrant] = useState<boolean>(false);
 
   const updateCoinBalances = async () => {
     const newBalances = new Map<string, string>(balances);
@@ -111,6 +118,36 @@ export default function App() {
       console.error(`Error while trying to query ${url}:`, e);
     }
 
+    if (newBalances.get("uscrt") == "0" && useFeegrant == false) {
+      try {
+        const response = await fetch(faucetURL, {
+          method: 'POST',
+          body: JSON.stringify({"Address": secretAddress}),
+          headers: {'Content-Type': 'application/json'}
+        });
+        const result = await response;
+        const textBody = await result.text();
+        if (result.ok == true) {
+          document.getElementById('grantButton').style.color = "green";
+          document.getElementById('grantButton').textContent = "Fee Granted";
+          toast.success(`Your wallet does not have any SCRT to pay for transaction costs. Successfully sent new fee grant (0.1 SCRT) for unwrapping tokens to address ${secretAddress}`);
+        } else if (textBody == "Existing Fee Grant did not expire\n") {
+          document.getElementById('grantButton').style.color = "green";
+          document.getElementById('grantButton').textContent = "Fee Granted";
+          toast.success(`Your wallet does not have any SCRT to pay for transaction costs. Your address ${secretAddress} however does already have an existing fee grant which will be used for unwrapping`);
+        } else {
+          document.getElementById('grantButton').style.color = "red";
+          document.getElementById('grantButton').textContent = "Fee Grant failed";
+          toast.error(`Fee Grant for address ${secretAddress} failed with status code: ${result.status}`);
+        }
+        setUseFeegrant(true);
+      }
+      catch(e) {
+        document.getElementById('grantButton').style.color = "red";
+        document.getElementById('grantButton').textContent = "Fee Grant failed";
+        toast.error(`Fee Grant for address ${secretAddress} failed with error: ${e}`);
+      }
+      }
     setBalances(newBalances);
   };
 
@@ -130,7 +167,7 @@ export default function App() {
     return () => {
       clearInterval(interval);
     };
-  }, [secretAddress, secretjs]);
+  }, [secretAddress, secretjs, useFeegrant]);
 
   useEffect(() => {
     fetch(
@@ -160,6 +197,43 @@ export default function App() {
           minHeight: "3rem",
         }}
       >
+      <Button
+          disabled={!secretAddress}
+          size="small"
+          variant="text"
+          id="grantButton"
+          onClick={async () => {
+              fetch(faucetURL, {
+              method: 'POST',
+              body: JSON.stringify({ "Address": secretAddress }),
+              headers: { 'Content-Type': 'application/json' }
+            }).then(async (result) => {
+              const textBody = await result.text();
+              console.log(textBody);
+              if (result.ok == true) {
+                document.getElementById('grantButton').style.color = "green";
+                document.getElementById('grantButton').textContent = "Fee Granted";
+                toast.success(`Successfully sent new fee grant (0.1 SCRT) for unwrapping tokens to address ${secretAddress}`);
+              } else if (textBody == "Existing Fee Grant did not expire\n") {
+                document.getElementById('grantButton').style.color = "green";
+                document.getElementById('grantButton').textContent = "Fee Granted";
+                toast.success(`Your address ${secretAddress} already has an existing fee grant which will be used for unwrapping tokens`);
+              } else {
+                document.getElementById('grantButton').style.color = "red";
+                document.getElementById('grantButton').textContent = "Fee Grant failed";
+                toast.error(`Fee Grant for address ${secretAddress} failed with status code: ${result.status}`);
+              }
+              setUseFeegrant(true);
+            }).catch((error) => { 
+                document.getElementById('grantButton').style.color = "red";
+                document.getElementById('grantButton').textContent = "Fee Grant failed";
+                toast.error(`Fee Grant for address ${secretAddress} failed with error: ${error}`);
+              });
+            }
+          }
+        >
+        Grant Fee for unwrapping (0.1 SCRT)
+        </Button>
         <KeplrPanel
           secretjs={secretjs}
           setSecretjs={setSecretjs}
@@ -201,6 +275,7 @@ export default function App() {
             secretjs={secretjs}
             balances={balances}
             price={prices.get(t.name) || 0}
+            useFeegrant = {useFeegrant}
           />
         </ErrorBoundary>
       ))}
@@ -229,17 +304,18 @@ export default function App() {
 
       <Breakpoint medium up>
         <ToastContainer
+          style={{ width: "450px" }}
           position={"top-left"}
           autoClose={false}
           hideProgressBar={true}
           closeOnClick={false}
-          draggable={false}
+          draggable={false} 
           theme={"light"}
           transition={Flip}
         />
       </Breakpoint>
       <Breakpoint small down>
-        <ToastContainer
+        <ToastContainer 
           position={"bottom-left"}
           autoClose={false}
           hideProgressBar={true}

src/Deposit.tsx

@@ -126,6 +126,12 @@ export default function Deposit({
       const { chain_id, rpc, bech32_prefix } =
         chains[token.deposits[selectedChainIndex].source_chain_name];
       await window.keplr.enable(chain_id);
+      window.keplr.defaultOptions = {
+        sign: {
+            preferNoSetFee: true,
+            disableBalanceCheck: true,
+        }
+      }
       const sourceOfflineSigner = window.getOfflineSignerOnlyAmino(chain_id);
       const depositFromAccounts = await sourceOfflineSigner.getAccounts();
       setSourceAddress(depositFromAccounts[0].address);

src/KeplrStuff.tsx

@@ -107,6 +107,12 @@ async function setupKeplr(
   }
 
   await window.keplr.enable(SECRET_CHAIN_ID);
+  window.keplr.defaultOptions = {
+    sign: {
+      preferNoSetFee: true,
+      disableBalanceCheck: true,
+    },
+  };
 
   const keplrOfflineSigner = window.getOfflineSignerOnlyAmino(SECRET_CHAIN_ID);
   const accounts = await keplrOfflineSigner.getAccounts();
@@ -130,7 +136,7 @@ export async function setKeplrViewingKey(token: string) {
     console.error("Keplr not present");
     return;
   }
-
+  
   await window.keplr.suggestToken(SECRET_CHAIN_ID, token);
 }
 
@@ -142,6 +148,7 @@ export async function getKeplrViewingKey(
     return null;
   }
 
+
   try {
     return await window.keplr.getSecret20ViewingKey(SECRET_CHAIN_ID, token);
   } catch (e) {

src/TokenRow.tsx

@@ -14,10 +14,12 @@ import React, { useEffect, useRef, useState } from "react";
 import { Else, If, Then, When } from "react-if";
 import { Breakpoint } from "react-socks";
 import { MsgExecuteContract, SecretNetworkClient } from "secretjs";
-import { sleep, viewingKeyErrorString } from "./commons";
+import { sleep, viewingKeyErrorString ,faucetAddress} from "./commons";
 import { Token } from "./config";
 import DepositWithdrawDialog from "./DepositWithdrawDialog";
 import { getKeplrViewingKey, setKeplrViewingKey } from "./KeplrStuff";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 export default function TokenRow({
   secretjs,
@@ -26,13 +28,15 @@ export default function TokenRow({
   balances,
   loadingCoinBalances,
   price,
+  useFeegrant,
 }: {
   secretjs: SecretNetworkClient | null;
   secretAddress: string;
   loadingCoinBalances: boolean;
   token: Token;
   balances: Map<string, string>;
   price: number;
+  useFeegrant: boolean;
 }) {
   const wrapInputRef = useRef<any>();
 
@@ -297,6 +301,12 @@ export default function TokenRow({
             return;
           }
           setLoadingUnwrap(true);
+          const toastId = toast.loading(
+            `Unwrapping ${token.name}`,
+            {
+              closeButton: true,
+            }
+          );
           try {
             const tx = await secretjs.tx.broadcast(
               [
@@ -320,13 +330,26 @@ export default function TokenRow({
                 gasLimit: 150_000,
                 gasPriceInFeeDenom: 0.25,
                 feeDenom: "uscrt",
+                feeGranter: useFeegrant ? faucetAddress : "",
               }
             );
 
             if (tx.code === 0) {
               wrapInputRef.current.value = "";
+              toast.update(toastId, {
+                render: `Unwrapped ${token.name} successfully`,
+                type: "success",
+                isLoading: false,
+                closeOnClick: true,
+              });
               console.log(`Unwrapped successfully`);
             } else {
+              toast.update(toastId, {
+                render: `Unwrapping of ${token.name} failed: ${tx.rawLog}`,
+                type: "error",
+                isLoading: false,
+                closeOnClick: true,
+              });
               console.error(`Tx failed: ${tx.rawLog}`);
             }
           } finally {
@@ -380,6 +403,12 @@ export default function TokenRow({
             return;
           }
           setLoadingWrap(true);
+          const toastId = toast.loading(
+            `Wrapping ${token.name}`,
+            {
+              closeButton: true,
+            }
+          );
           try {
             const tx = await secretjs.tx.broadcast(
               [
@@ -402,8 +431,20 @@ export default function TokenRow({
 
             if (tx.code === 0) {
               wrapInputRef.current.value = "";
+              toast.update(toastId, {
+                render: `Wrapped ${token.name} successfully`,
+                type: "success",
+                isLoading: false,
+                closeOnClick: true,
+              });
               console.log(`Wrapped successfully`);
             } else {
+              toast.update(toastId, {
+                render: `Wrapping of ${token.name} failed: ${tx.rawLog}`,
+                type: "error",
+                isLoading: false,
+                closeOnClick: true,
+              });
               console.error(`Tx failed: ${tx.rawLog}`);
             }
           } finally {

src/Withdraw.tsx

@@ -82,6 +82,12 @@ export default function Withdraw({
       }
 
       await window.keplr.enable(targetChainId);
+      window.keplr.defaultOptions = {
+        sign: {
+            preferNoSetFee: true,
+            disableBalanceCheck: true,
+        },
+      } 
       const targetOfflineSigner =
         window.getOfflineSignerOnlyAmino(targetChainId);
       const targetFromAccounts = await targetOfflineSigner.getAccounts();

src/commons.ts

@@ -4,6 +4,9 @@ import { Keplr } from "@keplr-wallet/types";
 
 export const viewingKeyErrorString = "🧐";
 
+export const faucetURL = "https://faucet.secretsaturn.net/claim";
+export const faucetAddress = "secret1tq6y8waegggp4fv2fcxk3zmpsmlfadyc7lsd69";
+
 export const sleep = (ms: number) =>
   new Promise((resolve) => setTimeout(resolve, ms));