@rango-dev/widget-embedded 0.23.1-next.20 → 0.23.1-next.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.20",
+  "version": "0.23.1-next.21",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.3",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.1-next.15",
+    "@rango-dev/ui": "^0.29.1-next.16",
     "@rango-dev/wallets-react": "^0.14.1-next.1",
     "@rango-dev/wallets-shared": "^0.28.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -48,4 +48,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/HeaderButtons/HeaderButtons.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, IconButton, styled } from '@rango-dev/ui';
+import { css, darkTheme, IconButton, styled } from '@rango-dev/ui';
 
 export const HeaderButton = styled(IconButton, {
   width: '$24',
@@ -76,3 +76,21 @@ export const InProgressTransactionBadgeContainer = styled('div', {
   backgroundColor: '$background',
   borderRadius: '100%',
 });
+
+export const rowStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const WalletImageContainer = styled('div', {
+  borderRadius: '100%',
+  border: '1.5px transparent solid',
+  '&:not(:first-child)': {
+    marginLeft: '-$6',
+  },
+  img: {
+    borderRadius: '100%',
+  },
+});

package/src/components/HeaderButtons/RefreshButton.tsx

@@ -70,7 +70,7 @@ function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
         onTransitionEnd={() => setIsRefetched(false)}
         isRefetched={isRefetched}>
         <RefreshProgressButton
-          size={24}
+          size={22}
           color={!onClick ? 'gray' : 'black'}
           progress={(elapsedTime / MAX_ELAPSED_TIME) * MAX_PERCENTAGE}
         />

package/src/components/HeaderButtons/WalletButton.tsx

@@ -1,17 +1,37 @@
 import type { PropTypes } from './HeaderButtons.types';
 
 import { i18n } from '@lingui/core';
-import { Tooltip, WalletIcon } from '@rango-dev/ui';
+import { Image, Tooltip, WalletIcon } from '@rango-dev/ui';
 import React from 'react';
 
-import { ConnectedIcon, HeaderButton } from './HeaderButtons.styles';
+import { useWalletList } from '../../hooks/useWalletList';
+
+import {
+  ConnectedIcon,
+  HeaderButton,
+  rowStyles,
+  WalletImageContainer,
+} from './HeaderButtons.styles';
 
 function WalletButton(props: PropTypes) {
+  const { list } = useWalletList({});
+  const connectedWallets = list.filter(
+    (wallet) => wallet.state === 'connected'
+  );
+  const content = !connectedWallets.length ? (
+    i18n.t('Connect Wallet')
+  ) : (
+    <div className={rowStyles()}>
+      {connectedWallets.map((wallet) => (
+        <WalletImageContainer key={wallet.title}>
+          <Image src={wallet.image} size={14} />
+        </WalletImageContainer>
+      ))}
+    </div>
+  );
+
   return (
-    <Tooltip
-      container={props.container}
-      side="top"
-      content={i18n.t('Connect Wallet')}>
+    <Tooltip container={props.container} side="bottom" content={content}>
       <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
         {props.isConnected && <ConnectedIcon />}
         <WalletIcon size={18} color="black" />

package/src/containers/Settings/Lists.tsx

@@ -50,7 +50,7 @@ const themesList = [
   },
   {
     id: ThemeModeEnum.DARK,
-    icon: <DarkModeIcon color="black" size={16} />,
+    icon: <DarkModeIcon color="black" size={14} />,
     tooltip: (
       <Typography size="xsmall" variant="body">
         {i18n.t('Dark')}
@@ -69,7 +69,7 @@ const themesList = [
 ];
 
 const getThemeIcon = (theme: ThemeMode) => {
-  const iconProps: SvgIconProps = { color: 'gray', size: 12 };
+  const iconProps: SvgIconProps = { color: 'gray', size: 14 };
 
   switch (theme) {
     case 'auto':
@@ -156,7 +156,7 @@ export function SettingsLists() {
       </>
     ),
     onClick: () => navigate(navigationRoutes.bridges),
-    start: <BridgeIcon color="gray" size={12} />,
+    start: <BridgeIcon color="gray" size={14} />,
   };
 
   const exchangeItem = {
@@ -173,7 +173,7 @@ export function SettingsLists() {
         <ChevronRightIcon color="gray" />
       </>
     ),
-    start: <ExchangeIcon color="gray" size={12} />,
+    start: <ExchangeIcon color="gray" size={14} />,
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
@@ -184,7 +184,7 @@ export function SettingsLists() {
         {i18n.t('Language')}
       </Typography>
     ),
-    start: <LanguageIcon color="gray" size={12} />,
+    start: <LanguageIcon color="gray" size={14} />,
     end: <ChevronRightIcon color="gray" />,
     onClick: () => navigate(navigationRoutes.languages),
   };
@@ -214,7 +214,7 @@ export function SettingsLists() {
         </Tooltip>
       </>
     ),
-    start: <DoneIcon color="gray" size={12} />,
+    start: <DoneIcon color="gray" size={14} />,
     end: <Switch checked={infiniteApprove} />,
     onClick: toggleInfiniteApprove,
   };