@rango-dev/widget-embedded 0.38.1-next.0 → 0.38.1-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.38.1-next.0",
+  "version": "0.38.1-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -14,10 +14,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
 import { WIDGET_UI_ID } from '../../constants';
-import {
-  ResultStatus,
-  useStatefulConnect,
-} from '../../hooks/useStatefulConnect';
+import { useStatefulConnect } from '../../hooks/useStatefulConnect';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
@@ -227,8 +224,8 @@ export function WalletList(props: PropTypes) {
         onClose={() => {
           setSelectedWalletToConnect(undefined);
         }}
-        onConnect={(result) => {
-          if (props.onConnect && result.status === ResultStatus.Connected) {
+        onConnect={() => {
+          if (props.onConnect) {
             if (selectedWalletToConnect?.type) {
               props.onConnect(selectedWalletToConnect.type);
             } else {

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -26,8 +26,8 @@ const DELAY_SHOWING_MODAL_FOR = 300;
 interface PropTypes {
   wallet: WalletInfoWithExtra | undefined;
   onClose: () => void;
-  // When `handleConnect` runs **successfully**, this will be called afterwards.
-  onConnect?: (result: Result) => void;
+  // When connecting wallet is executed **successfully**, this will be called afterwards.
+  onConnect?: () => void;
 }
 
 export function StatefulConnectModal(props: PropTypes) {
@@ -48,9 +48,9 @@ export function StatefulConnectModal(props: PropTypes) {
   } = useStatefulConnect();
 
   const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
-    handleNamespace(props.wallet!, selectedNamespaces).catch(
-      catchErrorOnHandle
-    );
+    handleNamespace(props.wallet!, selectedNamespaces)
+      .then(afterConnected)
+      .catch(catchErrorOnHandle);
   };
 
   const handleDerivationPathConfirm = (derivationPath: string) => {
@@ -60,7 +60,9 @@ export function StatefulConnectModal(props: PropTypes) {
       );
     }
 
-    handleDerivationPath(derivationPath).catch(catchErrorOnHandle);
+    handleDerivationPath(derivationPath)
+      .then(afterConnected)
+      .catch(catchErrorOnHandle);
   };
 
   const handleClosingModal = () => {
@@ -77,6 +79,26 @@ export function StatefulConnectModal(props: PropTypes) {
     }
   };
 
+  const afterConnected = (result: Result, isImmediatelyConnected?: boolean) => {
+    const resultIsConnected = result.status === ResultStatus.Connected;
+    const resultIsDisconnected = [
+      ResultStatus.Disconnected,
+      ResultStatus.DisconnectedUnhandled,
+    ].includes(result.status);
+
+    if (resultIsConnected) {
+      props.onConnect?.();
+      if (!isImmediatelyConnected) {
+        successModalTimerId.current = setTimeout(
+          handleClosingModal,
+          KEEP_SUCCESS_MODAL_FOR
+        );
+      }
+    } else if (resultIsDisconnected) {
+      handleClosingModal();
+    }
+  };
+
   useEffect(() => {
     if (props.wallet) {
       resetModalState();
@@ -97,40 +119,21 @@ export function StatefulConnectModal(props: PropTypes) {
         }, DELAY_SHOWING_MODAL_FOR);
       };
 
-      const afterConnected = (result: Result) => {
-        const resultIsConnected = result.status === ResultStatus.Connected;
-        const resultIsDisconnected = [
-          ResultStatus.Disconnected,
-          ResultStatus.DisconnectedUnhandled,
-        ].includes(result.status);
-        const resultIsNeedMoreStepsToConnect = [
-          ResultStatus.Namespace,
-          ResultStatus.DerivationPath,
-        ].includes(result.status);
-
-        if (!resultIsNeedMoreStepsToConnect) {
-          isConnected = true;
-        }
-
-        if (resultIsConnected && !isImmediatelyConnected) {
-          successModalTimerId.current = setTimeout(
-            handleClosingModal,
-            KEEP_SUCCESS_MODAL_FOR
-          );
-        } else if (resultIsDisconnected) {
-          handleClosingModal();
-        }
-
-        if (props.onConnect) {
-          props.onConnect(result);
-        }
-      };
-
       beforeConnecting();
       handleConnect(props.wallet, {
         disconnectIfConnected: true,
       })
-        .then(afterConnected)
+        .then((result) => {
+          const resultIsNeedMoreStepsToConnect = [
+            ResultStatus.Namespace,
+            ResultStatus.DerivationPath,
+          ].includes(result.status);
+
+          if (!resultIsNeedMoreStepsToConnect) {
+            isConnected = true;
+          }
+          afterConnected(result, isImmediatelyConnected);
+        })
         .catch(catchErrorOnHandle);
     }
   }, [props.wallet]);

package/src/utils/wallets.ts

@@ -280,10 +280,10 @@ export function resetConnectedWalletState(
 
 export const calculateWalletUsdValue = (balances: BalanceState) => {
   const total = Object.values(balances).reduce((prev, balance) => {
-    const formattedBalance = formatBalance(balance);
-    return formattedBalance?.usdValue
-      ? prev.plus(formattedBalance.usdValue)
-      : prev;
+    const usdBalance = balance.usdValue
+      ? representAmountInNumber(balance.usdValue, balance.decimals)
+      : ZERO.toFixed();
+    return prev.plus(usdBalance);
   }, new BigNumber(ZERO));
 
   return numberWithThousandSeparator(total.toString());
@@ -324,16 +324,18 @@ export const getKeplrCompatibleConnectedWallets = (
   );
 };
 
+function representAmountInNumber(amount: string, decimals: number): string {
+  return new BigNumber(amount).shiftedBy(-decimals).toFixed();
+}
+
 export function formatBalance(balance: Balance | null): Balance | null {
   if (!balance) {
     return null;
   }
 
-  const amount = new BigNumber(balance.amount)
-    .shiftedBy(-balance.decimals)
-    .toFixed();
+  const amount = representAmountInNumber(balance.amount, balance.decimals);
   const usdValue = balance.usdValue
-    ? new BigNumber(balance.usdValue).shiftedBy(-balance.decimals).toFixed()
+    ? representAmountInNumber(balance.usdValue, balance.decimals)
     : null;
   const formattedAmount = numberToString(
     amount,