@rango-dev/widget-embedded 0.1.10-next.69

package/src/pages/Home.tsx

@@ -0,0 +1,176 @@
+import { Alert, BestRoute, Button, styled, VerticalSwapIcon } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { Header } from '../components/Header';
+import { TokenInfo } from '../components/TokenInfo';
+import { useBestRouteStore } from '../store/bestRoute';
+import { BottomLogo } from '../components/BottomLogo';
+import { SwithFromAndTo } from '../components/SwitchFromAndTo';
+import { Footer } from '../components/Footer';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useBestRoute } from '../hooks/useBestRoute';
+import { useMetaStore } from '../store/meta';
+import { useWalletsStore } from '../store/wallets';
+import { errorMessages } from '../constants/errors';
+import {
+  getSwapButtonTitle,
+  getOutputRatio,
+  hasLimitError,
+  outputRatioHasWarning,
+  canComputePriceImpact,
+} from '../utils/swap';
+
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const SwitchButtonContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'relative',
+  top: '11px',
+});
+
+const BestRouteContainer = styled('div', {
+  width: '100%',
+  paddingTop: '$16',
+});
+
+const Alerts = styled('div', {
+  paddingTop: '$16',
+});
+
+export function Home() {
+  const [waningMessage, setWarningMessage] = useState('');
+  const isRouterInContext = useInRouterContext();
+  const navigate = useNavigate();
+  const [count, setCount] = useState(0);
+  const fromChain = useBestRouteStore.use.fromChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toChain = useBestRouteStore.use.toChain();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const setBestRoute = useBestRouteStore.use.setBestRoute();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const accounts = useWalletsStore.use.accounts();
+
+  const swithFromAndTo = () => {
+    setFromChain(toChain);
+    setFromToken(toToken);
+    setToChain(fromChain);
+    setToToken(fromToken);
+    setInputAmount(outputAmount?.toString() || '');
+    setCount((prev) => prev + 1);
+  };
+
+  const { data, loading: fetchingBestRoute, error: bestRouteError, retry } = useBestRoute();
+
+  const noConnectedWallet = accounts.length > 0;
+
+  const noRoutesFound = !bestRoute?.result;
+
+  const errorMessage =
+    loadingMetaStatus === 'failed' ? errorMessages.genericServerError : bestRouteError;
+
+  const needsToWarnEthOnPath = false;
+
+  const showBestRoute = inputAmount && (!!data || fetchingBestRoute || bestRouteError);
+
+  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
+
+  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
+
+  const priceImpactCanNotBeComputed = !canComputePriceImpact(
+    bestRoute,
+    inputAmount,
+    inputUsdValue,
+    outputUsdValue,
+  );
+
+  const buttonTitle = getSwapButtonTitle(
+    accounts,
+    fetchingBestRoute,
+    hasLimitError(bestRoute),
+    highValueLoss,
+    priceImpactCanNotBeComputed,
+    needsToWarnEthOnPath,
+  );
+
+  const buttonDisabled =
+    loadingMetaStatus != 'success' ||
+    fetchingBestRoute ||
+    highValueLoss ||
+    (noConnectedWallet && noRoutesFound) ||
+    hasLimitError(bestRoute);
+
+  useEffect(() => {
+    setBestRoute(data);
+  }, [data]);
+
+  return (
+    <Container>
+      <Header onClickRefresh={retry} />
+      <TokenInfo
+        type="From"
+        chain={fromChain}
+        token={fromToken}
+        onAmountChange={setInputAmount}
+        inputAmount={inputAmount}
+      />
+      <SwitchButtonContainer>
+        <Button variant="ghost" onClick={swithFromAndTo}>
+          <VerticalSwapIcon size={36} />
+          {isRouterInContext && <SwithFromAndTo count={count} />}
+        </Button>
+      </SwitchButtonContainer>
+      <TokenInfo
+        type="To"
+        chain={toChain}
+        token={toToken}
+        outputAmount={outputAmount}
+        outputUsdValue={outputUsdValue}
+      />
+      {showBestRoute && (
+        <BestRouteContainer>
+          <BestRoute error={bestRouteError} loading={fetchingBestRoute} data={data} />
+        </BestRouteContainer>
+      )}
+      {(errorMessage || waningMessage) && (
+        <Alerts>
+          {errorMessage && <Alert description={errorMessage} type="error" />}
+          {waningMessage && <Alert description={waningMessage} type="warning" />}
+        </Alerts>
+      )}
+      <Footer>
+        <Button
+          type="primary"
+          align="grow"
+          size="large"
+          disabled={buttonDisabled}
+          onClick={() => {
+            if (buttonTitle === 'Connect Wallet') navigate(navigationRoutes.wallets);
+            else {
+              navigate(navigationRoutes.confirmWallets);
+            }
+          }}>
+          {buttonTitle}
+        </Button>
+        <BottomLogo />
+      </Footer>
+    </Container>
+  );
+}

