@rango-dev/widget-embedded 0.1.11-next.17 → 0.1.11-next.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.17",
+  "version": "0.1.11-next.20",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -32,7 +32,7 @@
     "@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.11-next.8",
+    "@rango-dev/ui": "^0.1.11-next.9",
     "@rango-dev/wallets-core": "^0.1.11-next.88",
     "@rango-dev/wallets-shared": "^0.1.11-next.84",
     "bignumber.js": "^9.1.1",

package/src/app.css

@@ -6,15 +6,6 @@
   list-style-type: none;
 }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input[type='number'] {
-  -moz-appearance: textfield;
-}
-
 #app {
   height: 100vh;
 }

package/src/components/SwapDetailsPlaceholder.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { SecondaryPage, Spinner, Alert, styled } from '@rango-dev/ui';
-import { LoaderContainer } from '../pages/WalletsPage';
 
 const PlaceholderContainer = styled('div', { height: '450px' });
 
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  paddingTop: '33%',
+  flex: 1,
+});
+
 interface PropTypes {
   requestId: string;
   loading: boolean;

package/src/components/TokenInfo.tsx

@@ -297,6 +297,7 @@ export function TokenInfo(props: PropTypes) {
                   </span>
                 }
                 value={props.inputAmount || ''}
+                min={0}
                 onChange={
                   props.type === 'From'
                     ? (event) => {

package/src/lib.tsx

@@ -1,5 +1,5 @@
 import { SwapContainer } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+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';
@@ -21,6 +21,7 @@ import './i18n';
 import QueueManager from './QueueManager';
 import { useUiStore } from './store/ui';
 import { navigationRoutes } from './constants/navigationRoutes';
+import { initConfig } from './utils/configs';
 
 export type WidgetProps = {
   config?: WidgetConfig;
@@ -45,6 +46,14 @@ export const SwapBox: React.FC<WidgetProps> = ({ config }) => {
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
+  useMemo(() => {
+    if (config?.apiKey) {
+      initConfig({
+        API_KEY: config?.apiKey,
+      });
+    }
+  }, [config]);
+
   const onUpdateState: EventHandler = (
     type,
     event,

package/src/pages/HistoryPage.tsx

@@ -15,11 +15,14 @@ export function HistoryPage() {
   const { manager } = useManager();
   const pendingSwaps = getPendingSwaps(manager).map(({ swap }) => swap);
 
+  const loading = !manager?.isLoaded();
+
   return (
     <History
       list={pendingSwaps}
       groupBy={groupSwapsByDate}
-      onSwapClick={requestId => {
+      loading={loading}
+      onSwapClick={(requestId) => {
         setSelectedSwap(requestId);
         navigate(navigationRoutes.swaps + `/${requestId}`, { replace: true });
       }}

package/src/pages/Home.tsx

@@ -192,8 +192,9 @@ export function Home() {
             <Alert type="error" title={`${swap?.swapperId} Limit`}>
               <>
                 <Typography variant="body3">
-                  {fromAmountRangeError}, Yours: {numberToString(swap?.fromAmount || null)}
-                  &nbsp;{swap?.from.symbol}
+                  {`${fromAmountRangeError}, Yours: ${numberToString(
+                    swap?.fromAmount || null
+                  )} ${swap?.from.symbol}`}
                 </Typography>
                 <Typography variant="body3">{recommendation}</Typography>
               </>

package/src/pages/SwapDetailsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -39,14 +39,6 @@ export function SwapDetailsPage() {
   const [isCopied, handleCopy] = useCopyToClipboard(2000);
   const { manager } = useManager();
 
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 5_000);
-  }, []);
-
   const pendingSwaps = getPendingSwaps(manager);
   const selectedSwap = pendingSwaps.find(
     ({ swap }) => swap.requestId === selectedSwapRequestId
@@ -57,6 +49,7 @@ export function SwapDetailsPage() {
     if (swap) cancelSwap(swap);
   };
   const swap = selectedSwap?.swap;
+  const loading = !manager?.isLoaded();
 
   if (!swap)
     return (

package/src/pages/WalletsPage.tsx

@@ -33,7 +33,7 @@ const ListContainer = styled('div', {
   overflowY: 'auto',
 });
 
-export const LoaderContainer = styled('div', {
+const LoaderContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   width: '100%',
@@ -113,7 +113,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
       <>
         {walletErrorMessage && (
           <AlertContainer>
-            <Alert type="error" title={walletErrorMessage}/>
+            <Alert type="error" title={walletErrorMessage} />
           </AlertContainer>
         )}
         {loadingMetaStatus === 'loading' && (

package/src/utils/configs.ts

@@ -19,6 +19,12 @@ export function setConfig(name: keyof Configs, value: any) {
 }
 
 export function initConfig(nextConfigs: Configs) {
-  configs = structuredClone(nextConfigs);
+  let clonedConfigs;
+  if (typeof structuredClone === 'function') {
+    clonedConfigs = structuredClone(nextConfigs);
+  } else {
+    clonedConfigs = JSON.parse(JSON.stringify(nextConfigs));
+  }
+  configs = clonedConfigs;
   return configs;
 }