@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/components/Layout.tsx

@@ -1,105 +0,0 @@
-import React, { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { HeaderLayout } from '@rango-dev/ui';
-import { useWallets } from '@rango-dev/wallets-react';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useUiStore } from '../store/ui';
-import { AppRoutes } from './AppRoutes';
-import { fetchingBalanceSelector, useWalletsStore } from '../store/wallets';
-import {
-  calculateWalletUsdValue,
-  getSelectableWallets,
-  tokensAreEqual,
-} from '../utils/wallets';
-import { removeDuplicateFrom } from '../utils/common';
-import { WidgetConfig } from '../types';
-import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
-import { useSettingsStore } from '../store/settings';
-
-export type LayoutProps = {
-  config?: WidgetConfig;
-};
-
-export function Layout({ config }: LayoutProps) {
-  const navigate = useNavigate();
-  const { connectedWallets, selectedWallets } = useWalletsStore();
-  const { getWalletInfo } = useWallets();
-  const connectedWalletsImages = removeDuplicateFrom(
-    getSelectableWallets(connectedWallets, selectedWallets, getWalletInfo).map(
-      (w) => w.image
-    )
-  );
-  const { blockchains, tokens } = useMetaStore.use.meta();
-  const setFromChain = useBestRouteStore.use.setFromChain();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToChain = useBestRouteStore.use.setToChain();
-  const setToToken = useBestRouteStore.use.setToToken();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
-  const setAffiliateRef = useSettingsStore.use.setAffiliateRef();
-  const setAffiliatePercent = useSettingsStore.use.setAffiliatePercent();
-  const setAffiliateWallets = useSettingsStore.use.setAffiliateWallets();
-
-  const totalBalance = calculateWalletUsdValue(connectedWallets);
-  const connectWalletsButtonDisabled =
-    useUiStore.use.connectWalletsButtonDisabled();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
-
-  useEffect(() => {
-    if (loadingMetaStatus === 'success') {
-      const chain = blockchains.find(
-        (chain) => chain.name === config?.to?.blockchain
-      );
-      const token = tokens.find((t) =>
-        tokensAreEqual(t, config?.to?.token || null)
-      );
-      setToChain(chain || null);
-      setToToken(token || null);
-    }
-  }, [config?.to?.token, config?.to?.blockchain, loadingMetaStatus]);
-
-  useEffect(() => {
-    setInputAmount(config?.amount?.toString() || '');
-  }, [config?.amount]);
-
-  useEffect(() => {
-    if (loadingMetaStatus === 'success') {
-      const chain = blockchains.find(
-        (chain) => chain.name === config?.from?.blockchain
-      );
-      const token = tokens.find((t) =>
-        tokensAreEqual(t, config?.from?.token || null)
-      );
-
-      setFromChain(chain || null);
-      setFromToken(token || null);
-    }
-  }, [config?.from?.token, config?.from?.blockchain, loadingMetaStatus]);
-
-  useEffect(() => {
-    setAffiliateRef(config?.affiliate?.ref ?? null);
-    setAffiliatePercent(config?.affiliate?.percent ?? null);
-    setAffiliateWallets(config?.affiliate?.wallets ?? null);
-  }, [
-    config?.affiliate?.ref,
-    config?.affiliate?.percent,
-    config?.affiliate?.wallets,
-  ]);
-
-  return (
-    <>
-      <HeaderLayout
-        loadingStatus={loadingMetaStatus}
-        connectedWalletsImages={connectedWalletsImages}
-        connectedWallets={connectedWallets}
-        totalBalance={totalBalance}
-        fetchingBalance={fetchingBalance}
-        onClick={() => {
-          if (!connectWalletsButtonDisabled) navigate(navigationRoutes.wallets);
-        }}>
-        <AppRoutes config={config} />
-      </HeaderLayout>
-    </>
-  );
-}

package/src/pages/LiquiditySourcesPage.tsx

