Improved UI and error reporting

.changeset/tame-icons-hide.md

@@ -0,0 +1,6 @@
+---
+"@bitfinity-network/bridge": patch
+"@bitfinity-network/bridge-widget": patch
+---
+
+Improved UI and error reporting

apps/widget-demo/src/App.tsx

@@ -19,7 +19,7 @@ const networks = [
   {
     name: 'mainnet',
     icHost: 'https://ic0.app',
-    ethCain: 355110,
+    ethChain: 355110,
     bridges: [
       {
         type: 'icrc_evm',

packages/bridge/src/network.ts

@@ -14,8 +14,6 @@ export const BridgeBase = z.object({
   type: BridgeType,
   bftAddress: z.string(),
   feeChargeAddress: z.string(),
-  // icHost: z.string(),
-  // ethCain: z.number()
 });
 
 export const BridgeIcrc = BridgeBase.extend({
@@ -45,7 +43,7 @@ export const Bridge = z.discriminatedUnion('type', [
 export const BridgeNetwork = z.object({
   name: z.string(),
   icHost: z.string(),
-  ethCain: z.number(),
+  ethChain: z.number(),
   bridges: z.array(Bridge)
 });
 export type BridgeNetwork = z.infer<typeof BridgeNetwork>;

packages/bridge/src/tests/utils.ts

@@ -18,7 +18,7 @@ import { BridgeNetwork, BridgeIcrc } from '../network';
 export const testNetwork: BridgeNetwork = BridgeNetwork.parse({
   name: 'devnet',
   icHost: IC_HOST,
-  ethCain: 355113,
+  ethChain: 355113,
   bridges: [
     BridgeIcrc.parse({
       bftAddress: BFT_ETH_ADDRESS,

packages/widget/src/components/BridgeWidget/WidgetForm.tsx

@@ -113,15 +113,25 @@ export const WidgetForm = () => {
         return;
       }
 
-      await bridgeTo(token, floatingAmount);
+      const result = await bridgeTo(token, floatingAmount);
 
-      toast({
-        title: 'Bridged successfully',
-        description: 'You received your tokens!',
-        status: 'success',
-        duration: 9000,
-        isClosable: true
-      });
+      if (result.status === 'ok') {
+        toast({
+          title: 'Bridged successfully',
+          description: 'You received your tokens!',
+          status: 'success',
+          duration: 9000,
+          isClosable: true
+        });
+      } else {
+        toast({
+          title: 'Bridge error',
+          description: 'Your tokens was not bridged over',
+          status: 'error',
+          duration: 9000,
+          isClosable: true
+        });
+      }
 
       setStrAmount('');
     } else {

packages/widget/src/components/TokenListModal/index.tsx

@@ -25,7 +25,7 @@ import { TokenTag } from '../../ui/TokenTag';
 import { WALLETS_INFO, WalletType } from '../../provider/BridgeProvider.tsx';
 import { TokenType } from '../../provider/TokensListsProvider.tsx';
 import { LuCopy } from 'react-icons/lu';
-import { shortenAddress } from '../../utils/format.ts';
+import { shortenAddress } from '../../utils';
 
 type TokenListModelProps = {
   isOpen: boolean;
@@ -39,6 +39,10 @@ const tokenMap: Record<TokenType, WalletType> = {
   rune: 'btc'
 };
 
+const normalize = (str: string) => {
+  return str.trim().toLowerCase().replace(/-/g, '').replace(/^0x/, '');
+};
+
 export function TokenListModal({ isOpen, onClose }: TokenListModelProps) {
   const [tabIndex, setTabIndex] = useState(0);
   const { tokens, setSelectedToken } = useTokenContext();
@@ -57,11 +61,10 @@ export function TokenListModal({ isOpen, onClose }: TokenListModelProps) {
       return tabTokens;
     }
 
-    const needle = search.trim().toLowerCase();
-
-    return tabTokens.filter(({ name, symbol }) => {
-      const searchable = [name, symbol].map((str) => str.trim().toLowerCase());
-      return searchable.some((haystack) => haystack.includes(needle));
+    return tabTokens.filter(({ name, symbol, id }) => {
+      return [name, symbol, id].some((haystack) =>
+        normalize(haystack).includes(normalize(search))
+      );
     });
   }, [search, tabTokens]);
 

packages/widget/src/main.tsx

@@ -20,7 +20,7 @@ const networks = [
   {
     name: 'mainnet',
     icHost: 'https://ic0.app',
-    ethCain: 355110,
+    ethChain: 355110,
     bridges: [
       {
         type: 'icrc_evm',

packages/widget/src/provider/BridgeProvider.tsx

@@ -532,7 +532,7 @@ export const BridgeProvider = ({
 
       const chainNet = bridgeNetworks.find(
         ({ name }) => name === networkName
-      )?.ethCain;
+      )?.ethChain;
       const chainWallet =
         wallet && 'chain' in wallet ? wallet.chain : undefined;
 
@@ -578,7 +578,7 @@ export const BridgeProvider = ({
 
     if (walletsConnected.ic && walletsConnected.eth) {
       const walletChain = walletsConnected.eth.chain;
-      if (network.ethCain === walletChain) {
+      if (network.ethChain === walletChain) {
         const bridge = connector.getBridge(networkName, 'icrc_evm');
         ready.push({ type: 'icrc_evm', bridge, ...BRIDGES_INFO.icrc_evm });
       }

packages/widget/src/provider/TokensProvider.tsx

@@ -24,9 +24,11 @@ import {
   TANSTACK_GARBAGE_COLLECTION_TIME
 } from './ReactQuery.tsx';
 
+export type BridgeResult = { status: 'ok' } | { status: 'err' };
+
 export type TokensContext = {
   tokens: Token[];
-  bridge: (token: Token, floatingAmount: number) => Promise<void>;
+  bridge: (token: Token, floatingAmount: number) => Promise<BridgeResult>;
   isBridgingInProgress: boolean;
   nativeEthBalance: bigint;
   selectedToken: string | undefined;
@@ -35,7 +37,9 @@ export type TokensContext = {
 
 const defaultCtx = {
   tokens: [],
-  async bridge() {},
+  async bridge() {
+    return { status: 'err' };
+  },
   isBridgingInProgress: false,
   nativeEthBalance: 0n,
   selectedToken: undefined,
@@ -216,14 +220,21 @@ export const TokensProvider = ({ children }: { children: ReactNode }) => {
             ({ wrapped }) => wrapped === tokenListed.id
           );
 
+          let logo: string | undefined = undefined;
+
+          if (!tokenListed.logo) {
+            logo = tokensListed.find(({ id }) => id === wrapped?.base)?.logo;
+          }
+
           tokens.push({
             ...tokenListed,
             type: 'evmc',
             wallet: 'eth',
             bridge: bridge.type,
             id: tokenListed.id,
             wrapped: wrapped ? wrapped.base : undefined,
-            balance: 0n
+            balance: 0n,
+            logo
           });
         }
       }
@@ -340,21 +351,21 @@ export const TokensProvider = ({ children }: { children: ReactNode }) => {
   const bridge = useCallback(
     async (token: Token, floatingAmount: number) => {
       if (nativeEthBalance <= 0) {
-        return;
+        return { status: 'err' } as const;
       }
 
       const from = token.type === 'evmc';
 
       const bridgeInfo = bridges.find((bridge) => bridge.type === token.bridge);
       if (!bridgeInfo) {
-        return;
+        return { status: 'err' } as const;
       }
       const { bridge } = bridgeInfo;
 
       const amount = fromFloating(floatingAmount, token.decimals);
 
       if (token.balance <= amount) {
-        return;
+        return { status: 'err' } as const;
       }
 
       let owner: string | undefined;
@@ -373,12 +384,14 @@ export const TokensProvider = ({ children }: { children: ReactNode }) => {
       }
 
       if (!(recipient && owner)) {
-        return;
+        return { status: 'err' } as const;
       }
 
       // All is ready start bridging itself
       setIsBridgingInProgress(true);
 
+      let error = undefined;
+
       try {
         if (!from) {
           let justWrapped: string | undefined;
@@ -439,6 +452,7 @@ export const TokensProvider = ({ children }: { children: ReactNode }) => {
         }
       } catch (err) {
         console.error('Error while bridging', err);
+        error = err;
       }
 
       // Immediately invalidate bridged token old balance
@@ -447,6 +461,8 @@ export const TokensProvider = ({ children }: { children: ReactNode }) => {
       });
 
       setIsBridgingInProgress(false);
+
+      return error ? ({ status: 'err' } as const) : ({ status: 'ok' } as const);
     },
     [ethWallet, icWallet, bridges, nativeEthBalance, tokens]
   );

packages/widget/src/urls.ts

@@ -66,7 +66,7 @@ const networks = {
   networks: [
     {
       name: 'devnet',
-      ethCain: 355113,
+      ethChain: 355113,
       icHost: IC_HOST,
       bridges: [
         {
@@ -79,12 +79,11 @@ const networks = {
     },
     {
       name: 'devnet 2',
-      ethCain: 355113,
+      ethChain: 355113,
       icHost: IC_HOST,
       bridges: [
         {
           type: 'icrc_evm',
-          ethCain: 355113,
           bftAddress: BFT_ETH_ADDRESS,
           iCRC2MinterCanisterId: ICRC2_MINTER_CANISTER_ID,
           feeChargeAddress: FEE_CHARGE_ADDRESS