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

package/src/pages/WalletsPage.tsx

@@ -0,0 +1,119 @@
+import {
+  Alert,
+  SecondaryPage,
+  styled,
+  Wallet,
+  WalletState,
+  WalletInfo,
+} from '@rango-dev/ui';
+import React, { useEffect, useRef, useState } from 'react';
+import { getlistWallet, sortWalletsBasedOnState } from '../utils/wallets';
+import { WalletType, detectMobileScreens } from '@rango-dev/wallets-shared';
+import { useWallets } from '@rango-dev/wallets-core';
+
+import { useUiStore } from '../store/ui';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useTranslation } from 'react-i18next';
+
+interface PropTypes {
+  supportedWallets: 'all' | WalletType[];
+  multiWallets: boolean;
+}
+
+const ListContainer = styled('div', {
+  display: 'grid',
+  gap: '.5rem',
+  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
+  height: '450px',
+  alignContent: 'baseline',
+  padding: '0.5rem',
+});
+
+const AlertContainer = styled('div', {
+  paddingBottom: '$16',
+});
+export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
+  const { navigateBackFrom } = useNavigateBack();
+  const { state, disconnect, getWalletInfo, connect } = useWallets();
+  const wallets = getlistWallet(
+    state,
+    getWalletInfo,
+    supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets
+  );
+  const walletsRef = useRef<WalletInfo[]>();
+
+  let sortedWallets = detectMobileScreens()
+    ? wallets.filter((wallet) => wallet.showOnMobile)
+    : wallets;
+  sortedWallets = sortWalletsBasedOnState(sortedWallets);
+  const [walletErrorMessage, setWalletErrorMessage] = useState('');
+  const toggleConnectWalletsButton =
+    useUiStore.use.toggleConnectWalletsButton();
+  const { t } = useTranslation();
+
+  const onSelectWallet = async (type: WalletType) => {
+    const wallet = state(type);
+    try {
+      if (walletErrorMessage) setWalletErrorMessage('');
+      if (wallet.connected) {
+        await disconnect(type);
+      } else {
+        if (
+          !multiWallets &&
+          !!wallets.find((w) => w.state === WalletState.CONNECTED)
+        ) {
+          return;
+        }
+        await connect(type);
+      }
+    } catch (e) {
+      setWalletErrorMessage('Error: ' + (e as any)?.message);
+    }
+  };
+  const disconnectConnectingWallets = () => {
+    const connectingWallets =
+      walletsRef.current?.filter(
+        (wallet) => wallet.state === WalletState.CONNECTING
+      ) || [];
+    for (const wallet of connectingWallets) {
+      disconnect(wallet.type);
+    }
+  };
+  useEffect(() => {
+    toggleConnectWalletsButton();
+    return () => {
+      disconnectConnectingWallets();
+      toggleConnectWalletsButton();
+    };
+  }, []);
+
+  useEffect(() => {
+    walletsRef.current = wallets;
+  }, [wallets]);
+
+  return (
+    <SecondaryPage
+      title={t('Select Wallet') || ''}
+      textField={false}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}
+    >
+      <>
+        {walletErrorMessage && (
+          <AlertContainer>
+            <Alert type="error">{walletErrorMessage}</Alert>
+          </AlertContainer>
+        )}
+        <ListContainer>
+          {sortedWallets.map((wallet, index) => (
+            <Wallet
+              {...wallet}
+              key={`${index}-${wallet.type}`}
+              onClick={onSelectWallet}
+            />
+          ))}
+        </ListContainer>
+      </>
+    </SecondaryPage>
+  );
+}

package/src/services/httpService.ts

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

package/src/store/bestRoute.ts