package/src/pages/LiquiditySourcesPage.tsx

@@ -0,0 +1,49 @@
+import { LiquiditySourcesSelector } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { removeDuplicateFrom } from '../utils/common';
+
+export function LiquiditySourcePage() {
+  const { swappers } = useMetaStore.use.meta();
+  const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const toggleAllLiquiditySources = useSettingsStore.use.toggleAllLiquiditySources();
+
+  const navigate = useNavigate();
+
+  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={uniqueSwappersGroups}
+      onChange={(liquiditySource) => toggleLiquiditySource(liquiditySource.title)}
+      onBack={() => {
+        navigate(-1);
+      }}
+    />
+  );
+}

package/src/pages/SelectChainPage.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { BlockchainSelector } from '@rango-dev/ui';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useNavigate } from 'react-router-dom';
+import { useWalletsStore } from '../store/wallets';
+import { BlockchainMeta } from 'rango-sdk';
+import { removeDuplicateFrom } from '../utils/common';
+
+interface PropTypes {
+  type: 'from' | 'to';
+}
+
+export function SelectChainPage(props: PropTypes) {
+  const { type } = props;
+  const accounts = useWalletsStore.use.accounts();
+
+  const { blockchains } = useMetaStore.use.meta();
+  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 setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+
+  const navigate = useNavigate();
+
+  const [list, setList] = useState(blockchains);
+
+  useEffect(() => {
+    let chainSortedByConnectedWallets: BlockchainMeta[] = [];
+    if (accounts.length !== 0) {
+      const connectedChains = removeDuplicateFrom(accounts.map((account) => account.chain));
+      chainSortedByConnectedWallets = blockchains.sort(
+        (blockchainA, blockchainB) =>
+          connectedChains.lastIndexOf(blockchainA.name) -
+          connectedChains.lastIndexOf(blockchainB.name),
+      );
+    } else {
+      chainSortedByConnectedWallets = blockchains;
+    }
+    setList(chainSortedByConnectedWallets);
+  }, [blockchains.length, accounts.length]);
+
+  return (
+    <BlockchainSelector
+      type={type === 'from' ? 'Source' : 'Destination'}
+      list={list}
+      selected={type === 'from' ? fromChain : toChain}
+      loadingStatus={loadingStatus}
+      onChange={(chain) => {
+        if (type === 'from') setFromChain(chain);
+        else setToChain(chain);
+        if (type === 'from' && fromChain?.name != chain.name) setFromToken(null);
+        if (type === 'to' && toChain?.name != chain.name) setToToken(null);
+        navigate(-1);
+      }}
+      onBack={navigate.bind(null, -1)}
+    />
+  );
+}

package/src/pages/SelectTokenPage.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { TokenSelector } from '@rango-dev/ui';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useNavigate } from 'react-router-dom';
+import { Token } from 'rango-sdk';
+import { numberToString } from '../utils/numbers';
+import BigNumber from 'bignumber.js';
+import { getBalanceFromWallet } from '../utils/wallets';
+import { useWalletsStore } from '../store/wallets';
+import { sortedTokens } from '../utils/wallets';
+import { ZERO } from '../constants/numbers';
+
+interface PropTypes {
+  type: 'from' | 'to';
+}
+
+export interface TokenWithBalance extends Token {
+  balance?: {
+    amount: string;
+    usdValue: string;
+  };
+}
+
+export function SelectTokenPage(props: PropTypes) {
+  const { type } = props;
+  const navigate = useNavigate();
+
+  const { tokens } = useMetaStore.use.meta();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+
+  const balance = useWalletsStore.use.balances();
+
+  const tokenWithSelectedChain = tokens.filter((token) => {
+    if (type === 'from') return token.blockchain === fromChain?.name;
+    return token.blockchain === toChain?.name;
+  });
+
+  const TokensWithBalance: TokenWithBalance[] = tokenWithSelectedChain.map((token) => {
+    const tokenAmount = numberToString(
+      new BigNumber(
+        getBalanceFromWallet(balance, token.blockchain, token.symbol, token.address)?.amount ||
+          ZERO,
+      ),
+    );
+
+    let tokenUsdValue = '';
+    if (token.usdPrice)
+      tokenUsdValue = numberToString(
+        new BigNumber(
+          getBalanceFromWallet(balance, token.blockchain, token.symbol, token.address)?.amount ||
+            ZERO,
+        ).multipliedBy(token.usdPrice),
+      );
+    return {
+      ...token,
+      balance: {
+        amount: tokenAmount !== '0' ? tokenAmount : '',
+        usdValue: tokenUsdValue !== '0' ? tokenUsdValue : '',
+      },
+    };
+  });
+
+  const sortedTokenList = sortedTokens(TokensWithBalance, type, balance);
+
+  return (
+    <TokenSelector
+      type={type === 'from' ? 'Source' : 'Destination'}
+      list={sortedTokenList}
+      selected={type === 'from' ? fromToken : toToken}
+      onChange={(token) => {
+        if (type === 'from') setFromToken(token);
+        else setToToken(token);
+        navigate(-1);
+      }}
+      onBack={navigate.bind(null, -1)}
+    />
+  );
+}

