@rango-dev/widget-embedded 0.1.11-next.0 → 0.1.11-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.0",
+  "version": "0.1.11-next.11",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -10,7 +10,9 @@
   ],
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
+    "watch-tsc": "tsc --watch --noEmit",
     "dev": "parcel public/index.html -p 3001 --cache-dir=.parcel-cache",
+    "dev-tsc": "npm-run-all --parallel watch-tsc dev",
     "build:app": "parcel build --cache-dir=.parcel-cache",
     "build": "tsdx build --entry ./src/lib.tsx"
   },
@@ -27,10 +29,10 @@
   },
   "dependencies": {
     "@rango-dev/provider-all": "^0.1.11-next.84",
-    "@rango-dev/queue-manager-core": "^0.1.10-next.82",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.10-next.102",
+    "@rango-dev/queue-manager-core": "^0.1.11-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.11-next.3",
     "@rango-dev/queue-manager-react": "^0.1.10-next.76",
-    "@rango-dev/ui": "^0.1.10-next.75",
+    "@rango-dev/ui": "^0.1.11-next.4",
     "@rango-dev/wallets-core": "^0.1.11-next.88",
     "@rango-dev/wallets-shared": "^0.1.11-next.84",
     "bignumber.js": "^9.1.1",

package/readme.md

@@ -1 +1 @@
-# @rango-dev/widget-embedded
+# @rango-dev/widget-embedded

package/src/App.tsx

@@ -1,5 +1,5 @@
 import { SwapContainer } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import './app.css';
@@ -17,24 +17,29 @@ import { globalFont, globalStyles } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import QueueManager from './QueueManager';
 import { isEvmBlockchain } from 'rango-sdk';
-import { Configs } from './types';
+import { WidgetConfig } from './types';
 import './i18n';
 import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
+import { initConfig } from './utils/configs';
 
 const providers = allProviders();
 
 export type WidgetProps = {
-  configs?: Configs;
+  config?: WidgetConfig;
 };
 
-export function App({ configs }: WidgetProps) {
+export function App({ config }: WidgetProps) {
   globalStyles();
-  globalFont(configs?.fontFamily || 'Roboto');
-  const { activeTheme } = useTheme({
-    ...configs?.colors,
-    borderRadius: configs?.borderRadius,
-  });
+  globalFont(config?.theme?.fontFamily || 'Roboto');
+  const { activeTheme } = useTheme({ ...config?.theme });
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
 
   const { blockchains } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
@@ -49,6 +54,12 @@ export function App({ configs }: WidgetProps) {
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
+  const themeBackground = activeTheme?.colors?.background?.value;
+
+  useEffect(() => {
+    document.body.style.background = themeBackground;
+  }, [themeBackground]);
+
   const onUpdateState: EventHandler = (
     type,
     event,
@@ -95,18 +106,29 @@ export function App({ configs }: WidgetProps) {
     >
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
-          <SwapContainer fixedHeight={currentPage != navigationRoutes.home}>
+          <SwapContainer
+            // style={
+            //   currentPage !== navigationRoutes.home && config?.theme?.height
+            //     ? {
+            //         height: config?.theme?.height,
+            //         width: config?.theme?.width || 'auto',
+            //       }
+            //     : config?.theme?.width
+            //     ? {
+            //         width: config?.theme?.width || 'auto',
+            //       }
+            //     : undefined
+            // }
+            fixedHeight={currentPage !== navigationRoutes.home}
+          >
             <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/QueueManager.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
 import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
 import {
-  swapQueueDef,
+  makeQueueDefinition,
   SwapQueueContext,
   checkWaitingForNetworkChange,
 } from '@rango-dev/queue-manager-rango-preset';
@@ -15,6 +15,7 @@ import { useMetaStore } from './store/meta';
 import { useWalletsStore } from './store/wallets';
 import { walletAndSupportedChainsNames } from './utils/wallets';
 import { isEvmBlockchain } from 'rango-sdk';
+import { getConfig } from './utils/configs';
 
 function QueueManager(props: PropsWithChildren<{}>) {
   const {
@@ -26,6 +27,11 @@ function QueueManager(props: PropsWithChildren<{}>) {
     getWalletInfo,
   } = useWallets();
 
+  const swapQueueDef = useMemo(() => {
+    return makeQueueDefinition({
+      API_KEY: getConfig('API_KEY'),
+    });
+  }, []);
   const { blockchains } = useMetaStore.use.meta();
   const balances = useWalletsStore.use.balances();
 
@@ -63,7 +69,7 @@ function QueueManager(props: PropsWithChildren<{}>) {
       blockchains: allBlockchains,
       evmBasedChains: evmBasedChains,
       evmNetworkChainInfo:
-      convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
+        convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
       getSupportedChainNames,
     },
     getSigners,

package/src/components/AppRouter.tsx

@@ -13,15 +13,7 @@ import { UpdateUrl } from './UpdateUrl';
 import { Home } from '../pages/Home';
 import { useMetaStore } from '../store/meta';
 
-interface PropTypes {
-  title?: string;
-  titleSize?: number;
-  titleWeight?: number;
-}
-const Route: React.FC = ({
-  children,
-  ...props
-}: PropTypes & PropsWithChildren) => {
+const Route: React.FC = ({ children }: PropsWithChildren) => {
   const location = useLocation();
   const navigate = useNavigate();
   const ref = useRef(true);
@@ -34,7 +26,7 @@ const Route: React.FC = ({
   }, []);
 
   if (location.pathname === navigationRoutes.confirmSwap && ref.current)
-    return <Home {...props} />;
+    return <Home />;
 
   return <> {children}</>;
 };
@@ -42,12 +34,11 @@ const Route: React.FC = ({
 export function AppRouter({
   children,
   ...props
-}: PropTypes &
-  PropsWithChildren & {
-    lastConnectedWallet: string;
-    disconnectedWallet: WalletType | undefined;
-    clearDisconnectedWallet: () => void;
-  }) {
+}: PropsWithChildren & {
+  lastConnectedWallet: string;
+  disconnectedWallet: WalletType | undefined;
+  clearDisconnectedWallet: () => void;
+}) {
   const isRouterInContext = useInRouterContext();
   const Router = isRouterInContext ? Route : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();

package/src/components/AppRoutes.tsx

@@ -10,76 +10,57 @@ import { SelectTokenPage } from '../pages/SelectTokenPage';
 import { SettingsPage } from '../pages/SettingsPage';
 import { WalletsPage } from '../pages/WalletsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
-import { Configs } from '../types';
+import { WidgetConfig } from '../types';
 
 const getAbsolutePath = (path: string) => path.replace('/', '');
 
 interface PropTypes {
-  configs?: Configs;
+  config?: WidgetConfig;
 }
 
 export function AppRoutes(props: PropTypes) {
-  const { configs } = props;
+  const { config } = props;
 
   return useRoutes([
     {
       path: getAbsolutePath(navigationRoutes.home),
-      element: (
-        <Home
-          title={configs?.title}
-          titleSize={configs?.titleSize}
-          titleWeight={configs?.titleWeight}
-        />
-      ),
+      element: <Home />,
     },
     {
       path: getAbsolutePath(navigationRoutes.fromChain),
       element: (
         <SelectChainPage
           type="from"
-          supportedChains={configs?.fromChains || 'all'}
+          supportedChains={config?.from?.blockchains}
         />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.toChain),
       element: (
-        <SelectChainPage
-          type="to"
-          supportedChains={configs?.toChains || 'all'}
-        />
+        <SelectChainPage type="to" supportedChains={config?.to?.blockchains} />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.fromToken),
       element: (
-        <SelectTokenPage
-          type="from"
-          supportedTokens={configs?.fromTokens || 'all'}
-        />
+        <SelectTokenPage type="from" supportedTokens={config?.from?.tokens} />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.toToken),
       element: (
-        <SelectTokenPage
-          type="to"
-          supportedTokens={configs?.toTokens || 'all'}
-        />
+        <SelectTokenPage type="to" supportedTokens={config?.to?.tokens} />
       ),
     },
     {
       path: getAbsolutePath(navigationRoutes.settings),
-      element: (
-        <SettingsPage supportedSwappers={configs?.liquiditySources || 'all'} />
-      ),
+      element: <SettingsPage supportedSwappers={config?.liquiditySources} />,
     },
     {
       path: getAbsolutePath(navigationRoutes.liquiditySources),
       element: (
-        <LiquiditySourcePage
-          supportedSwappers={configs?.liquiditySources || 'all'}
-        />
+        <LiquiditySourcePage supportedSwappers={config?.liquiditySources} />
       ),
     },
     { path: getAbsolutePath(navigationRoutes.swaps), element: <HistoryPage /> },
@@ -91,11 +72,11 @@ export function AppRoutes(props: PropTypes) {
       path: getAbsolutePath(navigationRoutes.wallets),
       element: (
         <WalletsPage
-          supportedWallets={configs?.wallets || 'all'}
+          supportedWallets={config?.wallets}
           multiWallets={
-            typeof configs?.multiWallets === 'undefined'
+            typeof config?.multiWallets === 'undefined'
               ? true
-              : configs.multiWallets
+              : config.multiWallets
           }
         />
       ),

package/src/components/HeaderButtons.tsx

@@ -30,7 +30,7 @@ export function HeaderButtons(props: PropTypes) {
           onClick={onClickRefresh}
           disabled={!onClickRefresh}
         >
-          <RetryIcon size={24} />
+          <RetryIcon size={24} disabled={!onClickRefresh} />
         </Button>
       </Tooltip>
       <Tooltip content="Transactions History">

package/src/components/Layout.tsx

@@ -15,12 +15,15 @@ import { fetchingBalanceSelector, useWalletsStore } from '../store/wallets';
 import {
   calculateWalletUsdValue,
   getSelectableWallets,
+  tokensAreEqual,
 } from '../utils/wallets';
 import { removeDuplicateFrom } from '../utils/common';
-import { Configs } from '../types';
+import { WidgetConfig } from '../types';
 import { useTranslation } from 'react-i18next';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { Image } from '@rango-dev/ui';
 
 const Header = styled('div', {
   display: 'flex',
@@ -31,19 +34,17 @@ const Header = styled('div', {
   },
 });
 
-const WalletImage = styled('img', {
-  width: '$24',
-  height: '$24',
+const WalletImageContainer = styled('div', {
   marginLeft: -15,
   marginRight: '$6',
   borderRadius: '99999px',
 });
 
 export type LayoutProps = {
-  configs?: Configs;
+  config?: WidgetConfig;
 };
 
-export function Layout({ configs }: LayoutProps) {
+export function Layout({ config }: LayoutProps) {
   const navigate = useNavigate();
   const { balances, accounts, selectedWallets } = useWalletsStore();
   const { getWalletInfo } = useWallets();
@@ -52,12 +53,13 @@ export function Layout({ configs }: LayoutProps) {
       (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 totalBalance = calculateWalletUsdValue(balances);
   const connectWalletsButtonDisabled =
@@ -67,29 +69,35 @@ export function Layout({ configs }: LayoutProps) {
 
   const { t } = useTranslation();
   useEffect(() => {
-    setToChain(configs?.toChain || null);
-    setToToken(configs?.toToken || null);
-  }, [configs?.toChain, configs?.toToken]);
+    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]);
+
   useEffect(() => {
-    setInputAmount(configs?.fromAmount?.toString() || '');
-  }, [configs?.fromAmount]);
+    setInputAmount(config?.amount?.toString() || '');
+  }, [config?.amount]);
 
   useEffect(() => {
-    setFromToken(configs?.fromToken || null);
-    setFromChain(configs?.fromChain || null);
-  }, [configs?.fromToken, configs?.fromChain]);
+    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]);
 
   useEffect(() => {
-    setToChain(null);
-    setFromChain(null);
-    setFromToken(null);
-    setToToken(null);
-  }, [
-    configs?.fromChains,
-    configs?.toChains,
-    configs?.fromTokens,
-    configs?.toTokens,
-  ]);
+    setAffiliateRef(config?.affiliateRef || null);
+  }, [config?.affiliateRef]);
   return (
     <>
       <Header>
@@ -107,7 +115,9 @@ export function Layout({ configs }: LayoutProps) {
         >
           {connectedWalletsImages?.length ? (
             connectedWalletsImages.map((walletImage, index) => (
-              <WalletImage key={index} src={walletImage} />
+              <WalletImageContainer key={index}>
+                <Image src={walletImage} size={24} />
+              </WalletImageContainer>
             ))
           ) : (
             <></>
@@ -122,7 +132,7 @@ export function Layout({ configs }: LayoutProps) {
           </div>
         </Button>
       </Header>
-      <AppRoutes configs={configs} />
+      <AppRoutes config={config} />
     </>
   );
 }

package/src/components/TokenInfo.tsx

@@ -6,6 +6,8 @@ import {
   styled,
   TextField,
   Typography,
+  Image,
+  Spacer,
 } from '@rango-dev/ui';
 import { useMetaStore } from '../store/meta';
 import { BlockchainMeta, Token } from 'rango-sdk';
@@ -16,7 +18,6 @@ import BigNumber from 'bignumber.js';
 import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
 import { useTranslation } from 'react-i18next';
-import { Spacer } from '@rango-dev/ui';
 import { PercentageChange } from './PercentageChange';
 
 type PropTypes = (
@@ -90,11 +91,6 @@ const Container = styled('div', {
   },
 });
 
-const StyledImage = styled('img', {
-  width: '$24',
-  maxHeight: '$24',
-});
-
 const Options = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
@@ -136,6 +132,7 @@ export function TokenInfo(props: PropTypes) {
   const bestRoute = useBestRouteStore.use.bestRoute();
   const inputAmount = useBestRouteStore.use.inputAmount();
   const balances = useWalletsStore.use.balances();
+  const fetchingBestRoute = useBestRouteStore.use.loading();
   const navigate = useNavigate();
   const { t } = useTranslation();
 
@@ -234,7 +231,7 @@ export function TokenInfo(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && chain ? (
-                <StyledImage src={chain.logo} />
+                <Image src={chain.logo} size={24} />
               ) : (
                 <ImagePlaceholder />
               )
@@ -262,7 +259,7 @@ export function TokenInfo(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && token ? (
-                <StyledImage src={token.image} />
+                <Image src={token.image} size={24} />
               ) : (
                 <ImagePlaceholder />
               )
@@ -311,11 +308,10 @@ export function TokenInfo(props: PropTypes) {
             ) : (
               <OutputContainer>
                 <Typography variant="h4">
-                  {bestRoute
-                    ? `≈ ${numberToString(props.outputAmount)}`
-                    : inputAmount
-                    ? '?'
-                    : '0'}
+                  {fetchingBestRoute && '?'}
+                  {!!bestRoute?.result &&
+                    `≈ ${numberToString(props.outputAmount)}`}
+                  {(!inputAmount || inputAmount === '0') && '0'}
                 </Typography>
               </OutputContainer>
             )}

package/src/components/TokenPreview.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Spacer } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
 import { numberToString } from '../utils/numbers';
+import { Image } from '@rango-dev/ui';
 
 const Box = styled('div', {
   display: 'flex',
@@ -60,11 +61,6 @@ const Container = styled('div', {
   },
 });
 
-const StyledImage = styled('img', {
-  width: '$24',
-  maxHeight: '$24',
-});
-
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
@@ -142,7 +138,7 @@ export function TokenPreview(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && chain ? (
-                <StyledImage src={chain.logo} />
+                <Image src={chain.logo} size={24} />
               ) : (
                 <ImagePlaceholder />
               )
@@ -162,7 +158,7 @@ export function TokenPreview(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && token ? (
-                <StyledImage src={token.image} />
+                <Image src={token.image} size={24} />
               ) : (
                 <ImagePlaceholder />
               )

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
+      affiliateRef,
+      initialRoute
     );
 
     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(() => {