@rango-dev/widget-embedded 0.31.1-next.3 → 0.32.0

package/src/components/WalletStatefulConnect/ExperimentalChainStatus.helpers.ts

@@ -1,53 +0,0 @@
-import type { PropTypes } from './ExperimentalChainStatus.types';
-import type { MessageType } from '@rango-dev/ui';
-
-import { i18n } from '@lingui/core';
-
-export function generateMessageByStatus(
-  status: PropTypes['status'],
-  blockchainDisplayName: string | undefined
-): {
-  type: MessageType;
-  title: string;
-  description: string;
-} {
-  switch (status) {
-    case 'in-progress':
-      return {
-        type: 'loading',
-        title: i18n.t({
-          id: 'Add {blockchainDisplayName} Chain',
-          values: { blockchainDisplayName },
-        }),
-        description: i18n.t({
-          id: 'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
-          values: { blockchainDisplayName },
-        }),
-      };
-    case 'completed':
-      return {
-        type: 'success',
-        title: i18n.t({
-          id: '{blockchainDisplayName} Chain Added',
-          values: { blockchainDisplayName },
-        }),
-        description: i18n.t({
-          id: 'You should connect a {blockchainDisplayName} supported wallet or choose a different {blockchainDisplayName} address',
-          values: { blockchainDisplayName },
-        }),
-      };
-    case 'rejected':
-      return {
-        type: 'error',
-        title: i18n.t('Request Rejected'),
-        description: i18n.t({
-          id: "You've rejected adding {blockchainDisplayName} chain to your wallet.",
-          values: { blockchainDisplayName },
-        }),
-      };
-    default:
-      throw new Error(
-        `Showing information about an experimentation chain status needs to be defined first. status: ${status}`
-      );
-  }
-}

package/src/components/WalletStatefulConnect/ExperimentalChainStatus.tsx

@@ -1,35 +0,0 @@
-import type { PropTypes } from './ExperimentalChainStatus.types';
-
-import { Image, MessageBox, Spinner } from '@rango-dev/ui';
-import React from 'react';
-
-import {
-  LogoContainer,
-  WalletImageContainer,
-} from '../ConfirmWalletsModal/WalletList.styles';
-
-import { generateMessageByStatus } from './ExperimentalChainStatus.helpers';
-
-export function ExperimentalChainStatus(props: PropTypes) {
-  const { status, displayName, image } = props;
-  const data = generateMessageByStatus(status, displayName);
-  const hasImage = status == 'in-progress';
-
-  return (
-    <MessageBox
-      type={data.type}
-      title={data.title}
-      description={data.description}
-      icon={
-        hasImage ? (
-          <LogoContainer>
-            <WalletImageContainer>
-              <Image src={image} size={45} />
-            </WalletImageContainer>
-            <Spinner />
-          </LogoContainer>
-        ) : undefined
-      }
-    />
-  );
-}

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

@@ -1,5 +0,0 @@
-export interface PropTypes {
-  displayName?: string;
-  status: 'in-progress' | 'completed' | 'rejected';
-  image: string;
-}

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

@@ -1,9 +0,0 @@
-import type { BlockchainMeta } from 'rango-types';
-
-export function getBlockchainLogo(
-  blockchains: BlockchainMeta[],
-  blockchainName: string
-) {
-  return blockchains.find((blockchain) => blockchain.name === blockchainName)
-    ?.logo;
-}

package/src/components/WalletStatefulConnect/index.ts

@@ -1,4 +0,0 @@
-export { Namespaces } from './Namespaces';
-export { DerivationPath } from './DerivationPath';
-export { ConnectStatus } from './ConnectStatus';
-export { ExperimentalChain } from './ExperimentalChain';

package/src/hooks/useStatefulConnect/index.ts

@@ -1,9 +0,0 @@
-export { useStatefulConnect } from './useStatefulConnect';
-export { ResultStatus } from './useStatefulConnect.types';
-export type {
-  NeedsNamespacesState,
-  NeedsDerivationPathState,
-  Result,
-} from './useStatefulConnect.types';
-
-export type { State } from './useStatefulConnect.state';

package/src/hooks/useStatefulConnect/useStatefulConnect.helpers.ts

@@ -1,13 +0,0 @@
-import type { State } from './useStatefulConnect.state';
-
-export function isStateOnDerivationPathStep(
-  state: State
-): state is State & { derivationPath: NonNullable<State['derivationPath']> } {
-  return !!state.derivationPath;
-}
-
-export function isStateOnNamespace(
-  state: State
-): state is State & { namespace: NonNullable<State['namespace']> } {
-  return !!state.namespace;
-}

package/src/hooks/useStatefulConnect/useStatefulConnect.state.ts

