@rango-dev/widget-embedded 0.32.1 → 0.32.2-next.0

package/src/pages/WalletsPage.tsx

@@ -1,5 +1,4 @@
 import type { WalletInfoWithExtra } from '../types';
-import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import {
@@ -9,14 +8,11 @@ import {
   styled,
   Typography,
   Wallet,
-  WalletState,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
-import { WalletDerivationPathModal } from '../components/WalletDerivationPathModal';
-import { WalletModal } from '../components/WalletModal';
-import { WalletNamespacesModal } from '../components/WalletNamespacesModal';
+import { StatefulConnectModal } from '../components/StatefulConnectModal';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
@@ -26,21 +22,6 @@ import {
   filterWalletsByCategory,
 } from '../utils/wallets';
 
-interface NamespacesModalState {
-  open: boolean;
-  providerType: string;
-  providerImage: string;
-  availableNamespaces?: Namespace[];
-  singleNamespace?: boolean;
-}
-
-interface DerivationPathModalState {
-  open: boolean;
-  providerType: string;
-  providerImage: string;
-  namespace: Namespace;
-}
-
 const ListContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
@@ -54,73 +35,17 @@ const Container = styled(PageContainer, {
   textAlign: 'center',
 });
 
-export const TIME_TO_CLOSE_MODAL = 3_000;
-export const TIME_TO_IGNORE_MODAL = 300;
-
 export function WalletsPage() {
   const { fetchStatus: fetchMetaStatus } = useAppStore();
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const blockchains = useAppStore().blockchains();
   const { config } = useAppStore();
 
-  const [openModal, setOpenModal] = useState(false);
-  const [namespacesModalState, setNamespacesModalState] =
-    useState<NamespacesModalState | null>(null);
-  const [derivationPathModalState, setDerivationPathModalState] =
-    useState<DerivationPathModalState | null>(null);
-  const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
-  let modalTimerId: ReturnType<typeof setTimeout> | null = null;
+  const [selectedWalletToConnect, setSelectedWalletToConnect] =
+    useState<WalletInfoWithExtra>();
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const { list, handleClick, error, disconnectConnectingWallets } =
-    useWalletList({
-      onBeforeConnect: (type) => {
-        modalTimerId = setTimeout(() => {
-          setOpenModal(true);
-          setSelectedWalletType(type);
-        }, TIME_TO_IGNORE_MODAL);
-      },
-      onConnect: (type) => {
-        if (modalTimerId) {
-          clearTimeout(modalTimerId);
-        }
-        setTimeout(() => {
-          if (selectedWalletType === type) {
-            setOpenModal(false);
-          }
-        }, TIME_TO_CLOSE_MODAL);
-      },
-    });
-
-  const handleCloseWalletModal = () => {
-    disconnectConnectingWallets();
-    setOpenModal(false);
-  };
-
-  const handleCloseNamespaceModal = () => {
-    if (namespacesModalState) {
-      setNamespacesModalState({
-        ...namespacesModalState,
-        open: false,
-      });
-    }
-  };
-
-  const handleCloseDerivationPathModal = () => {
-    if (derivationPathModalState) {
-      setDerivationPathModalState({
-        ...derivationPathModalState,
-        open: false,
-      });
-    }
-  };
-
-  const selectedWallet = list.find(
-    (wallet) => wallet.type === selectedWalletType
-  );
-  const selectedWalletImage = selectedWallet?.image || '';
-  const selectedWalletState =
-    selectedWallet?.state || WalletState.NOT_INSTALLED;
+  const { list } = useWalletList();
 
   const filteredBlockchains = filterBlockchainsByWalletTypes(list, blockchains);
   const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
@@ -133,67 +58,7 @@ export function WalletsPage() {
       return;
     }
 
-    if (
-      !!wallet.namespaces?.length &&
-      wallet.state === WalletState.DISCONNECTED
-    ) {
-      if (wallet.namespaces.length > 1) {
-        setNamespacesModalState({
-          open: true,
-          providerType: wallet.type,
-          providerImage: wallet.image,
-          availableNamespaces: wallet.namespaces,
-          singleNamespace: wallet.singleNamespace,
-        });
-      } else if (wallet.needsDerivationPath) {
-        setDerivationPathModalState({
-          open: true,
-          providerType: wallet.type,
-          providerImage: wallet.image,
-          namespace: wallet.namespaces[0],
-        });
-      } else {
-        void handleClick(wallet.type);
-      }
-    } else {
-      void handleClick(wallet.type);
-    }
-  };
-
-  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
-    const wallet = filteredWallets.find(
-      (wallet) => wallet.type === namespacesModalState?.providerType
-    );
-    if (
-      wallet?.singleNamespace && // Currently we support derivation path only for single namespace wallets
-      wallet?.needsDerivationPath &&
-      selectedNamespaces[0]
-    ) {
-      setDerivationPathModalState({
-        open: true,
-        providerType: wallet.type,
-        providerImage: wallet.image,
-        namespace: selectedNamespaces[0],
-      });
-    } else {
-      void handleClick(
-        namespacesModalState?.providerType as string,
-        selectedNamespaces.map((namespace) => ({
-          namespace,
-        }))
-      );
-    }
-    handleCloseNamespaceModal();
-  };
-
-  const handleDerivationPathConfirm = (derivationPath: string) => {
-    if (derivationPath && derivationPathModalState?.namespace) {
-      void handleClick(derivationPathModalState.providerType, [
-        { namespace: derivationPathModalState.namespace, derivationPath },
-      ]);
-    }
-
-    handleCloseDerivationPathModal();
+    setSelectedWalletToConnect(wallet);
   };
 
   return (
@@ -230,28 +95,11 @@ export function WalletsPage() {
               />
             );
           })}
