Merge pull request anoma#33 from anoma/feat/5/keplr-integration-for-ibc

feat 5 - Add Keplr suggest chain functionality

packages/anoma-wallet/package.json

@@ -13,6 +13,7 @@
     "@anoma/masp-web": "0.1.0",
     "@cosmjs/encoding": "^0.27.1",
     "@cosmjs/json-rpc": "^0.27.1",
+    "@cosmjs/proto-signing": "^0.28.11",
     "@cosmjs/tendermint-rpc": "^0.27.1",
     "@namada-interface/anoma-lib": "0.1.0",
     "@namada-interface/seed-management": "0.1.0",
@@ -78,6 +79,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.4.3",
+    "@keplr-wallet/types": "^0.10.13",
     "@playwright/test": "^1.24.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
@@ -107,4 +109,4 @@
     "redux-mock-store": "^1.5.4",
     "ts-loader": "^9.2.7"
   }
-}
+}

packages/anoma-wallet/src/App/AccountOverview/AccountOverview.components.ts

@@ -65,6 +65,7 @@ export const InputContainer = styled.div`
   width: 100%;
   justify-content: baseline;
   padding: 20px;
+  box-sizing: border-box;
 
   input {
     width: 96%;

packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.components.ts

@@ -8,3 +8,7 @@ export const SettingsWalletSettingsContainer = styled.div`
   width: 100%;
   height: 100%;
 `;
+
+export const ExtensionInfo = styled.p`
+  padding: 20px;
+`;

packages/anoma-wallet/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx

@@ -1,15 +1,17 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
-
 import { Chain } from "config/chain";
 import { setFiatCurrency, setChainId, SettingsState } from "slices/settings";
 import { useAppDispatch, useAppSelector } from "store";
-import { Session } from "lib";
+import { Keplr, Session } from "lib";
 import { Currencies } from "constants/";
 
 import { NavigationContainer } from "components/NavigationContainer";
 import { Heading, HeadingLevel } from "components/Heading";
-import { SettingsWalletSettingsContainer } from "./SettingsWalletSettings.components";
+import {
+  ExtensionInfo,
+  SettingsWalletSettingsContainer,
+} from "./SettingsWalletSettings.components";
 import { Tooltip } from "components/Tooltip";
 import { Icon, IconName } from "components/Icon";
 import { Select, Option } from "components/Select";
@@ -35,9 +37,33 @@ export const SettingsWalletSettings = ({ password }: Props): JSX.Element => {
 
   const chains = Object.values(Config.chain);
   const { chainId } = useAppSelector<SettingsState>((state) => state.settings);
+  const chain = Config.chain[chainId];
+
+  const keplr = useMemo(() => {
+    return new Keplr(chain);
+  }, [chainId]);
+
+  enum KeplrConnectionState {
+    Initial,
+    Connecting,
+    Connected,
+  }
+
+  enum KeplrChainState {
+    Initial,
+    Adding,
+    Added,
+  }
+
   const [displaySeedPhrase, setDisplaySeedPhrase] = useState(false);
   const [seedPhrase, setSeedPhrase] = useState<string[]>([]);
   const [isLoadingSeed, setIsLoadingSeed] = useState(false);
+  const [keplrConnectionState, setKeplrConnectionState] = useState(
+    KeplrConnectionState.Initial
+  );
+  const [keplrChainState, setKeplrChainState] = useState(
+    KeplrChainState.Initial
+  );
 
   const networks = Object.values(chains).map(({ id, alias }: Chain) => ({
     label: alias,
@@ -65,6 +91,24 @@ export const SettingsWalletSettings = ({ password }: Props): JSX.Element => {
     (state) => state.settings.fiatCurrency
   );
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const isChainAdded = await keplr.detectChain();
+        if (isChainAdded) {
+          setKeplrChainState(KeplrChainState.Added);
+        } else {
+          setKeplrChainState(KeplrChainState.Initial);
+          setKeplrConnectionState(KeplrConnectionState.Initial);
+        }
+      } catch (e) {
+        console.warn(e);
+        setKeplrChainState(KeplrChainState.Initial);
+        setKeplrConnectionState(KeplrConnectionState.Initial);
+      }
+    })();
+  }, [chainId]);
+
   const handleCurrencySelect = (
     e: React.ChangeEvent<HTMLSelectElement>
   ): void => {
@@ -81,6 +125,35 @@ export const SettingsWalletSettings = ({ password }: Props): JSX.Element => {
     dispatch(setChainId(value));
   };
 
+  const handleKeplrSuggestChainClick = async (): Promise<void> => {
+    if (keplr.detect()) {
+      try {
+        setKeplrChainState(KeplrChainState.Adding);
+        await keplr.suggestChain();
+        setKeplrChainState(KeplrChainState.Added);
+      } catch (e) {
+        console.warn(e);
+        setKeplrChainState(KeplrChainState.Initial);
+      }
+    }
+  };
+
+  const handleKeplrEnableClick = async (): Promise<void> => {
+    if (keplr.detect()) {
+      try {
+        setKeplrConnectionState(KeplrConnectionState.Connecting);
+        await keplr.enable();
+        const key = await keplr.getKey();
+
+        if (key) {
+          setKeplrConnectionState(KeplrConnectionState.Connected);
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+  };
+
   return (
     <SettingsWalletSettingsContainer>
       <NavigationContainer>
@@ -146,6 +219,39 @@ export const SettingsWalletSettings = ({ password }: Props): JSX.Element => {
             onChange={handleNetworkSelect}
           />
         </InputContainer>
+
+        {keplr.detect() && keplrChainState !== KeplrChainState.Added && (
+          <Button
+            onClick={handleKeplrSuggestChainClick}
+            variant={ButtonVariant.Outlined}
+            disabled={keplrChainState === KeplrChainState.Adding}
+          >
+            Add Chain to Keplr
+          </Button>
+        )}
+
+        {keplrChainState === KeplrChainState.Added &&
+          keplrConnectionState !== KeplrConnectionState.Connected && (
+            <Button
+              onClick={handleKeplrEnableClick}
+              variant={ButtonVariant.Outlined}
+              disabled={
+                keplrConnectionState === KeplrConnectionState.Connecting
+              }
+            >
+              Connect to Keplr
+            </Button>
+          )}
+
+        {keplrConnectionState == KeplrConnectionState.Connected && (
+          <ExtensionInfo>Connected to Keplr Extension</ExtensionInfo>
+        )}
+
+        {!keplr.detect() && (
+          <ExtensionInfo>
+            Install the Keplr extension to connect your Wallet
+          </ExtensionInfo>
+        )}
       </SettingsContent>
       <ButtonsContainer>
         <BackButton

packages/anoma-wallet/src/App/Token/IBCTransfer/IBCTransfer.tsx

@@ -54,10 +54,14 @@ const IBCTransfer = (): JSX.Element => {
 
   const selectDestinationChainData = ibc.map((ibcChain) => ({
     value: ibcChain.chainId,
-    label: chains[ibcChain.chainId].alias,
+    label: ibcChain.alias,
   }));
 
-  const channels = (channelsByChain[selectedChainId] || []).sort();
+  const channels =
+    channelsByChain[chainId] && channelsByChain[chainId][selectedChainId]
+      ? channelsByChain[chainId][selectedChainId]
+      : [];
+
   const selectChannelsData = channels.map((channel: string) => ({
     value: channel,
     label: channel,
@@ -157,7 +161,8 @@ const IBCTransfer = (): JSX.Element => {
   useEffect(() => {
     // Set a default selectedChannelId if none are selected, but channels are available
     if (selectedChainId && !selectedChannelId) {
-      const channels = channelsByChain[selectedChainId];
+      const chains = channelsByChain[chainId] || {};
+      const channels = chains[selectedChainId] || [];
       if (channels && channels.length > 0) {
         setSelectedChannelId(channels[0]);
       }
@@ -168,7 +173,8 @@ const IBCTransfer = (): JSX.Element => {
     if (channelId) {
       dispatch(
         addChannel({
-          chainId: selectedChainId,
+          chainId,
+          destinationChainId: selectedChainId,
           channelId,
         })
       );

packages/anoma-wallet/src/App/Token/Transfers/TransferDetails.tsx

@@ -11,7 +11,7 @@ import { Address, TransferDetailContainer } from "./TransferDetails.components";
 import { BackButton } from "../TokenSend/TokenSendForm.components";
 import { Icon, IconName } from "components/Icon";
 import { ButtonsContainer, TransfersContent } from "./Transfers.components";
-import { IBCConfig } from "config/chain";
+import { IBCConfigItem } from "config/ibc";
 
 type TransferDetailsParams = {
   id: string;
@@ -54,7 +54,7 @@ const TransferDetail = (): JSX.Element => {
   const chains = Config.chain;
   const chain = chains[chainId];
   const { ibc = [] } = chain || {};
-  const ibcChainConfig: IBCConfig | undefined = ibc.find(
+  const ibcChainConfig: IBCConfigItem | undefined = ibc.find(
     (ibcConfig) => ibcConfig.chainId === chainId
   );
 

packages/anoma-wallet/src/App/TopNavigation/topNavigation.components.ts

@@ -235,6 +235,10 @@ export const MobileMenuListItem = styled.li`
   border-bottom: 1px solid ${(props) => props.theme.colors.buttonBackground4};
   color: ${(props) => props.theme.colors.headingColor};
 
+  & button {
+    width: 100%;
+  }
+
   & button > div {
     color: ${(props) => props.theme.colors.headingColor};