@rango-dev/widget-embedded 0.1.10 → 0.1.11-next.10

package/src/hooks/useConfirmSwap.ts

@@ -12,7 +12,6 @@ import {
 } from '../types';
 import { PendingSwap } from '@rango-dev/ui/dist/containers/History/types';
 import {
-  calculatePendingSwap,
   createBestRouteRequestBody,
   getBalanceWarnings,
   getMinRequiredSlippage,
@@ -34,6 +33,7 @@ import {
 } from '../utils/routing';
 import { numberToString } from '../utils/numbers';
 import { BestRouteResponse } from 'rango-sdk';
+import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 type ConfirmSwap = {
   loading: boolean;
@@ -49,6 +49,8 @@ export function useConfirmSwap(): ConfirmSwap {
   const initialRoute = useBestRouteStore.use.bestRoute();
   const setBestRoute = useBestRouteStore.use.setBestRoute();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const affiliateRef = useSettingsStore.use.affiliateRef();
+
   const accounts = useWalletsStore.use.accounts();
   const selectedWallets = useWalletsStore.use.selectedWallets();
   const meta = useMetaStore.use.meta();
@@ -93,7 +95,6 @@ export function useConfirmSwap(): ConfirmSwap {
           meta
         );
 
-        //@ts-ignore
         return newSwap;
       }
       return;
@@ -111,11 +112,12 @@ export function useConfirmSwap(): ConfirmSwap {
       selectedWallets,
       disabledLiquiditySources,
       userSlippage,
-      true
+      true,
+      affiliateRef
     );
 
     try {
-      const confiremedRoute = await httpService.getBestRoute(requestBody, {
+      const confiremedRoute = await httpService().getBestRoute(requestBody, {
         signal: abortControllerRef.current?.signal,
       });
 
@@ -229,7 +231,6 @@ export function useConfirmSwap(): ConfirmSwap {
           false,
           meta
         );
-        //@ts-ignore
         return newSwap;
       } else if (!proceedAnywayRef.current) {
         proceedAnywayRef.current = true;

package/src/hooks/useTheme.ts

@@ -2,22 +2,26 @@ import { createTheme } from '@rango-dev/ui';
 import { useState, useEffect, useLayoutEffect } from 'react';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { Colors } from '../types';
+import { Theme } from '../types';
 import { shadeColor } from '../utils/common';
 import usePrevious from './usePrevious';
 
 export function useTheme({
-  primary = '#5FA425',
-  background = '#fff',
-  foreground = '#000',
-  error = '#FF0000',
-  warning = '#F5A623',
-  success = '#0070F3',
+  colors: themeColors,
   fontFamily = 'Robot',
   borderRadius = 8,
-}: Colors & { borderRadius?: number; fontFamily?: string }) {
+  mode = 'auto',
+}: Theme) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
+  const setTheme = useSettingsStore.use.setTheme();
+
+  const primary = themeColors?.primary || '#5FA425',
+    background = themeColors?.background || '#fff',
+    foreground = themeColors?.foreground || '#000',
+    error = themeColors?.error || '#FF0000',
+    warning = themeColors?.warning || '#F5A623',
+    success = themeColors?.success || '#0070F3';
   const colors = {
     neutrals200: '#FAFAFA',
     neutrals300: '#f2f2f2',
@@ -61,6 +65,9 @@ export function useTheme({
     radii: {
       5: `${borderRadius}px`,
     },
+    shadows: {
+      s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',
+    },
   });
 
   const customeDarkTheme = createTheme({
@@ -80,6 +87,9 @@ export function useTheme({
     radii: {
       5: `${borderRadius}px`,
     },
+    shadows: {
+      s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222',
+    },
   });
   const [OSTheme, setOSTheme] = useState(customeLightTheme);
   useEffect(() => {
@@ -108,7 +118,9 @@ export function useTheme({
         .removeEventListener('change', switchTheme);
     };
   }, []);
-
+  useEffect(() => {
+    if (mode !== 'auto') setTheme(mode);
+  }, [mode]);
   const prevFont = usePrevious(fontFamily);
 
   useLayoutEffect(() => {

package/src/lib.tsx

@@ -15,35 +15,31 @@ import { Layout } from './components/Layout';
 import { globalFont, globalStyles } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import { isEvmBlockchain } from 'rango-sdk';
-import { Configs } from './types';
-import { useSettingsStore } from './store/settings';
+import { WidgetConfig } from './types';
 import useSelectLanguage from './hooks/useSelectLanguage';
 import './i18n';
 import QueueManager from './QueueManager';
+import { useUiStore } from './store/ui';
+import { navigationRoutes } from './constants/navigationRoutes';
 
 export type WidgetProps = {
-  configs: Configs;
+  config?: WidgetConfig;
 };
 
-export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
+export const SwapBox: React.FC<WidgetProps> = ({ config }) => {
   globalStyles();
-  globalFont(configs?.fontFamily || 'Roboto');
+  globalFont(config?.theme?.fontFamily || 'Roboto');
 
-  const { activeTheme } = useTheme({
-    ...configs.colors,
-    borderRadius: configs?.borderRadius,
-    fontFamily: configs?.fontFamily,
-  });
+  const { activeTheme } = useTheme({ ...config?.theme });
   const { blockchains } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
-  const setTheme = useSettingsStore.use.setTheme();
   const { changeLanguage } = useSelectLanguage();
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-
   const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
     useState<string>('');
   const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const currentPage = useUiStore.use.currentPage();
 
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
@@ -71,7 +67,6 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
         disconnectWallet(type);
       }
     }
-
     if (event === Events.ACCOUNTS && state.connected) {
       const key = `${type}-${state.network}-${value}`;
 
@@ -88,24 +83,19 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
   let providers = allProviders();
 
   useEffect(() => {
-    if (configs.theme !== 'auto') setTheme(configs.theme);
-  }, [configs.theme]);
-
-  useEffect(() => {
-    const wallets = configs.wallets;
+    const wallets = config?.wallets;
     clearConnectedWallet();
-    providers =
-      wallets === 'all'
-        ? allProviders()
-        : allProviders().filter((provider) => {
-            const type = provider.config.type;
-            return wallets.find((w) => w === type);
-          });
-  }, [configs?.wallets]);
+    providers = !wallets
+      ? allProviders()
+      : allProviders().filter((provider) => {
+          const type = provider.config.type;
+          return wallets.find((w) => w === type);
+        });
+  }, [config?.wallets]);
 
   useEffect(() => {
-    changeLanguage(configs?.languege);
-  }, [configs?.languege]);
+    changeLanguage(config?.language || 'en');
+  }, [config?.language]);
 
   return (
     <Provider
@@ -116,22 +106,26 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
           <SwapContainer
-            style={{
-              width: configs?.width || 'auto',
-              height: configs?.height || 'auto',
-            }}
+            fixedHeight={currentPage !== navigationRoutes.home}
+            // style={
+            //   currentPage !== navigationRoutes.home && config?.theme?.height
+            //     ? {
+            //         height: config?.theme?.height,
+            //         width: config?.theme?.width || 'auto',
+            //       }
+            //     : {
+            //         width: config?.theme?.width || 'auto',
+            //       }
+            // }
           >
             <AppRouter
-              title={configs.title}
-              titleSize={configs.titleSize}
-              titleWeight={configs.titleWeight}
               lastConnectedWallet={lastConnectedWalletWithNetwork}
               disconnectedWallet={disconnectedWallet}
               clearDisconnectedWallet={() => {
                 setDisconnectedWallet(undefined);
               }}
             >
-              <Layout configs={configs} />
+              <Layout config={config} />
             </AppRouter>
           </SwapContainer>
         </QueueManager>

package/src/pages/ConfirmSwapPage.tsx

@@ -10,11 +10,7 @@ import {
   getSelectableWallets,
   isExperimentalChain,
 } from '../utils/wallets';
-import {
-  calcOutputUsdValue,
-  getTotalFeeInUsd,
-  requiredWallets,
-} from '../utils/swap';
+import { getTotalFeeInUsd, requiredWallets } from '../utils/swap';
 import { decimalNumber, numberToString } from '../utils/numbers';
 import { useMetaStore } from '../store/meta';
 import { Network, WalletType } from '@rango-dev/wallets-shared';
@@ -33,6 +29,7 @@ import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
 import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
 import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
 import { getBestRouteStatus } from '../utils/routing';
+import { PercentageChange } from '../components/PercentageChange';
 
 export function ConfirmSwapPage() {
   const navigate = useNavigate();
@@ -48,6 +45,8 @@ export function ConfirmSwapPage() {
   const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
 
   const bestRouteloadingStatus = getBestRouteStatus(
     fetchingBestRoute,
@@ -97,6 +96,7 @@ export function ConfirmSwapPage() {
 
   return (
     <ConfirmSwap
+    // @ts-ignore
       requiredWallets={getRequiredChains(bestRoute)}
       selectableWallets={selectableWallets}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
@@ -106,6 +106,7 @@ export function ConfirmSwapPage() {
             manager?.create(
               'swap',
               { swapDetails: swap },
+              // @ts-ignore
               { id: swap.requestId }
             );
             setSelectedSwap(swap.requestId);
@@ -134,7 +135,7 @@ export function ConfirmSwapPage() {
               symbol: firstStep?.from.symbol || '',
               image: firstStep?.from.logo || '',
             }}
-            usdValue={calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice)}
+            usdValue={inputUsdValue}
             amount={fromAmount}
             label={t('From')}
             loadingStatus={bestRouteloadingStatus}
@@ -149,10 +150,16 @@ export function ConfirmSwapPage() {
               symbol: lastStep?.to.symbol || '',
               image: lastStep?.to.logo || '',
             }}
-            usdValue={calcOutputUsdValue(toAmount, lastStep?.to.usdPrice)}
+            usdValue={outputUsdValue}
             amount={toAmount}
             label={t('To')}
             loadingStatus={bestRouteloadingStatus}
+            percentageChange={
+              <PercentageChange
+                inputUsdValue={inputUsdValue}
+                outputUsdValue={outputUsdValue}
+              />
+            }
           />
         </>
       }

package/src/pages/Home.tsx

@@ -63,14 +63,8 @@ const Alerts = styled('div', {
   width: '100%',
   paddingTop: '$16',
 });
-interface PropTypes {
-  title?: string;
-  titleSize?: number;
-  titleWeight?: number;
-}
-export function Home(props: PropTypes) {
-  const { title = 'SWAP' } = props;
 
+export function Home() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
   const [count, setCount] = useState(0);
@@ -78,10 +72,6 @@ export function Home(props: PropTypes) {
   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 setInputAmount = useBestRouteStore.use.setInputAmount();
   const inputUsdValue = useBestRouteStore.use.inputUsdValue();
   const inputAmount = useBestRouteStore.use.inputAmount();
@@ -94,15 +84,7 @@ export function Home(props: PropTypes) {
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
   const setCurrentPage = useUiStore.use.setCurrentPage();
-
-  const swithFromAndTo = () => {
-    setFromChain(toChain);
-    setFromToken(toToken);
-    setToChain(fromChain);
-    setToToken(fromToken);
-    setInputAmount(outputAmount?.toString() || '');
-    setCount((prev) => prev + 1);
-  };
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
 
   const errorMessage =
     loadingMetaStatus === 'failed'
@@ -154,7 +136,7 @@ export function Home(props: PropTypes) {
   return (
     <Container>
       <Header
-        title={title}
+        title="SWAP"
         suffix={
           <HeaderButtons
             onClickRefresh={!!bestRoute ? fetchBestRoute : undefined}
@@ -170,7 +152,13 @@ export function Home(props: PropTypes) {
           inputAmount={inputAmount}
         />
         <SwitchButtonContainer>
-          <Button variant="ghost" onClick={swithFromAndTo}>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              switchFromAndTo();
+              setCount((prev) => prev + 1);
+            }}
+          >
             <VerticalSwapIcon size={32} />
             {isRouterInContext && <SwithFromAndTo count={count} />}
           </Button>

package/src/pages/LiquiditySourcesPage.tsx

@@ -4,10 +4,9 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
-import { Source } from '../types';
 import { removeDuplicateFrom } from '../utils/common';
 interface PropTypes {
-  supportedSwappers: 'all' | Source[];
+  supportedSwappers?: string[];
 }
 export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
   const swappers = useMetaStore.use.meta().swappers;
@@ -47,12 +46,10 @@ export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
     <LiquiditySourcesSelector
       toggleAll={toggleAllLiquiditySources}
       list={
-        supportedSwappers !== 'all'
+        supportedSwappers
           ? uniqueSwappersGroups.filter(
               (item) =>
-                supportedSwappers.filter(
-                  (s) => s.title === item.title && s.type === item.type
-                ).length > 0
+                supportedSwappers.filter((s) => s === item.title).length > 0
             )
           : uniqueSwappersGroups
       }

package/src/pages/SelectChainPage.tsx

@@ -4,19 +4,19 @@ import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { BlockchainMeta } from 'rango-sdk';
 
 interface PropTypes {
   type: 'from' | 'to';
-  supportedChains: 'all' | BlockchainMeta[];
+  supportedChains?: string[];
 }
 
 export function SelectChainPage(props: PropTypes) {
   const { type, supportedChains } = props;
-  const blockchains =
-    supportedChains === 'all'
-      ? useMetaStore.use.meta().blockchains
-      : supportedChains;
+  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();

package/src/pages/SelectTokenPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TokenSelector } from '@rango-dev/ui';
 import { useBestRouteStore } from '../store/bestRoute';
-import { Token } from 'rango-sdk';
+import { Asset, Token } from 'rango-sdk';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { tokensAreEqual } from '../utils/wallets';
@@ -9,7 +9,7 @@ import { useMetaStore } from '../store/meta';
 
 interface PropTypes {
   type: 'from' | 'to';
-  supportedTokens: 'all' | Token[];
+  supportedTokens?: Asset[];
 }
 
 export interface TokenWithBalance extends Token {
@@ -25,23 +25,21 @@ export function SelectTokenPage(props: PropTypes) {
   const { type, supportedTokens } = props;
   const sourceTokens = useBestRouteStore.use.sourceTokens();
   const destinationTokens = useBestRouteStore.use.destinationTokens();
-  const supportedSourceTokens =
-    supportedTokens === 'all'
-      ? sourceTokens
-      : sourceTokens.filter((token) =>
-          supportedTokens.some((supportedToken) =>
-            tokensAreEqual(supportedToken, token)
-          )
-        );
+  const supportedSourceTokens = supportedTokens
+    ? sourceTokens.filter((token) =>
+        supportedTokens.some((supportedToken) =>
+          tokensAreEqual(supportedToken, token)
+        )
+      )
+    : sourceTokens;
 
-  const supportedDestinationTokens =
-    supportedTokens === 'all'
-      ? destinationTokens
-      : destinationTokens.filter((token) =>
-          supportedTokens.some((supportedToken) =>
-            tokensAreEqual(supportedToken, token)
-          )
-        );
+    const supportedDestinationTokens = supportedTokens
+    ? destinationTokens.filter((token) =>
+        supportedTokens.some((supportedToken) =>
+          tokensAreEqual(supportedToken, token)
+        )
+      )
+    : destinationTokens;
 
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();

package/src/pages/SettingsPage.tsx

@@ -5,7 +5,6 @@ import { useMetaStore } from '../store/meta';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { removeDuplicateFrom } from '../utils/common';
-import { Source } from '../types';
 import {
   MAX_SLIPPAGE,
   MIN_SLIPPGAE,
@@ -13,7 +12,7 @@ import {
 } from '../constants/swapSettings';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 interface PropTypes {
-  supportedSwappers: 'all' | Source[];
+  supportedSwappers?: string[];
 }
 export function SettingsPage({ supportedSwappers }: PropTypes) {
   const slippage = useSettingsStore.use.slippage();
@@ -45,8 +44,6 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
     .find((s) => {
       if (s) {
         for (const type of s.types) {
-          if (supportedSwappers !== 'all') {
-          }
           uniqueSwappersGroups.push({
             title: s.swapperGroup,
             logo: s.logo,
@@ -56,23 +53,16 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
         }
       }
     });
-  supportedSwappers !== 'all' &&
+  supportedSwappers &&
     uniqueSwappersGroups.filter(
-      (item) =>
-        supportedSwappers.filter(
-          (s) => s.title === item.title && s.type === item.type
-        ).length > 0
+      (item) => supportedSwappers.filter((s) => s === item.title).length > 0
     );
 
-  const supportedUniqueSwappersGroups =
-    supportedSwappers !== 'all'
-      ? uniqueSwappersGroups.filter(
-          (item) =>
-            supportedSwappers.filter(
-              (s) => s.title === item.title && s.type === item.type
-            ).length > 0
-        )
-      : uniqueSwappersGroups;
+  const supportedUniqueSwappersGroups = supportedSwappers
+    ? uniqueSwappersGroups.filter(
+        (item) => supportedSwappers.filter((s) => s === item.title).length > 0
+      )
+    : uniqueSwappersGroups;
 
   return (
     <Settings

package/src/pages/SwapDetailsPage.tsx

@@ -4,7 +4,7 @@ import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
-import { SwapHistory } from '@rango-dev/ui';
+import { SwapHistory, Spacer } from '@rango-dev/ui';
 import { useUiStore } from '../store/ui';
 import {
   cancelSwap,
@@ -26,7 +26,6 @@ import {
   shouldRetrySwap,
 } from '../utils/swap';
 import { TokenPreview } from '../components/TokenPreview';
-import { Spacer } from '@rango-dev/ui';
 import { numberToString } from '../utils/numbers';
 //@ts-ignore
 import { t } from 'i18next';
@@ -127,7 +126,7 @@ export function SwapDetailsPage() {
           <TokenPreview
             chain={{
               displayName: lastStep?.toBlockchain || '',
-              // @ts-ignore
+              //@ts-ignore
               logo: lastStep?.toBlockchainLogo || '',
             }}
             token={{
@@ -141,7 +140,6 @@ export function SwapDetailsPage() {
         </>
       }
       //todo: move PendingSwap type to rango-types
-      //@ts-ignore
       pendingSwap={swap}
       onCopy={handleCopy}
       isCopied={isCopied}

package/src/pages/WalletsPage.tsx

@@ -20,7 +20,7 @@ import { Spinner } from '@rango-dev/ui';
 import { LoadingFailedAlert } from '@rango-dev/ui';
 
 interface PropTypes {
-  supportedWallets: 'all' | WalletType[];
+  supportedWallets?: WalletType[];
   multiWallets: boolean;
 }
 
@@ -50,7 +50,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const wallets = getlistWallet(
     state,
     getWalletInfo,
-    supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets
+    supportedWallets || Object.values(WalletType)
   );
   const walletsRef = useRef<WalletInfo[]>();
 

package/src/services/httpService.ts

@@ -1,5 +1,14 @@
 import { RangoClient } from 'rango-sdk';
+import { getConfig } from '../utils/configs';
 
-export const httpService = new RangoClient(
-  process.env.REACT_APP_API_KEY as string
-);
+// this API key is limited and
+// it is only for test purpose
+export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+
+let rango: RangoClient | undefined = undefined;
+
+export const httpService = () => {
+  if (rango) return rango;
+  rango = new RangoClient(getConfig('API_KEY'));
+  return rango;
+};