package/src/pages/SettingsPage.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Settings } from '@rango-dev/ui';
+import { useSettingsStore } from '../store/settings';
+import { useMetaStore } from '../store/meta';
+import { useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { removeDuplicateFrom } from '../utils/common';
+
+export function SettingsPage() {
+  const slippage = useSettingsStore.use.slippage();
+  const setSlippage = useSettingsStore.use.setSlippage();
+  const disabledLiquiditySources = useSettingsStore.use.disabledLiquiditySources();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
+  const theme = useSettingsStore.use.theme();
+  const setTheme = useSettingsStore.use.setTheme();
+  const { swappers } = useMetaStore.use.meta();
+  const navigate = useNavigate();
+
+  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 (
+    <Settings
+      slippages={[1, 2, 3, 4]}
+      selectedSlippage={slippage}
+      onSlippageChange={(slippage) => setSlippage(slippage)}
+      liquiditySources={uniqueSwappersGroups}
+      selectedLiquiditySources={uniqueSwappersGroups.filter((s) => s.selected)}
+      onLiquiditySourcesClick={() => navigate(navigationRoutes.liquiditySources)}
+      onBack={navigate.bind(null, -1)}
+      customSlippage={customSlippage || NaN}
+      onCustomSlippageChange={setCustomSlippage}
+      minSlippage={1}
+      maxSlippage={10}
+      selectedTheme={theme}
+      onThemeChange={setTheme}
+    />
+  );
+}

package/src/pages/SwapDetailsPage.tsx

@@ -0,0 +1,9 @@
+import { SwapHistory } from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { pendingSwap } from '../mockData/pendingSwap';
+
+export function SwapDetailsPage() {
+  const navigate = useNavigate();
+  return <SwapHistory onBack={navigate.bind(null, -1)} pendingSwap={pendingSwap} />;
+}

package/src/pages/WalletsPage.tsx

@@ -0,0 +1,61 @@
+import { useNavigate } from 'react-router-dom';
+import { Alert, SecondaryPage, styled, Wallet } from '@rango-dev/ui';
+import React, { useState } from 'react';
+import { getlistWallet } from '../utils/wallets';
+import { WalletType } from '@rango-dev/wallets-shared';
+import { useWallets } from '@rango-dev/wallets-core';
+
+const ListContainer = styled('div', {
+  display: 'grid',
+  gap: '.5rem',
+  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
+  height: '450px',
+  alignContent: 'baseline',
+});
+
+const AlertContainer = styled('div', {
+  paddingBottom: '$16',
+});
+export function WalletsPage() {
+  const navigate = useNavigate();
+  const { state, disconnect, getWalletInfo, connect } = useWallets();
+  const wallets = getlistWallet(state, getWalletInfo, Object.values(WalletType));
+  const [walletErrorMessage, setWalletErrorMessage] = useState('');
+
+  const onSelectWallet = async (type: WalletType) => {
+    const wallet = state(type);
+    try {
+      if (walletErrorMessage) setWalletErrorMessage('');
+      if (wallet.connected) {
+        await disconnect(type);
+      } else {
+        await connect(type);
+      }
+    } catch (e) {
+      setWalletErrorMessage('Error: ' + e.message);
+    }
+  };
+  return (
+    <SecondaryPage
+      title="Select Wallet"
+      textField={false}
+      onBack={() => {
+        navigate(-1);
+      }}
+      Content={
+        <>
+          {walletErrorMessage && (
+            <AlertContainer>
+              <Alert type="error" description={walletErrorMessage} />
+            </AlertContainer>
+          )}
+          <ListContainer>
+            {wallets.map((info, index) => (
+              <Wallet {...info} key={index} onClick={onSelectWallet} />
+            ))}
+          </ListContainer>
+        </>
+      }
+    />
+  );
+}

package/src/services/httpService.ts

@@ -0,0 +1,3 @@
+import { RangoClient } from 'rango-sdk';
+
+export const httpService = new RangoClient(process.env.REACT_API_KEY as string);

package/src/store/bestRoute.ts

@@ -0,0 +1,82 @@
+import { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
+import { Token } from 'rango-sdk/lib';
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import BigNumber from 'bignumber.js';
+import { ZERO } from '../constants/numbers';
+import { getBestRouteToTokenUsdPrice } from '../utils/routing';
+import createSelectors from './selectors';
+
+const getUsdValue = (token: Token | null, amount: string) =>
+  new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
+
+interface RouteState {
+  fromChain: BlockchainMeta | null;
+  toChain: BlockchainMeta | null;
+  inputAmount: string;
+  inputUsdValue: BigNumber;
+  outputAmount: BigNumber | null;
+  outputUsdValue: BigNumber;
+  fromToken: Token | null;
+  toToken: Token | null;
+  setFromChain: (chain: BlockchainMeta | null) => void;
+  setToChain: (chian: BlockchainMeta | null) => void;
+  setFromToken: (token: Token | null) => void;
+  setToToken: (token: Token | null) => void;
+  setInputAmount: (amount: string) => void;
+  bestRoute: BestRouteResponse | null;
+  setBestRoute: (bestRoute: BestRouteResponse | null) => void;
+}
+
+export const useBestRouteStore = createSelectors(
+  create<RouteState>()(
+    immer((set) => ({
+      fromChain: null,
+      fromToken: null,
+      inputAmount: '',
+      outputAmount: null,
+      inputUsdValue: new BigNumber(0),
+      outputUsdValue: new BigNumber(0),
+      toChain: null,
+      toToken: null,
+      bestRoute: null,
+      setBestRoute: (bestRoute) =>
+        set((state) => {
+          state.bestRoute = bestRoute;
+          if (!!bestRoute) {
+            const outputAmount = !!bestRoute.result?.outputAmount
+              ? new BigNumber(bestRoute.result?.outputAmount)
+              : null;
+            state.outputAmount = outputAmount;
+            state.outputUsdValue = new BigNumber(outputAmount || ZERO).multipliedBy(
+              getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice || 0,
+            );
+          }
+        }),
+      setFromChain: (chain) =>
+        set((state) => {
+          state.fromChain = chain;
+        }),
+      setFromToken: (token) =>
+        set((state) => {
+          state.fromToken = token;
+          if (!!state.inputAmount)
+            state.inputUsdValue = getUsdValue(state.fromToken!, state.inputAmount);
+        }),
+      setToChain: (chain) =>
+        set((state) => {
+          state.toChain = chain;
+        }),
+      setToToken: (token) =>
+        set((state) => {
+          state.toToken = token;
+        }),
+      setInputAmount: (amount) =>
+        set((state) => {
+          state.inputAmount = amount;
+          if (!!state.fromToken)
+            state.inputUsdValue = getUsdValue(state.fromToken, state.inputAmount);
+        }),
+    })),
+  ),
+);

package/src/store/meta.ts

@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { MetaResponse } from 'rango-sdk';
+import { httpService } from '../services/httpService';
+import createSelectors from './selectors';
+import { removeDuplicateFrom } from '../utils/common';
+
+export type LoadingStatus = 'loading' | 'success' | 'failed';
+
+interface MetaState {
+  meta: MetaResponse;
+  loadingStatus: LoadingStatus;
+  fetchMeta: () => Promise<void>;
+}
+
+export const useMetaStore = createSelectors(
+  create<MetaState>()((set) => ({
+    meta: { blockchains: [], popularTokens: [], swappers: [], tokens: [] },
+    loadingStatus: 'loading',
+    fetchMeta: async () => {
+      try {
+        const response = await httpService.getAllMetadata();
+        const chainThatHasTokenInMetaResponse = removeDuplicateFrom(
+          response.tokens.map((t) => t.blockchain),
+        );
+        const enabledChains = response.blockchains.filter(
+          (chain) => chain.enabled && chainThatHasTokenInMetaResponse.includes(chain.name),
+        );
+        response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
+        set({ meta: response, loadingStatus: 'success' });
+      } catch (error) {
+        set({ loadingStatus: 'failed' });
+      }
+    },
+  })),
+);

package/src/store/selectors.ts

@@ -0,0 +1,19 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+
+type State = object;
+
+type WithSelectors<S> = S extends { getState: () => infer T }
+  ? S & { use: { [K in keyof T]: () => T[K] } }
+  : never;
+
+const createSelectors = <S extends UseBoundStore<StoreApi<State>>>(_store: S) => {
+  let store = _store as WithSelectors<typeof _store>;
+  store.use = {};
+  for (let k of Object.keys(store.getState())) {
+    (store.use as any)[k] = () => store((s) => s[k as keyof typeof s]);
+  }
+
+  return store;
+};
+
+export default createSelectors;