@rango-dev/widget-embedded 0.1.16-next.1 → 0.1.16-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.16-next.1",
+  "version": "0.1.16-next.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -10,11 +10,7 @@
   ],
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
-    "watch-tsc": "tsc --watch --noEmit",
-    "dev": "parcel public/index.html -p 3001 --no-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"
+    "build": "tsdx build"
   },
   "husky": {
     "hooks": {

package/src/components/Layout.tsx

@@ -71,31 +71,35 @@ export function Layout({ config }: LayoutProps) {
 
   const { t } = useTranslation();
   useEffect(() => {
-    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]);
+    if (loadingMetaStatus === 'success') {
+      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, loadingMetaStatus]);
 
   useEffect(() => {
     setInputAmount(config?.amount?.toString() || '');
   }, [config?.amount]);
 
   useEffect(() => {
-    const chain = blockchains.find(
-      (chain) => chain.name === config?.from?.blockchain
-    );
-    const token = tokens.find((t) =>
-      tokensAreEqual(t, config?.from?.token || null)
-    );
+    if (loadingMetaStatus === 'success') {
+      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]);
+      setFromChain(chain || null);
+      setFromToken(token || null);
+    }
+  }, [config?.from?.token, config?.from?.blockchain, loadingMetaStatus]);
 
   useEffect(() => {
     setAffiliateRef(config?.affiliateRef || null);

package/src/index.tsx

@@ -1,14 +1,144 @@
-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 { Widget } from './lib';
+import { SwapContainer } from '@rango-dev/ui';
+import React, { useEffect, useMemo, useState } 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, WalletType } from '@rango-dev/wallets-shared';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from './utils/wallets';
+import { useWalletsStore } from './store/wallets';
+import { Layout } from './components/Layout';
+import { globalFont } from './globalStyles';
+import { useTheme } from './hooks/useTheme';
+import { isEvmBlockchain } from 'rango-sdk';
+import {
+  WidgetTheme,
+  WidgetConfig,
+  WidgetColors,
+  BlockchainAndTokenConfig,
+} from './types';
+import useSelectLanguage from './hooks/useSelectLanguage';
+import './i18n';
+import QueueManager from './QueueManager';
+import { useUiStore } from './store/ui';
+import { navigationRoutes } from './constants/navigationRoutes';
+import { initConfig } from './utils/configs';
+
+export {
+  WidgetConfig,
+  WalletType,
+  WidgetTheme,
+  WidgetColors,
+  BlockchainAndTokenConfig,
+};
+
+export type WidgetProps = {
+  config?: WidgetConfig;
+};
+
+export const Widget: React.FC<WidgetProps> = ({ config }) => {
+  globalFont(config?.theme?.fontFamily || 'Roboto');
+
+  const { activeTheme } = useTheme({ ...config?.theme });
+  const { blockchains } = useMetaStore.use.meta();
+  const disconnectWallet = useWalletsStore.use.disconnectWallet();
+  const connectWallet = useWalletsStore.use.connectWallet();
+  const { changeLanguage } = useSelectLanguage();
+  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const currentPage = useUiStore.use.currentPage();
+
+  const evmBasedChainNames = blockchains
+    .filter(isEvmBlockchain)
+    .map((chain) => chain.name);
+
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
+
+  const onUpdateState: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    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);
+      }
+    }
+    if (event === Events.ACCOUNTS && state.connected) {
+      const key = `${type}-${state.network}-${value}`;
+
+      if (state.connected) {
+        setLastConnectedWalletWithNetwork(key);
+      }
+    }
+
+    if (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
+      setLastConnectedWalletWithNetwork(key);
+    }
+  };
+  let providers = allProviders();
+
+  useEffect(() => {
+    const wallets = config?.wallets;
+    clearConnectedWallet();
+    providers = !wallets
+      ? allProviders()
+      : allProviders().filter((provider) => {
+          const type = provider.config.type;
+          return wallets.find((w) => w === type);
+        });
+  }, [config?.wallets]);
+
+  useEffect(() => {
+    changeLanguage(config?.language || 'en');
+  }, [config?.language]);
+
+  return (
+    <Provider
+      allBlockChains={blockchains}
+      providers={providers}
+      onUpdateState={onUpdateState}
+    >
+      <div id="swap-container" className={activeTheme}>
+        <QueueManager>
+          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
+            <AppRouter
+              lastConnectedWallet={lastConnectedWalletWithNetwork}
+              disconnectedWallet={disconnectedWallet}
+              clearDisconnectedWallet={() => {
+                setDisconnectedWallet(undefined);
+              }}
+            >
+              <Layout config={config} />
+            </AppRouter>
+          </SwapContainer>
+        </QueueManager>
+      </div>
+    </Provider>
+  );
+};

