Merge branch 'fix/icons-contrast' into 'dev'

fix(rosen-app): fix network icon contrast issues Closes #172 See merge request ergo/rosen-bridge/ui!113
rosen-bridge · Nov 18, 2023 · 8ec4281 · 8ec4281
2 parents 244c946 + 2a03941
commit 8ec4281
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 22 deletions.
diff --git a/apps/rosen/app/(bridge)/BridgeForm.tsx b/apps/rosen/app/(bridge)/BridgeForm.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useCallback, ChangeEvent } from 'react';
-import Image from 'next/image';
 import { getDecimalString, getNonDecimalString } from '@rosen-ui/utils';
 
 import {
@@ -14,6 +13,7 @@ import {
   MenuItem,
   Button,
   CircularProgress,
+  SvgIcon,
 } from '@rosen-bridge/ui-kit';
 
 import useBridgeForm from '@/_hooks/useBridgeForm';
@@ -100,9 +100,12 @@ const BridgeForm = () => {
     const network = availableNetworks.find(
       (network) => network.name === value,
     )!;
+    const Logo = network.logo;
     return (
       <SelectedAsset>
-        <Image src={network.logo} width={24} height={24} alt="network logo" />
+        <SvgIcon>
+          <Logo />
+        </SvgIcon>
         <Typography color="text.secondary">{network.label}</Typography>
       </SelectedAsset>
     );
@@ -227,15 +230,12 @@ const BridgeForm = () => {
             }}
             onChange={handleSourceChange}
           >
-            {availableNetworks.map((network) => (
+            {availableNetworks.map(({ logo: Logo, ...network }) => (
               <MenuItem key={network.name} value={network.name}>
                 <ListItemIcon>
-                  <Image
-                    src={network.logo}
-                    width={24}
-                    height={24}
-                    alt="network logo"
-                  />
+                  <SvgIcon>
+                    <Logo />
+                  </SvgIcon>
                 </ListItemIcon>
                 <Typography color="text.secondary">{network.label}</Typography>
               </MenuItem>
@@ -257,15 +257,14 @@ const BridgeForm = () => {
             }}
             onChange={handleTargetChange}
           >
-            {targetNetworks.map((network) => (
+            {targetNetworks.map(({ logo: Logo, ...network }) => (
               <MenuItem key={network.name} value={network.name}>
                 <ListItemIcon>
-                  <Image
-                    src={network.logo}
-                    width={24}
-                    height={24}
-                    alt="network logo"
-                  />
+                  <ListItemIcon>
+                    <SvgIcon>
+                      <Logo />
+                    </SvgIcon>
+                  </ListItemIcon>
                 </ListItemIcon>
                 <Typography color="text.secondary">{network.label}</Typography>
               </MenuItem>

diff --git a/apps/rosen/app/_networks/cardano/index.ts b/apps/rosen/app/_networks/cardano/index.ts
@@ -12,12 +12,12 @@ import { Network } from '@/_types/network';
 import { decodeWasmValue } from '@/_actions/cardanoDecoder';
 import { Wallet } from '@rosen-ui/wallet-api';
 import { RosenChainToken } from '@rosen-bridge/tokens';
-import { getDecimalString } from '@rosen-ui/utils';
 import {
   generateLockAuxiliaryData,
   setTxWitnessSet,
 } from './transaction/utils';
 import { generateUnsignedTx } from './transaction/generateTx';
+import { CardanoIcon } from '@rosen-bridge/icons';
 
 /**
  * the main object for Cardano network
@@ -89,7 +89,7 @@ const CardanoNetwork: Network<Wallet> = {
     },
   ]),
   nextHeightInterval: 25,
-  logo: '/cardano.svg',
+  logo: CardanoIcon,
   api: {
     explorerUrl: 'https://api.koios.rest/api',
   },

diff --git a/apps/rosen/app/_networks/ergo/index.ts b/apps/rosen/app/_networks/ergo/index.ts
@@ -10,6 +10,7 @@ import { Network } from '@/_types/network';
 import { ErgoToken, Wallet } from '@rosen-ui/wallet-api';
 import { generateUnsignedTx } from './transaction/generateTx';
 import { RosenChainToken } from '@rosen-bridge/tokens';
+import { ErgoIcon } from '@rosen-bridge/icons';
 
 /**
  * the main object for Ergo network
@@ -71,7 +72,7 @@ const ErgoNetwork: Network<Wallet> = {
       },
     },
   ]),
-  logo: '/ergo.svg',
+  logo: ErgoIcon,
   nextHeightInterval: 5,
   api: {
     explorerUrl: 'https://api.ergoplatform.com/',

diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
@@ -1,3 +1,4 @@
+export * from './networks';
 export * from './wallets';
 
 export { ReactComponent as AngleDown } from './icons/angle-down.svg';

diff --git a/apps/rosen/public/cardano.svg → packages/icons/src/networks/cardano.svg b/apps/rosen/public/cardano.svg → packages/icons/src/networks/cardano.svg
diff --git a/apps/rosen/public/ergo.svg → packages/icons/src/networks/ergo.svg b/apps/rosen/public/ergo.svg → packages/icons/src/networks/ergo.svg
diff --git a/packages/icons/src/networks/index.ts b/packages/icons/src/networks/index.ts
@@ -0,0 +1,2 @@
+export { ReactComponent as CardanoIcon } from './cardano.svg';
+export { ReactComponent as ErgoIcon } from './ergo.svg';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { ReactComponent as CardanoIcon } from './cardano.svg';
		export { ReactComponent as ErgoIcon } from './ergo.svg';