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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10",
+  "version": "0.1.11-next.10",
   "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/PercentageChange.tsx

@@ -0,0 +1,33 @@
+import BigNumber from 'bignumber.js';
+import React from 'react';
+import { getPercentageChange } from '../utils/swap';
+import { Typography } from '@rango-dev/ui';
+import { numberToString } from '../utils/numbers';
+
+interface PropTypes {
+  inputUsdValue: BigNumber | null;
+  outputUsdValue: BigNumber | null;
+}
+
+export function PercentageChange(props: PropTypes) {
+  const { inputUsdValue, outputUsdValue } = props;
+
+  if (!inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)) return null;
+
+  const percentageChange = getPercentageChange(
+    inputUsdValue.toNumber(),
+    outputUsdValue.toNumber()
+  );
+
+  const showPercentageChange = percentageChange?.lt(0);
+
+  return (
+    <>
+      {showPercentageChange && (
+        <Typography variant="caption" color="$error500">
+          {`(${numberToString(percentageChange, 0, 2)}%)`}
+        </Typography>
+      )}
+    </>
+  );
+}

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,7 @@ 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 = (
   | {
@@ -80,11 +82,13 @@ const Container = styled('div', {
       width: '30%',
     },
   },
-});
-
-const StyledImage = styled('img', {
-  width: '$24',
-  maxHeight: '$24',
+  '.output-usd': {
+    display: 'flex',
+    div: {
+      display: 'flex',
+      paddingLeft: '$8',
+    },
+  },
 });
 
 const Options = styled('div', {
@@ -201,10 +205,18 @@ export function TokenInfo(props: PropTypes) {
               </div>
             </Options>
           ) : (
-            <Typography
-              variant="caption"
-              color="neutrals600"
-            >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+            <div className="output-usd">
+              <PercentageChange
+                inputUsdValue={inputUsdValue}
+                outputUsdValue={props.outputUsdValue}
+              />
+              <div>
+                <Typography
+                  variant="caption"
+                  color="neutrals600"
+                >{`$${numberToString(props.outputUsdValue)}`}</Typography>
+              </div>
+            </div>
           )}
         </div>
         <div className="form">
@@ -218,7 +230,7 @@ export function TokenInfo(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && chain ? (
-                <StyledImage src={chain.logo} />
+                <Image src={chain.logo} size={24} />
               ) : (
                 <ImagePlaceholder />
               )
@@ -246,7 +258,7 @@ export function TokenInfo(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && token ? (
-                <StyledImage src={token.image} />
+                <Image src={token.image} size={24} />
               ) : (
                 <ImagePlaceholder />
               )

package/src/components/TokenPreview.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Button, InfoCircleIcon, styled, Typography } from '@rango-dev/ui';
 import { LoadingStatus } from '../store/meta';
 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',
@@ -37,6 +38,9 @@ const Container = styled('div', {
     justifyContent: 'space-between',
     alignItems: 'center',
     minHeight: '32px',
+    '.usd-value': {
+      paddingLeft: '$8',
+    },
   },
   '.form': {
     display: 'flex',
@@ -57,11 +61,6 @@ const Container = styled('div', {
   },
 });
 
-const StyledImage = styled('img', {
-  width: '$24',
-  maxHeight: '$24',
-});
-
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
@@ -95,10 +94,11 @@ interface PropTypes {
     symbol: string;
     image: string;
   };
+  percentageChange?: ReactNode;
 }
 
 export function TokenPreview(props: PropTypes) {
-  const { chain, token, loadingStatus } = props;
+  const { chain, token, loadingStatus, percentageChange } = props;
   const { t } = useTranslation();
 
   const ItemSuffix = (
@@ -120,12 +120,16 @@ export function TokenPreview(props: PropTypes) {
           <Typography variant="body2" color="neutrals800">
             {props.label}
           </Typography>
-          {props.usdValue && (
-            <Typography
-              variant="caption"
-              color="neutrals600"
-            >{`$${numberToString(props.usdValue)}`}</Typography>
-          )}
+          <div>
+            {percentageChange}
+            {props.usdValue && (
+              <Typography
+                variant="caption"
+                color="neutrals600"
+                className="usd-value"
+              >{`$${numberToString(props.usdValue)}`}</Typography>
+            )}
+          </div>
         </div>
         <div className="form">
           <Button
@@ -134,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 />
               )
@@ -154,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 />
               )