From e65bd3dafaaf127c280054ee2ac22ed2a438f032 Mon Sep 17 00:00:00 2001
From: Ha Gia Phat <phatghaa@gmail.com>
Date: Tue, 14 Nov 2023 01:54:28 +0700
Subject: [PATCH] fix: asset list responsive style (#121)

---
 .../stories/asset/CrossChain.stories.tsx      |  23 +-
 .../stories/asset/SingleChain.stories.tsx     |  19 +-
 .../asset-list-header.css.ts                  |  33 ---
 .../asset-list-header.lite.tsx                | 275 ++++++++++++------
 .../asset-list-header.types.tsx               |  31 +-
 src/ui/asset-list/asset-list.lite.tsx         |  90 +++---
 src/ui/asset-list/asset-list.types.tsx        |   7 +-
 src/ui/cross-chain/cross-chain.css.ts         |   5 -
 src/ui/cross-chain/cross-chain.lite.tsx       |  18 +-
 src/ui/cross-chain/cross-chain.types.tsx      |  12 +-
 src/ui/single-chain/single-chain.css.ts       |   5 -
 src/ui/single-chain/single-chain.lite.tsx     |  21 +-
 src/ui/single-chain/single-chain.types.tsx    |  14 +-
 13 files changed, 313 insertions(+), 240 deletions(-)
 delete mode 100644 src/ui/asset-list-header/asset-list-header.css.ts
 delete mode 100644 src/ui/cross-chain/cross-chain.css.ts
 delete mode 100644 src/ui/single-chain/single-chain.css.ts

diff --git a/packages/react/stories/asset/CrossChain.stories.tsx b/packages/react/stories/asset/CrossChain.stories.tsx
index 2959fde7..1540361f 100644
--- a/packages/react/stories/asset/CrossChain.stories.tsx
+++ b/packages/react/stories/asset/CrossChain.stories.tsx
@@ -15,16 +15,25 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    header: {
-      total: "144.23",
-      totalOnAll: "732.16",
-      onDeposit: () => {
-        console.log("onDeposit");
+    title: "Your assets",
+    multiChainHeader: [
+      {
+        label: "Total on Osmosis",
+        value: "144.23",
       },
-      onWithdraw: () => {
-        console.log("onWithdraw");
+      {
+        label: "Total across all chains",
+        value: "732.16",
       },
+    ],
+    onDeposit: () => {
+      console.log("onDeposit");
+    },
+    onWithdraw: () => {
+      console.log("onWithdraw");
     },
+    listTitle: "On Osmosis",
+    otherListTitle: "On other chains",
     list: [
       {
         imgSrc:
diff --git a/packages/react/stories/asset/SingleChain.stories.tsx b/packages/react/stories/asset/SingleChain.stories.tsx
index 35063f7f..d4990196 100644
--- a/packages/react/stories/asset/SingleChain.stories.tsx
+++ b/packages/react/stories/asset/SingleChain.stories.tsx
@@ -15,14 +15,17 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    header: {
-      total: "144.23",
-      onDeposit: () => {
-        console.log("onDeposit");
-      },
-      onWithdraw: () => {
-        console.log("onWithdraw");
-      },
+    title: "Your asset",
+    listTitle: "On Osmosis",
+    onDeposit: () => {
+      console.log("onDeposit");
+    },
+    onWithdraw: () => {
+      console.log("onWithdraw");
+    },
+    singleChainHeader: {
+      label: "Total on Osmosis",
+      value: "144.23",
     },
     list: [
       {
diff --git a/src/ui/asset-list-header/asset-list-header.css.ts b/src/ui/asset-list-header/asset-list-header.css.ts
deleted file mode 100644
index 74a2f160..00000000
--- a/src/ui/asset-list-header/asset-list-header.css.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { themeVars } from "../../styles/themes.css";
-
-export const assetListHeader = style({
-  minWidth: "720px",
-  boxSizing: "border-box",
-});
-
-export const crossContainer = style([
-  {
-    minHeight: "103px",
-  },
-]);
-
-export const card = style({
-  padding: `0 ${themeVars.space[10]}`,
-  backgroundColor: themeVars.colors.cardBg,
-  width: "calc(100% / 3)",
-  borderRadius: themeVars.radii.lg,
-});
-
-export const crossBtn = style({
-  width: "calc(100% / 3)",
-});
-
-export const singleContainer = style({
-  boxSizing: "border-box",
-  width: "100%",
-  minHeight: themeVars.space[21],
-  padding: `0 ${themeVars.space[10]}`,
-  backgroundColor: themeVars.colors.cardBg,
-  borderRadius: themeVars.radii.lg,
-});
diff --git a/src/ui/asset-list-header/asset-list-header.lite.tsx b/src/ui/asset-list-header/asset-list-header.lite.tsx
index e8217d77..68536d2f 100644
--- a/src/ui/asset-list-header/asset-list-header.lite.tsx
+++ b/src/ui/asset-list-header/asset-list-header.lite.tsx
@@ -3,8 +3,7 @@ import Box from "../box";
 import Stack from "../stack";
 import Text from "../text";
 import Button from "../button";
-import * as styles from "./asset-list-header.css";
-import { AssetListHeaderProps } from "./asset-list-header.types";
+import type { AssetListHeaderProps } from "./asset-list-header.types";
 
 useMetadata({
   rsc: {
@@ -18,122 +17,214 @@ export default function AssetListHeader(props: AssetListHeaderProps) {
   });
 
   return (
-    <Box>
-      <Stack className={styles.assetListHeader} direction="vertical">
-        <Text
-          fontSize="$xl"
-          fontWeight="$semibold"
-          attributes={{ marginBottom: "$10" }}
-        >
-          Your assets
-        </Text>
+    <Box
+      display="flex"
+      flexDirection="column"
+      className={props.className}
+      {...props.attributes}
+    >
+      {/* Title */}
+      <Text
+        fontSize="$xl"
+        fontWeight="$semibold"
+        attributes={{ marginBottom: "$10" }}
+      >
+        {props.title}
+      </Text>
 
-        <Show when={!props.isSingle}>
-          <Stack className={styles.crossContainer} space="$10">
-            <For
-              each={[
-                { text: "Total on Osmosis", value: props.total },
-                { text: "Total across all chains", value: props.totalOnAll },
-              ]}
-            >
-              {(item, index: number) => (
+      {/* Multi chain */}
+      <Show when={props.multiChainHeader}>
+        <Box
+          display="grid"
+          gap="$10"
+          gridTemplateAreas={{
+            mobile: `
+              "card1 card1"
+              "card2 card2"
+              "btn1 btn2"
+            `,
+            mdMobile: `
+              "card1 card2"
+              "btn1 btn2"
+            `,
+            tablet: `
+              "card1 card2 btn1"
+              "card1 card2 btn2"
+            `,
+          }}
+        >
+          <For each={props.multiChainHeader}>
+            {(item, index: number) => (
+              <Box
+                key={item.label}
+                gridArea={`card${index + 1}`}
+                backgroundColor="$cardBg"
+                display="flex"
+                flexDirection="column"
+                justifyContent="center"
+                borderRadius="$lg"
+                py="$11"
+                px="$10"
+              >
+                <Text color="$textSecondary" fontWeight="$semibold">
+                  {item.label}
+                </Text>
                 <Stack
-                  className={styles.card}
-                  direction="vertical"
                   attributes={{
-                    justifyContent: "center",
+                    alignItems: "baseline",
                   }}
                 >
-                  <Text color="$textSecondary" fontWeight="$semibold">
-                    {item.text}
-                  </Text>
-                  <Stack
-                    attributes={{
-                      alignItems: "baseline",
-                    }}
+                  <Text
+                    fontWeight="$semibold"
+                    attributes={{ marginRight: "$1" }}
                   >
-                    <Text
-                      fontWeight="$semibold"
-                      attributes={{ marginRight: "$1" }}
-                    >
-                      $
-                    </Text>
-                    <Text fontSize="$4xl" fontWeight="$semibold">
-                      {item.value}
-                    </Text>
-                  </Stack>
+                    $
+                  </Text>
+                  <Text fontSize="$4xl" fontWeight="$semibold">
+                    {item.value}
+                  </Text>
                 </Stack>
-              )}
-            </For>
+              </Box>
+            )}
+          </For>
+
+          {/* ==== Buttons */}
+          <Show when={!!props.onWithdraw}>
+            <Box
+              gridArea="btn1"
+              maxWidth={{
+                tablet: "$29",
+              }}
+              flex={{
+                mobile: "1",
+                tablet: "auto",
+              }}
+            >
+              <Button
+                fluidWidth
+                variant="outlined"
+                intent="secondary"
+                onClick={() => props.onWithdraw?.()}
+              >
+                {props.withdrawButtonLabel ?? "Withdraw"}
+              </Button>
+            </Box>
+          </Show>
+
+          <Show when={!!props.onDeposit}>
+            <Box
+              gridArea="btn2"
+              maxWidth={{
+                tablet: "$29",
+              }}
+              flex={{
+                mobile: "1",
+                tablet: "auto",
+              }}
+            >
+              <Button
+                fluidWidth
+                intent="tertiary"
+                onClick={() => props.onDeposit?.()}
+              >
+                {props.depositButtonLabel ?? "Deposit"}
+              </Button>
+            </Box>
+          </Show>
+        </Box>
+      </Show>
+
+      {/* Single chain */}
+      <Show when={props.singleChainHeader}>
+        <Box
+          display="flex"
+          flexWrap="wrap"
+          gap="$10"
+          justifyContent="space-between"
+          alignItems="center"
+          width="100%"
+          minHeight="$21"
+          py="$10"
+          px="$10"
+          backgroundColor="$cardBg"
+          borderRadius="$lg"
+        >
+          <Stack direction="vertical">
+            <Text>{props.singleChainHeader.label}</Text>
             <Stack
-              direction="vertical"
               attributes={{
-                justifyContent: "space-between",
+                alignItems: "baseline",
               }}
-              className={styles.crossBtn}
             >
-              <Show when={!!props.onWithdraw}>
-                <Button intent="tertiary" onClick={() => props.onWithdraw?.()}>
-                  Withdraw
-                </Button>
-              </Show>
-              <Show when={!!props.onDeposit}>
-                <Button intent="tertiary" onClick={() => props.onDeposit?.()}>
-                  Deposite
-                </Button>
-              </Show>
+              <Text fontWeight="$semibold">$</Text>
+              <Text fontSize="$4xl" fontWeight="$semibold">
+                {props.singleChainHeader.value}
+              </Text>
             </Stack>
           </Stack>
-        </Show>
-        <Show when={props.isSingle}>
-          <Stack
-            className={styles.singleContainer}
-            attributes={{
-              justifyContent: "space-between",
-              alignItems: "center",
+
+          {/* ==== Buttons */}
+          <Box
+            display="flex"
+            flex="1"
+            alignItems="center"
+            justifyContent={{
+              mobile: "space-between",
+              tablet: "flex-end",
+            }}
+            gap={{
+              mobile: "$6",
+              tablet: "$12",
+              desktop: "$12",
             }}
           >
-            <Stack direction="vertical">
-              <Text>Total on Osmosis</Text>
-              <Stack
-                attributes={{
-                  alignItems: "baseline",
+            <Show when={!!props.onWithdraw}>
+              <Box
+                flex={{
+                  mobile: "1",
+                  tablet: "0 0 auto",
+                }}
+                width={{
+                  mobile: "auto",
+                  tablet: "$25",
+                  desktop: "$25",
                 }}
               >
-                <Text fontWeight="$semibold">$</Text>
-                <Text fontSize="$4xl" fontWeight="$semibold">
-                  {props.total}
-                </Text>
-              </Stack>
-            </Stack>
-            <Stack
-              space="$12"
-              attributes={{
-                alignItems: "center",
-              }}
-            >
-              <Show when={!!props.onWithdraw}>
                 <Button
-                  intent="tertiary"
-                  attributes={{ width: "$25" }}
+                  fluidWidth
+                  variant="outlined"
+                  intent="secondary"
                   onClick={() => props.onWithdraw?.()}
                 >
-                  Withdraw
+                  {props.withdrawButtonLabel ?? "Withdraw"}
                 </Button>
-              </Show>
-              <Show when={!!props.onDeposit}>
+              </Box>
+            </Show>
+
+            <Show when={!!props.onDeposit}>
+              <Box
+                flex={{
+                  mobile: "1",
+                  tablet: "0 0 auto",
+                }}
+                width={{
+                  mobile: "auto",
+                  tablet: "$25",
+                  desktop: "$25",
+                }}
+              >
                 <Button
+                  fluidWidth
                   intent="tertiary"
-                  attributes={{ width: "$25" }}
                   onClick={() => props.onDeposit?.()}
                 >
-                  Deposit
+                  {props.depositButtonLabel ?? "Deposit"}
                 </Button>
-              </Show>
-            </Stack>
-          </Stack>
-        </Show>
-      </Stack>
+              </Box>
+            </Show>
+          </Box>
+        </Box>
+      </Show>
     </Box>
   );
 }
diff --git a/src/ui/asset-list-header/asset-list-header.types.tsx b/src/ui/asset-list-header/asset-list-header.types.tsx
index 54f1d0e7..b7ad61ca 100644
--- a/src/ui/asset-list-header/asset-list-header.types.tsx
+++ b/src/ui/asset-list-header/asset-list-header.types.tsx
@@ -1,16 +1,21 @@
-export interface AssetListHeaderProps {
-  /**
-   * Sinlge chain or cross chain
-   */
-  isSingle?: boolean;
-  /**
-   * Total on Osmosis
-   */
-  total: string;
-  /**
-   * Total across all chains
-   */
-  totalOnAll?: string;
+import type { BaseComponentProps } from "../../models/components.model";
+
+export type HeaderInfo = {
+  label: string;
+  value: string;
+};
+
+export type MultiChainHeader = [HeaderInfo, HeaderInfo];
+
+export type SingleChainHeader = HeaderInfo;
+
+export interface AssetListHeaderProps extends BaseComponentProps {
+  title: string;
+  multiChainHeader?: MultiChainHeader;
+  singleChainHeader?: SingleChainHeader;
+  depositButtonLabel?: string;
+  withdrawButtonLabel?: string;
   onDeposit?: (event?: any) => void;
   onWithdraw?: (event?: any) => void;
+  attributes?: any;
 }
diff --git a/src/ui/asset-list/asset-list.lite.tsx b/src/ui/asset-list/asset-list.lite.tsx
index b012393c..9fa616c0 100644
--- a/src/ui/asset-list/asset-list.lite.tsx
+++ b/src/ui/asset-list/asset-list.lite.tsx
@@ -18,50 +18,56 @@ export default function AssetList(props: AssetListProps) {
   });
 
   return (
-    <Stack
-      direction="vertical"
-      attributes={{
-        minWidth: "720px",
+    <Box
+      overflowX={{
+        mobile: "scroll",
+        tablet: "auto",
+        desktop: "auto",
       }}
+      className={props.className}
+      {...props.attributes}
     >
-      <Stack>
-        <Box width="$19" />
-        <Stack space="$0" attributes={{ marginBottom: "$12", flex: 1 }}>
-          <Text attributes={{ width: "25%" }} color="$textSecondary">
-            Asset
-          </Text>
-          <Show when={props.needChainSpace}>
-            <Box width="25%">
-              <Show when={props.isOtherChains}>
-                <Text color="$textSecondary">Chain</Text>
-              </Show>
-            </Box>
-          </Show>
-          <Text attributes={{ width: "25%" }} color="$textSecondary">
-            Balance
-          </Text>
+      <Box display="flex" flexDirection="column" minWidth="720px">
+        <Stack>
+          <Box width="$19" />
+          <Stack space="$0" attributes={{ marginBottom: "$12", flex: 1 }}>
+            <Text attributes={{ width: "25%" }} color="$textSecondary">
+              Asset
+            </Text>
+            <Show when={props.needChainSpace}>
+              <Box width="25%">
+                <Show when={props.isOtherChains}>
+                  <Text color="$textSecondary">Chain</Text>
+                </Show>
+              </Box>
+            </Show>
+            <Text attributes={{ width: "25%" }} color="$textSecondary">
+              Balance
+            </Text>
+          </Stack>
         </Stack>
-      </Stack>
-      <Stack space="$10" direction="vertical">
-        <For each={props.list}>
-          {(item: AssetListItemProps, index: number) => (
-            <Box key={index}>
-              <AssetListItem
-                needChainSpace={props.needChainSpace}
-                isOtherChains={props.isOtherChains}
-                imgSrc={item.imgSrc}
-                symbol={item.symbol}
-                name={item.name}
-                tokenAmount={item.tokenAmount}
-                tokenAmountPrice={item.tokenAmountPrice}
-                chainName={item?.chainName}
-                onDeposit={() => item?.onDeposit()}
-                onWithdraw={() => item?.onWithdraw()}
-              />
-            </Box>
-          )}
-        </For>
-      </Stack>
-    </Stack>
+
+        <Stack space="$10" direction="vertical">
+          <For each={props.list}>
+            {(item: AssetListItemProps, index: number) => (
+              <Box key={index}>
+                <AssetListItem
+                  needChainSpace={props.needChainSpace}
+                  isOtherChains={props.isOtherChains}
+                  imgSrc={item.imgSrc}
+                  symbol={item.symbol}
+                  name={item.name}
+                  tokenAmount={item.tokenAmount}
+                  tokenAmountPrice={item.tokenAmountPrice}
+                  chainName={item?.chainName}
+                  onDeposit={() => item?.onDeposit()}
+                  onWithdraw={() => item?.onWithdraw()}
+                />
+              </Box>
+            )}
+          </For>
+        </Stack>
+      </Box>
+    </Box>
   );
 }
diff --git a/src/ui/asset-list/asset-list.types.tsx b/src/ui/asset-list/asset-list.types.tsx
index 32eb9cd8..998a97da 100644
--- a/src/ui/asset-list/asset-list.types.tsx
+++ b/src/ui/asset-list/asset-list.types.tsx
@@ -1,6 +1,9 @@
-import { AssetListItemProps } from "../asset-list-item/asset-list-item.types";
-export interface AssetListProps {
+import type { BaseComponentProps } from "../../models/components.model";
+import type { AssetListItemProps } from "../asset-list-item/asset-list-item.types";
+
+export interface AssetListProps extends BaseComponentProps {
   isOtherChains: boolean;
   needChainSpace: boolean;
   list: AssetListItemProps[];
+  attributes?: any;
 }
diff --git a/src/ui/cross-chain/cross-chain.css.ts b/src/ui/cross-chain/cross-chain.css.ts
deleted file mode 100644
index 520e581a..00000000
--- a/src/ui/cross-chain/cross-chain.css.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const container = style({
-  minWidth: "720px",
-});
diff --git a/src/ui/cross-chain/cross-chain.lite.tsx b/src/ui/cross-chain/cross-chain.lite.tsx
index 70515ce2..776fc237 100644
--- a/src/ui/cross-chain/cross-chain.lite.tsx
+++ b/src/ui/cross-chain/cross-chain.lite.tsx
@@ -3,7 +3,6 @@ import AssetListHeader from "../asset-list-header";
 import AssetList from "../asset-list";
 import Box from "../box";
 import Text from "../text";
-import * as styles from "./cross-chain.css";
 import type { CrossChainProps } from "./cross-chain.types";
 
 useMetadata({
@@ -14,13 +13,14 @@ useMetadata({
 
 export default function CrossChain(props: CrossChainProps) {
   return (
-    <Box className={styles.container}>
+    <Box className={props.className} {...props.attributes}>
       <AssetListHeader
-        isSingle={false}
-        total={props.header.total}
-        totalOnAll={props.header.totalOnAll}
-        onDeposit={() => props?.header?.onDeposit?.()}
-        onWithdraw={() => props?.header?.onWithdraw?.()}
+        title={props.title}
+        multiChainHeader={props.multiChainHeader}
+        depositButtonLabel={props.depositButtonLabel}
+        withdrawButtonLabel={props.withdrawButtonLabel}
+        onDeposit={() => props.onDeposit?.()}
+        onWithdraw={() => props.onWithdraw?.()}
       />
       <Text
         color="$textSecondary"
@@ -28,7 +28,7 @@ export default function CrossChain(props: CrossChainProps) {
         fontWeight="$semibold"
         attributes={{ my: "$9" }}
       >
-        On Osmosis
+        {props.listTitle}
       </Text>
       <AssetList
         needChainSpace={true}
@@ -41,7 +41,7 @@ export default function CrossChain(props: CrossChainProps) {
         fontWeight="$semibold"
         attributes={{ marginTop: "$15", marginBottom: "$9" }}
       >
-        On other chains
+        {props.otherListTitle}
       </Text>
       <AssetList
         needChainSpace={true}
diff --git a/src/ui/cross-chain/cross-chain.types.tsx b/src/ui/cross-chain/cross-chain.types.tsx
index eaf31175..2d657f69 100644
--- a/src/ui/cross-chain/cross-chain.types.tsx
+++ b/src/ui/cross-chain/cross-chain.types.tsx
@@ -1,12 +1,12 @@
-import { AssetListHeaderProps } from "../asset-list-header/asset-list-header.types";
-import { AssetListItemProps } from "../asset-list-item/asset-list-item.types";
-
-export type CrossChainHeaderProps = Omit<AssetListHeaderProps, "isSingle">;
+import type { AssetListHeaderProps } from "../asset-list-header/asset-list-header.types";
+import type { AssetListItemProps } from "../asset-list-item/asset-list-item.types";
 
 export type CrossChainListItemProps = Omit<AssetListItemProps, "isOtherChains">;
 
-export interface CrossChainProps {
-  header: CrossChainHeaderProps;
+export interface CrossChainProps
+  extends Omit<AssetListHeaderProps, "singleChainHeader"> {
   list: Array<CrossChainListItemProps>;
+  listTitle: string;
   otherList: Array<CrossChainListItemProps>;
+  otherListTitle: string;
 }
diff --git a/src/ui/single-chain/single-chain.css.ts b/src/ui/single-chain/single-chain.css.ts
deleted file mode 100644
index 520e581a..00000000
--- a/src/ui/single-chain/single-chain.css.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const container = style({
-  minWidth: "720px",
-});
diff --git a/src/ui/single-chain/single-chain.lite.tsx b/src/ui/single-chain/single-chain.lite.tsx
index 8e6cc052..971a689f 100644
--- a/src/ui/single-chain/single-chain.lite.tsx
+++ b/src/ui/single-chain/single-chain.lite.tsx
@@ -4,8 +4,7 @@ import AssetList from "../asset-list";
 import Box from "../box";
 import Text from "../text";
 import ShowMore from "../show-more";
-import * as styles from "./single-chain.css";
-import { SingleChainProps } from "./single-chain.types";
+import type { SingleChainProps } from "./single-chain.types";
 
 useMetadata({
   rsc: {
@@ -15,22 +14,26 @@ useMetadata({
 
 export default function SingleChain(props: SingleChainProps) {
   return (
-    <ShowMore className={styles.container}>
-      <Box>
+    <ShowMore>
+      <Box className={props.className} {...props.attributes}>
         <AssetListHeader
-          isSingle={true}
-          total={props.header.total}
-          onDeposit={() => props?.header?.onDeposit?.()}
-          onWithdraw={() => props?.header?.onWithdraw?.()}
+          title={props.title}
+          singleChainHeader={props.singleChainHeader}
+          depositButtonLabel={props.depositButtonLabel}
+          withdrawButtonLabel={props.withdrawButtonLabel}
+          onDeposit={() => props.onDeposit?.()}
+          onWithdraw={() => props.onWithdraw?.()}
         />
+
         <Text
           color="$textSecondary"
           fontSize="$lg"
           fontWeight="$semibold"
           attributes={{ marginTop: "$10", marginBottom: "$9" }}
         >
-          On Osmosis
+          {props.listTitle}
         </Text>
+
         <AssetList
           needChainSpace={false}
           isOtherChains={false}
diff --git a/src/ui/single-chain/single-chain.types.tsx b/src/ui/single-chain/single-chain.types.tsx
index 9af467a3..0411a99b 100644
--- a/src/ui/single-chain/single-chain.types.tsx
+++ b/src/ui/single-chain/single-chain.types.tsx
@@ -1,17 +1,13 @@
-import { AssetListHeaderProps } from "../asset-list-header/asset-list-header.types";
-import { AssetListItemProps } from "../asset-list-item/asset-list-item.types";
-
-export type SingleChainHeaderProps = Omit<
-  AssetListHeaderProps,
-  "isSingle" | "totalOnAll"
->;
+import type { AssetListHeaderProps } from "../asset-list-header/asset-list-header.types";
+import type { AssetListItemProps } from "../asset-list-item/asset-list-item.types";
 
 export type SingleChainListItemProps = Omit<
   AssetListItemProps,
   "isOtherChains"
 >;
 
-export interface SingleChainProps {
-  header: SingleChainHeaderProps;
+export interface SingleChainProps
+  extends Omit<AssetListHeaderProps, "multiChainHeader"> {
   list: Array<SingleChainListItemProps>;
+  listTitle: string;
 }