package/dist/App.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import './app.css';
-import { WidgetConfig } from './types';
-import './i18n';
-export declare type WidgetProps = {
-    config?: WidgetConfig;
-};
-export declare function App({ config }: WidgetProps): JSX.Element;
-//# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["src/App.tsx"],"names":[],"mappings":";AAIA,OAAO,WAAW,CAAC;AAenB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,QAAQ,CAAC;AAOhB,oBAAY,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,eA2F1C"}

package/dist/lib.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { WalletType } from '@rango-dev/wallets-shared';
-import { WidgetTheme, WidgetConfig, WidgetColors, BlockchainAndTokenConfig } from './types';
-import './i18n';
-export { WidgetConfig, WalletType, WidgetTheme, WidgetColors, BlockchainAndTokenConfig, };
-export declare type WidgetProps = {
-    config?: WidgetConfig;
-};
-export declare const Widget: React.FC<WidgetProps>;
-//# sourceMappingURL=lib.d.ts.map

package/dist/lib.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["src/lib.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,EAAW,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAUhE,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAEjB,OAAO,QAAQ,CAAC;AAMhB,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,wBAAwB,GACzB,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqGxC,CAAC"}

package/src/App.tsx

@@ -1,123 +0,0 @@
-import { SwapContainer } from '@rango-dev/ui';
-import React, { useEffect, useMemo, useState } from 'react';
-import { AppRouter } from './components/AppRouter';
-import { useMetaStore } from './store/meta';
-import './app.css';
-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, WalletType } from '@rango-dev/wallets-shared';
-import {
-  prepareAccountsForWalletStore,
-  walletAndSupportedChainsNames,
-} from './utils/wallets';
-import { useWalletsStore } from './store/wallets';
-import { Layout } from './components/Layout';
-import { globalFont } from './globalStyles';
-import { useTheme } from './hooks/useTheme';
-import QueueManager from './QueueManager';
-import { isEvmBlockchain } from 'rango-sdk';
-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 = {
-  config?: WidgetConfig;
-};
-
-export function App({ config }: WidgetProps) {
-  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();
-  const connectWallet = useWalletsStore.use.connectWallet();
-  const currentPage = useUiStore.use.currentPage();
-
-  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
-    useState<string>('');
-  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
-
-  const evmBasedChainNames = blockchains
-    .filter(isEvmBlockchain)
-    .map((chain) => chain.name);
-
-  const themeBackground = activeTheme?.colors?.background?.value;
-
-  useEffect(() => {
-    document.body.style.background = themeBackground;
-  }, [themeBackground]);
-
-  const onUpdateState: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    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);
-        setDisconnectedWallet(type);
-      }
-    }
-
-    if (event === Events.ACCOUNTS && state.connected) {
-      const key = `${type}-${state.network}-${value}`;
-
-      if (state.connected) {
-        setLastConnectedWalletWithNetwork(key);
-      }
-    }
-
-    if (event === Events.NETWORK && state.network) {
-      const key = `${type}-${state.network}`;
-      setLastConnectedWalletWithNetwork(key);
-    }
-  };
-
-  return (
-    <Provider
-      allBlockChains={blockchains}
-      providers={providers}
-      onUpdateState={onUpdateState}
-    >
-      <div id="pageContainer" className={activeTheme}>
-        <QueueManager>
-          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
-            <AppRouter
-              lastConnectedWallet={lastConnectedWalletWithNetwork}
-              disconnectedWallet={disconnectedWallet}
-              clearDisconnectedWallet={() => {
-                setDisconnectedWallet(undefined);
-              }}
-            >
-              <Layout config={config} />
-            </AppRouter>
-          </SwapContainer>
-        </QueueManager>
-      </div>
-    </Provider>
-  );
-}

