@rango-dev/widget-embedded 0.1.11-next.5 → 0.1.11-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.11-next.5",
+  "version": "0.1.11-next.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/App.tsx

@@ -1,5 +1,5 @@
 import { SwapContainer } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import './app.css';
@@ -46,6 +46,12 @@ export function App({ config }: WidgetProps) {
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
+  const themeBackground = activeTheme?.colors?.background?.value;
+
+  useEffect(() => {
+    document.body.style.background = themeBackground;
+  }, [themeBackground]);
+
   const onUpdateState: EventHandler = (
     type,
     event,

package/src/components/HeaderButtons.tsx

@@ -30,7 +30,7 @@ export function HeaderButtons(props: PropTypes) {
           onClick={onClickRefresh}
           disabled={!onClickRefresh}
         >
-          <RetryIcon size={24} />
+          <RetryIcon size={24} disabled={!onClickRefresh} />
         </Button>
       </Tooltip>
       <Tooltip content="Transactions History">

package/src/components/Layout.tsx

@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
+import { Image } from '@rango-dev/ui';
 
 const Header = styled('div', {
   display: 'flex',
@@ -33,9 +34,7 @@ const Header = styled('div', {
   },
 });
 
-const WalletImage = styled('img', {
-  width: '$24',
-  height: '$24',
+const WalletImageContainer = styled('div', {
   marginLeft: -15,
   marginRight: '$6',
   borderRadius: '99999px',
@@ -116,7 +115,9 @@ export function Layout({ config }: LayoutProps) {
         >
           {connectedWalletsImages?.length ? (
             connectedWalletsImages.map((walletImage, index) => (
-              <WalletImage key={index} src={walletImage} />
+              <WalletImageContainer key={index}>
+                <Image src={walletImage} size={24} />
+              </WalletImageContainer>
             ))
           ) : (
             <></>

package/src/components/TokenInfo.tsx

@@ -6,6 +6,8 @@ import {
   styled,
   TextField,
   Typography,
+  Image,
+  Spacer,
 } from '@rango-dev/ui';
 import { useMetaStore } from '../store/meta';
 import { BlockchainMeta, Token } from 'rango-sdk';
@@ -16,7 +18,6 @@ import BigNumber from 'bignumber.js';
 import { getBalanceFromWallet } from '../utils/wallets';
 import { useWalletsStore } from '../store/wallets';
 import { useTranslation } from 'react-i18next';
-import { Spacer } from '@rango-dev/ui';
 import { PercentageChange } from './PercentageChange';
 
 type PropTypes = (
@@ -90,11 +91,6 @@ const Container = styled('div', {
   },
 });
 
-const StyledImage = styled('img', {
-  width: '$24',
-  maxHeight: '$24',
-});
-
 const Options = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end',
@@ -234,7 +230,7 @@ export function TokenInfo(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && chain ? (
-                <StyledImage src={chain.logo} />
+                <Image src={chain.logo} size={24} />
               ) : (
                 <ImagePlaceholder />
               )
@@ -262,7 +258,7 @@ export function TokenInfo(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && token ? (
-                <StyledImage src={token.image} />
+                <Image src={token.image} size={24} />
               ) : (
                 <ImagePlaceholder />
               )

package/src/components/TokenPreview.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Spacer } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
 import { numberToString } from '../utils/numbers';
+import { Image } from '@rango-dev/ui';
 
 const Box = styled('div', {
   display: 'flex',
@@ -60,11 +61,6 @@ const Container = styled('div', {
   },
 });
 
-const StyledImage = styled('img', {
-  width: '$24',
-  maxHeight: '$24',
-});
-
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
@@ -142,7 +138,7 @@ export function TokenPreview(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && chain ? (
-                <StyledImage src={chain.logo} />
+                <Image src={chain.logo} size={24} />
               ) : (
                 <ImagePlaceholder />
               )
@@ -162,7 +158,7 @@ export function TokenPreview(props: PropTypes) {
             loading={loadingStatus === 'loading'}
             prefix={
               loadingStatus === 'success' && token ? (
-                <StyledImage src={token.image} />
+                <Image src={token.image} size={24} />
               ) : (
                 <ImagePlaceholder />
               )

package/src/hooks/useTheme.ts

@@ -65,6 +65,9 @@ export function useTheme({
     radii: {
       5: `${borderRadius}px`,
     },
+    shadows: {
+      s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',
+    },
   });
 
   const customeDarkTheme = createTheme({
@@ -84,6 +87,9 @@ export function useTheme({
     radii: {
       5: `${borderRadius}px`,
     },
+    shadows: {
+      s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222',
+    },
   });
   const [OSTheme, setOSTheme] = useState(customeLightTheme);
   useEffect(() => {