feat(namadillo): starting integration with keplr wallet

anoma · Sep 19, 2024 · b8d1a96 · b8d1a96
1 parent 9153a1f
commit b8d1a96
Show file tree

Hide file tree

Showing 24 changed files with 480 additions and 125 deletions.
diff --git a/apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx b/apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx
@@ -10,7 +10,7 @@ export const ConnectProviderButton = ({
   return (
     <ActionButton
       type="button"
-      className="inline-flex absolute top-0 right-0 w-auto text-xs px-2 py-px"
+      className="inline-flex top-0 right-0 w-auto text-xs px-2 py-px"
       onClick={onClick}
       size="xs"
       backgroundColor="white"

diff --git a/apps/namadillo/src/App/Transfer/IBCFromNamadaModule.tsx b/apps/namadillo/src/App/Transfer/IBCFromNamadaModule.tsx
@@ -1,9 +1,34 @@
+import cosmos from "@namada/chains/chains/cosmos";
+import { integrations } from "@namada/integrations";
+import { selectedIBCChainAtom, selectedIBCWallet } from "atoms/integrations";
+import { wallets } from "integrations";
+import { useAtom } from "jotai";
+import { WalletProvider } from "types";
 import { TransferModule } from "./TransferModule";
 
 export const IBCFromNamadaModule = (): JSX.Element => {
+  const [selectedWallet, setWallet] = useAtom(selectedIBCWallet);
+  const [chainId, setChainId] = useAtom(selectedIBCChainAtom);
+
   return (
     <div>
-      <TransferModule isConnected={false} onSubmitTransfer={() => {}} />
+      <TransferModule
+        isConnected={false}
+        onSubmitTransfer={() => {}}
+        availableWallets={Object.values(wallets)}
+        selectedWallet={selectedWallet ? wallets[selectedWallet] : undefined}
+        onChangeWallet={async (wallet: WalletProvider) => {
+          try {
+            await integrations[wallet.id].connect();
+            setWallet(wallet.id);
+            if (!chainId) {
+              setChainId(cosmos.chainId);
+            }
+          } catch (err) {
+            console.error(err);
+          }
+        }}
+      />
     </div>
   );
 };
diff --git a/apps/namadillo/src/App/Transfer/SelectProviderModal.tsx b/apps/namadillo/src/App/Transfer/SelectProviderModal.tsx
diff --git a/apps/namadillo/src/App/Transfer/SelectWalletModal.tsx b/apps/namadillo/src/App/Transfer/SelectWalletModal.tsx
@@ -0,0 +1,44 @@
+import { integrations } from "@namada/integrations";
+import { SelectModal } from "App/Common/SelectModal";
+import { WalletProvider } from "types";
+import { WalletCard } from "./WalletCard";
+
+type SelectWalletModalProps = {
+  onClose: () => void;
+  wallets: WalletProvider[];
+  onConnect: (wallet: WalletProvider) => void;
+};
+
+export const SelectWalletModal = ({
+  onClose,
+  onConnect,
+  wallets,
+}: SelectWalletModalProps): JSX.Element => {
+  const isConnected = (_wallet: WalletProvider): boolean => {
+    return false;
+  };
+
+  const isInstalled = (wallet: WalletProvider): boolean => {
+    if (wallet.id in integrations) {
+      return integrations[wallet.id].detect();
+    }
+    return false;
+  };
+
+  return (
+    <SelectModal title="Source" onClose={onClose}>
+      <ul>
+        {wallets.map((wallet: WalletProvider, index) => (
+          <li key={index} className="px-5 text-sm">
+            <WalletCard
+              connected={isConnected(wallet)}
+              installed={isInstalled(wallet)}
+              wallet={wallet}
+              onConnect={() => onConnect(wallet)}
+            />
+          </li>
+        ))}
+      </ul>
+    </SelectModal>
+  );
+};
diff --git a/apps/namadillo/src/App/Transfer/SelectedChain.tsx b/apps/namadillo/src/App/Transfer/SelectedChain.tsx
@@ -1,24 +1,24 @@
 import clsx from "clsx";
 import { GoChevronDown } from "react-icons/go";
-import { Chain, Provider } from "types";
+import { Chain, WalletProvider } from "types";
 import { EmptyResourceIcon } from "./EmptyResourceIcon";
 
 type SelectedChainProps = {
   chain?: Chain;
-  provider?: Provider;
+  wallet?: WalletProvider;
   onClick?: () => void;
 };
 
 export const SelectedChain = ({
   chain,
-  provider,
+  wallet,
   onClick,
 }: SelectedChainProps): JSX.Element => {
   const selectorClassList = clsx(
     `flex items-center gap-2.5 text-white font-light cursor-pointer`
   );
 
-  const isDisabled = !provider;
+  const isDisabled = !wallet;
 
   return (
     <button
@@ -29,19 +29,19 @@ export const SelectedChain = ({
       disabled={isDisabled}
       onClick={onClick}
       aria-description={
-        provider && chain ?
+        wallet && chain ?
           `${chain.name} chain is selected`
         : `No chain selected`
       }
     >
-      {(!provider || !chain) && (
+      {(!wallet || !chain) && (
         <span className={selectorClassList}>
           <EmptyResourceIcon className="w-7" />
           Select chain
           <GoChevronDown className="text-sm" />
         </span>
       )}
-      {provider && chain && (
+      {wallet && chain && (
         <span className={selectorClassList}>
           <img
             className="w-7 h-7 object-cover object-center bg-neutral-800 rounded-full"

diff --git a/apps/namadillo/src/App/Transfer/SelectedWallet.tsx b/apps/namadillo/src/App/Transfer/SelectedWallet.tsx
@@ -0,0 +1,49 @@
+import { integrations } from "@namada/integrations";
+import { shortenAddress } from "@namada/utils";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { WalletProvider } from "types";
+
+type SelectedWalletProps = {
+  wallet: WalletProvider;
+  onClick?: () => void;
+};
+
+export const SelectedWallet = ({
+  wallet,
+  onClick,
+}: SelectedWalletProps): JSX.Element => {
+  const [walletAddress, setWalletAddress] = useState("");
+
+  const loadAccounts = async (): Promise<void> => {
+    try {
+      const integration = integrations[wallet.id];
+      integration.detect();
+      await integration.connect();
+      const accounts = await integration.accounts();
+      if (accounts && accounts.length > 0) {
+        setWalletAddress(accounts[0].address);
+      }
+    } catch {
+      // TODO: handle error catching
+    }
+  };
+
+  useEffect(() => {
+    loadAccounts();
+  }, []);
+
+  return (
+    <div
+      role="button"
+      className={clsx(
+        "flex justify-between items-center gap-2 text-sm text-neutral-500",
+        "font-light text-right transition-colors hover:text-neutral-400"
+      )}
+      onClick={onClick}
+    >
+      {walletAddress && shortenAddress(walletAddress, 8, 6)}
+      <img src={wallet.iconUrl} alt={wallet.name + " Logo"} className="w-6" />
+    </div>
+  );
+};
diff --git a/apps/namadillo/src/App/Transfer/TransferDestination.tsx b/apps/namadillo/src/App/Transfer/TransferDestination.tsx
@@ -2,7 +2,7 @@ import { NamCurrency } from "App/Common/NamCurrency";
 import { TabSelector } from "App/Common/TabSelector";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
-import { Chain, Provider } from "types";
+import { Chain, WalletProvider } from "types";
 import namadaShieldedSvg from "./assets/namada-shielded.svg";
 import namadaTransparentSvg from "./assets/namada-transparent.svg";
 import { CustomAddressForm } from "./CustomAddressForm";
@@ -12,7 +12,7 @@ type TransferDestinationProps = {
   isShielded?: boolean;
   onChangeShielded?: (isShielded: boolean) => void;
   chain?: Chain;
-  provider?: Provider;
+  wallet?: WalletProvider;
   className?: string;
   transactionFee?: BigNumber;
   customAddressActive?: boolean;
@@ -39,7 +39,7 @@ const parseChainInfo = (
 
 export const TransferDestination = ({
   chain,
-  provider,
+  wallet,
   isShielded,
   onChangeShielded,
   transactionFee,
@@ -80,7 +80,7 @@ export const TransferDestination = ({
 
       <SelectedChain
         chain={parseChainInfo(chain, isShielded)}
-        provider={provider}
+        wallet={wallet}
       />
 
       {customAddressActive && (

diff --git a/apps/namadillo/src/App/Transfer/TransferModule.tsx b/apps/namadillo/src/App/Transfer/TransferModule.tsx
@@ -1,25 +1,26 @@
 import { Stack } from "@namada/components";
 import BigNumber from "bignumber.js";
 import { useState } from "react";
-import { Asset, Chain } from "types";
-import { SelectProviderModal } from "./SelectProviderModal";
+import { Asset, Chain, WalletProvider } from "types";
+import { SelectWalletModal } from "./SelectWalletModal";
 import { TransferDestination } from "./TransferDestination";
 import { TransferSource } from "./TransferSource";
 
 type TransferModuleProps = {
   isConnected: boolean;
+  availableWallets: WalletProvider[];
+  onSubmitTransfer: () => void;
+  onChangeWallet?: (wallet: WalletProvider) => void;
+  selectedWallet?: WalletProvider;
   sourceChain?: Chain;
   onChangeSourceChain?: () => void;
   destinationChain?: Chain;
   onChangeDestinationChain?: (chain: Chain) => void;
   selectedAsset?: Asset;
   onChangeSelectedAsset?: (asset: Asset | undefined) => void;
-  amount?: BigNumber;
-  onChangeAmount?: (amount: BigNumber) => void;
   isShielded?: boolean;
   onChangeShielded?: (isShielded: boolean) => void;
   enableCustomAddress?: boolean;
-  onSubmitTransfer: () => void;
 };
 
 export const TransferModule = ({
@@ -30,6 +31,9 @@ export const TransferModule = ({
   isShielded,
   onChangeShielded,
   enableCustomAddress,
+  onChangeWallet,
+  availableWallets,
+  selectedWallet,
 }: TransferModuleProps): JSX.Element => {
   const [providerSelectorModalOpen, setProviderSelectorModalOpen] =
     useState(false);
@@ -48,6 +52,7 @@ export const TransferModule = ({
             isConnected={isConnected}
             asset={selectedAsset}
             chain={sourceChain}
+            wallet={selectedWallet}
             openProviderSelector={() => setProviderSelectorModalOpen(true)}
             openChainSelector={() => setChainSelectorModalOpen(true)}
             openAssetSelector={() => setAssetSelectorModalOpen(true)}
@@ -58,6 +63,7 @@ export const TransferModule = ({
           />
           <TransferDestination
             chain={destinationChain}
+            wallet={selectedWallet}
             isShielded={isShielded}
             onChangeShielded={onChangeShielded}
             address={customAddress}
@@ -69,17 +75,17 @@ export const TransferModule = ({
             memo={memo}
             onChangeMemo={setMemo}
           />
-          {chainSelectorModalOpen && <div />}
-          {assetSelectorModalOpen && <div />}
         </Stack>
       </section>
-      {providerSelectorModalOpen && (
-        <SelectProviderModal
-          providers={[{ name: "Keplr", iconUrl: "", connected: false }]}
+      {providerSelectorModalOpen && onChangeWallet && (
+        <SelectWalletModal
+          wallets={availableWallets}
           onClose={() => setProviderSelectorModalOpen(false)}
-          onConnect={() => {}}
+          onConnect={onChangeWallet}
         />
       )}
+      {chainSelectorModalOpen && <div />}
+      {assetSelectorModalOpen && <div />}
     </>
   );
 };