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

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@rango-dev/widget-embedded",
+  "version": "0.0.0-experimental-936229e8-20251208",
+  "license": "MIT",
+  "type": "module",
+  "source": "./src/index.ts",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "scripts": {
+    "build": "node ../../scripts/build/command.mjs --path widget/embedded",
+    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
+    "clean": "rimraf dist",
+    "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
+    "lint": "eslint \"**/*.{ts,tsx}\"",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@lingui/core": "4.2.1",
+    "@lingui/react": "4.2.1",
+    "@rango-dev/logging-core": "^0.12.1",
+    "@rango-dev/provider-all": "^0.0.0-experimental-936229e8-20251208",
+    "@rango-dev/queue-manager-core": "^0.0.0-experimental-936229e8-20251208",
+    "@rango-dev/queue-manager-rango-preset": "^0.0.0-experimental-936229e8-20251208",
+    "@rango-dev/queue-manager-react": "^0.0.0-experimental-936229e8-20251208",
+    "@rango-dev/signer-solana": "^0.46.1",
+    "@rango-dev/ui": "^0.0.0-experimental-936229e8-20251208",
+    "@rango-dev/wallets-core": "^0.0.0-experimental-936229e8-20251208",
+    "@rango-dev/wallets-react": "^0.0.0-experimental-936229e8-20251208",
+    "@rango-dev/wallets-shared": "^0.0.0-experimental-936229e8-20251208",
+    "bignumber.js": "^9.1.1",
+    "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.7",
+    "ethers": "^6.13.2",
+    "immer": "^9.0.19",
+    "mitt": "^3.0.0",
+    "rango-sdk": "^0.1.70",
+    "rango-types": "^0.1.89",
+    "react-i18next": "^12.2.0",
+    "react-router-dom": "^6.8.0",
+    "values.js": "2.1.1",
+    "zustand": "^4.3.2"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1,4 @@
+# @rango-dev/widget-embedded
+
+Rango Embedded Widget
+

package/src/QueueManager.tsx

@@ -0,0 +1,120 @@
+import type {
+  SwapQueueContext,
+  TargetNamespace,
+} from '@rango-dev/queue-manager-rango-preset';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type { PropsWithChildren } from 'react';
+
+import {
+  checkWaitingForNetworkChange,
+  makeQueueDefinition,
+} from '@rango-dev/queue-manager-rango-preset';
+import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
+import { useWallets } from '@rango-dev/wallets-react';
+import { convertEvmBlockchainMetaToEvmChainInfo } from '@rango-dev/wallets-shared';
+import { isEvmBlockchain } from 'rango-types';
+import React, { useMemo } from 'react';
+
+import { eventEmitter } from './services/eventEmitter';
+import { useAppStore } from './store/AppStore';
+import { useUiStore } from './store/ui';
+import { getConfig } from './utils/configs';
+import { walletAndSupportedChainsNames } from './utils/wallets';
+
+function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
+  const {
+    providers,
+    getSigners,
+    state,
+    connect,
+    canSwitchNetworkTo,
+    getWalletInfo,
+    hubProvider,
+  } = useWallets();
+
+  const swapQueueDef = useMemo(() => {
+    return makeQueueDefinition({
+      API_KEY: props.apiKey || getConfig('API_KEY'),
+      BASE_URL: getConfig('BASE_URL'),
+      emitter: {
+        emit: eventEmitter.emit,
+      },
+    });
+  }, [props.apiKey]);
+
+  const { blockchains, connectedWallets } = useAppStore();
+  const blockchainsList = blockchains();
+
+  const wallets = {
+    blockchains: connectedWallets.map((wallet) => ({
+      accounts: [wallet],
+      name: wallet.chain,
+    })),
+  };
+
+  const switchNetwork = async (
+    wallet: WalletType,
+    namespace: TargetNamespace
+  ) => {
+    if (!canSwitchNetworkTo(wallet, namespace.network, namespace)) {
+      return undefined;
+    }
+    const result = await connect(wallet, [namespace]);
+
+    return result;
+  };
+
+  const isMobileWallet = (walletType: WalletType): boolean =>
+    !!getWalletInfo(walletType).mobileWallet;
+
+  // TODO: this code copy & pasted from rango, should be refactored.
+  const allBlockchains = blockchainsList
+    .filter((blockchain) => blockchain.enabled)
+    .reduce(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (blockchainsObj: any, blockchain) => (
+        (blockchainsObj[blockchain.name] = blockchain), blockchainsObj
+      ),
+      {}
+    );
+  const evmBasedChains = blockchainsList.filter(isEvmBlockchain);
+  const getSupportedChainNames = (type: WalletType) => {
+    const { supportedChains } = getWalletInfo(type);
+    return walletAndSupportedChainsNames(supportedChains);
+  };
+  const allProviders = providers();
+
+  const context: SwapQueueContext = {
+    meta: {
+      blockchains: allBlockchains,
+      evmBasedChains: evmBasedChains,
+      evmNetworkChainInfo:
+        convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
+      getSupportedChainNames,
+    },
+    getSigners,
+    wallets,
+    providers: allProviders,
+    switchNetwork,
+    canSwitchNetworkTo,
+    state,
+    isMobileWallet,
+    hubProvider,
+  };
+
+  const isActiveTab = useUiStore.use.isActiveTab();
+
+  return (
+    <ManagerProvider
+      queuesDefs={[swapQueueDef]}
+      context={context}
+      onPersistedDataLoaded={(manager) => {
+        checkWaitingForNetworkChange(manager);
+      }}
+      isPaused={!isActiveTab}>
+      {props.children}
+    </ManagerProvider>
+  );
+}
+
+export default QueueManager;

