@rango-dev/ui 0.1.10-next.91 → 0.1.10

package/src/components/ConnectWalletsModal/mockData.ts

@@ -8,6 +8,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -15,6 +16,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.CONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -22,12 +24,14 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.CONNECTING,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
     name: 'Coinbase',
     state: WalletState.NOT_INSTALLED,
     type: WalletType.COINBASE,
+    showOnMobile: true,
     installLink:
       'https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad?hl=en',
   },
@@ -37,6 +41,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -44,6 +49,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.CONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -51,6 +57,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -58,6 +65,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -65,6 +73,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -72,6 +81,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -79,6 +89,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -86,6 +97,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -93,6 +105,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -100,6 +113,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -107,6 +121,7 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
   {
     image: 'https://app.rango.exchange/wallets/coinbase.svg',
@@ -114,5 +129,6 @@ export const walletsInfo: WalletInfo[] = [
     state: WalletState.DISCONNECTED,
     installLink: '',
     type: WalletType.COINBASE,
+    showOnMobile: true,
   },
 ];

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { styled } from '../../theme';
+
+const DividerContainer = styled('div', {
+  variants: {
+    size: {
+      4: {
+        height: '$4',
+      },
+      8: {
+        height: '$8',
+      },
+      12: {
+        height: '$12',
+      },
+      16: {
+        height: '$16',
+      },
+      18: {
+        height: '$18',
+      },
+      20: {
+        height: '$20',
+      },
+      24: {
+        height: '$24',
+      },
+      32: {
+        height: '$32',
+      },
+    },
+  },
+});
+export interface PropTypes {
+  size?: 4 | 8 | 12 | 16 | 18 | 20 | 24 | 32;
+  direction?: 'vertical' | 'horizontal';
+}
+
+export function Divider({ size = 12 }: PropTypes) {
+  return <DividerContainer size={size} />;
+}

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from './Divider';

package/src/components/Header/Header.tsx

@@ -0,0 +1,39 @@
+import { styled } from '../../theme';
+import React, { PropsWithChildren } from 'react';
+import { AngleLeftIcon } from '../Icon';
+import { Typography } from '../Typography';
+import { Button } from '../Button';
+
+const HeaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$8 0',
+  position: 'relative',
+});
+
+const BackButton = styled(Button, {
+  padding: '$8',
+});
+
+interface PropTypes {
+  onBack?: () => void;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  title: string;
+}
+
+export function Header(props: PropsWithChildren<PropTypes>) {
+  return (
+    <HeaderContainer>
+      {props.onBack ? (
+        <BackButton variant="ghost" size="small" onClick={props.onBack}>
+          <AngleLeftIcon size={24} />
+        </BackButton>
+      ) : null}
+      {props.prefix}
+      <Typography variant="h4">{props.title}</Typography>
+      {props.suffix || <div></div>}
+    </HeaderContainer>
+  );
+}

package/src/components/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header';

package/src/components/Icon/ArrowRightIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const ArrowRightIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+      <polyline points="12 5 19 12 12 19"></polyline>
+    </SvgWithStrokeColor>
+  );
+};
+
+ArrowRightIcon.toString = () => '._icon';

