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

package/src/hooks/useTheme.ts

@@ -1,36 +1,126 @@
-import { lightTheme, darkTheme } from '@rango-dev/ui';
-import { useState, useEffect } from 'react';
+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 { shadeColor } from '../utils/common';
+import usePrevious from './usePrevious';
 
-export function useTheme() {
+export function useTheme({
+  primary = '#5FA425',
+  background = '#fff',
+  foreground = '#000',
+  error = '#FF0000',
+  warning = '#F5A623',
+  success = '#0070F3',
+  fontFamily = 'Robot',
+  borderRadius = 5,
+}: Colors & { borderRadius?: number; fontFamily?: string }) {
   const theme = useSettingsStore.use.theme();
   const fetchMeta = useMetaStore.use.fetchMeta();
+  const colors = {
+    neutrals200: '#FAFAFA',
+    neutrals300: '#EAEAEA',
+    neutrals400: '#999999',
+    neutrals500: '#888888',
+    neutrals600: '#666666',
+    neutrals700: '#444444',
+    neutrals800: '#333333',
+    neutrals900: '#111111',
+    primary,
+    primary100: shadeColor(primary, 15),
+    primary200: shadeColor(primary, -10),
+    primary300: shadeColor(primary, -15),
+    primary400: shadeColor(primary, -20),
+    primary500: shadeColor(primary, -25),
+    primary600: shadeColor(primary, -30),
+    primary700: shadeColor(primary, -35),
+    primary800: shadeColor(primary, -40),
+    primary900: shadeColor(primary, -45),
+    background,
+    foreground,
+    error,
+    error100: shadeColor(error, 50),
+    error300: shadeColor(error, -10),
+    error500: shadeColor(error, -20),
+    error700: shadeColor(error, -30),
+    warning,
+    warning100: shadeColor(warning, 50),
+    warning300: shadeColor(warning, -10),
+    warning500: shadeColor(warning, -20),
+    warning700: shadeColor(warning, -30),
+    success,
+    success100: shadeColor(success, 50),
+    success300: shadeColor(success, -10),
+    success500: shadeColor(success, -20),
+    success700: shadeColor(success, -30),
+  };
+
+  const customeLightTheme = createTheme({
+    colors,
+    radii: {
+      5: `${borderRadius}px`,
+    },
+  });
 
-  const [OSTheme, setOSTheme] = useState(lightTheme);
+  const customeDarkTheme = createTheme({
+    colors: {
+      ...colors,
+      neutrals200: '#111111',
+      neutrals300: '#333333',
+      neutrals400: '#444444',
+      neutrals500: '#666666',
+      neutrals600: '#888888',
+      neutrals700: '#999999',
+      neutrals800: '#EAEAEA',
+      neutrals900: '#FAFAFA',
+      foreground: background,
+      background: foreground,
+    },
+    radii: {
+      5: `${borderRadius}px`,
+    },
+  });
+  const [OSTheme, setOSTheme] = useState(customeLightTheme);
   useEffect(() => {
     (async () => {
       await fetchMeta();
     })();
 
     const switchTheme = (event: MediaQueryListEvent) => {
-      if (event.matches) setOSTheme(darkTheme);
-      else setOSTheme(lightTheme);
+      if (event.matches) setOSTheme(customeDarkTheme);
+      else setOSTheme(customeLightTheme);
     };
 
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      setOSTheme(darkTheme);
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      setOSTheme(customeDarkTheme);
     }
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme);
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', switchTheme);
     return () => {
-      window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', switchTheme);
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .removeEventListener('change', switchTheme);
     };
   }, []);
 
+  const prevFont = usePrevious(fontFamily);
+
+  useLayoutEffect(() => {
+    const { classList } = document.body;
+
+    if (prevFont) classList.remove(`font_${prevFont.replace(/ /g, '')}`);
+    classList.add(`font_${fontFamily.replace(/ /g, '')}`);
+  }, [fontFamily]);
+
   const getActiveTheme = () => {
     if (theme === 'auto') return OSTheme;
-    else return theme === 'dark' ? darkTheme : lightTheme;
+    else return theme === 'dark' ? customeDarkTheme : customeLightTheme;
   };
 
   return { activeTheme: getActiveTheme() };

package/src/i18n.js

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import en from './languages/en.json';
+import tr from './languages/tr.json';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+const languages = ['en', 'tr'];
+
+i18n
+  .use(Backend)
+  // detect user language
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: en,
+      },
+      tr: {
+        translation: tr,
+      },
+    },
+    fallbackLng: 'en',
+    debug: true,
+    whitelist: languages,
+  });
+
+export default i18n;