package/src/components/AppRouter.tsx

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from 'react';
+
+import React, { Fragment } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router';
+
+export function AppRouter({ children }: PropsWithChildren) {
+  const isRouterInContext = useInRouterContext();
+  const Router = isRouterInContext ? Fragment : MemoryRouter;
+
+  return <Router>{children}</Router>;
+}

package/src/components/AppRoutes.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { useRoutes } from 'react-router-dom';
+
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
+import { useSyncUrlAndStore } from '../hooks/useSyncUrlAndStore';
+import { AddCustomTokenPage } from '../pages/AddCustomTokenPage';
+import { ConfirmSwapPage } from '../pages/ConfirmSwapPage';
+import { CustomTokensPage } from '../pages/CustomTokensPage';
+import { HistoryPage } from '../pages/HistoryPage';
+import { Home } from '../pages/Home';
+import { LanguagePage } from '../pages/LanguagePage';
+import { LiquiditySourcePage } from '../pages/LiquiditySourcePage';
+import { RoutesPage } from '../pages/Routes';
+import { SelectBlockchainPage } from '../pages/SelectBlockchainPage';
+import { SelectSwapItemsPage } from '../pages/SelectSwapItemPage/index';
+import { SettingsPage } from '../pages/SettingsPage';
+import { SwapDetailsPage } from '../pages/SwapDetailsPage';
+import { WalletsPage } from '../pages/WalletsPage';
+
+export function AppRoutes() {
+  /**
+   * The configuration of the widget should initially be applied to the widget state.
+   * If search parameters exist in the URL,
+   * they should be applied later and take precedence over the widget configuration.
+   * To achieve this, it is crucial to execute these hooks in the correct sequence.
+   */
+  useSyncStoresWithConfig();
+  useSyncUrlAndStore();
+
+  return useRoutes([
+    {
+      path: navigationRoutes.home,
+      element: <Home />,
+    },
+    {
+      path: navigationRoutes.routes,
+      element: <RoutesPage />,
+    },
+    {
+      path: navigationRoutes.fromSwap,
+      children: [
+        {
+          index: true,
+          element: <SelectSwapItemsPage type="source" />,
+        },
+        {
+          path: navigationRoutes.blockchains,
+          element: <SelectBlockchainPage type="source" />,
+        },
+      ],
+    },
+    {
+      path: navigationRoutes.toSwap,
+      children: [
+        {
+          index: true,
+          element: <SelectSwapItemsPage type="destination" />,
+        },
+        {
+          path: navigationRoutes.blockchains,
+          element: <SelectBlockchainPage type="destination" />,
+        },
+      ],
+    },
+    {
+      path: navigationRoutes.settings,
+      children: [
+        {
+          index: true,
+          element: <SettingsPage />,
+        },
+        {
+          path: navigationRoutes.languages,
+          element: <LanguagePage />,
+        },
+        {
+          path: navigationRoutes.exchanges,
+          element: <LiquiditySourcePage sourceType="Exchanges" />,
+        },
+        {
+          path: navigationRoutes.bridges,
+          element: <LiquiditySourcePage sourceType="Bridges" />,
+        },
+        {
+          path: navigationRoutes.customTokens,
+          children: [
+            {
+              index: true,
+              element: <CustomTokensPage />,
+            },
+            {
+              path: navigationRoutes.addCustomTokens,
+              children: [
+                {
+                  index: true,
+                  element: <AddCustomTokenPage />,
+                },
+                {
+                  path: navigationRoutes.blockchains,
+                  element: (
+                    <SelectBlockchainPage
+                      hideCategory={true}
+                      type="custom-token"
+                    />
+                  ),
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+
+    {
+      path: navigationRoutes.swaps,
+      children: [
+        {
+          index: true,
+          element: <HistoryPage />,
+        },
+        {
+          path: navigationRoutes.swapDetails,
+          element: <SwapDetailsPage />,
+        },
+      ],
+    },
+    {
+      path: navigationRoutes.wallets,
+      element: <WalletsPage />,
+    },
+    {
+      path: navigationRoutes.confirmSwap,
+      element: <ConfirmSwapPage />,
+    },
+  ]);
+}

package/src/components/BlockchainList/BlockchainList.helpers.ts

@@ -0,0 +1,18 @@
+import { type BlockchainMeta } from 'rango-sdk';
+
+import { containsText, isBlockchainTypeInCategory } from '../../utils/common';
+
+export const filterBlockchains = (
+  list: BlockchainMeta[],
+  searchedFor: string,
+  blockchainCategory: string
+) =>
+  list
+    .filter((blockchain) =>
+      isBlockchainTypeInCategory(blockchain.type, blockchainCategory)
+    )
+    .filter(
+      (blockchain) =>
+        containsText(blockchain.name, searchedFor) ||
+        containsText(blockchain.displayName, searchedFor)
+    );

package/src/components/BlockchainList/BlockchainList.styles.ts

@@ -0,0 +1,22 @@
+import { ImageContainer, styled } from '@rango-dev/ui';
+
+import { ScrollableArea } from '../Layout';
+
+export const BlockchainListContainer = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  height: '100%',
+  justifyContent: 'center',
+});
+
+export const List = styled(ScrollableArea, {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+
+  [`& ${ImageContainer}`]: {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+});

package/src/components/BlockchainList/BlockchainList.tsx

@@ -0,0 +1,86 @@
+import type { PropTypes } from './BlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Divider,
+  Image,
+  ListItemButton,
+  NotFound,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+
+import { filterBlockchains } from './BlockchainList.helpers';
+import { BlockchainListContainer, List } from './BlockchainList.styles';
+import { LoadingBlockchainList } from './LoadingBlockchainList';
+
+export function BlockchainList(props: PropTypes) {
+  const {
+    list,
+    searchedFor,
+    onChange,
+    blockchainCategory,
+    showTitle = true,
+  } = props;
+  const [blockchains, setBlockchains] = useState<BlockchainMeta[]>(list);
+  const { fetchStatus } = useAppStore();
+
+  useEffect(() => {
+    setBlockchains([
+      ...filterBlockchains(list, searchedFor, blockchainCategory),
+    ]);
+  }, [list, searchedFor, blockchainCategory]);
+
+  const renderList = () => {
+    if (!blockchains.length && !!searchedFor) {
+      return (
+        <NotFound
+          title={i18n.t('No results found')}
+          description={i18n.t('Try using different keywords')}
+        />
+      );
+    }
+    return (
+      <List
+        as="ul"
+        key={`${blockchainCategory}-${searchedFor}`}
+        id="widget-blockchain-list">
+        {blockchains.map((item) => (
+          <ListItemButton
+            key={`${item.name}-${item.chainId}`}
+            className={`widget-blockchain-list-item-btn`}
+            hasDivider
+            onClick={() => onChange(item)}
+            start={<Image src={item.logo} size={30} />}
+            title={
+              <Typography variant="title" size="medium">
+                {item.displayName}
+              </Typography>
+            }
+            id={item.name}
+          />
+        ))}
+      </List>
+    );
+  };
+
+  return (
+    <>
+      {showTitle && (
+        <>
+          <Typography variant="label" size="large">
+            {i18n.t('Select Chain')}
+          </Typography>
+          <Divider size={4} />
+        </>
+      )}
+      <BlockchainListContainer>
+        {fetchStatus === 'loading' && <LoadingBlockchainList />}
+        {fetchStatus === 'success' && renderList()}
+      </BlockchainListContainer>
+    </>
+  );
+}

package/src/components/BlockchainList/BlockchainList.types.ts

@@ -0,0 +1,9 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PropTypes {
+  list: BlockchainMeta[];
+  searchedFor: string;
+  blockchainCategory: string;
+  onChange: (blockchain: BlockchainMeta) => void;
+  showTitle?: boolean;
+}

package/src/components/BlockchainList/LoadingBlockchainList.tsx

@@ -0,0 +1,20 @@
+import { ListItem, Skeleton } from '@rango-dev/ui';
+import React from 'react';
+
+import { List } from './BlockchainList.styles';
+
+const ITEM_SKELETON_COUNT = 20;
+export function LoadingBlockchainList() {
+  return (
+    <List id="widget-blockchain-loading-list" as="ul">
+      {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
+        <ListItem
+          key={e}
+          hasDivider
+          start={<Skeleton variant="circular" width={35} height={35} />}
+          title={<Skeleton variant="text" size="large" width={90} />}
+        />
+      ))}
+    </List>
+  );
+}

package/src/components/BlockchainList/index.ts

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

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.styles.ts

@@ -0,0 +1,49 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const InputContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: '$40',
+  padding: '$4 $10',
+  borderRadius: '$sm',
+  cursor: 'pointer',
+  alignItems: 'center',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral500',
+    },
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'default',
+        '&:hover': {
+          borderColor: '$neutral300',
+          '& svg': {
+            color: '$neutral700',
+          },
+        },
+      },
+    },
+  },
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  '.title_typography': {
+    textTransform: 'capitalize',
+  },
+});
+
+export const FlexContainer = styled('div', {
+  display: 'flex',
+});

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.tsx

