Merge pull request #64 from astriaorg/develop

Dawn Release

web/src/components/DepositCard/DepositCard.tsx

@@ -5,7 +5,10 @@ import { Dec, DecUtils } from "@keplr-wallet/unit";
 import AnimatedArrowSpacer from "components/AnimatedDownArrowSpacer/AnimatedDownArrowSpacer";
 import Dropdown from "components/Dropdown/Dropdown";
 import { useConfig } from "config";
-import { useEvmChainSelection } from "features/EthWallet";
+import {
+  AddERC20ToWalletButton,
+  useEvmChainSelection,
+} from "features/EthWallet";
 import {
   padDecimal,
   sendIbcTransfer,
@@ -411,6 +414,11 @@ export default function DepositCard(): React.ReactElement {
                   Balance: <i className="fas fa-spinner fa-pulse" />
                 </p>
               )}
+              {selectedEvmCurrencyOption?.value?.erc20ContractAddress && (
+                <AddERC20ToWalletButton
+                  evmCurrency={selectedEvmCurrencyOption.value}
+                />
+              )}
             </div>
           )}
         {recipientAddressOverride && !isRecipientAddressEditable && (

web/src/components/Dropdown/Dropdown.tsx

@@ -38,7 +38,7 @@ interface DropdownProps<T> {
   valueOverride?: DropdownOption<T> | null;
 }
 
-function Dropdown<T>({
+export default function Dropdown<T>({
   options,
   onSelect,
   placeholder = "Select an option",
@@ -199,5 +199,3 @@ function Dropdown<T>({
     </div>
   );
 }
-
-export default Dropdown;

web/src/components/Footer/Footer.tsx

@@ -5,7 +5,24 @@ export default function Footer(): React.ReactElement {
     <footer className="footer is-flex-align-items-flex-end mt-auto">
       <div className="content has-text-centered">
         <p>
-          Powered by <a href="https://www.astria.org/">Astria</a>
+          &copy; 2024. All Rights Reserved.{" "}
+          <a href="https://www.astria.org/">Astria.org</a>
+        </p>
+        <p>
+          <a
+            target="_blank"
+            href="https://www.astria.org/terms"
+            rel="noreferrer"
+          >
+            Terms of Service.
+          </a>{" "}
+          <a
+            target="_blank"
+            href="https://www.astria.org/privacy"
+            rel="noreferrer"
+          >
+            Privacy Policy.
+          </a>
         </p>
       </div>
     </footer>

web/src/components/WithdrawCard/WithdrawCard.tsx

@@ -5,6 +5,7 @@ import { useConfig } from "config";
 import AnimatedArrowSpacer from "components/AnimatedDownArrowSpacer/AnimatedDownArrowSpacer";
 import Dropdown from "components/Dropdown/Dropdown";
 import {
+  AddERC20ToWalletButton,
   getAstriaWithdrawerService,
   useEthWallet,
   useEvmChainSelection,
@@ -15,7 +16,7 @@ import { NotificationType, useNotifications } from "features/Notifications";
 export default function WithdrawCard(): React.ReactElement {
   const { evmChains, ibcChains } = useConfig();
   const { addNotification } = useNotifications();
-  const { selectedWallet } = useEthWallet();
+  const { provider } = useEthWallet();
 
   const {
     evmAccountAddress: fromAddress,
@@ -163,7 +164,7 @@ export default function WithdrawCard(): React.ReactElement {
     }
 
     const recipientAddress = recipientAddressOverride || ibcAccountAddress;
-    if (!selectedWallet || !fromAddress || !recipientAddress) {
+    if (!provider || !fromAddress || !recipientAddress) {
       addNotification({
         toastOpts: {
           toastType: NotificationType.WARNING,
@@ -194,7 +195,7 @@ export default function WithdrawCard(): React.ReactElement {
         selectedEvmCurrency.nativeTokenWithdrawerContractAddress ||
         "";
       const withdrawerSvc = getAstriaWithdrawerService(
-        selectedWallet.provider,
+        provider,
         contractAddress,
         Boolean(selectedEvmCurrency.erc20ContractAddress),
       );
@@ -334,6 +335,9 @@ export default function WithdrawCard(): React.ReactElement {
                   Balance: <i className="fas fa-spinner fa-pulse" />
                 </p>
               )}
+              {selectedEvmCurrency?.erc20ContractAddress && (
+                <AddERC20ToWalletButton evmCurrency={selectedEvmCurrency} />
+              )}
             </div>
           )}
         </div>

web/src/features/EthWallet/components/AddERC20ToWalletButton/AddERC20ToWalletButton.tsx

@@ -0,0 +1,57 @@
+import type { EvmCurrency } from "config";
+
+import { useEthWallet } from "../../hooks/useEthWallet";
+
+interface AddERC20ToWalletButtonProps {
+  evmCurrency: EvmCurrency;
+  buttonClassNameOverride?: string;
+}
+
+export default function AddERC20ToWalletButton({
+  evmCurrency,
+  buttonClassNameOverride,
+}: AddERC20ToWalletButtonProps) {
+  const { provider } = useEthWallet();
+  const buttonClassName =
+    buttonClassNameOverride ?? "p-0 is-size-7 has-text-light is-ghost";
+
+  const addCoinToWallet = async () => {
+    if (!provider) {
+      return;
+    }
+    try {
+      const wasAdded = await provider.send("wallet_watchAsset", {
+        type: "ERC20",
+        options: {
+          address: evmCurrency.erc20ContractAddress,
+          symbol: evmCurrency.coinDenom,
+          decimals: evmCurrency.coinDecimals,
+        },
+      });
+
+      if (wasAdded) {
+        console.debug("ERC20 token added: ", evmCurrency.erc20ContractAddress);
+      } else {
+        console.debug(
+          "User declined to add ERC20 token: ",
+          evmCurrency.erc20ContractAddress,
+        );
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        key={evmCurrency.coinMinimalDenom}
+        onClick={() => addCoinToWallet()}
+        className={`button is-underlined ${buttonClassName}`}
+      >
+        Add ERC20 to wallet
+      </button>
+    </>
+  );
+}

web/src/features/EthWallet/contexts/EthWalletContext.tsx

@@ -10,11 +10,10 @@ import { formatBalance } from "features/EthWallet/utils/utils";
 
 export interface EthWalletContextProps {
   providers: EIP6963ProviderDetail[];
-  selectedWallet: EIP6963ProviderDetail | undefined; // TODO - refactor to be an ethers.Provider to make things easier?
+  selectedWallet: EIP6963ProviderDetail | undefined;
+  provider: ethers.BrowserProvider | undefined;
   userAccount: UserAccount | undefined;
   selectedChain: EvmChainInfo | undefined;
-  provider: ethers.BrowserProvider | undefined;
-  signer: ethers.Signer | undefined;
   handleConnect: (
     providerWithInfo: EIP6963ProviderDetail,
     defaultChain: EvmChainInfo,
@@ -32,7 +31,6 @@ export const EthWalletContextProvider: React.FC<{ children: ReactNode }> = ({
   const [selectedProvider, setSelectedProvider] =
     useState<ethers.BrowserProvider>();
   const [userAccount, setUserAccount] = useState<UserAccount>();
-  const [signer, setSigner] = useState<ethers.Signer>();
   const providers = useSyncWalletProviders();
   const [selectedChain, setSelectedChain] = useState<
     EvmChainInfo | undefined
@@ -138,13 +136,11 @@ export const EthWalletContextProvider: React.FC<{ children: ReactNode }> = ({
         // use first account
         const address = accounts[0];
 
-        // create an ethers provider and signer
+        // create an ethers provider from eip1193 provider
         const ethersProvider = new ethers.BrowserProvider(
           providerWithInfo.provider,
         );
         setSelectedProvider(ethersProvider);
-        const ethersSigner = await ethersProvider.getSigner();
-        setSigner(ethersSigner);
 
         // get balance using ethers
         const balance = await ethersProvider.getBalance(address);
@@ -178,7 +174,6 @@ export const EthWalletContextProvider: React.FC<{ children: ReactNode }> = ({
         selectedWallet,
         userAccount,
         selectedChain,
-        signer,
         handleConnect,
       }}
     >