package/src/languages/en.json

@@ -0,0 +1,13 @@
+{
+  "swap": "SWAP",
+  "Connect Wallet":"Connect Wallet",
+  "Powered By":"Powered By",
+  "From":"From",
+  "To":"To",
+  "Max":"Max",
+  "Chain": "Chain",
+  "Token": "Token",
+  "Source" :"Source",
+  "Destination" :"Destination",
+  "Select Wallet":"Select Wallet"
+}

package/src/languages/tr.json

@@ -0,0 +1,11 @@
+{
+    "swap": "TAKAS",
+    "Select Wallet":"Cüzdan Seç",
+    "Powered By" :"Tarafından desteklenmektedir",
+    "Connect Wallet":"Cüzdanı Bağla",
+    "From":"İtibaren",
+    "To":"İle",
+    "Max":"maks.",
+    "Chain": "Zincir",
+    "Token": "Jeton"
+}

package/src/lib.tsx

@@ -1,5 +1,5 @@
 import { SwapContainer } from '@rango-dev/ui';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import { Events, Provider } from '@rango-dev/wallets-core';
@@ -12,27 +12,49 @@ 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 { isEvmBlockchain } from 'rango-sdk';
+import { Configs } from './types';
+import { useSettingsStore } from './store/settings';
+import useSelectLanguage from './hooks/useSelectLanguage';
+import './i18n';
+import QueueManager from './QueueManager';
 
-const providers = allProviders();
+export type WidgetProps = {
+  configs: Configs;
+};
 