-          <WalletModal
-            open={!!openModal}
-            onClose={handleCloseWalletModal}
-            image={selectedWalletImage}
-            state={selectedWalletState}
-            error={error}
-          />
-          <WalletNamespacesModal
-            open={!!namespacesModalState?.open}
-            onClose={handleCloseNamespaceModal}
-            onConfirm={handleConfirmNamespaces}
-            image={namespacesModalState?.providerImage}
-            availableNamespaces={namespacesModalState?.availableNamespaces}
-            singleNamespace={namespacesModalState?.singleNamespace}
-          />
-          <WalletDerivationPathModal
-            open={!!derivationPathModalState?.open}
-            selectedNamespace={derivationPathModalState?.namespace}
-            type={derivationPathModalState?.providerType}
-            image={derivationPathModalState?.providerImage}
-            onClose={handleCloseDerivationPathModal}
-            onConfirm={handleDerivationPathConfirm}
+          <StatefulConnectModal
+            wallet={selectedWalletToConnect}
+            onClose={() => {
+              setSelectedWalletToConnect(undefined);
+            }}
           />
         </ListContainer>
       </Container>

package/src/store/wallets.ts

@@ -220,13 +220,13 @@ export const useWalletsStore = createSelectors(
                             findToken
                           ),
                           loading: false,
+                          error: false,
                         }
                       : connectedWallet;
                   }
                 );
 
                 const balances = makeTokensBalance(connectedWallets);
