@rango-dev/widget-embedded 0.1.10-next.100

package/src/hooks/useTheme.ts

@@ -0,0 +1,127 @@
+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({
+  primary = '#5FA425',
+  background = '#fff',
+  foreground = '#000',
+  error = '#FF0000',
+  warning = '#F5A623',
+  success = '#0070F3',
+  fontFamily = 'Robot',
+  borderRadius = 8,
+}: Colors & { borderRadius?: number; fontFamily?: string }) {
+  const theme = useSettingsStore.use.theme();
+  const fetchMeta = useMetaStore.use.fetchMeta();
+  const colors = {
+    neutrals200: '#FAFAFA',
+    neutrals300: '#f2f2f2',
+    neutrals400: '#dedede',
+    neutrals500: '#cccccc',
+    neutrals600: '#acacac',
+    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 customeDarkTheme = createTheme({
+    colors: {
+      ...colors,
+      neutrals200: '#111111',
+      neutrals300: '#333333',
+      neutrals400: '#444444',
+      neutrals500: '#acacac',
+      neutrals600: '#cccccc',
+      neutrals700: '#dedede',
+      neutrals800: '#f2f2f2',
+      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(customeDarkTheme);
+      else setOSTheme(customeLightTheme);
+    };
+
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      setOSTheme(customeDarkTheme);
+    }
+
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', switchTheme);
+    return () => {
+      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' ? 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/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { App } from './App';
+
+const container = document.getElementById('app')!;
+const root = createRoot(container);
+root.render(
+  <BrowserRouter>
+    <App />,
+  </BrowserRouter>
+);
+
+export { SwapBox } from './lib';

package/src/languages/en.json

@@ -0,0 +1,14 @@
+{
+  "swap": "SWAP",
+  "Connect Wallet": "Connect Wallet",
+  "Powered By": "Powered By",
+  "From": "You sell",
+  "To": "You receive",
+  "Balance": "Balance",
+  "Max": "Max",
+  "Chain": "Chain",
+  "Token": "Token",
+  "Source": "Source",
+  "Destination": "Destination",
+  "Select Wallet": "Connect Your 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

@@ -0,0 +1,119 @@
+import { SwapContainer } from '@rango-dev/ui';
+import React, { useEffect } from 'react';
+import { AppRouter } from './components/AppRouter';
+import { useMetaStore } from './store/meta';
+import { Events, Provider } from '@rango-dev/wallets-core';
+import { allProviders } from '@rango-dev/provider-all';
+import { EventHandler } from '@rango-dev/wallets-core/dist/wallet';
+import { Network } from '@rango-dev/wallets-shared';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from './utils/wallets';
+import { useWalletsStore } from './store/wallets';
+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 useSelectLanguage from './hooks/useSelectLanguage';
+import './i18n';
+import QueueManager from './QueueManager';
+
+export type WidgetProps = {
+  configs: Configs;
+};
+
+export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
+  globalStyles();
+  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
+  ) => {
+    if (event === Events.ACCOUNTS) {
+      if (value) {
+        const supportedChainNames: Network[] | null =
+          walletAndSupportedChainsNames(supportedChains);
+        const data = prepareAccountsForWalletStore(
+          type,
+          value,
+          evmBasedChainNames,
+          supportedChainNames
+        );
+        connectWallet(data);
+      } else {
+        disconnectWallet(type);
+      }
+    }
+  };
+  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
+      allBlockChains={blockchains}
+      providers={providers}
+      onUpdateState={onUpdateState}
+    >
+      <div id="pageContainer" className={activeTheme}>
+        <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>
+  );
+};