feat: Integrate Wagmi (#3280)

* feat: add wagmi and start refactoring wallet select * feat: display eth wallets in wallet select and create basic multi wallet network selection arch * feat: add wallet select modal new layout type * feat: display evm wallets in a simpler list * feat: handle evm wallet connection * fix: build * improvement: mark old evm observable wallets as deprecated * fix: build
osmosis-labs · May 30, 2024 · a6e02a8 · a6e02a8
1 parent f09deb3
commit a6e02a8
Show file tree

Hide file tree

Showing 48 changed files with 2,728 additions and 1,349 deletions.
diff --git a/packages/stores/src/account/base.ts b/packages/stores/src/account/base.ts
@@ -88,9 +88,9 @@ import { TxTracer } from "../tx";
 import { aminoConverters } from "./amino-converters";
 import {
   AccountStoreWallet,
+  CosmosRegistryWallet,
   DeliverTxResponse,
   OneClickTradingInfo,
-  RegistryWallet,
   SignOptions,
   TxEvent,
   TxEvents,
@@ -374,7 +374,7 @@ export class AccountStore<Injects extends Record<string, any>[] = []> {
         walletWithAccountSet[key] = injectedAccountsForChain[key];
       }
 
-      const walletInfo = wallet.walletInfo as RegistryWallet;
+      const walletInfo = wallet.walletInfo as CosmosRegistryWallet;
 
       walletWithAccountSet.txTypeInProgress = txInProgress ?? "";
       walletWithAccountSet.isReadyToSendTx =
@@ -483,7 +483,7 @@ export class AccountStore<Injects extends Record<string, any>[] = []> {
     // If the wallet isn't found, return the error
     if (!wallet) return new Error(errorMessage);
 
-    const walletInfo = wallet.walletInfo as RegistryWallet;
+    const walletInfo = wallet.walletInfo as CosmosRegistryWallet;
 
     // If the wallet has a custom error matcher, use it
     if (walletInfo?.matchError) {

diff --git a/packages/stores/src/account/types.ts b/packages/stores/src/account/types.ts
@@ -35,7 +35,7 @@ export interface DeliverTxResponse {
   readonly gasWanted: string;
 }
 
-export type RegistryWallet = Omit<Wallet, "logo"> & {
+export type CosmosRegistryWallet = Omit<Wallet, "logo"> & {
   logo: string;
   lazyInstall: () => any;
   stakeUrl?: string;
@@ -84,8 +84,8 @@ export type AccountStoreWallet<Injects extends Record<string, any>[] = []> =
     UnionToIntersection<Injects[number]> & {
       txTypeInProgress: string;
       isReadyToSendTx: boolean;
-      supportsChain: Required<RegistryWallet>["supportsChain"];
-      walletInfo: RegistryWallet;
+      supportsChain: Required<CosmosRegistryWallet>["supportsChain"];
+      walletInfo: CosmosRegistryWallet;
     };
 
 export interface TxEvents {

diff --git a/packages/stores/src/tests/test-wallet.ts b/packages/stores/src/tests/test-wallet.ts
@@ -173,13 +173,22 @@ export class MockKeplrClient implements WalletClient {
     signer: string,
     signDoc: DirectSignDoc,
     signOptions?: SignOptions
-  ): ReturnType<MockKeplrWithFee["signDirect"]> {
-    return await this.client.signDirect(
+  ): ReturnType<Required<WalletClient>["signDirect"]> {
+    const response = await this.client.signDirect(
       chainId,
       signer,
       signDoc as any,
       signOptions
     );
+
+    // Convert Long to bigint
+    return {
+      signed: {
+        ...response.signed,
+        accountNumber: BigInt(response.signed.accountNumber.toString()),
+      },
+      signature: response.signature,
+    };
   }
 
   async sendTx(chainId: string, tx: Uint8Array, mode: BroadcastMode) {

diff --git a/packages/web/__tests__/test-utils.tsx b/packages/web/__tests__/test-utils.tsx
@@ -13,7 +13,7 @@ import { ReactNode } from "react";
 import { TestWallet, testWalletInfo } from "~/__tests__/test-wallet";
 import { MultiLanguageProvider } from "~/hooks/language/context";
 import { AvailableFlags } from "~/hooks/use-feature-flags";
-import { WalletSelectProvider } from "~/hooks/wallet-select";
+import { WalletSelectProvider } from "~/hooks/use-wallet-select";
 import { AppRouter } from "~/server/api/root-router";
 import { storeContext, StoreProvider } from "~/stores";
 import { RootStore } from "~/stores/root";

diff --git a/packages/web/components/bridge/immersive/provider.tsx b/packages/web/components/bridge/immersive/provider.tsx
@@ -3,6 +3,11 @@ import { PropsWithChildren, useState } from "react";
 
 import { StepProgress } from "~/components/stepper/progress-bar";
 import { Button } from "~/components/ui/button";
+import { useWalletSelect } from "~/hooks";
+import {
+  useDisconnectEvmWallet,
+  useEvmWalletAccount,
+} from "~/hooks/evm-wallet";
 import { FiatRampKey } from "~/integrations";
 
 import { BridgeFlowProvider } from "../flow";
@@ -12,34 +17,37 @@ export const ImmersiveBridgeFlow = ({
   children,
 }: PropsWithChildren<BridgeFlowProvider>) => {
   // TODO: state will be encapsulated in a state hook
-  const [isShowing, setIsShowing] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const [step, setStep] = useState<0 | 1 | 2 | 3 | 4>(0);
+  const { isConnected, address } = useEvmWalletAccount();
+  const { onOpenWalletSelect } = useWalletSelect();
+  const { disconnect } = useDisconnectEvmWallet();
 
   return (
     <Provider
       value={{
         // globally received events
         startBridge: (direction: "deposit" | "withdraw") => {
-          setIsShowing(true);
+          setIsVisible(true);
           console.log("startBridge", direction);
         },
         bridgeAsset: (anyDenom: string, direction: "deposit" | "withdraw") => {
-          setIsShowing(true);
+          setIsVisible(true);
           console.log("bridgeAsset", anyDenom, direction);
         },
         fiatRamp: (fiatRampKey: FiatRampKey, assetKey: string) => {
-          setIsShowing(true);
+          setIsVisible(true);
           console.log("fiatRamp", fiatRampKey, assetKey);
         },
         fiatRampSelection: () => {
-          setIsShowing(true);
+          setIsVisible(true);
           console.log("fiatRampSelection");
         },
       }}
     >
       {children}
       <Transition
-        show={isShowing}
+        show={isVisible}
         className="fixed inset-0 z-[999] flex items-center justify-center bg-osmoverse-900"
         enter="transition-opacity duration-300"
         enterFrom="opacity-0"
@@ -78,7 +86,29 @@ export const ImmersiveBridgeFlow = ({
             </Button>
           </div>
           <h6>I will fade in and out</h6>
-          <Button onClick={() => setIsShowing(false)}>Close</Button>
+          <Button onClick={() => setIsVisible(false)}>Close</Button>
+
+          {isConnected ? (
+            <div>
+              <p>Evm Address: {address}</p>
+              <Button onClick={() => disconnect()}>Disconnect</Button>
+            </div>
+          ) : (
+            <Button
+              onClick={() =>
+                onOpenWalletSelect({
+                  walletOptions: [
+                    {
+                      walletType: "evm",
+                    },
+                  ],
+                  layout: "list",
+                })
+              }
+            >
+              Connect EVM Wallet
+            </Button>
+          )}
         </div>
       </Transition>
     </Provider>

diff --git a/packages/web/components/cards/stake-learn-more.tsx b/packages/web/components/cards/stake-learn-more.tsx
@@ -10,7 +10,7 @@ import {
 } from "~/components/stepper";
 import { Button } from "~/components/ui/button";
 import { useTranslation } from "~/hooks";
-import { useWalletSelect } from "~/hooks/wallet-select";
+import { useWalletSelect } from "~/hooks/use-wallet-select";
 import { useStore } from "~/stores";
 
 const BuildStakeSquadButton: React.FC<StakeLearnMoreProps> = ({
@@ -26,7 +26,9 @@ const BuildStakeSquadButton: React.FC<StakeLearnMoreProps> = ({
     if (isWalletConnected) {
       setShowValidatorModal();
     } else {
-      onOpenWalletSelect(osmosisChainId);
+      onOpenWalletSelect({
+        walletOptions: [{ walletType: "cosmos", chainId: osmosisChainId }],
+      });
     }
   }, [
     isWalletConnected,

diff --git a/packages/web/components/complex/add-conc-liquidity.tsx b/packages/web/components/complex/add-conc-liquidity.tsx
@@ -29,7 +29,7 @@ import { CustomClasses } from "~/components/types";
 import { Button } from "~/components/ui/button";
 import { ChartButton } from "~/components/ui/button";
 import { Checkbox } from "~/components/ui/checkbox";
-import { EventName } from "~/config";
+import { EventName } from "~/config/analytics-events";
 import {
   ObservableAddConcentratedLiquidityConfig,
   useAmplitudeAnalytics,

diff --git a/packages/web/components/complex/portfolio-page.tsx b/packages/web/components/complex/portfolio-page.tsx
@@ -329,7 +329,11 @@ const GetStartedWithOsmosis: FunctionComponent = () => {
       <Button
         className="flex !h-11 w-fit items-center gap-2 !rounded-full !py-1"
         onClick={() => {
-          onOpenWalletSelect(chainStore.osmosis.chainId);
+          onOpenWalletSelect({
+            walletOptions: [
+              { walletType: "cosmos", chainId: chainStore.osmosis.chainId },
+            ],
+          });
         }}
       >
         {t("connectWallet")}

diff --git a/packages/web/components/navbar/index.tsx b/packages/web/components/navbar/index.tsx
@@ -35,7 +35,7 @@ import { useAmplitudeAnalytics, useDisclosure } from "~/hooks";
 import { useOneClickTradingSession } from "~/hooks/one-click-trading/use-one-click-trading-session";
 import { useICNSName } from "~/hooks/queries/osmosis/use-icns-name";
 import { useFeatureFlags } from "~/hooks/use-feature-flags";
-import { useWalletSelect } from "~/hooks/wallet-select";
+import { useWalletSelect } from "~/hooks/use-wallet-select";
 import {
   NotifiContextProvider,
   NotifiModal,
@@ -394,7 +394,9 @@ const WalletInfo: FunctionComponent<
           size="md"
           onClick={() => {
             logEvent([EventName.Topnav.connectWalletClicked]);
-            onOpenWalletSelect(chainId);
+            onOpenWalletSelect({
+              walletOptions: [{ walletType: "cosmos", chainId: chainId }],
+            });
           }}
         >
           <span className="button mx-auto">{t("connectWallet")}</span>

diff --git a/packages/web/components/swap-tool/index.tsx b/packages/web/components/swap-tool/index.tsx
@@ -180,7 +180,9 @@ export const SwapTool: FunctionComponent<SwapToolProps> = observer(
     const sendSwapTx = () => {
       // prompt to select wallet insteaad of swapping
       if (account?.walletStatus !== WalletStatus.Connected) {
-        return onOpenWalletSelect(chainId);
+        return onOpenWalletSelect({
+          walletOptions: [{ walletType: "cosmos", chainId: chainId }],
+        });
       }
 
       if (!swapState.inAmountInput.amount) return;

diff --git a/packages/web/components/transactions/no-transactions-splash.tsx b/packages/web/components/transactions/no-transactions-splash.tsx
@@ -4,7 +4,7 @@ import { FunctionComponent } from "react";
 
 import { Button } from "~/components/ui/button";
 import { useTranslation } from "~/hooks";
-import { useWalletSelect } from "~/hooks/wallet-select";
+import { useWalletSelect } from "~/hooks/use-wallet-select";
 import { useStore } from "~/stores";
 
 export const NoTransactionsSplash: FunctionComponent<{
@@ -43,7 +43,16 @@ export const NoTransactionsSplash: FunctionComponent<{
       </div>
       {variant === "connect" && (
         <div className="max-w-56">
-          <Button onClick={() => onOpenWalletSelect(osmosisChainId)} size="md">
+          <Button
+            onClick={() =>
+              onOpenWalletSelect({
+                walletOptions: [
+                  { walletType: "cosmos", chainId: osmosisChainId },
+                ],
+              })
+            }
+            size="md"
+          >
             {t("transactions.connectWallet")}
           </Button>
         </div>

diff --git a/packages/web/components/wallet-states/connecting-wallet-state.tsx b/packages/web/components/wallet-states/connecting-wallet-state.tsx
@@ -0,0 +1,35 @@
+import { isNil } from "@osmosis-labs/utils";
+import React from "react";
+
+interface ConnectingWalletStateProps {
+  walletLogo?: string;
+  title?: string;
+  desc?: string;
+}
+
+const ConnectingWalletState = ({
+  walletLogo,
+  title,
+  desc,
+}: ConnectingWalletStateProps) => {
+  return (
+    <div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-12 pt-3">
+      <div className="flex h-16 w-16 items-center justify-center after:absolute after:h-32 after:w-32 after:animate-spin-slow after:rounded-full after:border-2 after:border-b-transparent after:border-l-wosmongton-300 after:border-r-wosmongton-300 after:border-t-transparent">
+        {!!walletLogo && typeof walletLogo === "string" && (
+          <img width={64} height={64} src={walletLogo} alt="Wallet logo" />
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {!isNil(title) && (
+          <h1 className="text-center text-h6 font-h6">{title}</h1>
+        )}
+        {!isNil(desc) && (
+          <p className="body2 text-center text-wosmongton-100">{desc}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ConnectingWalletState;
diff --git a/packages/web/components/wallet-states/error-wallet-state.tsx b/packages/web/components/wallet-states/error-wallet-state.tsx
@@ -0,0 +1,41 @@
+import { isNil } from "@osmosis-labs/utils";
+import React, { ReactNode } from "react";
+
+interface ErrorWalletStateProps {
+  walletLogo?: string;
+  title?: string;
+  desc?: string;
+  actions?: ReactNode;
+}
+
+const ErrorWalletState = ({
+  walletLogo,
+  title,
+  desc,
+  actions,
+}: ErrorWalletStateProps) => {
+  return (
+    <div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-12 pt-6">
+      <div className="flex h-16 w-16 items-center justify-center after:absolute after:h-32 after:w-32 after:rounded-full after:border-2 after:border-error">
+        {!!walletLogo && typeof walletLogo === "string" && (
+          <img width={64} height={64} src={walletLogo} alt="Wallet logo" />
+        )}
+      </div>
+
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-2">
+          {!isNil(title) && (
+            <h1 className="text-center text-h6 font-h6">{title}</h1>
+          )}
+          {!isNil(desc) && (
+            <p className="body2 text-center text-wosmongton-100">{desc}</p>
+          )}
+        </div>
+
+        {actions}
+      </div>
+    </div>
+  );
+};
+
+export default ErrorWalletState;
diff --git a/packages/web/components/wallet-states/index.ts b/packages/web/components/wallet-states/index.ts
@@ -0,0 +1,2 @@
+export * from "./connecting-wallet-state";
+export * from "./error-wallet-state";
diff --git a/packages/web/components/your-balance/your-balance.tsx b/packages/web/components/your-balance/your-balance.tsx
@@ -394,7 +394,7 @@ const BalanceStats = observer(({ denom }: YourBalanceProps) => {
   const { ibcBalances } = assetsStore;
   const account = accountStore.getWallet(chainStore.osmosis.chainId);
   const tokenChain = chainStore.getChainFromCurrency(denom);
-  const chainName = tokenChain?.chainName;
+  const chainId = tokenChain?.chainId;
 
   const { data, isLoading: isCoinDataLoading } =
     api.edge.assets.getUserMarketAsset.useQuery({
@@ -464,7 +464,11 @@ const BalanceStats = observer(({ denom }: YourBalanceProps) => {
           </SkeletonLoader>
         ) : (
           <button
-            onClick={() => onOpenWalletSelect(chainName!)}
+            onClick={() =>
+              onOpenWalletSelect({
+                walletOptions: [{ walletType: "cosmos", chainId: chainId! }],
+              })
+            }
             className="text-subtitle1 font-subtitle1 leading-6 text-wosmongton-300 transition-colors duration-200 ease-in-out hover:text-wosmongton-200"
           >
             {t("connectWallet")}

diff --git a/packages/web/config/generate-cosmos-kit-wallet-list.ts b/packages/web/config/generate-cosmos-kit-wallet-list.ts
@@ -82,10 +82,10 @@ async function generateCosmosKitWalletList() {
 
   const content = `
       import {Wallet} from "@cosmos-kit/core"
-      export enum AvailableWallets {${CosmosKitWalletList.map(
+      export enum AvailableCosmosWallets {${CosmosKitWalletList.map(
         (wallet) => `${wallet.prettyName.replace(/\s/g, "")} = "${wallet.name}"`
       ).join(",")}}
-      export const CosmosKitWalletList: Record<AvailableWallets, Wallet> = ${getStringifiedWallet(
+      export const CosmosKitWalletList: Record<AvailableCosmosWallets, Wallet> = ${getStringifiedWallet(
         registryObject
       )}     
     `;

diff --git a/packages/web/config/index.ts b/packages/web/config/index.ts
@@ -1,7 +1,7 @@
 /**
  *  This file is autogenerated by `generate-wallet-registry.ts`.
  */
-export { AvailableWallets } from "./generated/cosmos-kit-wallet-list";
+export { AvailableCosmosWallets as AvailableWallets } from "./generated/cosmos-kit-wallet-list";
 /**
  *  This file is autogenerated by `generate-sprite-ids.ts`.
  */