@rango-dev/widget-embedded 0.1.10-next.89 → 0.1.10-next.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10-next.89",
+  "version": "0.1.10-next.92",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -35,6 +35,9 @@
     "@rango-dev/wallets-shared": "^0.1.11-next.78",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
+    "i18next": "^22.4.11",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
     "parcel": "^2.8.0",
@@ -42,6 +45,7 @@
     "rango-types": "^0.1.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "zustand": "^4.3.2"
   },

package/src/App.tsx

@@ -1,11 +1,5 @@
-import {
-  SwapContainer,
-  Alert,
-  Button,
-  Typography,
-  Drawer,
-} from '@rango-dev/ui';
-import React, { useState } from 'react';
+import { SwapContainer } from '@rango-dev/ui';
+import React from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import './app.css';
@@ -19,34 +13,28 @@ import {
 } from './utils/wallets';
 import { useWalletsStore } from './store/wallets';
 import { Layout } from './components/Layout';
-import { globalStyles } from './globalStyles';
+import { globalFont, globalStyles } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
 import QueueManager from './QueueManager';
 import { isEvmBlockchain } from 'rango-sdk';
+import { Configs } from './types';
+import './i18n';
 
 const providers = allProviders();
-interface Token {
-  name: string;
-  contractAddress?: string;
-}
 
 //todo: update interface and update widget state based on WidgetProps change
 export type WidgetProps = {
-  fromChain?: string;
-  fromToken?: string;
-  toChain?: string;
-  toToken?: string;
-  fromAmount?: string;
-  slippage?: number;
-  chains?: string[];
-  tokens?: Token[];
-  liquiditySources?: string[];
-  theme: 'dark' | 'light' | 'auto';
+  configs?: Configs;
 };
 
