@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/components/WalletStatefulConnect/ConnectStatus.tsx

@@ -0,0 +1,66 @@
+import type { ConnectStatusProps } from './ConnectStatus.types';
+
+import { i18n } from '@lingui/core';
+import {
+  Image,
+  MessageBox,
+  WalletImageContainer,
+  WalletState,
+} from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import React from 'react';
+
+import { getWalletConnectionStatus } from '../../utils/wallets';
+
+import { LogoContainer, Spinner } from './ConnectStatus.styles';
+
+export function ConnectStatus(props: ConnectStatusProps) {
+  // See `wallet` notes on its type definition
+  const { wallet, error } = props;
+  const { type, image } = wallet;
+  const { state, getWalletInfo } = useWallets();
+  const walletState = getWalletConnectionStatus(
+    getWalletInfo(type),
+    state(type)
+  );
+
+  if (walletState === WalletState.CONNECTED) {
+    return (
+      <MessageBox
+        type="success"
+        title={i18n.t('Wallet Connected')}
+        description={i18n.t(
+          'Your wallet is connected, you can use it to swap.'
+        )}
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <MessageBox
+        type="error"
+        title={i18n.t('Failed to Connect')}
+        description={
+          error || i18n.t('Your wallet is not connected. Please try again.')
+        }
+      />
+    );
+  }
+
+  return (
+    <MessageBox
+      type="loading"
+      title={i18n.t('Connecting to your wallet')}
+      description={i18n.t('Click connect in your wallet popup.')}
+      icon={
+        <LogoContainer>
+          <WalletImageContainer>
+            <Image src={image} size={45} />
+          </WalletImageContainer>
+          <Spinner />
+        </LogoContainer>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,11 @@
+export interface ConnectStatusProps {
+  /*
+   * We can not use `WalletInfoWithExtra` because the inside state will be stale in some cases.
+   * We should directly use `useWallets` to make sure we have a correct state.
+   */
+  wallet: {
+    type: string;
+    image: string;
+  };
+  error?: string;
+}

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

@@ -0,0 +1,24 @@
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { DerivationPath } from '@rango-dev/wallets-shared';
+
+import { namespaces } from '@rango-dev/wallets-shared';
+
+export const CUSTOM_DERIVATION_PATH: DerivationPath = {
+  id: 'custom',
+  label: 'Custom',
+  generateDerivationPath: (index: string) => index,
+};
+
+export function getDerivationPaths(
+  selectedNamespace?: Namespace
+): DerivationPath[] {
+  const selectedNamespaceDerivationPaths = selectedNamespace
+    ? namespaces[selectedNamespace]?.derivationPaths
+    : null;
+
+  const derivationPaths: DerivationPath[] = !!selectedNamespaceDerivationPaths
+    ? [...selectedNamespaceDerivationPaths, CUSTOM_DERIVATION_PATH]
+    : [];
+
+  return derivationPaths;
+}

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

@@ -0,0 +1,21 @@
+import { Button, styled, Typography } from '@rango-dev/ui';
+
+export const InputsContainer = styled('div', {
+  paddingTop: '$30',
+  paddingBottom: '$30',
+  zIndex: 10, // This property is added to solve inconsistency between Select child of this component and subsequent button
+});
+
+export const InputLabel = styled(Typography, {
+  paddingLeft: '$10',
+});
+
+export const derivationPathInputStyles = {
+  height: '$40',
+  backgroundColor: '$neutral200',
+  borderRadius: '$sm',
+};
+
+export const StyledButton = styled(Button, {
+  minHeight: '$40',
+});

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -0,0 +1,147 @@
+import type { PropTypes } from './DerivationPath.types';
+import type { DerivationPath } from '@rango-dev/wallets-shared';
+
+import { i18n } from '@lingui/core';
+import { Divider, Image, MessageBox, Select, TextField } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import {
+  CUSTOM_DERIVATION_PATH,
+  getDerivationPaths,
+} from './DerivationPath.helpers';
+import {
+  derivationPathInputStyles,
+  InputLabel,
+  InputsContainer,
+} from './DerivationPath.styles';
+import { StyledButton } from './Namespaces.styles';
+
+const DEFAULT_DERIVATION_PATH_INDEX = '0';
+
+export function DerivationPath(props: PropTypes) {
+  const { onConfirm } = props;
+  const {
+    namespace: selectedNamespace,
+    providerImage: image,
+    providerType: type,
+  } = props.value;
+
+  const [selectedDerivationPathId, setSelectedDerivationPathId] = useState<
+    string | null
+  >(null);
+  const [derivationPathIndex, setDerivationPathIndex] = useState(
+    DEFAULT_DERIVATION_PATH_INDEX
+  );
+
+  const isCustomOptionSelected =
+    selectedDerivationPathId === CUSTOM_DERIVATION_PATH.id;
+
+  const derivationPaths = getDerivationPaths(selectedNamespace);
+
+  const handleDerivationPathItemClick = ({ value }: { value: string }) => {
+    const selectedDerivationPath = derivationPaths?.find(
+      (derivationPath) => derivationPath.id === value
+    );
+
+    if (selectedDerivationPath) {
+      /*
+       * Custom mode accepts string, but other modes only accepts number,
+       * Here we are checking if user is on custom mode and trying to switch to another mode
+       * if it's an string we will keep it, if not we will reset the value to default
+       */
+      if (
+        selectedDerivationPathId === CUSTOM_DERIVATION_PATH.id &&
+        Number.isNaN(Number(derivationPathIndex))
+      ) {
+        setDerivationPathIndex(DEFAULT_DERIVATION_PATH_INDEX);
+      }
+
+      setSelectedDerivationPathId(selectedDerivationPath.id);
+    }
+  };
+
+  const handleConfirm = () => {
+    const selectedDerivationPath = derivationPaths.find(
+      (derivationPath) => derivationPath.id === selectedDerivationPathId
+    );
+    if (selectedDerivationPath) {
+      onConfirm(
+        selectedDerivationPath.generateDerivationPath(derivationPathIndex)
+      );
+    } else {
+      // Unreachable code
+      throw new Error('selectedDerivationPath can not be undefined');
+    }
+  };
+
+  useEffect(() => {
+    setSelectedDerivationPathId(
+      getDerivationPaths(selectedNamespace)[0]?.id || null
+    );
+  }, [selectedNamespace]);
+
+  return (
+    <>
+      <MessageBox
+        type="info"
+        title={i18n.t('Select Derivation Path')}
+        description={i18n.t({
+          id: 'In order to connect to {type}, you must first select a Derivation Path',
+          values: {
+            type,
+          },
+        })}
+        icon={<Image src={image} size={45} />}
+      />
+
+      <InputsContainer className="_derivation_path_inputs_container">
+        <InputLabel
+          variant="body"
+          size="xsmall"
+          color="$neutral600"
+          className="_derivation_path_input_label">
+          {i18n.t('Choose Derivation Path Template')}
+        </InputLabel>
+        <Select
+          id="widget-derivation-path-template-select"
+          value={selectedDerivationPathId || ''}
+          options={derivationPaths.map((derivationPath) => ({
+            value: derivationPath.id,
+            label: derivationPath.label,
+          }))}
+          variant="filled"
+          handleItemClick={handleDerivationPathItemClick}
+          styles={{ trigger: derivationPathInputStyles }}
+        />
+        <Divider size={20} />
+        <InputLabel
+          variant="body"
+          size="xsmall"
+          color="$neutral600"
+          className="_derivation_path_input_label">
+          {isCustomOptionSelected
+            ? i18n.t('Enter Path')
+            : i18n.t('Enter Index')}
+        </InputLabel>
+        <TextField
+          id="widget-derivation-path-template-input"
+          type={isCustomOptionSelected ? 'text' : 'number'}
+          variant="contained"
+          value={derivationPathIndex}
+          onChange={(event) => setDerivationPathIndex(event.target.value)}
+          style={derivationPathInputStyles}
+        />
+      </InputsContainer>
+
+      <StyledButton
+        id="widget-derivation-path-confirm-btn"
+        type="primary"
+        onClick={handleConfirm}
+        disabled={
+          !derivationPaths || !selectedDerivationPathId || !derivationPathIndex
+        }>
+        {i18n.t('Confirm')}
+      </StyledButton>
+    </>
+  );
+}

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

@@ -0,0 +1,6 @@
+import type { NeedsDerivationPathState } from '../../hooks/useStatefulConnect';
+
+export interface PropTypes {
+  value: NeedsDerivationPathState;
+  onConfirm: (path: string) => void;
+}

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

@@ -0,0 +1,193 @@
+import type { PropTypes } from './Detached.types';
+import type { LegacyNamespaceMeta } from '@rango-dev/wallets-core/legacy';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Button,
+  Divider,
+  Image,
+  MessageBox,
+  WalletImageContainer,
+} 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 {
+    value,
+    selectedNamespaces,
+    onConfirm,
+    confirmText = i18n.t('Done'),
+    onDisconnectWallet,
+    navigateToDerivationPath,
+  } = props;
+  const { targetWallet } = value;
+
+  const { connect, disconnect, state } = useWallets();
+  const walletType = targetWallet.type;
+  const walletState = state(walletType);
+  const namespacesProperty = targetWallet.properties?.find(
+    (property) => property.name === 'namespaces'
+  );
+  const derivationPathProperty = targetWallet.properties?.find(
+    (property) => property.name === 'derivationPath'
+  );
+
+  const singleSelection = namespacesProperty?.value.selection === 'single';
+
+  const handleConnectNamespace = async (
+    namespace: Namespace,
+    options?: {
+      derivationPath?: string;
+      shouldAskForDerivationPath?: boolean;
+    }
+  ) => {
+    if (singleSelection) {
+      // For single-selection wallets, disconnect all namespaces before connecting a new namespace
+      await disconnect(walletType);
+    }
+    if (derivationPathProperty && options?.shouldAskForDerivationPath) {
+      navigateToDerivationPath(namespace);
+    } else {
+      await connect(walletType, [
+        {
+          namespace: namespace,
+          network: '',
+          derivationPath: options?.derivationPath ?? undefined,
+        },
+      ]);
+    }
+  };
+
+  const handleDisconnectNamespace = async (namespace: Namespace) => {
+    await disconnect(walletType, [namespace]);
+  };
+
+  const renderNamespaceListHeader = () => {
+    if (!!singleSelection) {
+      return (
+        <>
+          <Divider
+            size={20}
+            className="_detached_namespace_list_header_alert_top_divider"
+          />
+          <Alert
+            id="widget-wallet-stateful-connect-alert"
+            variant="alarm"
+            type="info"
+            title={i18n.t(
+              'This wallet can only connect to one chain at a time.'
+            )}
+          />
+          <Divider
+            size={30}
+            className="_detached_namespace_list_header_alert_bottom_divider"
+          />
+        </>
+      );
+    }
+    return (
+      <>
+        <Divider
+          size={30}
+          className="_detached_namespace_list_header_button_top_divider"
+        />
+        <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>
+        <Divider
+          size={16}
+          className="_detached_namespace_list_header_button_bottom_divider"
+        />
+      </>
+    );
+  };
+
+  const renderNamespaceItem = (namespace: LegacyNamespaceMeta) => {
+    if (namespace.unsupported) {
+      return <NamespaceUnsupportedItem namespace={namespace} />;
+    }
+
+    const selectedNamespace = selectedNamespaces?.find(
+      (selectedNamespaceItem) =>
+        selectedNamespaceItem.namespace === namespace.value
+    );
+
+    const namespaceState = walletState.namespaces?.get(namespace.value);
+
+    if (!namespaceState) {
+      throw new Error(`State for ${namespace.value} was not found!`);
+    }
+
+    const disabled = singleSelection && walletState.connecting; // If wallet is configured as single selection, button should be disabled while a namespace is already in connecting state
+
+    return (
+      <NamespaceDetachedItem
+        namespace={namespace}
+        initialConnect={!!selectedNamespace}
+        disabled={disabled}
+        state={namespaceState}
+        handleConnect={async (options) =>
+          handleConnectNamespace(namespace.value, {
+            derivationPath: selectedNamespace?.derivationPath,
+            shouldAskForDerivationPath: options?.shouldAskForDerivationPath,
+          })
+        }
+        handleDisconnect={async () =>
+          handleDisconnectNamespace(namespace.value)
+        }
+      />
+    );
+  };
+
+  return (
+    <>
+      <MessageBox
+        type="info"
+        title={i18n.t(`Connect {wallet}`, {
+          wallet: targetWallet.type,
+        })}
+        description={i18n.t(
+          'This wallet supports multiple chains. Choose which chains you’d like to connect or disconnect.'
+        )}
+        icon={
+          <WalletImageContainer>
+            <Image src={targetWallet.image} size={45} />
+          </WalletImageContainer>
+        }
+      />
+      {renderNamespaceListHeader()}
+      <NamespaceList id="widget-detached-namespace-list">
+        {targetWallet.needsNamespace?.data.map((namespace, index, array) => (
+          <React.Fragment key={namespace.id}>
+            {renderNamespaceItem(namespace)}
+            {index !== array.length - 1 && <Divider size={10} />}
+          </React.Fragment>
+        ))}
+      </NamespaceList>
+      <Divider size={20} />
+      <StyledButton
+        id="widget-name-space-confirm-btn"
+        type="primary"
+        onClick={onConfirm}>
+        {confirmText}
+      </StyledButton>
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+
+export interface PropTypes {
+  value: NeedsNamespacesState;
+  onConfirm: () => void;
+  confirmText?: string;
+  onDisconnectWallet: () => void;
+  selectedNamespaces:
+    | { namespace: Namespace; derivationPath?: string }[]
+    | null;
+  navigateToDerivationPath: (selectedNamespace: Namespace) => void;
+}

package/src/components/WalletStatefulConnect/ExperimentalChain.tsx

@@ -0,0 +1,39 @@
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+interface PropTypes {
+  displayName?: string;
+  onConfirm: () => void;
+  id: string;
+}
+
+export function ExperimentalChain(props: PropTypes) {
+  const { displayName, onConfirm, id } = props;
+
+  return (
+    <MessageBox
+      id={id}
+      title={i18n.t({
+        id: 'Add {blockchainDisplayName} Chain',
+        values: { blockchainDisplayName: displayName },
+      })}
+      type="warning"
+      description={i18n.t({
+        id: 'Would you like to add the {blockchainDisplayName} experimental chain to your wallet?',
+        values: { blockchainDisplayName: displayName },
+      })}>
+      <Divider size={18} />
+      <Divider size={32} />
+      <Button
+        id="widget-experimental-chain-confirm-btn"
+        onClick={onConfirm}
+        variant="outlined"
+        type="primary"
+        fullWidth
+        size="large">
+        {i18n.t('Confirm')}
+      </Button>
+    </MessageBox>
+  );
+}

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

@@ -0,0 +1,53 @@
+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: 'Please approve the experimental chain pop-up in your wallet.',
+          values: { blockchainDisplayName },
+        }),
+      };
+    case 'completed':
+      return {
+        type: 'success',
+        title: i18n.t({
+          id: '{blockchainDisplayName} Chain Added',
+          values: { blockchainDisplayName },
+        }),
+        description: i18n.t({
+          id: 'The {blockchainDisplayName} chain has been successfully added to your wallet.',
+          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

@@ -0,0 +1,36 @@
+import type { PropTypes } from './ExperimentalChainStatus.types';
+
+import { Image, MessageBox } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  LogoContainer,
+  Spinner,
+  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

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