package/src/app.css

@@ -1,12 +0,0 @@
-@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');
-
-#app {
-  height: 100vh;
-}
-#pageContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}

package/src/lib.tsx

@@ -1,144 +0,0 @@
-import { SwapContainer } from '@rango-dev/ui';
-import React, { useEffect, useMemo, useState } 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, WalletType } from '@rango-dev/wallets-shared';
-import {
-  prepareAccountsForWalletStore,
-  walletAndSupportedChainsNames,
-} from './utils/wallets';
-import { useWalletsStore } from './store/wallets';
-import { Layout } from './components/Layout';
-import { globalFont } from './globalStyles';
-import { useTheme } from './hooks/useTheme';
-import { isEvmBlockchain } from 'rango-sdk';
-import {
-  WidgetTheme,
-  WidgetConfig,
-  WidgetColors,
-  BlockchainAndTokenConfig,
-} from './types';
-import useSelectLanguage from './hooks/useSelectLanguage';
-import './i18n';
-import QueueManager from './QueueManager';
-import { useUiStore } from './store/ui';
-import { navigationRoutes } from './constants/navigationRoutes';
-import { initConfig } from './utils/configs';
-
-export {
-  WidgetConfig,
-  WalletType,
-  WidgetTheme,
-  WidgetColors,
-  BlockchainAndTokenConfig,
-};
-
-export type WidgetProps = {
-  config?: WidgetConfig;
-};
-
-export const Widget: React.FC<WidgetProps> = ({ config }) => {
-  globalFont(config?.theme?.fontFamily || 'Roboto');
-
-  const { activeTheme } = useTheme({ ...config?.theme });
-  const { blockchains } = useMetaStore.use.meta();
-  const disconnectWallet = useWalletsStore.use.disconnectWallet();
-  const connectWallet = useWalletsStore.use.connectWallet();
-  const { changeLanguage } = useSelectLanguage();
-  const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
-  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
-    useState<string>('');
-  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
-  const currentPage = useUiStore.use.currentPage();
-
-  const evmBasedChainNames = blockchains
-    .filter(isEvmBlockchain)
-    .map((chain) => chain.name);
-
-  useMemo(() => {
-    if (config?.apiKey) {
-      initConfig({
-        API_KEY: config?.apiKey,
-      });
-    }
-  }, [config]);
-
-  const onUpdateState: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    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);
-      }
-    }
-    if (event === Events.ACCOUNTS && state.connected) {
-      const key = `${type}-${state.network}-${value}`;
-
-      if (state.connected) {
-        setLastConnectedWalletWithNetwork(key);
-      }
-    }
-
-    if (event === Events.NETWORK && state.network) {
-      const key = `${type}-${state.network}`;
-      setLastConnectedWalletWithNetwork(key);
-    }
-  };
-  let providers = allProviders();
-
-  useEffect(() => {
-    const wallets = config?.wallets;
-    clearConnectedWallet();
-    providers = !wallets
-      ? allProviders()
-      : allProviders().filter((provider) => {
-          const type = provider.config.type;
-          return wallets.find((w) => w === type);
-        });
-  }, [config?.wallets]);
-
-  useEffect(() => {
-    changeLanguage(config?.language || 'en');
-  }, [config?.language]);
-
-  return (
-    <Provider
-      allBlockChains={blockchains}
-      providers={providers}
-      onUpdateState={onUpdateState}
-    >
-      <div className={activeTheme}>
-        <QueueManager>
-          <SwapContainer fixedHeight={currentPage !== navigationRoutes.home}>
-            <AppRouter
-              lastConnectedWallet={lastConnectedWalletWithNetwork}
-              disconnectedWallet={disconnectedWallet}
-              clearDisconnectedWallet={() => {
-                setDisconnectedWallet(undefined);
-              }}
-            >
-              <Layout config={config} />
-            </AppRouter>
-          </SwapContainer>
-        </QueueManager>
-      </div>
-    </Provider>
-  );
-};