@@ -0,0 +1,48 @@
+import type { PropTypes } from './BlockchainSelectorButton.types';
+
+import { ChevronRightIcon, Divider, Image, Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  Container,
+  FlexContainer,
+  InputContainer,
+} from './BlockchainSelectorButton.styles';
+
+export function BlockchainSelectorButton(props: PropTypes) {
+  const { onClick, value, title, hasLogo, placeholder, disabled } = props;
+
+  return (
+    <Container>
+      <Typography size="large" variant="label">
+        {title}
+      </Typography>
+      <Divider size={10} />
+      <InputContainer
+        onClick={disabled ? undefined : onClick}
+        disabled={disabled}
+        id="widget-blockchain-selector-container">
+        <FlexContainer>
+          {hasLogo && (
+            <>
+              <Image
+                src={value?.logo}
+                size={16}
+                useAsPlaceholder={!value?.logo}
+                type="circular"
+              />
+              <Divider size={4} direction="horizontal" />
+            </>
+          )}
+          <Typography
+            className="title_typography"
+            size="medium"
+            variant="label">
+            {value?.name || placeholder}
+          </Typography>
+        </FlexContainer>
+        <ChevronRightIcon size={12} color="black" />
+      </InputContainer>
+    </Container>
+  );
+}

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.types.ts

@@ -0,0 +1,11 @@
+export interface PropTypes {
+  onClick: () => void;
+  value?: {
+    name: string;
+    logo: string;
+  };
+  title: string;
+  placeholder: string;
+  hasLogo?: boolean;
+  disabled?: boolean;
+}

package/src/components/BlockchainSelectorButton/index.ts

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

package/src/components/BlockchainsSection/BlockchainsSection.styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '@rango-dev/ui';
+
+export const Blockchains = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+});