-
                 return {
                   loading: false,
                   balances,

package/src/utils/wallets.ts

@@ -26,7 +26,7 @@ import {
   BlockchainCategories,
   WalletState as WalletStatus,
 } from '@rango-dev/ui';
-import { readAccountAddress } from '@rango-dev/wallets-react';
+import { legacyReadAccountAddress as readAccountAddress } from '@rango-dev/wallets-core/legacy';
 import {
   detectInstallLink,
   getCosmosExperimentalChainInfo,

package/dist/components/WalletDerivationPathModal/WalletDerivationPathModal.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './WalletDerivationPathModal.types';
-import React from 'react';
-export declare function WalletDerivationPathModal(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=WalletDerivationPathModal.d.ts.map

package/dist/components/WalletDerivationPathModal/WalletDerivationPathModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletDerivationPathModal.d.ts","sourceRoot":"","sources":["../../../src/components/WalletDerivationPathModal/WalletDerivationPathModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAanE,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkCnD,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,SAAS,qBA0GzD"}

package/dist/components/WalletDerivationPathModal/WalletDerivationPathModal.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletDerivationPathModal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/WalletDerivationPathModal/WalletDerivationPathModal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,UAAU,EAAE,MAAM,eAAe,CAAC;AAEnD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI1B,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAErB,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;CAIrC,CAAC"}

package/dist/components/WalletDerivationPathModal/WalletDerivationPathModal.types.d.ts

@@ -1,10 +0,0 @@
-import type { Namespace } from '@rango-dev/wallets-shared';
-export interface PropTypes {
-    open: boolean;
-    selectedNamespace?: Namespace;
-    type?: string;
-    image?: string;
-    onClose: () => void;
-    onConfirm: (path: string) => void;
-}
-//# sourceMappingURL=WalletDerivationPathModal.types.d.ts.map

package/dist/components/WalletDerivationPathModal/WalletDerivationPathModal.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletDerivationPathModal.types.d.ts","sourceRoot":"","sources":["../../../src/components/WalletDerivationPathModal/WalletDerivationPathModal.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC"}

package/dist/components/WalletDerivationPathModal/index.d.ts

@@ -1,2 +0,0 @@
-export { WalletDerivationPathModal } from './WalletDerivationPathModal';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/WalletDerivationPathModal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/WalletDerivationPathModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/components/WalletModal/WalletModal.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './WalletModal.types';
-import React from 'react';
-export declare function WalletModal(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=WalletModal.d.ts.map

package/dist/components/WalletModal/WalletModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletModal.d.ts","sourceRoot":"","sources":["../../../src/components/WalletModal/WalletModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,qBAc3C"}

package/dist/components/WalletModal/WalletModal.types.d.ts

@@ -1,10 +0,0 @@
-import type { WalletState } from '@rango-dev/ui';
-export interface PropTypes {
-    open: boolean;
-    onClose: () => void;
-    image: string;
-    state: WalletState;
-    error?: string;
-}
-export type ModalContentProps = Pick<PropTypes, 'state' | 'error' | 'image'>;
-//# sourceMappingURL=WalletModal.types.d.ts.map

package/dist/components/WalletModal/WalletModal.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletModal.types.d.ts","sourceRoot":"","sources":["../../../src/components/WalletModal/WalletModal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC"}

package/dist/components/WalletModal/WalletModalContent.d.ts

@@ -1,4 +0,0 @@
-import type { ModalContentProps } from './WalletModal.types';
-import React from 'react';
-export declare function ModalContent(props: ModalContentProps): React.JSX.Element;
-//# sourceMappingURL=WalletModalContent.d.ts.map

package/dist/components/WalletModal/WalletModalContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletModalContent.d.ts","sourceRoot":"","sources":["../../../src/components/WalletModal/WalletModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAyCpD"}

package/dist/components/WalletModal/index.d.ts

@@ -1,2 +0,0 @@
-export { WalletModal } from './WalletModal';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/WalletModal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/WalletModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/WalletNamespacesModal/WalletNamespacesModal.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './WalletNamespacesModal.types';
-import React from 'react';
-export declare function WalletNamespacesModal(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=WalletNamespacesModal.d.ts.map

package/dist/components/WalletNamespacesModal/WalletNamespacesModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletNamespacesModal.d.ts","sourceRoot":"","sources":["../../../src/components/WalletNamespacesModal/WalletNamespacesModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAgB/D,OAAO,KAA4B,MAAM,OAAO,CAAC;AAqBjD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,qBAmGrD"}

package/dist/components/WalletNamespacesModal/WalletNamespacesModal.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletNamespacesModal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/WalletNamespacesModal/WalletNamespacesModal.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIxB,CAAC"}

package/dist/components/WalletNamespacesModal/WalletNamespacesModal.types.d.ts

@@ -1,10 +0,0 @@
-import type { Namespace } from '@rango-dev/wallets-shared';
-export interface PropTypes {
-    open: boolean;
-    image?: string;
-    onClose: () => void;
-    onConfirm: (namespaces: Namespace[]) => void;
-    availableNamespaces?: Namespace[];
-    singleNamespace?: boolean;
-}
-//# sourceMappingURL=WalletNamespacesModal.types.d.ts.map

package/dist/components/WalletNamespacesModal/WalletNamespacesModal.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WalletNamespacesModal.types.d.ts","sourceRoot":"","sources":["../../../src/components/WalletNamespacesModal/WalletNamespacesModal.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,SAAS,EAAE,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/dist/components/WalletNamespacesModal/index.d.ts

@@ -1,2 +0,0 @@
-export { WalletNamespacesModal } from './WalletNamespacesModal';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/WalletNamespacesModal/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/WalletNamespacesModal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/src/components/WalletDerivationPathModal/WalletDerivationPathModal.types.tsx

@@ -1,10 +0,0 @@
-import type { Namespace } from '@rango-dev/wallets-shared';
-
-export interface PropTypes {
-  open: boolean;
-  selectedNamespace?: Namespace;
-  type?: string;
-  image?: string;
-  onClose: () => void;
-  onConfirm: (path: string) => void;
-}

package/src/components/WalletDerivationPathModal/index.ts

@@ -1 +0,0 @@
-export { WalletDerivationPathModal } from './WalletDerivationPathModal';

package/src/components/WalletModal/WalletModal.tsx

@@ -1,25 +0,0 @@
-import type { PropTypes } from './WalletModal.types';
-
-import { Divider } from '@rango-dev/ui';
-import React from 'react';
-
-import { WIDGET_UI_ID } from '../../constants';
-import { WatermarkedModal } from '../common/WatermarkedModal';
-
-import { ModalContent } from './WalletModalContent';
-
-export function WalletModal(props: PropTypes) {
-  const { open, onClose, ...otherProps } = props;
-
-  return (
-    <WatermarkedModal
-      open={open}
-      onClose={onClose}
-      container={
-        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
-      }>
-      <ModalContent {...otherProps} />
-      <Divider direction="vertical" size={32} />
-    </WatermarkedModal>
-  );
-}

package/src/components/WalletModal/WalletModal.types.ts

@@ -1,11 +0,0 @@
-import type { WalletState } from '@rango-dev/ui';
-
-export interface PropTypes {
-  open: boolean;
-  onClose: () => void;
-  image: string;
-  state: WalletState;
-  error?: string;
-}
-
-export type ModalContentProps = Pick<PropTypes, 'state' | 'error' | 'image'>;

package/src/components/WalletModal/index.ts

@@ -1 +0,0 @@
-export { WalletModal } from './WalletModal';

package/src/components/WalletNamespacesModal/index.ts

@@ -1 +0,0 @@
-export { WalletNamespacesModal } from './WalletNamespacesModal';