package/src/components/Icon/ChevronRightIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const ChevronRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'black', size = 16, ...props }, forwardedRef) => {
+    return (
+      <SvgWithStrokeColor
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        color={color}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="_icon"
+        {...props}
+        ref={forwardedRef}
+      >
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+ChevronRightIcon.toString = () => '._icon';

package/src/components/Icon/DisconnectIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const DisconnectIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'black', size = 16, ...props }, forwardedRef) => {
+    return (
+      <SvgWithStrokeColor
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        color={color}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="_icon"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+        <polyline points="16 17 21 12 16 7"></polyline>
+        <line x1="21" y1="12" x2="9" y2="12"></line>
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+DisconnectIcon.toString = () => '._icon';

package/src/components/Icon/HistoryIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SvgWithFillColor } from './common';
+import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
 export const HistoryIcon: React.FC<IconProps> = ({
@@ -8,32 +8,26 @@ export const HistoryIcon: React.FC<IconProps> = ({
   ...props
 }) => {
   return (
-    <SvgWithFillColor
+    <SvgWithStrokeColor
       width={size}
       height={size}
       viewBox="0 0 24 24"
       color={color}
       fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
       {...props}
     >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16.767 1.5c-.7.002-1.267.57-1.267 1.26V9h2.67c.63 0 1.07-.196 1.352-.478C19.804 8.24 20 7.8 20 7.17V4.75c0-.89-.363-1.704-.952-2.301a3.27 3.27 0 0 0-2.281-.949ZM14 2.76C14 1.23 15.25 0 16.77 0h.007a4.77 4.77 0 0 1 3.333 1.39l.004.003A4.775 4.775 0 0 1 21.5 4.75v2.42c0 .95-.304 1.8-.917 2.413-.613.613-1.462.917-2.413.917h-3.42a.75.75 0 0 1-.75-.75V2.76Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1.057 1.431C1.862.5 3.097 0 4.75 0h12a.75.75 0 0 1 0 1.5c-.686 0-1.25.564-1.25 1.25v17c0 1.442-1.646 2.256-2.797 1.402l-.002-.002-1.718-1.285a.242.242 0 0 0-.313.025l-1.68 1.68a1.758 1.758 0 0 1-2.48 0l-.002-.001L4.85 19.9a.258.258 0 0 0-.34-.03l-1.707 1.278-.002.001C1.643 22.024 0 21.193 0 19.75v-15c0-1.203.27-2.408 1.057-3.319Zm13.245.069H4.75c-1.346 0-2.112.396-2.557.911C1.73 2.948 1.5 3.743 1.5 4.75v15c0 .216.235.325.397.202l.004-.002 1.709-1.28a1.757 1.757 0 0 1 2.3.17l.002.001L7.57 20.51a.259.259 0 0 0 .36 0l1.68-1.68c.61-.61 1.59-.688 2.283-.158l1.704 1.276c.17.125.403 0 .403-.198v-17c0-.45.109-.875.302-1.25Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4 7.75A.75.75 0 0 1 4.75 7h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 4 7.75ZM4.75 11.75A.75.75 0 0 1 5.5 11H10a.75.75 0 0 1 0 1.5H5.5a.75.75 0 0 1-.75-.75Z"
-      />
-    </SvgWithFillColor>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+      <polyline points="14 2 14 8 20 8"></polyline>
+      <line x1="16" y1="13" x2="8" y2="13"></line>
+      <line x1="16" y1="17" x2="8" y2="17"></line>
+      <polyline points="10 9 9 9 8 9"></polyline>
+    </SvgWithStrokeColor>
   );
 };
 

package/src/components/Icon/RetryIcon.tsx

@@ -1,28 +1,28 @@
 import * as React from 'react';
-import { SvgWithFillColor } from './common';
+import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
 export const RetryIcon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ color, size = 16, ...props }, forwardedRef) => {
+  ({ color = 'black', size = 16, ...props }, forwardedRef) => {
     return (
-      <SvgWithFillColor
+      <SvgWithStrokeColor
+        xmlns="http://www.w3.org/2000/svg"
         width={size}
         height={size}
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
         color={color}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
         className="_icon"
         {...props}
         ref={forwardedRef}
       >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M17.016 13.45c.199-.384.002-.842-.397-1.005-.406-.166-.864.033-1.077.416A6.17 6.17 0 0 1 13 15.345a6.051 6.051 0 0 1-4.244.513 6.127 6.127 0 0 1-3.543-2.425 6.286 6.286 0 0 1 .73-8.095A6.089 6.089 0 0 1 9.86 3.604a6.07 6.07 0 0 1 4.083 1.286 6.196 6.196 0 0 1 1.65 1.97l-1.053.363a.302.302 0 0 0-.073.534l2.607 1.758a.3.3 0 0 0 .45-.155l1.01-3.007a.298.298 0 0 0-.38-.378l-1.057.365a7.79 7.79 0 0 0-2.194-2.713 7.627 7.627 0 0 0-5.13-1.615A7.65 7.65 0 0 0 4.852 4.19a7.898 7.898 0 0 0-.917 10.17 7.7 7.7 0 0 0 4.452 3.048 7.604 7.604 0 0 0 5.333-.644 7.757 7.757 0 0 0 3.297-3.315Z"
-          fill={color}
-        />
-      </SvgWithFillColor>
+        <polyline points="23 4 23 10 17 10"></polyline>
+        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+      </SvgWithStrokeColor>
     );
   }
 );

package/src/components/Icon/SettingIcon.tsx

@@ -13,25 +13,17 @@ export const SettingsIcon: React.FC<IconProps> = ({
       height={size}
       viewBox="0 0 24 24"
       color={color}
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
       {...props}
     >
-      <path
-        d="M12.5 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M2.5 12.88v-1.76c0-1.04.85-1.9 1.9-1.9 1.81 0 2.55-1.28 1.64-2.85-.52-.9-.21-2.07.7-2.59l1.73-.99c.79-.47 1.81-.19 2.28.6l.11.19c.9 1.57 2.38 1.57 3.29 0l.11-.19c.47-.79 1.49-1.07 2.28-.6l1.73.99c.91.52 1.22 1.69.7 2.59-.91 1.57-.17 2.85 1.64 2.85 1.04 0 1.9.85 1.9 1.9v1.76c0 1.04-.85 1.9-1.9 1.9-1.81 0-2.55 1.28-1.64 2.85.52.91.21 2.07-.7 2.59l-1.73.99c-.79.47-1.81.19-2.28-.6l-.11-.19c-.9-1.57-2.38-1.57-3.29 0l-.11.19c-.47.79-1.49 1.07-2.28.6l-1.73-.99a1.899 1.899 0 0 1-.7-2.59c.91-1.57.17-2.85-1.64-2.85-1.05 0-1.9-.86-1.9-1.9Z"
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <circle cx="12" cy="12" r="3"></circle>
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
     </SvgWithStrokeColor>
   );
 };

package/src/components/Icon/index.ts

@@ -23,6 +23,8 @@ export { AngleUpIcon } from './AngleUpIcon';
 export { AngleDownIcon } from './AngleDownIcon';
 export { AngleLeftIcon } from './AngleLeftIcon';
 export { DownloadIcon } from './DownloadIcon';
+export { ChevronRightIcon } from './ChevronRightIcon';
+export { ArrowRightIcon } from './ArrowRightIcon';
 
 export { RetryRightIcon } from './RetryRightIcon';
 export { RetryLeftIcon } from './RetryLeftIcon';
@@ -36,6 +38,7 @@ export { AddWalletIcon } from './AddWalletIcon';
 export { DeleteWalletIcon } from './DeleteWalletIcon';
 export { CheckWalletIcon } from './CheckWalletIcon';
 export { SwapWalletIcon } from './SwapWalletIcon';
+export { DisconnectIcon } from './DisconnectIcon';
 
 export { BagIcon } from './BagIcon';
 

package/src/components/Icon/types.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface IconProps extends React.SVGAttributes<SVGElement> {
-  size?: 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40;
+  size?: 12 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40;
   color?: 'primary' | 'error' | 'warning' | 'success' | 'black' | 'white';
 }
 

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -1,11 +1,14 @@
 import { CSSProperties } from '@stitches/react';
 import React, { useEffect, useState } from 'react';
 import { styled } from '../../theme';
-import { LiquiditySource } from '../../types/meta';
+import { LiquiditySource, LoadingStatus } from '../../types/meta';
 import { Button } from '../Button/Button';
 import { Spacer } from '../Spacer';
 import { Switch } from '../Switch';
 import { Typography } from '../Typography';
+import { Spinner } from '../Spinner';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
 
 const groupLiquiditySources = (
   liquiditySources: LiquiditySource[]
@@ -19,12 +22,22 @@ const groupLiquiditySources = (
   ),
 });
 