@@ -1,45 +0,0 @@
-import type {
-  Actions,
-  NeedsDerivationPathState,
-  NeedsNamespacesState,
-} from './useStatefulConnect.types';
-
-export interface State {
-  status: 'init' | 'namespace' | 'derivationPath';
-  namespace: NeedsNamespacesState | null;
-  derivationPath: NeedsDerivationPathState | null;
-}
-
-export const initState: State = {
-  status: 'init',
-  namespace: null,
-  derivationPath: null,
-};
-
-export function reducer(state: State, action: Actions): State {
-  switch (action.type) {
-    case 'needsNamespace':
-      return {
-        ...state,
-        status: 'namespace',
-        namespace: action.payload,
-        derivationPath: null,
-      };
-    case 'needsDerivationPath':
-      return {
-        ...state,
-        status: 'derivationPath',
-        derivationPath: action.payload,
-      };
-    case 'reset':
-      return initState;
-    case 'resetDerivation':
-      return {
-        ...state,
-        derivationPath: null,
-        status: 'namespace',
-      };
-    default:
-      throw new Error(`Action hasn't been defined.`);
-  }
-}

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,232 +0,0 @@
-import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
-import type { WalletInfoWithExtra } from '../../types';
-import type {
-  Namespace,
-  NamespaceData,
-  WalletType,
-} from '@rango-dev/wallets-shared';
-
-import { WalletState } from '@rango-dev/ui';
-import { useWallets } from '@rango-dev/wallets-react';
-import { useReducer } from 'react';
-
-import {
-  isStateOnDerivationPathStep,
-  isStateOnNamespace,
-} from './useStatefulConnect.helpers';
-import { initState, reducer, type State } from './useStatefulConnect.state';
-import { ResultStatus } from './useStatefulConnect.types';
-
-interface UseStatefulConnect {
-  handleConnect: (
-    wallet: WalletInfoWithExtra,
-    options?: HandleConnectOptions
-  ) => Promise<Result>;
-  handleNamespace: (
-    wallet: WalletInfoWithExtra,
-    selectedNamespaces: Namespace[]
-  ) => Promise<Result>;
-  handleDerivationPath: (path: string) => Promise<Result>;
-  handleDisconnect: (type: WalletType) => Promise<Result>;
-  getState(): State;
-  resetState(section?: 'derivation'): void;
-}
-
-/**
- *
- * This hook maintains state of wallet and checks if additional information
- * is required to call the `connect` method of `core` package properly.
- *
- * The final goal is running `runConnect` which calls `wallets/core`'s `connect` method.
- * But sometimes it needs to get more information like what namespace it should be connected to,
- * or what derivation path should be used for.
- *
- */
-export function useStatefulConnect(): UseStatefulConnect {
-  const { state, disconnect, connect } = useWallets();
-
-  const [connectState, dispatch] = useReducer(reducer, initState);
-
-  const runConnect = async (
-    type: WalletType,
-    namespaces?: NamespaceData[],
-    _options?: HandleConnectOptions
-  ): Promise<{ status: ResultStatus }> => {
-    /*
-     * When running this function, it means all optional steps (like namespace and derivation path) has passed, or wallet doesn't need them at all.
-     * By resetting state, we will make sure when user tries to connect other wallets, it doesn't have unexpected states.
-     */
-    dispatch({
-      type: 'reset',
-    });
-
-    try {
-      await connect(type, undefined, namespaces);
-
-      return { status: ResultStatus.Connected };
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      const message = e?.message
-        ? `Error: ${e.message}`
-        : 'An unknown error happened during connecting wallet.';
-
-      throw new Error(message, { cause: e });
-    }
-  };
-
-  const handleConnect = async (
-    wallet: WalletInfoWithExtra,
-    options?: HandleConnectOptions
-  ): Promise<{
-    status: ResultStatus;
-  }> => {
-    const isDisconnected = wallet.state === WalletState.DISCONNECTED;
-
-    if (isDisconnected) {
-      if (!wallet.namespaces) {
-        return await runConnect(wallet.type, undefined, options);
-      }
-
-      const needsNamespace = wallet.namespaces.length > 1;
-      const needsDerivationPath = wallet.needsDerivationPath;
-
-      if (needsNamespace) {
-        dispatch({
-          type: 'needsNamespace',
-          payload: {
-            providerType: wallet.type,
-            providerImage: wallet.image,
-            availableNamespaces: wallet.namespaces,
-            singleNamespace: wallet.singleNamespace,
-          },
-        });
-        return { status: ResultStatus.Namespace };
-      } else if (needsDerivationPath) {
-        dispatch({
-          type: 'needsDerivationPath',
-          payload: {
-            providerType: wallet.type,
-            providerImage: wallet.image,
-            namespace: wallet.namespaces[0],
-          },
-        });
-        return { status: ResultStatus.DerivationPath };
-      }
-
-      return await runConnect(
-        wallet.type,
-        wallet.namespaces.map((namespace) => ({ namespace })),
-        options
-      );
-    }
-
-    if (options?.disconnectIfConnected) {
-      await handleDisconnect(wallet.type);
-      return { status: ResultStatus.Disconnected };
-    }
-
-    return { status: ResultStatus.DisconnectedUnhandled };
-  };
-
-  const handleNamespace = async (
-    wallet: WalletInfoWithExtra,
-    selectedNamespaces: Namespace[]
-  ): Promise<Result> => {
-    const isSingleNamespace = wallet.singleNamespace;
-    const needsDerivationPath = wallet.needsDerivationPath;
-    const firstSelectedNamespace = selectedNamespaces[0];
-
-    if (!firstSelectedNamespace) {
-      throw new Error(
-        'To confirm a namespace, you should select at least one namespace.'
-      );
-    }
-
-    /*
-     * Currently we support derivation path only for single namespace wallets.
-     *
-     * Basically Single namespace is a list with radio buttons to let the user select one value within the list.
-     */
-    if (isSingleNamespace && needsDerivationPath) {
-      dispatch({
-        type: 'needsDerivationPath',
-        payload: {
-          providerType: wallet.type,
-          providerImage: wallet.image,
-          namespace: firstSelectedNamespace,
-        },
-      });
-
-      return { status: ResultStatus.DerivationPath };
-    }
-
-    /**
-     * If execution reaches here, means we don't have any more optional step (like namespace and derivation)
-     * So we should start connecting wallet.
-     */
-
-    if (!isStateOnNamespace(connectState)) {
-      // Unreachable code.
-      throw new Error(
-        'Something went wrong on handling namespace. Please retry.'
-      );
-    }
-
-    const type = connectState.namespace.providerType;
-    const namespaces = selectedNamespaces.map((namespace) => ({
-      namespace,
-    }));
-
-    return await runConnect(type, namespaces);
-  };
-
-  const handleDerivationPath = async (
-    derivationPath: string
-  ): Promise<Result> => {
-    if (!derivationPath) {
-      throw new Error(
-        "Derivation path is empty. Please make sure you've filled the field correctly."
-      );
-    }
-
-    if (!isStateOnDerivationPathStep(connectState)) {
-      throw new Error(
-        'It seems you are filling derivation path without setting namespace before doing that. Please retry to connect.'
-      );
-    }
-    const type = connectState.derivationPath.providerType;
-    const selectedNamespace = connectState.derivationPath.namespace;
-    const namespaces = [{ namespace: selectedNamespace, derivationPath }];
-
-    return await runConnect(type, namespaces);
-  };
-
-  const handleDisconnect = async (type: WalletType): Promise<Result> => {
-    const wallet = state(type);
-    if (wallet.connected) {
-      await disconnect(type);
-      return { status: ResultStatus.Disconnected };
-    }
-
-    return { status: ResultStatus.Noop };
-  };
-
-  return {
-    handleConnect,
-    handleDisconnect,
-    handleNamespace,
-    handleDerivationPath,
-    getState: () => connectState,
-    resetState: (section?: 'derivation') => {
-      if (section === 'derivation') {
-        dispatch({
-          type: 'resetDerivation',
-        });
-      } else {
-        dispatch({
-          type: 'reset',
-        });
-      }
-    },
-  };
-}

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -1,56 +0,0 @@
-import type { Namespace } from '@rango-dev/wallets-shared';
-
-export interface HandleConnectOptions {
-  // To have a switch between connect and disconnect when user is clicking on a button, this option can be helpful.
-  disconnectIfConnected?: boolean;
-}
-
-export interface NeedsNamespacesState {
-  providerType: string;
-  providerImage: string;
-  availableNamespaces?: Namespace[];
-  singleNamespace?: boolean;
-}
-
-export interface NeedsDerivationPathState {
-  providerType: string;
-  providerImage: string;
-  namespace: Namespace;
-}
-
-export enum ResultStatus {
-  Connected = 'connected',
-  Namespace = 'namespace',
-  DerivationPath = 'derivation-path',
-  Disconnected = 'disconnected',
-  DisconnectedUnhandled = 'disconnected-unhandled',
-  Noop = 'noop',
-}
-
-export type Result = { status: ResultStatus };
-
-// State types
-
-interface UpdateNamespaceAction {
-  type: 'needsNamespace';
-  payload: NeedsNamespacesState;
-}
-
-interface UpdateDerivationPathAction {
-  type: 'needsDerivationPath';
-  payload: NeedsDerivationPathState;
-}
-
-interface ResetAction {
-  type: 'reset';
-}
-
-interface ResetDerivationAction {
-  type: 'resetDerivation';
-}
-
-export type Actions =
-  | ResetAction
-  | ResetDerivationAction
-  | UpdateDerivationPathAction
-  | UpdateNamespaceAction;