@@ -1,63 +0,0 @@
-import { LiquiditySourcesSelector } from '@rango-dev/ui';
-import React from 'react';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useMetaStore } from '../store/meta';
-import { useSettingsStore } from '../store/settings';
-import { removeDuplicateFrom } from '../utils/common';
-interface PropTypes {
-  supportedSwappers?: string[];
-}
-export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
-  const swappers = useMetaStore.use.meta().swappers;
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
-  const disabledLiquiditySources =
-    useSettingsStore.use.disabledLiquiditySources();
-  const toggleAllLiquiditySources =
-    useSettingsStore.use.toggleAllLiquiditySources();
-
-  const { navigateBackFrom } = useNavigateBack();
-
-  const uniqueSwappersGroups: Array<{
-    title: string;
-    logo: string;
-    type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
-    selected: boolean;
-  }> = [];
-  removeDuplicateFrom(swappers.map((s) => s.swapperGroup))
-    .map((swapperGroup) => {
-      return swappers.find((s) => s.swapperGroup === swapperGroup);
-    })
-    .find((s) => {
-      if (s) {
-        for (const type of s.types) {
-          uniqueSwappersGroups.push({
-            title: s.swapperGroup,
-            logo: s.logo,
-            type,
-            selected: !disabledLiquiditySources.includes(s.swapperGroup),
-          });
-        }
-      }
-    });
-
-  return (
-    <LiquiditySourcesSelector
-      toggleAll={toggleAllLiquiditySources}
-      list={
-        supportedSwappers
-          ? uniqueSwappersGroups.filter(
-              (item) =>
-                supportedSwappers.filter((s) => s === item.title).length > 0
-            )
-          : uniqueSwappersGroups
-      }
-      onChange={(liquiditySource) =>
-        toggleLiquiditySource(liquiditySource.title)
-      }
-      onBack={navigateBackFrom.bind(null, navigationRoutes.liquiditySources)}
-      loadingStatus={loadingMetaStatus}
-    />
-  );
-}

package/src/pages/SelectChainPage.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { BlockchainSelector } from '@rango-dev/ui';
-import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
-import { useNavigateBack } from '../hooks/useNavigateBack';
-import { navigationRoutes } from '../constants/navigationRoutes';
-
-interface PropTypes {
-  type: 'from' | 'to';
-  supportedChains?: string[];
-}
-
-export function SelectChainPage(props: PropTypes) {
-  const { type, supportedChains } = props;
-  const blockchains = supportedChains
-    ? useMetaStore.use
-        .meta()
-        .blockchains.filter((chain) => supportedChains.includes(chain.name))
-    : useMetaStore.use.meta().blockchains;
-  const loadingStatus = useMetaStore.use.loadingStatus();
-  const fromChain = useBestRouteStore.use.fromChain();
-  const toChain = useBestRouteStore.use.toChain();
-  const setFromChain = useBestRouteStore.use.setFromChain();
-  const setToChain = useBestRouteStore.use.setToChain();
-
-  const { navigateBackFrom } = useNavigateBack();
-
-  return (
-    <BlockchainSelector
-      type={type === 'from' ? 'Source' : 'Destination'}
-      list={blockchains}
-      selected={type === 'from' ? fromChain : toChain}
-      loadingStatus={loadingStatus}
-      onChange={(chain) => {
-        if (type === 'from') setFromChain(chain, true);
-        else setToChain(chain, true);
-        navigateBackFrom(navigationRoutes.fromChain);
-      }}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.fromChain)}
-    />
-  );
-}

package/src/pages/SelectTokenPage.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { TokenSelector } from '@rango-dev/ui';
-import { useBestRouteStore } from '../store/bestRoute';
-import { Asset, Token } from 'rango-sdk';
-import { useNavigateBack } from '../hooks/useNavigateBack';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { tokensAreEqual } from '../utils/wallets';
-import { useMetaStore } from '../store/meta';
-
-interface PropTypes {
-  type: 'from' | 'to';
-  supportedTokens?: Asset[];
-}
-
-export interface TokenWithBalance extends Token {
-  balance?: {
-    amount: string;
-    usdValue: string;
-  };
-}
-
-export function SelectTokenPage(props: PropTypes) {
-  const { navigateBackFrom } = useNavigateBack();
-
-  const { type, supportedTokens } = props;
-  const sourceTokens = useBestRouteStore.use.sourceTokens();
-  const destinationTokens = useBestRouteStore.use.destinationTokens();
-  const supportedSourceTokens = supportedTokens
-    ? sourceTokens.filter((token) =>
-        supportedTokens.some((supportedToken) =>
-          tokensAreEqual(supportedToken, token)
-        )
-      )
-    : sourceTokens;
-
-  const supportedDestinationTokens = supportedTokens
-    ? destinationTokens.filter((token) =>
-        supportedTokens.some((supportedToken) =>
-          tokensAreEqual(supportedToken, token)
-        )
-      )
-    : destinationTokens;
-
-  const fromToken = useBestRouteStore.use.fromToken();
-  const toToken = useBestRouteStore.use.toToken();
-  const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToToken = useBestRouteStore.use.setToToken();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
-
-  return (
-    <TokenSelector
-      type={type === 'from' ? 'Source' : 'Destination'}
-      list={type == 'from' ? supportedSourceTokens : supportedDestinationTokens}
-      selected={type === 'from' ? fromToken : toToken}
-      onChange={(token) => {
-        if (type === 'from') setFromToken(token);
-        else setToToken(token);
-        navigateBackFrom(navigationRoutes.fromToken);
-      }}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.fromToken)}
-      loadingStatus={loadingMetaStatus}
-    />
-  );
-}