-const LiquiditySourceType = styled(Typography, {
+const MainContainer = styled('div', {
+  variants: {
+    loaded: {
+      true: {
+        overflowY: 'auto',
+      },
+    },
+  },
+});
+
+const LiquiditySourceType = styled('div', {
   position: 'sticky',
-  display: 'block',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
   top: '0',
-  marginTop: '$8',
-  marginBottom: '$8',
   backgroundColor: '$background',
   zIndex: '9999',
   paddingTop: '$8',
@@ -37,14 +50,22 @@ const LiquidityImage = styled('img', {
   marginRight: '$16',
 });
 
+const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+});
+
 export interface PropTypes {
   list: LiquiditySource[];
   onChange: (liquiditySource: LiquiditySource) => void;
   listContainerStyle?: CSSProperties;
+  loadingStatus: LoadingStatus;
+  searchedFor: string;
 }
 
 export function LiquiditySourceList(props: PropTypes) {
-  const { list, onChange, listContainerStyle } = props;
+  const { list, onChange, listContainerStyle, loadingStatus, searchedFor } =
+    props;
 
   const [selected, setSelected] = useState(
     list.filter((item) => item.selected)
@@ -66,34 +87,88 @@ export function LiquiditySourceList(props: PropTypes) {
     setSelected(list.filter((item) => item.selected));
   }, [list]);
 
+  const sections = groupLiquiditySources(list);
+  const bridges = sections.bridge;
+  const exchanges = sections.exchange;
+
+  const totalBridges = bridges.length;
+  const totalExchanges = exchanges.length;
+  // TODO: This is not performant
+  const totalSelectedBridges = bridges.filter(isSelected).length;
+  const totalSelectedExchanges = exchanges.filter(isSelected).length;
+
   return (
-    <div style={{ height: '450px', ...listContainerStyle }}>
+    <MainContainer
+      style={listContainerStyle}
+      loaded={loadingStatus === 'success'}
+    >
       <div>
-        <LiquiditySourceType variant="h5">Bridges</LiquiditySourceType>
-        <Spacer size={16} direction="vertical" />
-        {groupLiquiditySources(list).bridge.map((liquiditySource, index) => (
-          <LiquiditySourceItem
-            liquiditySource={liquiditySource}
-            key={index}
-            selected={isSelected(liquiditySource)}
-            onChange={changeLiquiditySources}
-          />
-        ))}
+        <LiquiditySourceType>
+          <Typography variant="h5">Bridges</Typography>
+          <Typography variant="body1" color="neutrals800">
+            {totalSelectedBridges === totalBridges
+              ? totalBridges
+              : `${totalSelectedBridges} / ${totalBridges}`}
+          </Typography>
+        </LiquiditySourceType>
+        <Spacer size={12} direction="vertical" />
+        {loadingStatus === 'loading' && (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingStatus === 'failed' && <LoadingFailedAlert />}
+        {loadingStatus === 'success' && (
+          <>
+            {totalBridges ? (
+              bridges.map((liquiditySource, index) => (
+                <LiquiditySourceItem
+                  liquiditySource={liquiditySource}
+                  key={index}
+                  selected={isSelected(liquiditySource)}
+                  onChange={changeLiquiditySources}
+                />
+              ))
+            ) : (
+              <NotFoundAlert catergory="Bridge" searchedFor={searchedFor} />
+            )}
+          </>
+        )}
       </div>
       <div>
-        <LiquiditySourceType variant="h5">Exchanges</LiquiditySourceType>
-        <Spacer size={16} direction="vertical" />
-
-        {groupLiquiditySources(list).exchange.map((liquiditySource, index) => (
-          <LiquiditySourceItem
-            liquiditySource={liquiditySource}
-            key={index}
-            selected={isSelected(liquiditySource)}
-            onChange={changeLiquiditySources}
-          />
-        ))}
+        <LiquiditySourceType>
+          <Typography variant="h5">Exchanges</Typography>
+          <Typography variant="body1" color="neutrals800">
+            {totalSelectedExchanges === totalExchanges
+              ? totalExchanges
+              : `${totalSelectedExchanges} / ${totalExchanges}`}
+          </Typography>
+        </LiquiditySourceType>
+        <Spacer size={12} direction="vertical" />
+        {loadingStatus === 'loading' && (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingStatus === 'failed' && <LoadingFailedAlert />}
+        {loadingStatus == 'success' && (
+          <>
+            {totalExchanges ? (
+              exchanges.map((liquiditySource, index) => (
+                <LiquiditySourceItem
+                  liquiditySource={liquiditySource}
+                  key={index}
+                  selected={isSelected(liquiditySource)}
+                  onChange={changeLiquiditySources}
+                />
+              ))
+            ) : (
+              <NotFoundAlert catergory="Exchange" searchedFor={searchedFor} />
+            )}
+          </>
+        )}
       </div>
-    </div>
+    </MainContainer>
   );
 }
 
@@ -113,7 +188,6 @@ const LiquiditySourceItem = ({
     prefix={<LiquidityImage src={liquiditySource.logo} />}
     suffix={<Switch checked={selected} />}
     style={{ marginBottom: '12px' }}
-    type={selected ? 'primary' : undefined}
     onClick={onChange.bind(null, liquiditySource)}
   >
     <Typography variant="body1">{liquiditySource.title}</Typography>