-export const SwapBox: React.FC = () => {
+export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
   globalStyles();
-  const { activeTheme } = useTheme();
+  globalFont(configs?.fontFamily || 'Roboto');
+
+  const { activeTheme } = useTheme({
+    ...configs.colors,
+    borderRadius: configs?.borderRadius,
+    fontFamily: configs?.fontFamily,
+  });
   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 evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
-  const onUpdateState: EventHandler = (type, event, value, supportedChains) => {
+  const onUpdateState: EventHandler = (
+    type,
+    event,
+    value,
+    _,
+    supportedChains
+  ) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
         const supportedChainNames: Network[] | null =
-          //@ts-ignore
           walletAndSupportedChainsNames(supportedChains);
         const data = prepareAccountsForWalletStore(
           type,
@@ -46,6 +68,27 @@ export const SwapBox: React.FC = () => {
       }
     }
   };
+  let providers = allProviders();
+
+  useEffect(() => {
+    if (configs.theme !== 'auto') setTheme(configs.theme);
+  }, [configs.theme]);
+
+  useEffect(() => {
+    const wallets = configs.wallets;
+    clearConnectedWallet();
+    providers =
+      wallets === 'all'
+        ? allProviders()
+        : allProviders().filter((provider) => {
+            const type = provider.config.type;
+            return wallets.find((w) => w === type);
+          });
+  }, [configs?.wallets]);
+
+  useEffect(() => {
+    changeLanguage(configs?.languege);
+  }, [configs?.languege]);
 
   return (
     <Provider
@@ -54,11 +97,22 @@ export const SwapBox: React.FC = () => {
       onUpdateState={onUpdateState}
     >
       <div id="pageContainer" className={activeTheme}>
-        <SwapContainer>
-          <AppRouter>
-            <Layout />
-          </AppRouter>
-        </SwapContainer>
+        <QueueManager>
+          <SwapContainer
+            style={{
+              width: configs?.width || 'auto',
+              height: configs?.height || 'auto',
+            }}
+          >
+            <AppRouter
+              title={configs.title}
+              titleSize={configs.titleSize}
+              titleWeight={configs.titleWeight}
+            >
+              <Layout configs={configs} />
+            </AppRouter>
+          </SwapContainer>
+        </QueueManager>
       </div>
     </Provider>
   );

package/src/pages/Home.tsx

@@ -58,8 +58,14 @@ const Alerts = styled('div', {
   width: '100%',
   paddingTop: '$16',
 });
+interface PropTypes {
+  title?: string;
+  titleSize?: number;
+  titleWeight?: number;
+}
+export function Home(props: PropTypes) {
+  const { title = 'SWAP', titleSize = 18, titleWeight = 600 } = props;
 
-export function Home() {
   const waningMessage = '';
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
@@ -72,9 +78,9 @@ export function Home() {
   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();
-  const setInputAmount = useBestRouteStore.use.setInputAmount();
   const outputAmount = useBestRouteStore.use.outputAmount();
   const outputUsdValue = useBestRouteStore.use.outputUsdValue();
   const bestRoute = useBestRouteStore.use.bestRoute();
@@ -133,9 +139,15 @@ export function Home() {
 
   const highFee = hasHighFee(totalFeeInUsd);
 
+ 
   return (
     <Container>
-      <Header onClickRefresh={fetchBestRoute} />
+      <Header
+        title={title}
+        titleSize={titleSize}
+        titleWeight={titleWeight}
+        onClickRefresh={fetchBestRoute}
+      />
       <TokenInfo
         type="From"
         chain={fromChain}

package/src/pages/LiquiditySourcesPage.tsx

@@ -4,10 +4,13 @@ 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';
-
-export function LiquiditySourcePage() {
-  const { swappers } = useMetaStore.use.meta();
+interface PropTypes {
+  supportedSwappers: 'all' | Source[];
+}
+export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
+  const swappers = useMetaStore.use.meta().swappers;
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const disabledLiquiditySources =
     useSettingsStore.use.disabledLiquiditySources();
@@ -42,7 +45,16 @@ export function LiquiditySourcePage() {
   return (
     <LiquiditySourcesSelector
       toggleAll={toggleAllLiquiditySources}
-      list={uniqueSwappersGroups}
+      list={
+        supportedSwappers !== 'all'
+          ? uniqueSwappersGroups.filter(
+              (item) =>
+                supportedSwappers.filter(
+                  (s) => s.title === item.title && s.type === item.type
+                ).length > 0
+            )
+          : uniqueSwappersGroups
+      }
       onChange={(liquiditySource) =>
         toggleLiquiditySource(liquiditySource.title)
       }

package/src/pages/SelectChainPage.tsx

@@ -4,15 +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[];
 }
 
 export function SelectChainPage(props: PropTypes) {
-  const { type } = props;
-
-  const { blockchains } = useMetaStore.use.meta();
+  const { type, supportedChains } = props;
+  const blockchains =
+    supportedChains === 'all'
+      ? useMetaStore.use.meta().blockchains
+      : supportedChains;
   const loadingStatus = useMetaStore.use.loadingStatus();
   const fromChain = useBestRouteStore.use.fromChain();
   const toChain = useBestRouteStore.use.toChain();

package/src/pages/SelectTokenPage.tsx

@@ -14,6 +14,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 
 interface PropTypes {
   type: 'from' | 'to';
+  supportedTokens: 'all' | Token[];
 }
 
 export interface TokenWithBalance extends Token {
@@ -24,10 +25,13 @@ export interface TokenWithBalance extends Token {
 }
 
 export function SelectTokenPage(props: PropTypes) {
-  const { type } = props;
   const { navigateBackFrom } = useNavigateBack();
 
-  const { tokens } = useMetaStore.use.meta();
+  const { type, supportedTokens } = props;
+  const tokens =
+    supportedTokens === 'all'
+      ? useMetaStore.use.meta().tokens
+      : supportedTokens;
   const fromChain = useBestRouteStore.use.fromChain();
   const toChain = useBestRouteStore.use.toChain();
   const fromToken = useBestRouteStore.use.fromToken();

package/src/pages/SettingsPage.tsx

@@ -5,14 +5,17 @@ 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,
   SLIPPAGES,
 } from '../constants/swapSettings';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-
-export function SettingsPage() {
+interface PropTypes {
+  supportedSwappers: 'all' | Source[];
+}
+export function SettingsPage({ supportedSwappers }: PropTypes) {
   const slippage = useSettingsStore.use.slippage();
   const setSlippage = useSettingsStore.use.setSlippage();
   const disabledLiquiditySources =
@@ -21,7 +24,7 @@ export function SettingsPage() {
   const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
   const theme = useSettingsStore.use.theme();
   const setTheme = useSettingsStore.use.setTheme();
-  const { swappers } = useMetaStore.use.meta();
+  const swappers = useMetaStore.use.meta().swappers;
   const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
 
@@ -40,6 +43,8 @@ export function SettingsPage() {
     .find(s => {
       if (s) {
         for (const type of s.types) {
+          if (supportedSwappers !== 'all') {
+          }
           uniqueSwappersGroups.push({
             title: s.swapperGroup,
             logo: s.logo,
@@ -49,19 +54,38 @@ export function SettingsPage() {
         }
       }
     });
+  supportedSwappers !== 'all' &&
+    uniqueSwappersGroups.filter(
+      (item) =>
+        supportedSwappers.filter(
+          (s) => s.title === item.title && s.type === item.type
+        ).length > 0
+    );
+
+  const supportedUniqueSwappersGroups =
+    supportedSwappers !== 'all'
+      ? uniqueSwappersGroups.filter(
+          (item) =>
+            supportedSwappers.filter(
+              (s) => s.title === item.title && s.type === item.type
+            ).length > 0
+        )
+      : uniqueSwappersGroups;
 
   return (
     <Settings
       slippages={SLIPPAGES}
       selectedSlippage={slippage}
       onSlippageChange={slippage => setSlippage(slippage)}
-      liquiditySources={uniqueSwappersGroups}
-      selectedLiquiditySources={uniqueSwappersGroups.filter((s) => s.selected)}
       onLiquiditySourcesClick={navigate.bind(
         null,
         navigationRoutes.liquiditySources
       )}
       onBack={navigateBackFrom.bind(null, navigationRoutes.settings)}
+      liquiditySources={supportedUniqueSwappersGroups}
+      selectedLiquiditySources={supportedUniqueSwappersGroups.filter(
+        (s) => s.selected
+      )}
       customSlippage={customSlippage || NaN}
       onCustomSlippageChange={setCustomSlippage}
       minSlippage={MIN_SLIPPGAE}

package/src/pages/WalletsPage.tsx

@@ -4,6 +4,7 @@ import {
   styled,
   Wallet,
   Typography,
+  WalletState,
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 import { getlistWallet } from '../utils/wallets';
@@ -12,6 +13,12 @@ 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',
@@ -25,17 +32,18 @@ const ListContainer = styled('div', {
 const AlertContainer = styled('div', {
   paddingBottom: '$16',
 });
-export function WalletsPage() {
+export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const wallets = getlistWallet(
     state,
     getWalletInfo,
-    Object.values(WalletType)
+    supportedWallets === 'all' ? Object.values(WalletType) : supportedWallets
   );
   const [walletErrorMessage, setWalletErrorMessage] = useState('');
   const toggleConnectWalletsButton =
     useUiStore.use.toggleConnectWalletsButton();
+  const { t } = useTranslation();
 
   const onSelectWallet = async (type: WalletType) => {
     const wallet = state(type);
@@ -44,6 +52,12 @@ export function WalletsPage() {
       if (wallet.connected) {
         await disconnect(type);
       } else {
+        if (
+          !multiWallets &&
+          !!wallets.find((w) => w.state === WalletState.CONNECTED)
+        ) {
+          return;
+        }
         await connect(type);
       }
     } catch (e) {
@@ -58,7 +72,7 @@ export function WalletsPage() {
 
   return (
     <SecondaryPage
-      title="Select Wallet"
+      title={t('Select Wallet')}
       textField={false}
       onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}
     >

package/src/store/wallets.ts

@@ -50,6 +50,7 @@ interface WalletsStore {
   disconnectWallet: (walletType: WalletType) => void;
   initSelectedWallets: () => void;
   setSelectedWallet: (wallet: SelectableWallet) => void;
+  clearConnectedWallet: () => void;
 }
 
 export const useWalletsStore = createSelectors(
@@ -151,6 +152,13 @@ export const useWalletsStore = createSelectors(
               walletType: wallet.walletType,
             }),
         })),
+
+      clearConnectedWallet: () =>
+        set(() => ({
+          accounts: [],
+          balances: [],
+          selectedWallets: [],
+        })),
     }))
   )
 );

package/src/types/config.ts

@@ -0,0 +1,44 @@
+import { BlockchainMeta, Token } from 'rango-sdk';
+import { WalletType } from '@rango-dev/wallets-shared';
+export interface Source {
+  title: string;
+  type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
+}
+
+export type Colors = {
+  background?: string;
+  // inputBackground?: string;
+  // icons?: string;
+  primary?: string;
+  foreground?: string;
+  // text?: string;
+  success?: string;
+  error?: string;
+  warning?: string;
+};
+
+export type Configs = {
+  fromChain: BlockchainMeta | null;
+  fromToken: Token | null;
+  toChain: BlockchainMeta | null;
+  toToken: Token | null;
+  fromAmount: number;
+  fromChains: 'all' | BlockchainMeta[];
+  fromTokens: 'all' | Token[];
+  toChains: 'all' | BlockchainMeta[];
+  toTokens: 'all' | Token[];
+  liquiditySources: 'all' | Source[];
+  wallets: 'all' | WalletType[];
+  multiWallets: boolean;
+  customeAddress: boolean;
+  theme: 'dark' | 'light' | 'auto';
+  title: string;
+  width: number;
+  height: number;
+  languege: string;
+  borderRadius: number;
+  fontFamily: string;
+  titleSize: number;
+  titleWeight: number;
+  colors: Colors;
+};

package/src/types/index.ts

@@ -1 +1,2 @@
 export * from './swap';
+export * from './config';