-export function App() {
+export function App({ configs }: WidgetProps) {
   globalStyles();
-  const { activeTheme } = useTheme();
+  globalFont(configs?.fontFamily || 'Roboto');
+  const { activeTheme } = useTheme({
+    ...configs?.colors,
+    borderRadius: configs?.borderRadius,
+  });
+
   const { blockchains } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
@@ -59,13 +47,12 @@ export function App() {
     type,
     event,
     value,
-    state,
+    _,
     supportedChains
   ) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
         const supportedChainNames: Network[] | null =
-          //@ts-ignore
           walletAndSupportedChainsNames(supportedChains);
         const data = prepareAccountsForWalletStore(
           type,
@@ -81,7 +68,6 @@ export function App() {
   };
 
   return (
-    //@ts-ignore
     <Provider
       allBlockChains={blockchains}
       providers={providers}
@@ -90,8 +76,12 @@ export function App() {
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
           <SwapContainer>
-            <AppRouter>
-              <Layout />
+            <AppRouter
+              title={configs?.title}
+              titleSize={configs?.titleSize}
+              titleWeight={configs?.titleWeight}
+            >
+              <Layout configs={configs} />
             </AppRouter>
           </SwapContainer>
         </QueueManager>

package/src/app.css

@@ -1,6 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 * {
-  font-family: 'Roboto';
   box-sizing: border-box;
   margin: 0;
   padding: 0;

package/src/components/AppRouter.tsx

@@ -8,8 +8,15 @@ import {
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { UpdateUrl } from './UpdateUrl';
 import { Home } from '../pages/Home';
-
-const Route: React.FC = (props: PropsWithChildren) => {
+interface PropTypes {
+  title?: string;
+  titleSize?: number;
+  titleWeight?: number;
+}
+const Route: React.FC = ({
+  children,
+  ...props
+}: PropTypes & PropsWithChildren) => {
   const location = useLocation();
   const navigate = useNavigate();
   const ref = useRef(true);
@@ -32,18 +39,21 @@ const Route: React.FC = (props: PropsWithChildren) => {
     ) &&
     ref.current
   )
-    return <Home />;
+    return <Home {...props} />;
 
-  return <> {props.children}</>;
+  return <> {children}</>;
 };
 
-export function AppRouter({ children }: PropsWithChildren) {
+export function AppRouter({
+  children,
+  ...props
+}: PropTypes & PropsWithChildren) {
   const isRouterInContext = useInRouterContext();
   const Router = isRouterInContext ? Route : MemoryRouter;
 
   return (
     <>
-      <Router>{children}</Router>
+      <Router {...props}>{children}</Router>
       {isRouterInContext && <UpdateUrl />}
     </>
   );

package/src/components/AppRoutes.tsx

@@ -11,31 +11,62 @@ import { SettingsPage } from '../pages/SettingsPage';
 import { WalletsPage } from '../pages/WalletsPage';
 import { ConfirmWalletsPage } from '../pages/ConfirmWalletsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
+import { Configs } from '../types';
 
-export const AppRoutes = () =>
+export const AppRoutes = ({
+  fromChains = 'all',
+  toChains = 'all',
+  fromTokens = 'all',
+  toTokens = 'all',
+  liquiditySources = 'all',
+  wallets = 'all',
+  title,
+  multiWallets = true,
+  titleSize,
+  titleWeight,
+}: Configs) =>
   useRoutes([
-    { path: navigationRoutes.home, element: <Home /> },
+    {
+      path: navigationRoutes.home,
+      element: (
+        <Home title={title} titleSize={titleSize} titleWeight={titleWeight} />
+      ),
+    },
     {
       path: navigationRoutes.fromChain,
-      element: <SelectChainPage type="from" />,
+      element: <SelectChainPage type="from" supportedChains={fromChains} />,
+    },
+    {
+      path: navigationRoutes.toChain,
+      element: <SelectChainPage type="to" supportedChains={toChains} />,
     },
-    { path: navigationRoutes.toChain, element: <SelectChainPage type="to" /> },
     {
       path: navigationRoutes.fromToken + '/*',
-      element: <SelectTokenPage type="from" />,
+      element: <SelectTokenPage type="from" supportedTokens={fromTokens} />,
+    },
+    {
+      path: navigationRoutes.toToken,
+      element: <SelectTokenPage type="to" supportedTokens={toTokens} />,
+    },
+    {
+      path: navigationRoutes.settings,
+      element: <SettingsPage supportedSwappers={liquiditySources} />,
     },
-    { path: navigationRoutes.toToken, element: <SelectTokenPage type="to" /> },
-    { path: navigationRoutes.settings, element: <SettingsPage /> },
     {
       path: navigationRoutes.liquiditySources,
-      element: <LiquiditySourcePage />,
+      element: <LiquiditySourcePage supportedSwappers={liquiditySources} />,
     },
     { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
       path: navigationRoutes.swapDetails,
       element: <SwapDetailsPage />,
     },
-    { path: navigationRoutes.wallets, element: <WalletsPage /> },
+    {
+      path: navigationRoutes.wallets,
+      element: (
+        <WalletsPage supportedWallets={wallets} multiWallets={multiWallets} />
+      ),
+    },
     { path: navigationRoutes.confirmSwap, element: <ConfirmSwapPage /> },
     { path: navigationRoutes.confirmWallets, element: <ConfirmWalletsPage /> },
   ]);

package/src/components/BottomLogo.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { styled } from '@rango-dev/ui/src/theme';
 import { Typography } from '@rango-dev/ui';
+import { useTranslation } from 'react-i18next';
 
 const Container = styled('div', {
   display: 'flex',
@@ -24,9 +25,11 @@ const StyledAnchor = styled('a', {
 });
 
 export function BottomLogo() {
+  const { t } = useTranslation();
+
   return (
     <Container>
-      <Typography variant="caption">Powered By</Typography>
+      <Typography variant="caption">{t('Powered By')}</Typography>
       <StyledAnchor href="https://rango.exchange" target="_blank">
         <Logo xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.68 29">
           <defs></defs>

package/src/components/Header.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { styled, Typography } from '@rango-dev/ui';
+import { css, styled, Typography } from '@rango-dev/ui';
 import { HeaderButtons } from './HeaderButtons';
+import { useTranslation } from 'react-i18next';
 
 export const HeaderContainer = styled('div', {
   display: 'flex',
@@ -12,13 +13,24 @@ export const HeaderContainer = styled('div', {
 
 export interface PropTypes {
   onClickRefresh: () => void;
+  title?: string;
+  titleSize?: number;
+  titleWeight?: number;
 }
 
 export function Header(props: PropTypes) {
-  const { onClickRefresh } = props;
+  const { onClickRefresh, title, titleSize, titleWeight } = props;
+  const { t } = useTranslation();
+  const titleStyle = css({
+    fontSize: `${titleSize}px !important`,
+    fontWeight: `${titleWeight} !important`,
+  });
+
   return (
     <HeaderContainer>
-      <Typography variant="h4">SWAP</Typography>
+      <Typography variant="h4" className={titleStyle()}>
+        {t(title.toLocaleLowerCase()) || title}
+      </Typography>
       <HeaderButtons onClickRefresh={onClickRefresh} />
     </HeaderContainer>
   );

package/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import { Button, AddWalletIcon, Typography, styled } from '@rango-dev/ui';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useWallets } from '@rango-dev/wallets-core';
 import { navigationRoutes } from '../constants/navigationRoutes';
@@ -11,6 +11,9 @@ import {
   getSelectableWallets,
 } from '../utils/wallets';
 import { removeDuplicateFrom } from '../utils/common';
+import { Configs } from '../types';
+import { useTranslation } from 'react-i18next';
+import { useBestRouteStore } from '../store/bestRoute';
 
 const Header = styled('div', {
   display: 'flex',
@@ -26,7 +29,11 @@ const WalletImage = styled('img', {
   borderRadius: '99999px',
 });
 
-export function Layout() {
+export type LayoutProps = {
+  configs: Configs;
+};
+
+export function Layout({ configs }: LayoutProps) {
   const navigate = useNavigate();
   const { balances, accounts, selectedWallets } = useWalletsStore();
   const { getWalletInfo } = useWallets();
@@ -36,10 +43,29 @@ export function Layout() {
     )
   );
 
+  const { fromChain, toChain, toToken, fromToken, fromAmount } = configs;
+  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 totalBalance = calculateWalletUsdValue(balances);
   const connectWalletsButtonDisabled =
     useUiStore.use.connectWalletsButtonDisabled();
+  const { t } = useTranslation();
+  useEffect(() => {
+    setToChain(toChain);
+    setToToken(toToken);
+  }, [toChain, toToken]);
+  useEffect(() => {
+    setInputAmount(fromAmount.toString());
+  }, [fromAmount]);
 
+  useEffect(() => {
+    setFromToken(fromToken);
+    setFromChain(fromChain);
+  }, [fromToken, fromChain]);
   return (
     <>
       <Header>
@@ -61,11 +87,11 @@ export function Layout() {
             <></>
           )}
           <Typography variant="body2">
-            {!accounts?.length ? 'Connect Wallet' : `$${totalBalance || 0}`}
+            {!accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`}
           </Typography>
         </Button>
       </Header>
-      <AppRoutes />
+      <AppRoutes {...configs} />
     </>
   );
 }

package/src/components/TokenInfo.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { AngleDownIcon, Button, InfoCircleIcon, styled, TextField, Typography } from '@rango-dev/ui';
+import {
+  AngleDownIcon,
+  Button,
+  InfoCircleIcon,
+  styled,
+  TextField,
+  Typography,
+} from '@rango-dev/ui';
 import { useMetaStore } from '../store/meta';
 import { BlockchainMeta, Token } from 'rango-sdk';
 import { useNavigate } from 'react-router-dom';
@@ -8,9 +15,14 @@ import { numberToString } from '../utils/numbers';
 import BigNumber from 'bignumber.js';
 import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
+import { useTranslation } from 'react-i18next';
 
 type PropTypes = (
-  | { type: 'From'; inputAmount: string; onAmountChange: (amount: string) => void }
+  | {
+      type: 'From';
+      inputAmount: string;
+      onAmountChange: (amount: string) => void;
+    }
   | {
       type: 'To';
       outputAmount: BigNumber | null;
@@ -81,28 +93,47 @@ export function TokenInfo(props: PropTypes) {
   const inputAmount = useBestRouteStore.use.inputAmount();
   const balances = useWalletsStore.use.balances();
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const tokenBalance =
     !!fromChain && !!fromToken
       ? numberToString(
-          getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)
-            ?.amount || '0',
-          8,
+          getBalanceFromWallet(
+            balances,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          8
         )
       : '0';
 
   const tokenBalanceReal =
     !!fromChain && !!fromToken
       ? numberToString(
-          getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)
-            ?.amount || '0',
-          getBalanceFromWallet(balances, fromChain?.name, fromToken?.symbol, fromToken?.address)
-            ?.decimal,
+          getBalanceFromWallet(
+            balances,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.amount || '0',
+          getBalanceFromWallet(
+            balances,
+            fromChain?.name,
+            fromToken?.symbol,
+            fromToken?.address
+          )?.decimal
         )
       : '0';
 
   const ItemSuffix = (
-    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
       {loadingStatus === 'failed' && <InfoCircleIcon color="error" size={24} />}
       <AngleDownIcon />
     </div>
@@ -111,7 +142,7 @@ export function TokenInfo(props: PropTypes) {
   return (
     <Box>
       <div>
-        <Typography variant="body2">{type}</Typography>
+        <Typography variant="body2">{t(type)}</Typography>
       </div>
       <Container>
         {props.type === 'From' && (
@@ -119,10 +150,12 @@ export function TokenInfo(props: PropTypes) {
             <div
               className="balance"
               onClick={() => {
-                if (tokenBalance !== '0') setInputAmount(tokenBalanceReal.split(',').join(''));
-              }}>
+                if (tokenBalance !== '0')
+                  setInputAmount(tokenBalanceReal.split(',').join(''));
+              }}
+            >
               <Button variant="ghost" size="small">
-                <Typography variant="body2">{`Max: ${tokenBalance} ${
+                <Typography variant="body2">{`${t('Max')}: ${tokenBalance} ${
                   fromToken?.symbol || ''
                 }`}</Typography>
               </Button>
@@ -147,8 +180,9 @@ export function TokenInfo(props: PropTypes) {
             suffix={ItemSuffix}
             align="start"
             size="large"
-            style={{ marginRight: '.5rem' }}>
-            {loadingStatus === 'success' && chain ? chain.displayName : 'Chain'}
+            style={{ marginRight: '.5rem' }}
+          >
+            {loadingStatus === 'success' && chain ? chain.displayName : t('Chain')}
           </Button>
           <Button
             onClick={() => {
@@ -171,8 +205,9 @@ export function TokenInfo(props: PropTypes) {
             suffix={ItemSuffix}
             size="large"
             align="start"
-            style={{ marginRight: '.5rem' }}>
-            {loadingStatus === 'success' && token ? token.symbol : 'Token'}
+            style={{ marginRight: '.5rem' }}
+          >
+            {loadingStatus === 'success' && token ? token.symbol : t('Token')}
           </Button>
           {props.type === 'From' ? (
             <TextField
@@ -186,8 +221,12 @@ export function TokenInfo(props: PropTypes) {
                 backgroundColor: '$background !important',
               }}
               suffix={
-                <span style={{ position: 'absolute', right: '4px', bottom: '2px' }}>
-                  <Typography variant="caption">{`$${numberToString(inputUsdValue)}`}</Typography>
+                <span
+                  style={{ position: 'absolute', right: '4px', bottom: '2px' }}
+                >
+                  <Typography variant="caption">{`$${numberToString(
+                    inputUsdValue
+                  )}`}</Typography>
                 </span>
               }
               value={props.inputAmount || ''}
@@ -202,11 +241,17 @@ export function TokenInfo(props: PropTypes) {
           ) : (
             <OutputContainer>
               <Typography variant="body1">
-                {bestRoute ? `≈ ${numberToString(props.outputAmount)}` : inputAmount ? '?' : '0'}
+                {bestRoute
+                  ? `≈ ${numberToString(props.outputAmount)}`
+                  : inputAmount
+                  ? '?'
+                  : '0'}
               </Typography>
-              <span style={{ position: 'absolute', right: '4px', bottom: '2px' }}>
+              <span
+                style={{ position: 'absolute', right: '4px', bottom: '2px' }}
+              >
                 <Typography variant="caption">{`$${numberToString(
-                  props.outputUsdValue,
+                  props.outputUsdValue
                 )}`}</Typography>
               </span>
             </OutputContainer>

package/src/globalStyles.ts

@@ -14,3 +14,13 @@ export const globalStyles = globalCss({
     },
   },
 });
+export const globalFont = (fontFamily: string) =>
+  globalCss({
+    '@import': [
+      "url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')",
+      "url('https://fonts.cdnfonts.com/css/times-new-roman')",
+    ],
+    [`.font_${fontFamily.replace(/ /g, '')} ._text`]: {
+      fontFamily,
+    },
+  })();

package/src/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious(value: string) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef<string>();
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}

package/src/hooks/useSelectLanguage.ts

@@ -0,0 +1,15 @@
+import { useTranslation } from 'react-i18next';
+
+export default function useSelectLanguage() {
+  const { i18n } = useTranslation();
+  // @ts-ignore
+  const currentLanguage = i18n?.language || 'en';
+  const changeLanguage = (value: string) => {
+    if (currentLanguage !== value) {
+      // @ts-ignore
+      i18n.changeLanguage(value);
+    }
+  };
+
+  return { changeLanguage, currentLanguage };
+}