@@ -0,0 +1,245 @@
+import { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
+import { Token } from 'rango-sdk';
+import { create } from 'zustand';
+import BigNumber from 'bignumber.js';
+import { ZERO } from '../constants/numbers';
+import {
+  getBestRouteToTokenUsdPrice,
+  isRouteParametersChanged,
+} from '../utils/routing';
+import createSelectors from './selectors';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { httpService } from '../services/httpService';
+import { useSettingsStore } from './settings';
+import { calcOutputUsdValue, createBestRouteRequestBody } from '../utils/swap';
+import { useMetaStore } from './meta';
+import { getDefaultToken, getSortedTokens } from '../utils/wallets';
+import { useWalletsStore } from './wallets';
+import { TokenWithBalance } from '../pages/SelectTokenPage';
+
+const getUsdValue = (token: Token | null, amount: string) =>
+  new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
+
+export interface RouteState {
+  fromChain: BlockchainMeta | null;
+  toChain: BlockchainMeta | null;
+  inputAmount: string;
+  inputUsdValue: BigNumber;
+  outputAmount: BigNumber | null;
+  outputUsdValue: BigNumber;
+  fromToken: TokenWithBalance | null;
+  toToken: TokenWithBalance | null;
+  loading: boolean;
+  error: string;
+  sourceTokens: Token[];
+  destinationTokens: Token[];
+  setFromChain: (
+    chain: BlockchainMeta | null,
+    setDefaultToken?: boolean
+  ) => void;
+  setToChain: (chian: BlockchainMeta | null, setDefaultToken?: boolean) => 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>()(
+    subscribeWithSelector((set) => ({
+      fromChain: null,
+      fromToken: null,
+      inputAmount: '',
+      outputAmount: null,
+      inputUsdValue: new BigNumber(0),
+      outputUsdValue: new BigNumber(0),
+      toChain: null,
+      toToken: null,
+      bestRoute: null,
+      loading: false,
+      error: '',
+      sourceTokens: [],
+      destinationTokens: [],
+      setBestRoute: (bestRoute) =>
+        set((state) => {
+          let outputAmount: BigNumber | null = null;
+          let outputUsdValue: BigNumber = ZERO;
+          if (!!bestRoute) {
+            outputAmount = !!bestRoute.result?.outputAmount
+              ? new BigNumber(bestRoute.result?.outputAmount)
+              : null;
+            outputUsdValue = calcOutputUsdValue(
+              bestRoute.result?.outputAmount,
+              getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice
+            );
+          }
+          return {
+            bestRoute,
+            ...(!!bestRoute && {
+              outputAmount,
+              outputUsdValue,
+            }),
+          };
+        }),
+      setFromChain: (chain, setDefaultToken) => {
+        set((state) => {
+          if (state.fromChain?.name === chain?.name) return {};
+          const tokens = useMetaStore.getState().meta.tokens;
+          const balances = useWalletsStore.getState().balances;
+          const sortedTokens = getSortedTokens(
+            chain,
+            tokens,
+            balances,
+            state.destinationTokens
+          );
+          const fromToken = getDefaultToken(sortedTokens, state.toToken);
+          return {
+            fromChain: chain,
+            sourceTokens: sortedTokens,
+            ...(setDefaultToken && {
+              fromToken,
+            }),
+            ...(!!state.inputAmount && {
+              inputUsdValue: getUsdValue(fromToken, state.inputAmount),
+            }),
+          };
+        });
+      },
+      setFromToken: (token) =>
+        set((state) => ({
+          fromToken: token,
+          ...(!!state.inputAmount && {
+            inputUsdValue: getUsdValue(token, state.inputAmount),
+          }),
+        })),
+      setToChain: (chain, setDefaultToken) => {
+        set((state) => {
+          if (state.toChain?.name === chain?.name) return {};
+          const tokens = useMetaStore.getState().meta.tokens;
+          const balances = useWalletsStore.getState().balances;
+          const sortedTokens = getSortedTokens(
+            chain,
+            tokens,
+            balances,
+            state.destinationTokens
+          );
+
+          return {
+            toChain: chain,
+            destinationTokens: sortedTokens,
+            ...(setDefaultToken && {
+              toToken: getDefaultToken(sortedTokens, state.fromToken),
+            }),
+          };
+        });
+      },
+      setToToken: (token) =>
+        set(() => ({
+          toToken: token,
+        })),
+      setInputAmount: (amount) => {
+        set((state) => ({
+          inputAmount: amount,
+          ...(!amount && {
+            outputAmount: new BigNumber(0),
+            outputUsdValue: new BigNumber(0),
+            bestRoute: null,
+          }),
+          ...(!!state.fromToken && {
+            inputUsdValue: getUsdValue(state.fromToken, amount),
+          }),
+        }));
+      },
+    }))
+  )
+);
+
+const bestRoute = (
+  bestRouteStore: typeof useBestRouteStore,
+  settingsStore: typeof useSettingsStore
+) => {
+  let abortController: AbortController | null = null;
+  const fetchBestRoute = () => {
+    const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
+    const { slippage, customSlippage, disabledLiquiditySources } =
+      settingsStore.getState();
+    if (!fromToken || !toToken || !inputAmount) return;
+    abortController?.abort();
+    abortController = new AbortController();
+    const userSlippage = !!customSlippage ? customSlippage : slippage;
+    const requestBody = createBestRouteRequestBody(
+      fromToken,
+      toToken,
+      inputAmount,
+      [],
+      [],
+      disabledLiquiditySources,
+      userSlippage,
+      false
+    );
+    bestRouteStore.setState({
+      loading: true,
+      bestRoute: null,
+      outputAmount: null,
+      outputUsdValue: new BigNumber(0),
+    });
+    httpService
+      .getBestRoute(requestBody, {
+        signal: abortController.signal,
+      })
+      .then((res) => {
+        const { setBestRoute } = bestRouteStore.getState();
+        setBestRoute(res);
+        bestRouteStore.setState({ loading: false });
+        abortController = null;
+      })
+      .catch((error) => {
+        if (error.code === 'ERR_CANCELED') return;
+        bestRouteStore.setState({
+          error: error.message,
+          loading: false,
+        });
+      });
+  };
+
+  useBestRouteStore.subscribe(
+    (state) => ({
+      fromChain: state.fromChain,
+      fromToken: state.fromToken,
+      toChain: state.toChain,
+      toToken: state.toToken,
+      inputAmount: state.inputAmount,
+    }),
+
+    fetchBestRoute.bind(null),
+    {
+      equalityFn: (prevState, state) => {
+        if (isRouteParametersChanged(prevState, state)) return false;
+        else return true;
+      },
+    }
+  );
+
+  useSettingsStore.subscribe(
+    (state) => ({
+      slippage: state.slippage,
+      customSlippage: state.customSlippage,
+      disabledLiquiditySources: state.disabledLiquiditySources,
+    }),
+    fetchBestRoute.bind(null),
+    {
+      equalityFn: (prevState, state) => {
+        if (isRouteParametersChanged(prevState, state)) return false;
+        else return true;
+      },
+    }
+  );
+
+  return { fetchBestRoute };
+};
+
+export const { fetchBestRoute } = bestRoute(
+  useBestRouteStore,
+  useSettingsStore
+);

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';
+
+export 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;

package/src/store/settings.ts

@@ -0,0 +1,84 @@
+import { create } from 'zustand';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
+import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
+import { removeDuplicateFrom } from '../utils/common';
+import { useMetaStore } from './meta';
+import createSelectors from './selectors';
+
+type Theme = 'auto' | 'dark' | 'light';
+
+export interface SettingsState {
+  slippage: number;
+  customSlippage: number | null;
+  infiniteApprove: boolean;
+  disabledLiquiditySources: string[];
+  theme: Theme;
+  setSlippage: (slippage: number) => void;
+  setCustomSlippage: (customSlippage: number | null) => void;
+  toggleInfiniteApprove: () => void;
+  toggleLiquiditySource: (name: string) => void;
+  setTheme: (theme: Theme) => void;
+  toggleAllLiquiditySources: () => void;
+}
+
+export const useSettingsStore = createSelectors(
+  create<SettingsState>()(
+    persist(
+      subscribeWithSelector((set) => ({
+        slippage: DEFAULT_SLIPPAGE,
+        customSlippage: null,
+        infiniteApprove: false,
+        disabledLiquiditySources: [],
+        theme: 'auto',
+        setSlippage: (slippage) =>
+          set(() => ({
+            slippage: slippage,
+          })),
+        setCustomSlippage: (customSlippage) =>
+          set(() => ({
+            customSlippage: customSlippage,
+          })),
+        toggleAllLiquiditySources: () =>
+          set((state) => {
+            const { swappers } = useMetaStore.getState().meta;
+            const swappersGroup = removeDuplicateFrom(
+              swappers.map((swapper) => swapper.swapperGroup)
+            );
+
+            if (swappersGroup.length === state.disabledLiquiditySources.length)
+              return { disabledLiquiditySources: [] };
+            else {
+              return {
+                disabledLiquiditySources: swappersGroup,
+              };
+            }
+          }),
+        toggleInfiniteApprove: () =>
+          set((state) => ({
+            infiniteApprove: !state.infiniteApprove,
+          })),
+        toggleLiquiditySource: (name) =>
+          set((state) => {
+            if (state.disabledLiquiditySources.includes(name))
+              return {
+                disabledLiquiditySources: state.disabledLiquiditySources.filter(
+                  (liquiditySource) => liquiditySource != name
+                ),
+              };
+            else
+              return {
+                disabledLiquiditySources:
+                  state.disabledLiquiditySources.concat(name),
+              };
+          }),
+        setTheme: (theme) =>
+          set(() => ({
+            theme,
+          })),
+      })),
+      {
+        name: 'user-settings',
+      }
+    )
+  )
+);

package/src/store/ui.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import createSelectors from './selectors';
+
+interface UiState {
+  connectWalletsButtonDisabled: boolean;
+  selectedSwapRequestId: string | null;
+  toggleConnectWalletsButton: () => void;
+  setSelectedSwap: (requestId: string | null) => void;
+}
+
+export const useUiStore = createSelectors(
+  create<UiState>()((set) => ({
+    connectWalletsButtonDisabled: false,
+    selectedSwapRequestId: null,
+    toggleConnectWalletsButton: () =>
+      set((state) => ({
+        connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled,
+      })),
+    setSelectedSwap: (requestId) => set({ selectedSwapRequestId: requestId }),
+  }))
+);