feat: Wallet Responsive Web Develop (#171)

gnoswap-labs · Aug 14, 2023 · 767da9b · 767da9b
1 parent 223ef48
commit 767da9b
Show file tree

Hide file tree

Showing 25 changed files with 540 additions and 196 deletions.
diff --git a/packages/web/src/components/common/switch/Switch.styles.ts b/packages/web/src/components/common/switch/Switch.styles.ts
@@ -1,5 +1,6 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const SwitchWrapper = styled.div`
@@ -9,6 +10,9 @@ export const SwitchWrapper = styled.div`
 
 export const SwitchLabel = styled.label`
   ${fonts.body12};
+  ${media.mobile} {
+    ${fonts.p2};
+  }
   color: ${({ theme }) => theme.color.text04};
   pointer-events: none;
 `;

diff --git a/packages/web/src/components/wallet/asset-info/AssetInfo.styles.ts b/packages/web/src/components/wallet/asset-info/AssetInfo.styles.ts
@@ -1,5 +1,6 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const AssetInfoWrapper = styled.div`
@@ -35,9 +36,24 @@ export const AssetInfoWrapper = styled.div`
 export const TableColumn = styled.div<{ tdWidth: number }>`
   width: ${({ tdWidth }) => `${tdWidth}px`};
   min-width: ${({ tdWidth }) => `${tdWidth}px`};
-  padding: 16px;
   height: 100%;
   ${mixins.flexbox("row", "center", "flex-end")};
+  .logo {
+    margin-left: 16px;
+  }
+
+  .chain {
+    padding: 16px;
+    ${media.tablet} {
+      padding: 16px 0px 16px 12px;
+    }
+  }
+  .balance {
+    padding: 16px;
+    ${media.tablet} {
+      padding: 16px 0px;
+    }
+  }
   &.left {
     flex-shrink: 0;
     justify-content: flex-start;

diff --git a/packages/web/src/components/wallet/asset-info/AssetInfo.tsx b/packages/web/src/components/wallet/asset-info/AssetInfo.tsx
@@ -3,15 +3,26 @@ import IconDownload from "@components/common/icons/IconDownload";
 import IconUpload from "@components/common/icons/IconUpload";
 import { Asset } from "@containers/asset-list-container/AssetListContainer";
 import { AssetInfoWrapper, LoadButton, TableColumn } from "./AssetInfo.styles";
-import { ASSET_TD_WIDTH } from "@constants/skeleton.constant";
+import {
+  ASSET_TD_WIDTH,
+  MOBILE_ASSET_TD_WIDTH,
+  TABLET_ASSET_TD_WIDTH,
+} from "@constants/skeleton.constant";
+import { compareSize } from "@styles/media";
 
 interface AssetInfoProps {
   asset: Asset;
   deposit: (assetId: string) => void;
   withdraw: (assetId: string) => void;
+  windowSize: number;
 }
 
-const AssetInfo: React.FC<AssetInfoProps> = ({ asset, deposit, withdraw }) => {
+const AssetInfo: React.FC<AssetInfoProps> = ({
+  asset,
+  deposit,
+  withdraw,
+  windowSize,
+}) => {
   const { id, logoUri, name, symbol, chain, balance } = asset;
 
   const onClickItem = useCallback((symbol: string) => {
@@ -26,9 +37,13 @@ const AssetInfo: React.FC<AssetInfoProps> = ({ asset, deposit, withdraw }) => {
     withdraw(id);
   }, [withdraw, id]);
 
-  return (
+  return compareSize("TABLET", windowSize) ? (
     <AssetInfoWrapper>
-      <TableColumn className="left" tdWidth={ASSET_TD_WIDTH[0]} onClick={() => onClickItem(symbol)}>
+      <TableColumn
+        className="left"
+        tdWidth={ASSET_TD_WIDTH[0]}
+        onClick={() => onClickItem(symbol)}
+      >
         <img className="logo" src={logoUri} alt="logo" />
         <span className="name">{name}</span>
         <span className="symbol">{symbol}</span>
@@ -46,6 +61,54 @@ const AssetInfo: React.FC<AssetInfoProps> = ({ asset, deposit, withdraw }) => {
         <WithdrawButton onClick={onClickWithdraw} />
       </TableColumn>
     </AssetInfoWrapper>
+  ) : compareSize("MOBILE", windowSize) ? (
+    <AssetInfoWrapper>
+      <TableColumn
+        className="left"
+        tdWidth={TABLET_ASSET_TD_WIDTH[0]}
+        onClick={() => onClickItem(symbol)}
+      >
+        <img className="logo" src={logoUri} alt="logo" />
+        <span className="name">{name}</span>
+        <span className="symbol">{symbol}</span>
+      </TableColumn>
+      <TableColumn className="left" tdWidth={TABLET_ASSET_TD_WIDTH[1]}>
+        <span className="chain">{chain}</span>
+      </TableColumn>
+      <TableColumn className="left" tdWidth={TABLET_ASSET_TD_WIDTH[2]}>
+        <span className="balance">{balance}</span>
+      </TableColumn>
+      <TableColumn tdWidth={TABLET_ASSET_TD_WIDTH[3]}>
+        <DepositButton onClick={onClickDeposit} />
+      </TableColumn>
+      <TableColumn tdWidth={TABLET_ASSET_TD_WIDTH[4]}>
+        <WithdrawButton onClick={onClickWithdraw} />
+      </TableColumn>
+    </AssetInfoWrapper>
+  ) : (
+    <AssetInfoWrapper>
+      <TableColumn
+        className="left"
+        tdWidth={MOBILE_ASSET_TD_WIDTH[0]}
+        onClick={() => onClickItem(symbol)}
+      >
+        <img className="logo" src={logoUri} alt="logo" />
+        <span className="name">{name}</span>
+        <span className="symbol">{symbol}</span>
+      </TableColumn>
+      <TableColumn className="left" tdWidth={MOBILE_ASSET_TD_WIDTH[1]}>
+        <span className="chain">{chain}</span>
+      </TableColumn>
+      <TableColumn className="left" tdWidth={MOBILE_ASSET_TD_WIDTH[2]}>
+        <span className="balance">{balance}</span>
+      </TableColumn>
+      <TableColumn tdWidth={MOBILE_ASSET_TD_WIDTH[3]}>
+        <DepositButton onClick={onClickDeposit} />
+      </TableColumn>
+      <TableColumn tdWidth={MOBILE_ASSET_TD_WIDTH[4]}>
+        <WithdrawButton onClick={onClickWithdraw} />
+      </TableColumn>
+    </AssetInfoWrapper>
   );
 };
 

diff --git a/packages/web/src/components/wallet/asset-list-header/AssetListHeader.styles.ts b/packages/web/src/components/wallet/asset-list-header/AssetListHeader.styles.ts
@@ -1,22 +1,60 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const AssetListHeaderWrapper = styled.div`
-  ${mixins.flexbox("row", "center", "flex-start")};
+  ${mixins.flexbox("row", "center", "space-between")};
   width: 100%;
-  margin-bottom: 24px;
+  ${media.mobile} {
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .title-container {
+    ${mixins.flexbox("row", "center", "flex-start")};
+    width: 651px;
+    gap: 36px;
+    ${media.mobile} {
+      width: 328px;
+      justify-content: space-between;
+    }
+  }
+  .mobile-title-container {
+    ${mixins.flexbox("row", "center", "flex-start")};
+    gap: 12px;
+  }
+  .icon-wrap {
+    ${mixins.flexbox("row", "center", "center")};
+  }
+  .search-icon {
+    width: 24px;
+    height: 24px;
+    * {
+      fill: ${({ theme }) => theme.color.icon08};
+    }
+  }
+  .search-icon:hover {
+    * {
+      fill: ${({ theme }) => theme.color.icon02};
+    }
+  }
 
   h2 {
     ${fonts.h5};
     color: ${({ theme }) => theme.color.text02};
-    margin-right: 36px;
+    ${media.mobile} {
+      ${fonts.h6};
+    }
   }
+
   .right-section {
     ${mixins.flexbox("row", "center", "center")};
-    margin-left: auto;
+    flex-shrink: 0;
+    gap: 36px;
   }
   .assets-search {
-    margin-left: 36px;
   }
 `;
diff --git a/packages/web/src/components/wallet/asset-list-header/AssetListHeader.tsx b/packages/web/src/components/wallet/asset-list-header/AssetListHeader.tsx
@@ -4,6 +4,8 @@ import { ASSET_FILTER_TYPE } from "@containers/asset-list-container/AssetListCon
 import { AssetListHeaderWrapper } from "./AssetListHeader.styles";
 import SelectTab from "@components/common/select-tab/SelectTab";
 import Switch from "@components/common/switch/Switch";
+import IconSearch from "@components/common/icons/IconSearch";
+import { DeviceSize } from "@styles/media";
 
 interface AssetListHeaderProps {
   assetType: ASSET_FILTER_TYPE;
@@ -12,6 +14,7 @@ interface AssetListHeaderProps {
   changeAssetType: (newType: string) => void;
   toggleInvisibleZeroBalance: () => void;
   search: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  windowSize: number;
 }
 
 const AssetListHeader: React.FC<AssetListHeaderProps> = ({
@@ -21,28 +24,53 @@ const AssetListHeader: React.FC<AssetListHeaderProps> = ({
   changeAssetType,
   toggleInvisibleZeroBalance,
   search,
+  windowSize,
 }) => (
   <AssetListHeaderWrapper>
-    <h2>Assets</h2>
-    <SelectTab
-      selectType={assetType}
-      list={Object.values(ASSET_FILTER_TYPE)}
-      onClick={changeAssetType}
-    />
-    <div className="right-section">
-      <Switch
-        checked={invisibleZeroBalance}
-        onChange={toggleInvisibleZeroBalance}
-        hasLabel={true}
-        disabled={assetType === ASSET_FILTER_TYPE.GRC20}
-      />
-      <SearchInput
-        width={300}
-        value={keyword}
-        onChange={search}
-        className="assets-search"
-      />
+    <div className="title-container">
+      <h2>Assets</h2>
+      {windowSize > DeviceSize.mobile ? (
+        <SelectTab
+          selectType={assetType}
+          list={Object.values(ASSET_FILTER_TYPE)}
+          onClick={changeAssetType}
+        />
+      ) : (
+        <div className="mobile-title-container">
+          <Switch
+            checked={invisibleZeroBalance}
+            onChange={toggleInvisibleZeroBalance}
+            hasLabel={true}
+            disabled={assetType === ASSET_FILTER_TYPE.GRC20}
+          />
+          <div className="icon-wrap" onClick={() => {}}>
+            <IconSearch className="search-icon" />
+          </div>
+        </div>
+      )}
     </div>
+    {windowSize > DeviceSize.mobile ? (
+      <div className="right-section">
+        <Switch
+          checked={invisibleZeroBalance}
+          onChange={toggleInvisibleZeroBalance}
+          hasLabel={true}
+          disabled={assetType === ASSET_FILTER_TYPE.GRC20}
+        />
+        <SearchInput
+          width={300}
+          value={keyword}
+          onChange={search}
+          className="assets-search"
+        />
+      </div>
+    ) : (
+      <SelectTab
+        selectType={assetType}
+        list={Object.values(ASSET_FILTER_TYPE)}
+        onClick={changeAssetType}
+      />
+    )}
   </AssetListHeaderWrapper>
 );
 

diff --git a/packages/web/src/components/wallet/asset-list-table/AssetListTable.styles.ts b/packages/web/src/components/wallet/asset-list-table/AssetListTable.styles.ts
@@ -1,13 +1,13 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const AssetListTableWrapper = styled.div`
   ${mixins.flexbox("column", "flex-start", "flex-start")}
   width: 100%;
   border: 1px solid ${({ theme }) => theme.color.border01};
   border-radius: 8px;
-  margin-bottom: 24px;
   color: ${({ theme }) => theme.color.text04};
   ${fonts.body11};
   overflow-x: auto;
@@ -28,8 +28,38 @@ export const AssetListTableWrapper = styled.div`
 export const TableColumn = styled.div<{ tdWidth: number }>`
   width: ${({ tdWidth }) => `${tdWidth}px`};
   height: 100%;
-  padding: 16px;
   ${mixins.flexbox("row", "center", "flex-end")};
+
+  .asset {
+    padding: 16px;
+    ${media.tablet} {
+      padding: 16px 0px 16px 16px;
+    }
+  }
+  .chain {
+    padding: 16px;
+    ${media.tablet} {
+      padding: 16px 0px 16px 12px;
+    }
+  }
+  .balance {
+    padding: 16px;
+    ${media.tablet} {
+      padding: 16px 0px;
+    }
+  }
+  .deposit {
+    padding: 16px;
+    ${media.tablet} {
+      padding: 16px 16px 16px 12px;
+    }
+  }
+  .withdraw {
+    padding: 16px;
+    ${media.tablet} {
+      padding: 16px 16px 16px 12px;
+    }
+  }
   &.left {
     flex-shrink: 0;
     justify-content: flex-start;