@rango-dev/widget-embedded 0.45.1-next.7 → 0.45.1-next.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.45.1-next.7",
+  "version": "0.45.1-next.9",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.9.1-next.0",
-    "@rango-dev/provider-all": "^0.48.1-next.3",
+    "@rango-dev/provider-all": "^0.48.1-next.4",
     "@rango-dev/queue-manager-core": "^0.30.1-next.0",
     "@rango-dev/queue-manager-rango-preset": "^0.47.1-next.4",
     "@rango-dev/queue-manager-react": "^0.30.1-next.0",

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -55,6 +55,7 @@ export function StatefulConnectModal(props: PropTypes) {
     handleNamespace,
     getState,
     resetState,
+    handleDisconnect,
   } = useStatefulConnect();
 
   const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
@@ -194,6 +195,9 @@ export function StatefulConnectModal(props: PropTypes) {
       {isOnDetached(getState) && (
         <Detached
           onConfirm={handleDetachedConfirm}
+          onDisconnectWallet={() =>
+            void handleDisconnect(getState().namespace.targetWallet)
+          }
           value={getState().namespace}
           selectedNamespaces={getState().selectedNamespaces}
         />

package/src/components/WalletStatefulConnect/Detached.styles.ts

@@ -0,0 +1,6 @@
+import { styled } from '@rango-dev/ui';
+
+export const NamespacesHeader = styled('div', {
+  display: 'flex',
+  justifyContent: 'end',
+});

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -1,18 +1,23 @@
 import type { PropTypes } from './Detached.types';
 
 import { i18n } from '@lingui/core';
-import { Divider, Image, MessageBox } from '@rango-dev/ui';
+import { Button, Divider, Image, MessageBox } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
 import { NamespaceUnsupportedItem } from '../NamespaceItem/NamespaceUnsupportedItem';
 
+import { NamespacesHeader } from './Detached.styles';
 import { NamespaceDetachedItem } from './NamespaceDetachedItem';
 import { NamespaceList, StyledButton } from './Namespaces.styles';
 
 export function Detached(props: PropTypes) {
-  const { selectedNamespaces, value } = props;
+  const { selectedNamespaces, value, onDisconnectWallet } = props;
   const { targetWallet } = value;
 
+  const { state } = useWallets();
+  const walletState = state(targetWallet.type);
+
   return (
     <>
       <MessageBox
@@ -25,7 +30,18 @@ export function Detached(props: PropTypes) {
         )}
         icon={<Image src={targetWallet.image} size={45} />}
       />
-      <Divider size={20} />
+      <Divider size={30} />
+      <NamespacesHeader>
+        <Button
+          id="widget-detached-disconnect-wallet-btn"
+          variant="ghost"
+          type="error"
+          size="xsmall"
+          disabled={walletState.connecting || !walletState.connected}
+          onClick={onDisconnectWallet}>
+          {i18n.t('Disconnect wallet')}
+        </Button>
+      </NamespacesHeader>
       <NamespaceList id="widget-detached-namespace-list" as={'ul'}>
         {targetWallet.needsNamespace?.data.map((namespace, index, array) => (
           <React.Fragment key={namespace.id}>

package/src/components/WalletStatefulConnect/Detached.types.ts

@@ -4,5 +4,6 @@ import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 export interface PropTypes {
   value: NeedsNamespacesState;
   onConfirm: () => void;
+  onDisconnectWallet: () => void;
   selectedNamespaces: Namespace[] | null;
 }

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -93,7 +93,7 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
             id="widget-name-space-connect-btn"
             variant="ghost"
             type={namespaceState.connected ? 'error' : 'primary'}
-            size="small"
+            size="xsmall"
             onClick={async () => handleButtonClick(namespaceState)}>
             {getButtonText()}
           </Button>

package/src/components/WalletStatefulConnect/Namespaces.styles.ts

@@ -2,7 +2,7 @@ import { Button, styled } from '@rango-dev/ui';
 
 export const NamespaceList = styled('ul', {
   padding: 0,
-  paddingTop: '$10',
+  paddingTop: '$16',
   paddingBottom: '$20',
   margin: 0,
 });

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -7,6 +7,7 @@ import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import { useReducer } from 'react';
 
+import { isOnDetached } from '../../components/StatefulConnectModal';
 import { type ExtendedModalWalletInfo } from '../../utils/wallets';
 
 import {
@@ -26,7 +27,7 @@ interface UseStatefulConnect {
     selectedNamespaces: Namespace[]
   ) => Promise<Result>;
   handleDerivationPath: (path: string) => Promise<Result>;
-  handleDisconnect: (type: WalletType) => Promise<Result>;
+  handleDisconnect: (wallet: WalletInfoWithExtra) => Promise<Result>;
   getState(): State;
   resetState(section?: 'derivation'): void;
 }
@@ -163,7 +164,7 @@ export function useStatefulConnect(): UseStatefulConnect {
     }
 
     if (options?.disconnectIfConnected) {
-      await handleDisconnect(wallet.type);
+      await handleDisconnect(wallet);
       return { status: ResultStatus.Disconnected };
     }
 
@@ -258,10 +259,25 @@ export function useStatefulConnect(): UseStatefulConnect {
     return await runConnect(type, namespaces);
   };
 
-  const handleDisconnect = async (type: WalletType): Promise<Result> => {
-    const wallet = state(type);
-    if (wallet.connected || wallet.connecting) {
-      await disconnect(type);
+  const getState = () => connectState;
+
+  const handleDisconnect = async (
+    wallet: ExtendedModalWalletInfo
+  ): Promise<Result> => {
+    const walletState = state(wallet.type);
+    if (walletState.connected || walletState.connecting) {
+      await disconnect(wallet.type);
+
+      if (isOnDetached(getState)) {
+        dispatch({
+          type: 'needsNamespace',
+          payload: {
+            targetWallet: wallet,
+          },
+        });
+        return { status: ResultStatus.Namespace };
+      }
+
       return { status: ResultStatus.Disconnected };
     }
 
@@ -273,7 +289,7 @@ export function useStatefulConnect(): UseStatefulConnect {
     handleDisconnect,
     handleNamespace,
     handleDerivationPath,
-    getState: () => connectState,
+    getState,
     resetState: (section?: 'derivation') => {
       if (section === 'derivation') {
         dispatch({

package/src/hooks/useWalletList.ts

@@ -78,7 +78,7 @@ export function useWalletList(params?: Params): API {
       wallets?.filter((wallet) => wallet.state === WalletState.CONNECTING) ||
       [];
     for (const wallet of connectingWallets) {
-      void handleDisconnect(wallet.type);
+      void handleDisconnect(wallet);
     }
   }, [hashWalletsState(wallets)]);