fix: fix wallet button state in swap details page

rango-exchange · Dec 9, 2023 · 8f26453 · 8f26453
1 parent b28a984
commit 8f26453
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 31 deletions.
diff --git a/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx b/widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx
@@ -1,30 +1,33 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
 
-import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
+import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
 import { getContainer } from '../../utils/common';
+import { mapStatusToWalletState } from '../../utils/wallets';
 
 import { WalletContainer } from './SwapDetailsModal.styles';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const { type, title, currentStepWallet, message, showWalletButton } = props;
-  const { connect, getWalletInfo, state: walletState } = useWallets();
+  const { connect, getWalletInfo, state } = useWallets();
   const walletType = currentStepWallet?.walletType;
-  const isConnected = walletType && walletState(walletType).connected;
-  const state = isConnected ? WalletState.CONNECTED : WalletState.DISCONNECTED;
+  const walletState = !!walletType && mapStatusToWalletState(state(walletType));
+  const walletInfo = !!walletType && getWalletInfo(walletType);
+  const shouldShowWallet = showWalletButton && walletState && walletInfo;
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
-      {showWalletButton && walletType && (
+      {shouldShowWallet && (
         <WalletContainer>
           <Wallet
             container={getContainer()}
-            title={getWalletInfo(walletType).name}
-            image={getWalletInfo(walletType).img}
+            title={walletInfo.name}
+            image={walletInfo.img}
             type={walletType}
-            state={state}
+            state={walletState}
+            link={walletInfo.installLink}
             onClick={async () => connect(walletType)}
           />
         </WalletContainer>

diff --git a/widget/ui/src/components/Wallet/Wallet.types.ts b/widget/ui/src/components/Wallet/Wallet.types.ts
@@ -21,36 +21,18 @@ export interface Info {
   tooltipText: string;
 }
 
-interface StateConnected {
-  state: WalletState.CONNECTED;
-}
-interface StateDisconnected {
-  state: WalletState.DISCONNECTED;
-}
-interface StateConnecting {
-  state: WalletState.CONNECTING;
-}
-interface StateNotInstalled {
-  state: WalletState.NOT_INSTALLED;
-  link: InstallObjects | string;
-}
-
-type State =
-  | StateConnected
-  | StateDisconnected
-  | StateConnecting
-  | StateNotInstalled;
-
 export interface ContentProps {
   image: string;
   title: string;
   description: string;
   descriptionColor?: string;
 }
 
-interface WalletProps {
+export interface WalletPropTypes {
+  state: WalletState;
   title: string;
   image: string;
+  link: InstallObjects | string;
   type: WalletType;
   onClick: (type: WalletType) => void;
   selected?: boolean;
@@ -59,8 +41,6 @@ interface WalletProps {
   container?: HTMLElement;
 }
 
-export type WalletPropTypes = State & WalletProps;
-
 export type SelectablePropTypes = WalletPropTypes & {
   selected: boolean;
 };