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

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts

@@ -0,0 +1,348 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { MOST_USED_BLOCKCHAINS } from './usePrepareBlockchainList.constants';
+import {
+  generateSortByPreferredBlockchainsFor,
+  prepare,
+  sortByMostUsedBlockchains,
+} from './usePrepareBlockchainList.helpers';
+import { sampleBlockchains } from './usePrepareBlockchainList.mock';
+
+describe('usePrepareBlockchainList', () => {
+  let sample: BlockchainMeta[] = [];
+
+  beforeEach(() => {
+    sample = JSON.parse(JSON.stringify(sampleBlockchains));
+  });
+
+  it('should sort blockchains by most used ones.', () => {
+    const sortedBlockchainsList = sample.sort(sortByMostUsedBlockchains);
+
+    const mostUsedCount = MOST_USED_BLOCKCHAINS.length;
+    const expected = MOST_USED_BLOCKCHAINS;
+    const received = sortedBlockchainsList
+      .map((blockchain) => blockchain.name)
+      .slice(0, mostUsedCount);
+
+    expect(expected).toEqual(received);
+  });
+
+  it('should sort blockchains by user preferences', () => {
+    const preferredBlockchains = ['UMEE', 'BANDCHAIN', 'LINEA'];
+    const sortedBlockchainsList = sample.sort(
+      generateSortByPreferredBlockchainsFor(preferredBlockchains)
+    );
+
+    const expected = [
+      'UMEE',
+      'BANDCHAIN',
+      'LINEA',
+      'ETH',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'TRON',
+      'BTC',
+      'COSMOS',
+      'OSMOSIS',
+      'NEUTRON',
+      'NOBLE',
+      'SOLANA',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+    const received = sortedBlockchainsList.map((blockchain) => blockchain.name);
+
+    expect(expected).toEqual(received);
+  });
+
+  it('should prepare the list by most used and user preferences', () => {
+    const listLimit = 10;
+    const preferredBlockchains = ['BTC', 'SOLANA', 'COSMOS', 'ETH'];
+    const expected = [
+      'BTC',
+      'SOLANA',
+      'ETH',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'LINEA',
+      'TRON',
+      'NEUTRON',
+      'NOBLE',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'BANDCHAIN',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+    const received = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    const receivedListNames = received.list.map(
+      (blockchain) => blockchain.name
+    );
+    const receivedMoreNames = received.more.map(
+      (blockchain) => blockchain.name
+    );
+
+    expect(received.list).toHaveLength(listLimit);
+    expect(received.more).toHaveLength(expected.length - listLimit);
+    expect(expected).toEqual([...receivedListNames, ...receivedMoreNames]);
+
+    // Check duplication
+    receivedListNames.forEach((listName) => {
+      expect(receivedMoreNames).not.toContain(listName);
+    });
+
+    // Check preferred blockchains to be on the main list
+    preferredBlockchains.forEach((blockchain) => {
+      expect(receivedListNames).toContain(blockchain);
+    });
+  });
+
+  it('should prepare the list correctly if user has a long list of preferences ', () => {
+    const listLimit = 10;
+    const preferredBlockchains = [
+      'ETH',
+      'BTC',
+      'SOLANA',
+      'CRYPTO_ORG',
+      'TRON',
+      'BOBA_AVALANCHE',
+      'AKASH',
+      'LUMNETWORK',
+      'KONSTELLATION',
+      'BANDCHAIN',
+      'INJECTIVE',
+    ];
+    const expected = [
+      'ETH',
+      'BTC',
+      'SOLANA',
+      'CRYPTO_ORG',
+      'TRON',
+      'BOBA_AVALANCHE',
+      'AKASH',
+      'LUMNETWORK',
+      'KONSTELLATION',
+      'BANDCHAIN',
+      'INJECTIVE',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'LINEA',
+      'NEUTRON',
+      'NOBLE',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CHIHUAHUA',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'SECRET',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+    ];
+    const received = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    expect(expected).toEqual([
+      ...received.list.map((blockchain) => blockchain.name),
+      ...received.more.map((blockchain) => blockchain.name),
+    ]);
+  });
+
+  it('Last item of the main list should be moved to front if it selected again.', () => {
+    const listLimit = 10;
+    const preferredBlockchains = ['AVAX_CCHAIN', 'BTC'];
+    const expected = [
+      'AVAX_CCHAIN',
+      'BTC',
+      'ETH',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'POLYGONZK',
+      'LINEA',
+      'TRON',
+      'NEUTRON',
+      'NOBLE',
+      'SOLANA',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'BANDCHAIN',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+
+    const output = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    const received = [
+      ...output.list.map((blockchain) => blockchain.name),
+      ...output.more.map((blockchain) => blockchain.name),
+    ];
+
+    expect(expected).toEqual(received);
+  });
+});

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts

@@ -0,0 +1,47 @@
+import type {
+  PrepareListOptions,
+  UsePrepareList,
+} from './usePrepareBlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { useEffect } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { isInVisibleList, prepare } from './usePrepareBlockchainList.helpers';
+
+/**
+ *
+ * UI needs some specific logics like limiting the list and sorting,
+ * this function is getting the raw blockchains list and return a list for showing in UI.
+ *
+ */
+export function usePrepareBlockchainList(
+  blockchains: BlockchainMeta[],
+  options?: PrepareListOptions
+): UsePrepareList {
+  const { preferredBlockchains, addPreferredBlockchain } = useAppStore();
+
+  useEffect(() => {
+    if (options?.selected) {
+      const output = prepare(blockchains, preferredBlockchains, options);
+
+      /**
+       * We only add a new blockchain to preferred when it's not in the main list
+       * In this way we can guarantee we will be able to regenerate the same list always.
+       * And also it helps us to avoid jumping for the last item of the main list (e.g. tenth item of our list).
+       */
+      if (!isInVisibleList(options.selected, output)) {
+        addPreferredBlockchain(options?.selected);
+      }
+    }
+  }, [options?.selected]);
+
+  const output = prepare(blockchains, preferredBlockchains, options);
+
+  return {
+    list: output.list,
+    more: output.more,
+    history: [],
+  };
+}

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts

@@ -0,0 +1,17 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PrepareListOptions {
+  limit?: number;
+  selected?: string;
+}
+
+export interface PrepareOutput {
+  list: BlockchainMeta[];
+  more: BlockchainMeta[];
+}
+
+export interface UsePrepareList {
+  list: PrepareOutput['list'];
+  more: PrepareOutput['more'];
+  history: string[];
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious(value: string) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef<string>();
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}

package/src/hooks/useScreenDetect.ts

@@ -0,0 +1,55 @@
+import { useLayoutEffect, useState } from 'react';
+
+/*
+ * mobile: screen <= 480
+ * tablet: screen > 480 and screen <= 768
+ * notebook: screen > 768 & screen <= 1024
+ * large: screen > 1024 & screen <= 1200
+ * extra large: screen > 1200
+ */
+
+const MIN_TABLET_WIDTH = 480;
+const MIN_NOTEBOOK_WIDTH = 768;
+const MIN_LARGE_SCREEN_WIDTH = 1024;
+const MIN_EXTRA_LARGE_SCREEN_WIDTH = 1200;
+
+const useScreenDetect = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
+  const [isNotebook, setIsNotebook] = useState(false);
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
+  const [isExtraLargeScreen, setIsExtraLargeScreen] = useState(false);
+
+  const handleResize = () => {
+    setIsMobile(window.innerWidth <= MIN_TABLET_WIDTH);
+    setIsTablet(
+      window.innerWidth > MIN_TABLET_WIDTH &&
+        window.innerWidth <= MIN_NOTEBOOK_WIDTH
+    );
+    setIsNotebook(
+      window.innerWidth > MIN_NOTEBOOK_WIDTH &&
+        window.innerWidth <= MIN_LARGE_SCREEN_WIDTH
+    );
+    setIsLargeScreen(
+      window.innerWidth > MIN_LARGE_SCREEN_WIDTH &&
+        window.innerWidth <= MIN_EXTRA_LARGE_SCREEN_WIDTH
+    );
+    setIsExtraLargeScreen(window.innerWidth > MIN_EXTRA_LARGE_SCREEN_WIDTH);
+  };
+
+  useLayoutEffect(() => {
+    handleResize(); // Initial check
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return {
+    isMobile,
+    isTablet,
+    isNotebook,
+    isLargeScreen,
+    isExtraLargeScreen,
+  };
+};
+
+export default useScreenDetect;

package/src/hooks/useSearchCustomTokens/index.ts

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

package/src/hooks/useSearchCustomTokens/types.ts

@@ -0,0 +1,9 @@
+import type { Token } from 'rango-sdk';
+
+export type UseSearchCustomTokens = {
+  fetch: (query: string, blockchain?: string) => void;
+  cancel: () => void;
+  loading: boolean;
+  tokens: Token[];
+  error: string | null;
+};

package/src/hooks/useSearchCustomTokens/useSearchCustomTokens.constants.ts

@@ -0,0 +1 @@
+export const DEBOUNCE_DELAY = 600;

package/src/hooks/useSearchCustomTokens/useSearchCustomTokens.ts

@@ -0,0 +1,81 @@
+import type { UseSearchCustomTokens } from './types';
+import type { Token } from 'rango-sdk';
+
+import { useCallback, useRef, useState } from 'react';
+
+import { httpService } from '../../services/httpService';
+import { useAppStore } from '../../store/AppStore';
+import { createAssetKey } from '../../store/utils/wallets';
+import { debounce } from '../../utils/common';
+
+import { DEBOUNCE_DELAY } from './useSearchCustomTokens.constants';
+
+export function useSearchCustomTokens(): UseSearchCustomTokens {
+  const blockchains = useAppStore().blockchains();
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const { customTokens } = useAppStore();
+  const [loading, setLoading] = useState(false);
+  const [tokens, setTokens] = useState<Token[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetch = async (query: string, blockchain?: string) => {
+    setError(null);
+    setLoading(true);
+    setTokens([]);
+
+    try {
+      const response = await httpService().searchCustomTokens(
+        { query, blockchain },
+        { signal: abortControllerRef.current?.signal }
+      );
+
+      const customTokensSet = new Set(
+        customTokens().map((token) => createAssetKey(token))
+      );
+      const blockchainsSet = new Set(
+        blockchains.map((blockchain) => blockchain.name)
+      );
+      const filteredTokens = response.tokens.filter(
+        (token) =>
+          blockchainsSet.has(token.blockchain) &&
+          !customTokensSet.has(createAssetKey(token))
+      );
+
+      setTokens(filteredTokens);
+      setLoading(false);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      setError(error instanceof Error ? error.message : 'something went wrong');
+      setTokens([]);
+      if (error?.name !== 'CanceledError') {
+        setLoading(false);
+      }
+    }
+  };
+
+  const debouncedFetch = useCallback(
+    debounce((query: string, blockchain?: string) => {
+      if (abortControllerRef.current?.signal.aborted) {
+        return;
+      }
+      void fetch(query, blockchain);
+    }, DEBOUNCE_DELAY),
+    [blockchains.length]
+  );
+
+  const cancel = () => {
+    abortControllerRef.current?.abort();
+  };
+  return {
+    fetch: (query: string, blockchain?: string) => {
+      abortControllerRef.current = new AbortController();
+      setTokens([]);
+      setLoading(true);
+      debouncedFetch(query, blockchain);
+    },
+    cancel,
+    loading,
+    tokens,
+    error,
+  };
+}

package/src/hooks/useStatefulConnect/index.ts

@@ -0,0 +1,10 @@
+export { useStatefulConnect } from './useStatefulConnect';
+export type { 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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,60 @@
+import type {
+  Actions,
+  NeedsDerivationPathState,
+  NeedsNamespacesState,
+} from './useStatefulConnect.types';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+
+export interface State {
+  status: 'init' | 'namespace' | 'derivationPath' | 'detached';
+  namespace: NeedsNamespacesState | null;
+  derivationPath: NeedsDerivationPathState | null;
+  selectedNamespaces:
+    | { namespace: Namespace; derivationPath?: string }[]
+    | null;
+}
+
+export const initState: State = {
+  status: 'init',
+  namespace: null,
+  derivationPath: null,
+  selectedNamespaces: 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 'detached':
+      return {
+        ...state,
+        status: 'detached',
+        namespace: { targetWallet: action.payload.targetWallet },
+        selectedNamespaces: action.payload.selectedNamespaces,
+      };
+    case 'reset':
+      return initState;
+    case 'resetDerivation':
+      if (state.namespace) {
+        return {
+          ...state,
+          derivationPath: null,
+          status: 'namespace',
+        };
+      }
+      return initState;
+    default:
+      throw new Error(`Action hasn't been defined.`);
+  }
+}