From b688b5930ee63fee2d033978c33efc261e9dd1da Mon Sep 17 00:00:00 2001
From: Adam Akbar <adam.akbar@ruangguru.com>
Date: Wed, 13 Jul 2022 00:35:31 +0700
Subject: [PATCH 1/6] feat: new product page

---
 .../MarketDetailPage/VaultInformationCard.tsx |   1 -
 modules/tokenPage/TokenPageContainer.tsx      |   4 +-
 .../component/ButtonMintOrRedeem.tsx          |  31 ++++-
 .../component/LeveragedTokenBackingCard.tsx   | 124 +++++++++++-------
 .../component/LeveragedTokenInfoCard.tsx      | 102 --------------
 modules/tokenPage/component/MyAssetsCard.tsx  |  10 +-
 modules/tokenPage/component/PriceInfoCard.tsx |   8 +-
 .../component/TokenInformation/InfoItem.tsx   |  23 ++++
 .../LeveragedTokenInfoCard.tsx                |  98 ++++++++++++++
 .../TokenInformation/TokenInfoStore.ts        |  18 +++
 package-lock.json                             |  64 ++++++++-
 package.json                                  |   4 +-
 public/assets/icon/tokenPage/worldIcon.svg    |   9 ++
 styles/globals.css                            |  12 ++
 uikit/card/InformationCard.tsx                |  20 +--
 15 files changed, 346 insertions(+), 182 deletions(-)
 delete mode 100644 modules/tokenPage/component/LeveragedTokenInfoCard.tsx
 create mode 100644 modules/tokenPage/component/TokenInformation/InfoItem.tsx
 create mode 100644 modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx
 create mode 100644 modules/tokenPage/component/TokenInformation/TokenInfoStore.ts
 create mode 100644 public/assets/icon/tokenPage/worldIcon.svg

diff --git a/components/v1/MarketDetailPage/VaultInformationCard.tsx b/components/v1/MarketDetailPage/VaultInformationCard.tsx
index 027e0896..8f65ac58 100644
--- a/components/v1/MarketDetailPage/VaultInformationCard.tsx
+++ b/components/v1/MarketDetailPage/VaultInformationCard.tsx
@@ -5,7 +5,6 @@ import { Metadata } from "../MarketMetadata";
 import { useMarket } from "../swr/useMarket";
 import ToastError from "../../../uikit/toasts/Error";
 import { DEFAULT_CHAIN, useWalletContext } from "../Wallet";
-import MyAssetCard from "./LeveragedTokenMyAssetCard";
 
 /**
  * VaultInformationCardProps is a React Component properties that passed to React Component VaultInformationCard
diff --git a/modules/tokenPage/TokenPageContainer.tsx b/modules/tokenPage/TokenPageContainer.tsx
index 6a5fbd84..f8b31260 100644
--- a/modules/tokenPage/TokenPageContainer.tsx
+++ b/modules/tokenPage/TokenPageContainer.tsx
@@ -11,7 +11,7 @@ import TabsList from "./component/TabsList";
 import TabsContentGrid from "./component/TabsContentGrid";
 import PriceInfoCard from "./component/PriceInfoCard";
 import LeveragedTokenBackingCard from "./component/LeveragedTokenBackingCard";
-import LeveragedTokenInfoCard from "./component/LeveragedTokenInfoCard";
+import LeveragedTokenInfoCard from "./component/TokenInformation/LeveragedTokenInfoCard";
 import MyAssetsCard from "./component/MyAssetsCard";
 import VaultInfoCard from "./component/VaultInfoCard";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
@@ -44,7 +44,6 @@ const TokenPageContainer: FunctionComponent<TokenPageContainerProps> = ({ chainI
 
                             {/* Right Column */}
                             <div className="flex max-w-[540px] flex-col space-y-6">
-                                <MyAssetsCard chainID={chainID} address={tokenAddress} />
                                 <LeveragedTokenInfoCard chainID={chainID} address={tokenAddress} />
                                 <LeveragedTokenBackingCard chainID={chainID} address={tokenAddress} />
                             </div>
@@ -57,7 +56,6 @@ const TokenPageContainer: FunctionComponent<TokenPageContainerProps> = ({ chainI
 
                             {/* RightColumn */}
                             <div className="max-w-[540px] flex-col space-y-6">
-                                <MyAssetsCard chainID={chainID} isVault address={tokenAddress} />
                                 <VaultInfoCard chainID={chainID} address={tokenAddress} />
                             </div>
                         </TabsContentGrid>
diff --git a/modules/tokenPage/component/ButtonMintOrRedeem.tsx b/modules/tokenPage/component/ButtonMintOrRedeem.tsx
index ae4c2d9b..4b801274 100644
--- a/modules/tokenPage/component/ButtonMintOrRedeem.tsx
+++ b/modules/tokenPage/component/ButtonMintOrRedeem.tsx
@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import * as Tabs from "@radix-ui/react-tabs";
 import { Metadata } from "./MarketMetadata";
@@ -6,6 +6,7 @@ import MintDialogContent from "./MintDialogContent";
 import RedeemDialogContent from "./RedeemDialogContent";
 import ButtonAlternate from "../../../uikit/button/ButtonAlternate";
 import { customChains } from "../../../components/v1/Wallet";
+import useKeyboardShortcut from "use-keyboard-shortcut";
 
 /**
  * ButtonMintOrRedeemProps is a React Component properties that passed to React Component ButtonMintOrRedeem
@@ -22,13 +23,29 @@ type ButtonMintOrRedeemProps = {
  */
 const ButtonMintOrRedeem: FunctionComponent<ButtonMintOrRedeemProps> = ({ chainID, address }) => {
     const metadata = Metadata[chainID][address];
+    const [isOpen, setIsOpen] = useState(false);
+
+    const { flushHeldKeys } = useKeyboardShortcut(["Shift", "S"], (shortcutKeys) => setIsOpen(true), {
+        overrideSystem: false,
+        ignoreInputFields: false,
+        repeatOnHold: false,
+    });
+
+    useEffect(() => {
+        return () => flushHeldKeys();
+    }, [flushHeldKeys]);
 
     return (
-        <Dialog.Root>
-            <Dialog.Trigger asChild>
-                <ButtonAlternate type={chainID === customChains.bsc.id ? "bsc" : "arb"} className="w-full">
-                    Mint or Redeem
-                </ButtonAlternate>
+        <Dialog.Root open={isOpen}>
+            <Dialog.Trigger asChild onClick={() => setIsOpen(true)}>
+                <div className="flex align-middle">
+                    <ButtonAlternate className="mr-4 flex-1" type={chainID === customChains.bsc.id ? "bsc" : "arb"}>
+                        Swap
+                    </ButtonAlternate>
+                    <span className="self-center text-xs text-gray-dark-9">
+                        Press <kbd>&#8593;</kbd> + <kbd>S</kbd> for quick shortcut
+                    </span>
+                </div>
             </Dialog.Trigger>
             <Dialog.Overlay className="fixed inset-0 z-30 bg-gray-dark-1/60 backdrop-blur dark:bg-black/60" />
             <Dialog.Content className="fixed left-0 bottom-0 z-30 w-screen sm:flex sm:h-screen sm:items-center ">
@@ -44,7 +61,7 @@ const ButtonMintOrRedeem: FunctionComponent<ButtonMintOrRedeemProps> = ({ chainI
                                 <h1 className="m-0 text-base font-bold tracking-[-0.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.title}</h1>
                             </div>
                         </div>
-                        <Dialog.Close asChild>
+                        <Dialog.Close asChild onClick={() => setIsOpen(false)}>
                             <button className="button basic h-8 p-0">
                                 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="m-[9.5px] h-[11px] w-[11px] fill-gray-light-12 dark:fill-gray-dark-12">
                                     <path
diff --git a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
index 7d8ae295..9a1d0626 100644
--- a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
+++ b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
@@ -1,73 +1,99 @@
 import { ethers } from "ethers";
-import type { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useMemo, useState } from "react";
 import { tokenBalanceFormatter } from "../../../utils/formatters";
 import { Metadata } from "../../../components/v1/MarketMetadata";
 import { useCollateralPerLeveragedToken } from "../../../components/v1/swr/useCollateralPerLeveragedToken";
 import { useDebtPerLeveragedToken } from "../../../components/v1/swr/useDebtPerLeveragedToken";
 import { getProvider } from "../../../components/v1/Wallet";
-import InformationCard from "../../../uikit/card/InformationCard";
+import InformationCard, { InformationCardSubTitle, InformationCardTitle } from "../../../uikit/card/InformationCard";
+import { StatusEnum } from "./TokenInformation/TokenInfoStore";
 
-/**
- * LeveragedTokenBackingCardProps is a React Component properties that passed to React Component LeveragedTokenBackingCard
- */
 type LeveragedTokenBackingCardProps = {
     chainID: number;
     address: string;
 };
 
-/**
- * LeveragedTokenBackingCard is just yet another react component
- *
- * @link https://fettblog.eu/typescript-react/components/#functional-components
- */
+type UiType = {
+    status: StatusEnum;
+    data?: {
+        collateralPerLeveragedToken?: number;
+        debtPerLeveragedToken?: number;
+    };
+    error?: string;
+};
+
 const LeveragedTokenBackingCard: FunctionComponent<LeveragedTokenBackingCardProps> = ({ chainID, address }) => {
-    const provider = getProvider({ chainId: chainID });
+    const provider = useMemo(() => {
+        return getProvider({ chainId: chainID });
+    }, [chainID]);
     const metadata = Metadata[chainID][address];
     const collateralPerTokenResponse = useCollateralPerLeveragedToken({ token: address, vault: metadata.vaultAddress, provider: provider });
     const debtPerTokenResponse = useDebtPerLeveragedToken({ token: address, vault: metadata.vaultAddress, provider: provider });
+    const [uiData, setUiData] = useState<UiType>({
+        status: "loading",
+    });
 
-    // Data
-    const collateral = parseFloat(ethers.utils.formatUnits(collateralPerTokenResponse.data ? collateralPerTokenResponse.data : 0, metadata.collateralDecimals));
-    const debt = parseFloat(ethers.utils.formatUnits(debtPerTokenResponse.data ? debtPerTokenResponse.data : 0, metadata.debtDecimals));
+    useEffect(() => {
+        if (metadata) {
+            if (collateralPerTokenResponse.data && debtPerTokenResponse.data) {
+                setUiData({
+                    status: "loaded",
+                    data: {
+                        collateralPerLeveragedToken: parseFloat(ethers.utils.formatUnits(collateralPerTokenResponse.data ? collateralPerTokenResponse.data : 0, metadata.collateralDecimals)),
+                        debtPerLeveragedToken: parseFloat(ethers.utils.formatUnits(debtPerTokenResponse.data ? debtPerTokenResponse.data : 0, metadata.debtDecimals)),
+                    },
+                });
+            }
+        }
+    }, [collateralPerTokenResponse.data, debtPerTokenResponse.data, metadata]);
 
-    // UI states
-    const showLoading = collateralPerTokenResponse.isLoading || debtPerTokenResponse.isLoading ? true : false;
-    const showError = collateralPerTokenResponse.error || debtPerTokenResponse.error ? true : false;
-    const showData = !showLoading && !showError && collateralPerTokenResponse.data && debtPerTokenResponse.data ? true : false;
+    useEffect(() => {
+        if (collateralPerTokenResponse.error || debtPerTokenResponse.error) {
+            setUiData({
+                status: "error",
+                error: collateralPerTokenResponse?.error?.message || debtPerTokenResponse?.error?.message,
+            });
+        }
+    }, [collateralPerTokenResponse.error, debtPerTokenResponse.error]);
 
     return (
         <InformationCard>
-            <div className="pt-4">
-                <h2 className="text-base font-bold leading-4 text-gray-light-12 dark:text-gray-dark-12">Backing per {metadata.title}</h2>
-            </div>
-            <div className="">
-                <p className="text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10">{metadata.title} represents collaterized debt position and can be redeemed at any time.</p>
-            </div>
-            <div className="flex flex-col space-y-6">
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Asset</p>
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Allocation</p>
-                </div>
-
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.collateralSymbol}</p>
-                    {(showLoading || showError) && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && (
-                        <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                            {tokenBalanceFormatter.format(collateral)} {metadata.collateralSymbol}
-                        </p>
-                    )}
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.debtSymbol}</p>
-                    {(showLoading || showError) && <p className="h-[16px] w-[100px] animate-pulse rounded-[8px] bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && (
-                        <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                            -{tokenBalanceFormatter.format(debt)} {metadata.debtSymbol}
-                        </p>
-                    )}
-                </div>
-            </div>
+            <InformationCardTitle>Backing per {metadata.title}</InformationCardTitle>
+            <InformationCardSubTitle>{metadata.title} represents collaterized debt position and can be redeemed at any time.</InformationCardSubTitle>
+            {
+                //TODO: simplify table with custom component and custom logic
+            }
+            <table className="text-right">
+                <thead className="bg-gray-dark-3 font-inter text-xs text-gray-dark-10	">
+                    <tr>
+                        <th className="rounded-bl-lg rounded-tl-lg py-2 pl-2 text-left">Token</th>
+                        <th className="py-2">Allocation</th>
+                        <th className="w-[80px] rounded-br-lg rounded-tr-lg py-2 pr-2">Change</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr className="border-b-2 border-dashed border-b-gray-dark-5 px-2">
+                        <td className="py-4 pl-2 text-left">
+                            <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.collateralSymbol}</p>
+                        </td>
+                        <td>
+                            {uiData.status === "loading" && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
+                            {uiData.status === "loaded" && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{tokenBalanceFormatter.format(uiData.data?.collateralPerLeveragedToken || 0)}</p>}
+                        </td>
+                        <td className="pr-2">{0}%</td>
+                    </tr>
+                    <tr>
+                        <td className="py-4 pl-2 text-left">
+                            <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.debtSymbol}</p>
+                        </td>
+                        <td>
+                            {uiData.status === "loading" && <p className="h-[16px] w-[100px] animate-pulse rounded-[8px] bg-gray-light-3 dark:bg-gray-dark-3"></p>}
+                            {uiData.status === "loaded" && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">-{tokenBalanceFormatter.format(uiData.data?.debtPerLeveragedToken || 0)}</p>}
+                        </td>
+                        <td className="pr-2">{0}%</td>
+                    </tr>
+                </tbody>
+            </table>
         </InformationCard>
     );
 };
diff --git a/modules/tokenPage/component/LeveragedTokenInfoCard.tsx b/modules/tokenPage/component/LeveragedTokenInfoCard.tsx
deleted file mode 100644
index f60fe872..00000000
--- a/modules/tokenPage/component/LeveragedTokenInfoCard.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { FunctionComponent, useEffect } from "react";
-import toast from "react-hot-toast";
-import { dollarFormatter } from "../../../utils/formatters";
-import { Metadata } from "../../../components/v1/MarketMetadata";
-import { useMarket } from "../../../components/v1/swr/useMarket";
-import ToastError from "../../../uikit/toasts/Error";
-import { chain as Chains } from "wagmi";
-import { customChains, formatAddress, getEtherscanAddressURL } from "../../../components/v1/Wallet";
-import InformationCard from "../../../uikit/card/InformationCard";
-
-/**
- * LeveragedTokenInfoCardProps is a React Component properties that passed to React Component LeveragedTokenInfoCard
- */
-type LeveragedTokenInfoCardProps = {
-    chainID: number;
-    address: string;
-};
-
-/**
- * LeveragedTokenInfoCard is just yet another react component
- *
- * @link https://fettblog.eu/typescript-react/components/#functional-components
- */
-const LeveragedTokenInfoCard: FunctionComponent<LeveragedTokenInfoCardProps> = ({ chainID, address }) => {
-    const metadata = Metadata[chainID][address];
-
-    // Get the market data
-    const marketData = useMarket(chainID, address);
-
-    // Toast error if loading is error
-    useEffect(() => {
-        if (marketData.error) {
-            toast.custom((t) => <ToastError>Failed to load information card data, please try to refresh</ToastError>);
-        }
-    }, [marketData.error]);
-
-    // UI States
-    const showLoading = marketData.isLoading || marketData.error ? true : false;
-    const showData = !showLoading && marketData.data ? true : false;
-
-    return (
-        <InformationCard>
-            <div className="pt-4">
-                <h2 className="text-base font-bold leading-4 text-gray-light-12 dark:text-gray-dark-12">Information</h2>
-            </div>
-            <div className="">
-                <p className="text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10">{metadata.informationText}</p>
-            </div>
-            <div className="flex flex-col space-y-6">
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Market cap</p>
-                    {showLoading && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && marketData.data && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{dollarFormatter.format(marketData.data.leveraged_token_market_cap)}</p>}
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Leverage ratio</p>
-                    {showLoading && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && marketData.data && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{marketData.data.leverage_ratio.toFixed(2) + "x"}</p>}
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Creation &amp; redemption fees</p>
-                    <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">0.1%</p>
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Management fees</p>
-                    <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-green-light-11 dark:text-green-dark-11">FREE</p>
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Underlying assets</p>
-                    <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                        {metadata.collateralSymbol}, {metadata.debtSymbol}
-                    </p>
-                </div>
-                {/* TODO(bayu): Handle case when capacity is maxed out */}
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Capacity</p>
-                    {showLoading && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && marketData.data && (
-                        <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                            <span className="text-green-light-11 dark:text-green-dark-11">{marketData.data.leveraged_token_total_collateral.toFixed(2) + metadata.collateralSymbol}</span> / {marketData.data.leveraged_token_max_total_collateral > 0 && <span>{marketData.data.leveraged_token_max_total_collateral.toFixed(2) + metadata.collateralSymbol}</span>}
-                            {marketData.data.leveraged_token_max_total_collateral <= 0 && <span>&#8734;</span>}
-                        </p>
-                    )}
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Contract Address</p>
-                    <a href={getEtherscanAddressURL(chainID === customChains.bsc.id ? customChains.bsc : Chains.arbitrumOne, address)} target="_blank" rel="noopener noreferrer" className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                        {formatAddress(address)} &#8599;
-                    </a>
-                </div>
-                {/* Link to buy on uniswap */}
-                {/* <div className="flex flex-row justify-between">
-                    <ButtonLinkBasic href={metadata.uniswapSwapURL} full>
-                        Buy on Uniswap &#8599;
-                    </ButtonLinkBasic>
-                </div> */}
-            </div>
-        </InformationCard>
-    );
-};
-
-export default LeveragedTokenInfoCard;
diff --git a/modules/tokenPage/component/MyAssetsCard.tsx b/modules/tokenPage/component/MyAssetsCard.tsx
index 50661bc6..6918918d 100644
--- a/modules/tokenPage/component/MyAssetsCard.tsx
+++ b/modules/tokenPage/component/MyAssetsCard.tsx
@@ -50,18 +50,12 @@ const MyAssetsCard: FunctionComponent<MyAssetsCardProps> = ({ address, isVault =
     if (balance > 0) {
         return (
             <InformationCard>
-                <div className="pt-4">
-                    <h2 className="text-base font-bold leading-4 text-gray-light-12 dark:text-gray-dark-12">My Asset</h2>
-                </div>
                 <div className="grid grid-cols-2 gap-4">
                     <AssetsItem icon="balance" title="Token Balance" value={`${tokenBalanceFormatter.format(balance)}`} showData={showData} showLoading={showLoading || showError} />
-                    <AssetsItem icon="value" title="Value (USDC)" value={`${tokenBalanceFormatter.format(value)}`} showData={showData} showLoading={showLoading || showError} />
+                    <AssetsItem icon="value" title="Value" value={`${tokenBalanceFormatter.format(value)}`} showData={showData} showLoading={showLoading || showError} />
                     <AssetsItem icon="return" title="Return" value={`-`} showData={showData} showLoading={showLoading || showError} />
-                    <AssetsItem icon="returnUSD" title="Return (USDC)" value={`-`} showData={showData} showLoading={showLoading || showError} />
+                    <AssetsItem icon="returnUSD" title="Return" value={`-`} showData={showData} showLoading={showLoading || showError} />
                 </div>
-                <ButtonTertiary full onClick={async () => await addTokenToMetamask({ token: tokenType.ETHRISE, chainID: chain.chain.id, isVaultToken: isVault })}>
-                    Add {isVault ? metadata.vaultTitle : metadata.title} to Wallet
-                </ButtonTertiary>
             </InformationCard>
         );
     }
diff --git a/modules/tokenPage/component/PriceInfoCard.tsx b/modules/tokenPage/component/PriceInfoCard.tsx
index 0edbc41b..e82facd4 100644
--- a/modules/tokenPage/component/PriceInfoCard.tsx
+++ b/modules/tokenPage/component/PriceInfoCard.tsx
@@ -2,6 +2,7 @@ import { FunctionComponent } from "react";
 import LeveragedTokenChart from "./LeveragedTokenChart";
 import VaultChart from "./VaultChart";
 import MainButton from "./MainButton";
+import MyAssetsCard from "./MyAssetsCard";
 
 /**
  * PriceInfoCardProps is a React Component properties that passed to React Component PriceInfoCard
@@ -33,7 +34,12 @@ const PriceInfoCard: FunctionComponent<PriceInfoCardProps> = ({ chainID, title,
                     <img className="h-12 w-12" src={logo} alt={title} />
                 </div>
                 {isVault && vaultAddress ? <VaultChart chainID={chainID} address={vaultAddress} /> : <LeveragedTokenChart chainID={chainID} address={tokenAddress} />}
-                <MainButton chainID={chainID} isVault={isVault} tokenAddress={tokenAddress} />
+
+                <div className="mx-4 mt-4 border-t-2 border-dashed border-t-gray-dark-5  pt-2">
+                    <MyAssetsCard chainID={chainID} address={tokenAddress} isVault={isVault} />
+
+                    <MainButton chainID={chainID} isVault={isVault} tokenAddress={tokenAddress} />
+                </div>
             </div>
         </div>
     );
diff --git a/modules/tokenPage/component/TokenInformation/InfoItem.tsx b/modules/tokenPage/component/TokenInformation/InfoItem.tsx
new file mode 100644
index 00000000..ada58165
--- /dev/null
+++ b/modules/tokenPage/component/TokenInformation/InfoItem.tsx
@@ -0,0 +1,23 @@
+import { useTokenInfoStore } from "./TokenInfoStore";
+
+function ContainerInfoItem({ children }: { children?: React.ReactNode }) {
+    return <div>{children}</div>;
+}
+
+function ItemTitle({ children }: { children: React.ReactNode }) {
+    return <p className="mb-2 text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">{children}</p>;
+}
+
+function ItemInfo({ children }: { children: React.ReactNode }) {
+    const { status } = useTokenInfoStore();
+    switch (status) {
+        case "loading":
+            return <div className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></div>;
+        case "loaded":
+            return <div className="font-ibm text-xs font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{children}</div>;
+        default:
+            return null;
+    }
+}
+
+export { ContainerInfoItem, ItemInfo, ItemTitle };
diff --git a/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx b/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx
new file mode 100644
index 00000000..3ac2a681
--- /dev/null
+++ b/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx
@@ -0,0 +1,98 @@
+import { FunctionComponent, useEffect } from "react";
+import toast from "react-hot-toast";
+import { dollarFormatter } from "../../../../utils/formatters";
+import { Metadata } from "../../../../components/v1/MarketMetadata";
+import { useMarket } from "../../../../components/v1/swr/useMarket";
+import ToastError from "../../../../uikit/toasts/Error";
+import { chain as Chains } from "wagmi";
+import { customChains, formatAddress, getEtherscanAddressURL } from "../../../../components/v1/Wallet";
+import InformationCard, { InformationCardSubTitle, InformationCardTitle } from "../../../../uikit/card/InformationCard";
+import { useTokenInfoStore } from "./TokenInfoStore";
+import { ContainerInfoItem, ItemInfo, ItemTitle } from "./InfoItem";
+
+/**
+ * LeveragedTokenInfoCardProps is a React Component properties that passed to React Component LeveragedTokenInfoCard
+ */
+type LeveragedTokenInfoCardProps = {
+    chainID: number;
+    address: string;
+};
+
+/**
+ * LeveragedTokenInfoCard is just yet another react component
+ *
+ * @link https://fettblog.eu/typescript-react/components/#functional-components
+ */
+const LeveragedTokenInfoCard: FunctionComponent<LeveragedTokenInfoCardProps> = ({ chainID, address }) => {
+    const metadata = Metadata[chainID][address];
+
+    // Get the market data
+    const { data: marketData, error } = useMarket(chainID, address);
+    const { setData } = useTokenInfoStore();
+
+    // Toast error if loading is error
+    useEffect(() => {
+        if (error) {
+            toast.custom((t) => <ToastError>Failed to load information card data, please try to refresh</ToastError>);
+        }
+    }, [error]);
+
+    useEffect(() => {
+        if (marketData) {
+            setData(marketData);
+        }
+    }, [marketData, setData]);
+
+    return (
+        <InformationCard>
+            <InformationCardTitle>Informations</InformationCardTitle>
+            <InformationCardSubTitle>{metadata.informationText}</InformationCardSubTitle>
+            <div className="mt-6 flex align-middle">
+                <img className="mr-1" src="/assets/icon/tokenPage/worldIcon.svg" />
+                <span className=" text-base leading-4 text-gray-dark-10">
+                    Arbiscan{" "}
+                    <a href={getEtherscanAddressURL(chainID === customChains.bsc.id ? customChains.bsc : Chains.arbitrumOne, address)} target="_blank" rel="noopener noreferrer" className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-dark-12">
+                        {formatAddress(address)} &#8599;
+                    </a>
+                </span>
+            </div>
+            <div className="grid grid-cols-3 gap-4 border-t-2 border-dashed border-t-gray-dark-5 px-2 pt-4">
+                <ContainerInfoItem>
+                    <ItemTitle>Market cap</ItemTitle>
+                    <ItemInfo>{dollarFormatter.format(marketData?.leveraged_token_market_cap || 0)}</ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Underlying assets</ItemTitle>
+                    <ItemInfo>
+                        {metadata.collateralSymbol}, {metadata.debtSymbol}
+                    </ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Volume</ItemTitle>
+                    <ItemInfo>&#36;{43.9}M</ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Trading Fees</ItemTitle>
+                    <ItemInfo>0.1%</ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Management fees</ItemTitle>
+                    <ItemInfo>
+                        <p className="text-green-dark-11">FREE</p>
+                    </ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Capacity (USDC)</ItemTitle>
+                    <ItemInfo>
+                        <p className="font-ibm text-xs font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
+                            <span className="text-green-light-11 dark:text-green-dark-11">{marketData?.leveraged_token_total_collateral.toFixed(2) + metadata.collateralSymbol}</span> / {(marketData?.leveraged_token_max_total_collateral || 0) > 0 && <span>{marketData?.leveraged_token_max_total_collateral.toFixed(2) + metadata.collateralSymbol}</span>}
+                            {(marketData?.leveraged_token_max_total_collateral || 0) <= 0 && <span>&#8734;</span>}
+                        </p>
+                    </ItemInfo>
+                </ContainerInfoItem>
+            </div>
+        </InformationCard>
+    );
+};
+
+export default LeveragedTokenInfoCard;
diff --git a/modules/tokenPage/component/TokenInformation/TokenInfoStore.ts b/modules/tokenPage/component/TokenInformation/TokenInfoStore.ts
new file mode 100644
index 00000000..107d3e99
--- /dev/null
+++ b/modules/tokenPage/component/TokenInformation/TokenInfoStore.ts
@@ -0,0 +1,18 @@
+import create from "zustand";
+import { Market } from "../../../../components/v1/swr/snapshot";
+
+export type StatusEnum = "loading" | "loaded" | "error";
+
+export type TokenInfoData = {
+    status: StatusEnum;
+    data?: Market;
+    error?: string;
+    setData: (data: Market) => void;
+    setError: (error: string) => void;
+};
+
+export const useTokenInfoStore = create<TokenInfoData>((set) => ({
+    status: "loading",
+    setData: (data: Market) => set((state) => ({ ...state, data, status: "loaded" })),
+    setError: (error: string) => set((state) => ({ ...state, error, status: "error" })),
+}));
diff --git a/package-lock.json b/package-lock.json
index 9f0e09ce..771758bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,8 +25,10 @@
                 "react-popper": "^2.2.5",
                 "recharts": "2.1.8",
                 "swr": "1.1.2",
+                "use-keyboard-shortcut": "^1.1.4",
                 "use-persisted-state": "0.3.3",
-                "wagmi": "0.2.8"
+                "wagmi": "0.2.8",
+                "zustand": "^4.0.0-rc.1"
             },
             "devDependencies": {
                 "@babel/core": "^7.15.5",
@@ -23015,6 +23017,15 @@
                 }
             }
         },
+        "node_modules/use-keyboard-shortcut": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/use-keyboard-shortcut/-/use-keyboard-shortcut-1.1.4.tgz",
+            "integrity": "sha512-diFzhVWYkoR9WdHGOxp1EWVr2YUaiQC3vdlT1FbdK25UfPcTb3wlVqgSzvEBdrXh0cg1FW3PCBKzNGMGpslMqg==",
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
         "node_modules/use-latest": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
@@ -23074,6 +23085,14 @@
                 "react": "^16.8.0 || ^17.0.0"
             }
         },
+        "node_modules/use-sync-external-store": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
+            "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/util": {
             "version": "0.11.1",
             "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -24417,6 +24436,29 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/zustand": {
+            "version": "4.0.0-rc.1",
+            "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.0.0-rc.1.tgz",
+            "integrity": "sha512-qgcs7zLqBdHu0PuT3GW4WCIY5SgXdsv30GQMu9Qpp1BA2aS+sNS8l4x0hWuyEhjXkN+701aGWawhKDv6oWJAcw==",
+            "dependencies": {
+                "use-sync-external-store": "1.1.0"
+            },
+            "engines": {
+                "node": ">=12.7.0"
+            },
+            "peerDependencies": {
+                "immer": ">=9.0",
+                "react": ">=16.8"
+            },
+            "peerDependenciesMeta": {
+                "immer": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/zwitch": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
@@ -41818,6 +41860,12 @@
             "dev": true,
             "requires": {}
         },
+        "use-keyboard-shortcut": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/use-keyboard-shortcut/-/use-keyboard-shortcut-1.1.4.tgz",
+            "integrity": "sha512-diFzhVWYkoR9WdHGOxp1EWVr2YUaiQC3vdlT1FbdK25UfPcTb3wlVqgSzvEBdrXh0cg1FW3PCBKzNGMGpslMqg==",
+            "requires": {}
+        },
         "use-latest": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
@@ -41859,6 +41907,12 @@
                 "object-assign": "^4.1.1"
             }
         },
+        "use-sync-external-store": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
+            "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==",
+            "requires": {}
+        },
         "util": {
             "version": "0.11.1",
             "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -42950,6 +43004,14 @@
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
             "dev": true
         },
+        "zustand": {
+            "version": "4.0.0-rc.1",
+            "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.0.0-rc.1.tgz",
+            "integrity": "sha512-qgcs7zLqBdHu0PuT3GW4WCIY5SgXdsv30GQMu9Qpp1BA2aS+sNS8l4x0hWuyEhjXkN+701aGWawhKDv6oWJAcw==",
+            "requires": {
+                "use-sync-external-store": "1.1.0"
+            }
+        },
         "zwitch": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/package.json b/package.json
index cbc8e1f8..0611cebe 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,10 @@
         "react-popper": "^2.2.5",
         "recharts": "2.1.8",
         "swr": "1.1.2",
+        "use-keyboard-shortcut": "^1.1.4",
         "use-persisted-state": "0.3.3",
-        "wagmi": "0.2.8"
+        "wagmi": "0.2.8",
+        "zustand": "^4.0.0-rc.1"
     },
     "devDependencies": {
         "@babel/core": "^7.15.5",
diff --git a/public/assets/icon/tokenPage/worldIcon.svg b/public/assets/icon/tokenPage/worldIcon.svg
new file mode 100644
index 00000000..a601393c
--- /dev/null
+++ b/public/assets/icon/tokenPage/worldIcon.svg
@@ -0,0 +1,9 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50039 2.30039C4.35237 2.30039 1.80039 4.85237 1.80039 8.00039C1.80039 11.1484 4.35237 13.7004 7.50039 13.7004C10.6484 13.7004 13.2004 11.1484 13.2004 8.00039C13.2004 4.85237 10.6484 2.30039 7.50039 2.30039ZM0.900391 8.00039C0.900391 4.35531 3.85531 1.40039 7.50039 1.40039C11.1455 1.40039 14.1004 4.35531 14.1004 8.00039C14.1004 11.6455 11.1455 14.6004 7.50039 14.6004C3.85531 14.6004 0.900391 11.6455 0.900391 8.00039Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5004 8.40034H1.50037V7.60034H13.5004V8.40034Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.10034 14.0004V2.00037H7.90034V14.0004H7.10034Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3754 8.00035C10.3754 5.8276 9.59407 3.67815 8.06226 2.25693L8.53836 1.74377C10.24 3.32255 11.0754 5.6731 11.0754 8.00035C11.0754 10.3276 10.24 12.6782 8.53836 14.2569L8.06226 13.7438C9.59407 12.3225 10.3754 10.1731 10.3754 8.00035Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00012 8.00037C4.00012 5.67648 4.80829 3.32714 6.45811 1.74756L6.9422 2.25318C5.45863 3.67359 4.70012 5.82426 4.70012 8.00037C4.70013 10.1765 5.45865 12.3271 6.94222 13.7476L6.45812 14.2532C4.80831 12.6736 4.00013 10.3243 4.00012 8.00037Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50038 4.45837C9.66971 4.45837 11.8757 4.85952 13.3711 5.69485C13.5398 5.78911 13.6002 6.00234 13.5059 6.17109C13.4117 6.33985 13.1985 6.40023 13.0297 6.30596C11.6798 5.55192 9.60842 5.15837 7.50038 5.15837C5.39234 5.15837 3.32095 5.55192 1.97107 6.30596C1.80231 6.40023 1.58909 6.33985 1.49482 6.17109C1.40055 6.00234 1.46094 5.78911 1.62969 5.69485C3.12509 4.85952 5.33106 4.45837 7.50038 4.45837Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50038 11.3503C9.66971 11.3503 11.8757 10.9492 13.3711 10.1139C13.5398 10.0196 13.6002 9.80638 13.5059 9.63762C13.4117 9.46887 13.1985 9.40848 13.0297 9.50275C11.6798 10.2568 9.60842 10.6503 7.50038 10.6503C5.39234 10.6503 3.32095 10.2568 1.97107 9.50275C1.80231 9.40848 1.58909 9.46887 1.49482 9.63762C1.40055 9.80638 1.46094 10.0196 1.62969 10.1139C3.12509 10.9492 5.33106 11.3503 7.50038 11.3503Z" fill="#EDEDED"/>
+</svg>
diff --git a/styles/globals.css b/styles/globals.css
index 5adca884..f9edff73 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -461,3 +461,15 @@ html {
         background-position: 0% 50%;
     }
 }
+
+kbd {
+    color: #707070;
+    border-radius: 4px;
+    background-color: #232323;
+    display: inline-block;
+    font-size: 0.85em;
+    font-weight: 700;
+    line-height: 1;
+    padding: 2px 4px;
+    white-space: nowrap;
+}
diff --git a/uikit/card/InformationCard.tsx b/uikit/card/InformationCard.tsx
index cca2203c..87fd2962 100644
--- a/uikit/card/InformationCard.tsx
+++ b/uikit/card/InformationCard.tsx
@@ -1,20 +1,22 @@
 import type { FunctionComponent, ReactNode } from "react";
 
-/**
- * InformationCardProps is a React Component properties that passed to React Component InformationCard
- */
 type InformationCardProps = {
     children: ReactNode;
     className?: string;
 };
 
-/**
- * InformationCard is just yet another react component
- *
- * @link https://fettblog.eu/typescript-react/components/#functional-components
- */
 const InformationCard: FunctionComponent<InformationCardProps> = ({ children, className }) => {
-    return <div className={`flex w-full flex-col space-y-6 rounded-[16px] bg-gray-light-2 px-4 pb-4 dark:bg-gray-dark-2 ${className || ""}`}>{children}</div>;
+    return <div className={`flex w-full flex-col space-y-6 rounded-[16px] bg-gray-light-2 px-4 pt-4 pb-4 dark:bg-gray-dark-2 ${className || ""}`}>{children}</div>;
 };
 
+const InformationCardTitle = ({ children }: { children: ReactNode }) => {
+    return <h2 className="text-base font-bold leading-4 text-gray-light-12 dark:text-gray-dark-12">{children}</h2>;
+};
+
+const InformationCardSubTitle = ({ children }: { children: ReactNode }) => {
+    // TODO: elipsis on overflow
+    return <p className="text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10">{children}</p>;
+};
+
+export { InformationCardTitle, InformationCardSubTitle };
 export default InformationCard;

From 03bfebc75f3f47931d00da71cd2859db30adf329 Mon Sep 17 00:00:00 2001
From: Adam Akbar <adam.akbar@ruangguru.com>
Date: Wed, 13 Jul 2022 10:34:59 +0700
Subject: [PATCH 2/6] fix: change dependencies caused cyclic

---
 modules/tokenPage/TokenPageContainer.tsx      |  1 -
 .../component/ButtonMintOrRedeem.tsx          | 25 +++-----
 .../component/LeveragedTokenBackingCard.tsx   |  3 +-
 modules/tokenPage/component/MyAssetsCard.tsx  |  2 +-
 .../LeveragedTokenInfoCard.tsx                |  2 +-
 package-lock.json                             | 60 ++++++++++++++-----
 package.json                                  |  3 +-
 uikit/card/InformationCard.tsx                |  7 ++-
 8 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/modules/tokenPage/TokenPageContainer.tsx b/modules/tokenPage/TokenPageContainer.tsx
index f8b31260..599bee98 100644
--- a/modules/tokenPage/TokenPageContainer.tsx
+++ b/modules/tokenPage/TokenPageContainer.tsx
@@ -12,7 +12,6 @@ import TabsContentGrid from "./component/TabsContentGrid";
 import PriceInfoCard from "./component/PriceInfoCard";
 import LeveragedTokenBackingCard from "./component/LeveragedTokenBackingCard";
 import LeveragedTokenInfoCard from "./component/TokenInformation/LeveragedTokenInfoCard";
-import MyAssetsCard from "./component/MyAssetsCard";
 import VaultInfoCard from "./component/VaultInfoCard";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { FunctionComponent } from "react";
diff --git a/modules/tokenPage/component/ButtonMintOrRedeem.tsx b/modules/tokenPage/component/ButtonMintOrRedeem.tsx
index 4b801274..7d57060f 100644
--- a/modules/tokenPage/component/ButtonMintOrRedeem.tsx
+++ b/modules/tokenPage/component/ButtonMintOrRedeem.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, useEffect, useState } from "react";
+import { FunctionComponent, useCallback, useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import * as Tabs from "@radix-ui/react-tabs";
 import { Metadata } from "./MarketMetadata";
@@ -6,7 +6,7 @@ import MintDialogContent from "./MintDialogContent";
 import RedeemDialogContent from "./RedeemDialogContent";
 import ButtonAlternate from "../../../uikit/button/ButtonAlternate";
 import { customChains } from "../../../components/v1/Wallet";
-import useKeyboardShortcut from "use-keyboard-shortcut";
+import { useHotkeys } from "react-hotkeys-hook";
 
 /**
  * ButtonMintOrRedeemProps is a React Component properties that passed to React Component ButtonMintOrRedeem
@@ -21,28 +21,21 @@ type ButtonMintOrRedeemProps = {
  *
  * @link https://fettblog.eu/typescript-react/components/#functional-components
  */
-const ButtonMintOrRedeem: FunctionComponent<ButtonMintOrRedeemProps> = ({ chainID, address }) => {
+function ButtonMintOrRedeem({ chainID, address }: ButtonMintOrRedeemProps) {
     const metadata = Metadata[chainID][address];
     const [isOpen, setIsOpen] = useState(false);
 
-    const { flushHeldKeys } = useKeyboardShortcut(["Shift", "S"], (shortcutKeys) => setIsOpen(true), {
-        overrideSystem: false,
-        ignoreInputFields: false,
-        repeatOnHold: false,
-    });
-
-    useEffect(() => {
-        return () => flushHeldKeys();
-    }, [flushHeldKeys]);
+    useHotkeys("shift+s", () => setIsOpen(true));
+    useHotkeys("esc", () => setIsOpen(false));
 
     return (
         <Dialog.Root open={isOpen}>
-            <Dialog.Trigger asChild onClick={() => setIsOpen(true)}>
+            <Dialog.Trigger asChild>
                 <div className="flex align-middle">
-                    <ButtonAlternate className="mr-4 flex-1" type={chainID === customChains.bsc.id ? "bsc" : "arb"}>
+                    <ButtonAlternate onClick={() => setIsOpen(true)} className="mr-4 flex-1" type={chainID === customChains.bsc.id ? "bsc" : "arb"}>
                         Swap
                     </ButtonAlternate>
-                    <span className="self-center text-xs text-gray-dark-9">
+                    <span className="hidden self-center text-xs text-gray-dark-9 md:block">
                         Press <kbd>&#8593;</kbd> + <kbd>S</kbd> for quick shortcut
                     </span>
                 </div>
@@ -95,6 +88,6 @@ const ButtonMintOrRedeem: FunctionComponent<ButtonMintOrRedeemProps> = ({ chainI
             </Dialog.Content>
         </Dialog.Root>
     );
-};
+}
 
 export default ButtonMintOrRedeem;
diff --git a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
index 9a1d0626..8db9abad 100644
--- a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
+++ b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
@@ -5,7 +5,7 @@ import { Metadata } from "../../../components/v1/MarketMetadata";
 import { useCollateralPerLeveragedToken } from "../../../components/v1/swr/useCollateralPerLeveragedToken";
 import { useDebtPerLeveragedToken } from "../../../components/v1/swr/useDebtPerLeveragedToken";
 import { getProvider } from "../../../components/v1/Wallet";
-import InformationCard, { InformationCardSubTitle, InformationCardTitle } from "../../../uikit/card/InformationCard";
+import { InformationCardExtra, InformationCardSubTitle, InformationCardTitle, InformationCard } from "../../../uikit/card/InformationCard";
 import { StatusEnum } from "./TokenInformation/TokenInfoStore";
 
 type LeveragedTokenBackingCardProps = {
@@ -94,6 +94,7 @@ const LeveragedTokenBackingCard: FunctionComponent<LeveragedTokenBackingCardProp
                     </tr>
                 </tbody>
             </table>
+            <InformationCardExtra className="bg-green-dark-2">Test</InformationCardExtra>
         </InformationCard>
     );
 };
diff --git a/modules/tokenPage/component/MyAssetsCard.tsx b/modules/tokenPage/component/MyAssetsCard.tsx
index 6918918d..cc83e366 100644
--- a/modules/tokenPage/component/MyAssetsCard.tsx
+++ b/modules/tokenPage/component/MyAssetsCard.tsx
@@ -9,7 +9,7 @@ import { useTokenBalance } from "../../../components/v1/swr/useTokenBalance";
 import { useVaultExchangeRate } from "../../../components/v1/swr/useVaultExchangeRate";
 import { useWalletContext, getProvider } from "../../../components/v1/Wallet";
 import { AssetsItem } from "./AssetsItem";
-import InformationCard from "../../../uikit/card/InformationCard";
+import { InformationCard } from "../../../uikit/card/InformationCard";
 
 /**
  * MyAssetsCardProps is a React Component properties that passed to React Component MyAssetsCard
diff --git a/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx b/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx
index 3ac2a681..0cd73fb7 100644
--- a/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx
+++ b/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx
@@ -6,7 +6,7 @@ import { useMarket } from "../../../../components/v1/swr/useMarket";
 import ToastError from "../../../../uikit/toasts/Error";
 import { chain as Chains } from "wagmi";
 import { customChains, formatAddress, getEtherscanAddressURL } from "../../../../components/v1/Wallet";
-import InformationCard, { InformationCardSubTitle, InformationCardTitle } from "../../../../uikit/card/InformationCard";
+import { InformationCardSubTitle, InformationCardTitle, InformationCard } from "../../../../uikit/card/InformationCard";
 import { useTokenInfoStore } from "./TokenInfoStore";
 import { ContainerInfoItem, ItemInfo, ItemTitle } from "./InfoItem";
 
diff --git a/package-lock.json b/package-lock.json
index 771758bf..9bbafdba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,14 +18,15 @@
                 "@radix-ui/react-tabs": "0.1.4",
                 "ethers": "5.5.4",
                 "framer-motion": "^6.3.11",
+                "hotkeys-js": "^3.9.4",
                 "next": "12.0.8",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
                 "react-hot-toast": "2.2.0",
+                "react-hotkeys-hook": "^3.4.6",
                 "react-popper": "^2.2.5",
                 "recharts": "2.1.8",
                 "swr": "1.1.2",
-                "use-keyboard-shortcut": "^1.1.4",
                 "use-persisted-state": "0.3.3",
                 "wagmi": "0.2.8",
                 "zustand": "^4.0.0-rc.1"
@@ -14406,6 +14407,11 @@
             "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
             "dev": true
         },
+        "node_modules/hotkeys-js": {
+            "version": "3.9.4",
+            "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.4.tgz",
+            "integrity": "sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q=="
+        },
         "node_modules/html-entities": {
             "version": "2.3.2",
             "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
@@ -19189,6 +19195,23 @@
                 "react-dom": ">=16"
             }
         },
+        "node_modules/react-hotkeys-hook": {
+            "version": "3.4.6",
+            "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.6.tgz",
+            "integrity": "sha512-SiGKHnauaAQglRA7qeiW5LTa0KoT2ssv8YGYKZQoM3P9v5JFEHJdXOSFml1N6K86oKQ8dLCLlxqBqGlSJWGmxQ==",
+            "dependencies": {
+                "hotkeys-js": "3.9.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.1",
+                "react-dom": ">=16.8.1"
+            }
+        },
+        "node_modules/react-hotkeys-hook/node_modules/hotkeys-js": {
+            "version": "3.9.3",
+            "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.3.tgz",
+            "integrity": "sha512-s+f0xyvDmf6+DyrFQ2SY+eA7lbvMbjqkqi0I0SpMgnN5tZx7DeH8nsWhkJR4KEq3pxDPHJppDUhdt1rZFW5LeQ=="
+        },
         "node_modules/react-inspector": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -23017,15 +23040,6 @@
                 }
             }
         },
-        "node_modules/use-keyboard-shortcut": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/use-keyboard-shortcut/-/use-keyboard-shortcut-1.1.4.tgz",
-            "integrity": "sha512-diFzhVWYkoR9WdHGOxp1EWVr2YUaiQC3vdlT1FbdK25UfPcTb3wlVqgSzvEBdrXh0cg1FW3PCBKzNGMGpslMqg==",
-            "peerDependencies": {
-                "react": ">=16.8",
-                "react-dom": ">=16.8"
-            }
-        },
         "node_modules/use-latest": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
@@ -35283,6 +35297,11 @@
             "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
             "dev": true
         },
+        "hotkeys-js": {
+            "version": "3.9.4",
+            "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.4.tgz",
+            "integrity": "sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q=="
+        },
         "html-entities": {
             "version": "2.3.2",
             "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
@@ -38874,6 +38893,21 @@
                 "goober": "^2.1.1"
             }
         },
+        "react-hotkeys-hook": {
+            "version": "3.4.6",
+            "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.6.tgz",
+            "integrity": "sha512-SiGKHnauaAQglRA7qeiW5LTa0KoT2ssv8YGYKZQoM3P9v5JFEHJdXOSFml1N6K86oKQ8dLCLlxqBqGlSJWGmxQ==",
+            "requires": {
+                "hotkeys-js": "3.9.3"
+            },
+            "dependencies": {
+                "hotkeys-js": {
+                    "version": "3.9.3",
+                    "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.3.tgz",
+                    "integrity": "sha512-s+f0xyvDmf6+DyrFQ2SY+eA7lbvMbjqkqi0I0SpMgnN5tZx7DeH8nsWhkJR4KEq3pxDPHJppDUhdt1rZFW5LeQ=="
+                }
+            }
+        },
         "react-inspector": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -41860,12 +41894,6 @@
             "dev": true,
             "requires": {}
         },
-        "use-keyboard-shortcut": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/use-keyboard-shortcut/-/use-keyboard-shortcut-1.1.4.tgz",
-            "integrity": "sha512-diFzhVWYkoR9WdHGOxp1EWVr2YUaiQC3vdlT1FbdK25UfPcTb3wlVqgSzvEBdrXh0cg1FW3PCBKzNGMGpslMqg==",
-            "requires": {}
-        },
         "use-latest": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
diff --git a/package.json b/package.json
index 0611cebe..9e36e72e 100644
--- a/package.json
+++ b/package.json
@@ -36,14 +36,15 @@
         "@radix-ui/react-tabs": "0.1.4",
         "ethers": "5.5.4",
         "framer-motion": "^6.3.11",
+        "hotkeys-js": "^3.9.4",
         "next": "12.0.8",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-hot-toast": "2.2.0",
+        "react-hotkeys-hook": "^3.4.6",
         "react-popper": "^2.2.5",
         "recharts": "2.1.8",
         "swr": "1.1.2",
-        "use-keyboard-shortcut": "^1.1.4",
         "use-persisted-state": "0.3.3",
         "wagmi": "0.2.8",
         "zustand": "^4.0.0-rc.1"
diff --git a/uikit/card/InformationCard.tsx b/uikit/card/InformationCard.tsx
index 87fd2962..b67dcb29 100644
--- a/uikit/card/InformationCard.tsx
+++ b/uikit/card/InformationCard.tsx
@@ -18,5 +18,8 @@ const InformationCardSubTitle = ({ children }: { children: ReactNode }) => {
     return <p className="text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10">{children}</p>;
 };
 
-export { InformationCardTitle, InformationCardSubTitle };
-export default InformationCard;
+const InformationCardExtra = ({ children, className }: { children: ReactNode; className?: string }) => {
+    return <div className={`text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10${className || ""}`}>{children}</div>;
+};
+
+export { InformationCardTitle, InformationCardSubTitle, InformationCardExtra, InformationCard };

From b26a094327b113f3ecada29c17ef9003b3452fd8 Mon Sep 17 00:00:00 2001
From: Adam Akbar <adam.akbar@ruangguru.com>
Date: Wed, 13 Jul 2022 13:12:38 +0700
Subject: [PATCH 3/6] add information extra

---
 modules/tokenPage/component/LeveragedTokenBackingCard.tsx | 6 +++++-
 uikit/card/InformationCard.tsx                            | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
index 8db9abad..16f02b6a 100644
--- a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
+++ b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
@@ -94,7 +94,11 @@ const LeveragedTokenBackingCard: FunctionComponent<LeveragedTokenBackingCardProp
                     </tr>
                 </tbody>
             </table>
-            <InformationCardExtra className="bg-green-dark-2">Test</InformationCardExtra>
+            <InformationCardExtra className="bg-green-dark-2">
+                <p className=" font-inter text-xs text-white">
+                    &#10003; Last rebalanced at: <span className="font-semibold"> 13-01-2022 03:23AM </span>
+                </p>
+            </InformationCardExtra>
         </InformationCard>
     );
 };
diff --git a/uikit/card/InformationCard.tsx b/uikit/card/InformationCard.tsx
index b67dcb29..ca3e2a2b 100644
--- a/uikit/card/InformationCard.tsx
+++ b/uikit/card/InformationCard.tsx
@@ -15,11 +15,15 @@ const InformationCardTitle = ({ children }: { children: ReactNode }) => {
 
 const InformationCardSubTitle = ({ children }: { children: ReactNode }) => {
     // TODO: elipsis on overflow
-    return <p className="text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10">{children}</p>;
+    return <p className="text-sm leading-6  dark:text-gray-dark-10">{children}</p>;
 };
 
 const InformationCardExtra = ({ children, className }: { children: ReactNode; className?: string }) => {
-    return <div className={`text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10${className || ""}`}>{children}</div>;
+    return (
+        <div style={{ marginBottom: "-1rem !important" }} className={`-m-4 rounded-b-[16px] py-2 px-4 text-sm leading-6 text-white dark:text-gray-dark-10 ${className || ""}`}>
+            {children}
+        </div>
+    );
 };
 
 export { InformationCardTitle, InformationCardSubTitle, InformationCardExtra, InformationCard };

From 18427b0da6175b7765dea6dba5a2b0f12675f254 Mon Sep 17 00:00:00 2001
From: Adam Akbar <adam.akbar@ruangguru.com>
Date: Wed, 13 Jul 2022 14:36:07 +0700
Subject: [PATCH 4/6] feat: add calculator component

---
 modules/tokenPage/TokenPageContainer.tsx   |  2 ++
 modules/tokenPage/component/Calculator.tsx | 41 ++++++++++++++++++++++
 uikit/Dash.tsx                             | 23 ++++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 modules/tokenPage/component/Calculator.tsx
 create mode 100644 uikit/Dash.tsx

diff --git a/modules/tokenPage/TokenPageContainer.tsx b/modules/tokenPage/TokenPageContainer.tsx
index 599bee98..817adb29 100644
--- a/modules/tokenPage/TokenPageContainer.tsx
+++ b/modules/tokenPage/TokenPageContainer.tsx
@@ -15,6 +15,7 @@ import LeveragedTokenInfoCard from "./component/TokenInformation/LeveragedTokenI
 import VaultInfoCard from "./component/VaultInfoCard";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { FunctionComponent } from "react";
+import { Calculator } from "./component/Calculator";
 
 type TokenPageContainerProps = {
     chainID: number;
@@ -44,6 +45,7 @@ const TokenPageContainer: FunctionComponent<TokenPageContainerProps> = ({ chainI
                             {/* Right Column */}
                             <div className="flex max-w-[540px] flex-col space-y-6">
                                 <LeveragedTokenInfoCard chainID={chainID} address={tokenAddress} />
+                                <Calculator />
                                 <LeveragedTokenBackingCard chainID={chainID} address={tokenAddress} />
                             </div>
                         </TabsContentGrid>
diff --git a/modules/tokenPage/component/Calculator.tsx b/modules/tokenPage/component/Calculator.tsx
new file mode 100644
index 00000000..7795b16d
--- /dev/null
+++ b/modules/tokenPage/component/Calculator.tsx
@@ -0,0 +1,41 @@
+import { InformationCardTitle, InformationCard, InformationCardSubTitle } from "../../../uikit/card/InformationCard";
+import { Dash, TextLeftDash, TextRightDash } from "../../../uikit/Dash";
+
+function Calculator() {
+    return (
+        <InformationCard>
+            <InformationCardTitle>Calulate My Profit</InformationCardTitle>
+            <InformationCardSubTitle>Let&#180;s try to simulate how much you&#180;ll get if the ETH price is higher or lower when you invested some ETH</InformationCardSubTitle>
+            <Dash>
+                <TextLeftDash className="text-xs font-semibold text-white">You Want To Buy</TextLeftDash>
+            </Dash>
+            <div className=" rounded-xl bg-gray-dark-3 p-3 px-2">
+                <div className="flex justify-between">
+                    <div>
+                        <div className="max-w-fit rounded-lg bg-gray-dark-2 py-2 px-1">
+                            <h3 className=" text-xs font-bold text-white">ETH</h3>
+                        </div>
+                        <span className="text-xs text-gray-dark-10">Mkt. Price $2,380.23</span>
+                    </div>
+                    <div className="flex-col justify-center self-center">
+                        <input type="number" className="max-h-[32px] max-w-[60px] self-center rounded-lg bg-gray-dark-2 text-right text-[16px] font-bold text-white"></input>
+                        <p className="pt-2 text-right text-xs text-gray-dark-10">$2,800</p>
+                    </div>
+                    {
+                        // TODO: add slider
+                    }
+                </div>
+            </div>
+            <Dash>
+                <TextLeftDash className="text-xs font-semibold text-white">Expected Market Price</TextLeftDash>
+                <TextRightDash className="text-sm font-bold text-gray-dark-12">$3,450.34</TextRightDash>
+            </Dash>
+            <Dash>
+                <TextLeftDash className="text-xs font-semibold text-white ">Est. Net Profit Gain</TextLeftDash>
+                <TextRightDash className="text-sm font-bold text-green-dark-11">+$2,800.00</TextRightDash>
+            </Dash>
+        </InformationCard>
+    );
+}
+
+export { Calculator };
diff --git a/uikit/Dash.tsx b/uikit/Dash.tsx
new file mode 100644
index 00000000..7971d6b7
--- /dev/null
+++ b/uikit/Dash.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+function Dash({ children }: { children?: React.ReactNode }) {
+    if (children) {
+        return (
+            <div className="flex align-middle ">
+                <div className="order-2 flex-1 self-center  border-t-2 border-dashed border-t-gray-dark-5 text-white" />
+                {children}
+            </div>
+        );
+    }
+    return <div className="border-t-2 border-dashed border-t-gray-dark-5 " />;
+}
+
+function TextLeftDash({ children, className }: { children: React.ReactNode; className?: string }) {
+    return <div className={`order-1  self-start ${className || ""}`}>{children}</div>;
+}
+
+function TextRightDash({ children, className }: { children: React.ReactNode; className?: string }) {
+    return <div className={`order-3  self-start ${className || ""}`}>{children}</div>;
+}
+
+export { Dash, TextLeftDash, TextRightDash };

From 5267a133ea8c74981430a520ae4a649b48ecfe4c Mon Sep 17 00:00:00 2001
From: Adam Akbar <adam.akbar@ruangguru.com>
Date: Wed, 13 Jul 2022 14:48:09 +0700
Subject: [PATCH 5/6] chore: remove unused package

---
 package-lock.json | 11 -----------
 package.json      |  1 -
 2 files changed, 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9bbafdba..48f2db10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,6 @@
                 "@radix-ui/react-tabs": "0.1.4",
                 "ethers": "5.5.4",
                 "framer-motion": "^6.3.11",
-                "hotkeys-js": "^3.9.4",
                 "next": "12.0.8",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
@@ -14407,11 +14406,6 @@
             "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
             "dev": true
         },
-        "node_modules/hotkeys-js": {
-            "version": "3.9.4",
-            "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.4.tgz",
-            "integrity": "sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q=="
-        },
         "node_modules/html-entities": {
             "version": "2.3.2",
             "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
@@ -35297,11 +35291,6 @@
             "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
             "dev": true
         },
-        "hotkeys-js": {
-            "version": "3.9.4",
-            "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.4.tgz",
-            "integrity": "sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q=="
-        },
         "html-entities": {
             "version": "2.3.2",
             "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
diff --git a/package.json b/package.json
index 9e36e72e..9acda84f 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
         "@radix-ui/react-tabs": "0.1.4",
         "ethers": "5.5.4",
         "framer-motion": "^6.3.11",
-        "hotkeys-js": "^3.9.4",
         "next": "12.0.8",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",

From 2548ce8d9186759bae8adda2b60a8cb88bc1f778 Mon Sep 17 00:00:00 2001
From: Adam Akbar <adam.akbar@ruangguru.com>
Date: Wed, 13 Jul 2022 16:34:00 +0700
Subject: [PATCH 6/6] fix: update tailwind css

---
 modules/tokenPage/component/LeveragedTokenBackingCard.tsx | 2 +-
 uikit/card/InformationCard.tsx                            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
index 16f02b6a..108c9828 100644
--- a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
+++ b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
@@ -87,7 +87,7 @@ const LeveragedTokenBackingCard: FunctionComponent<LeveragedTokenBackingCardProp
                             <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.debtSymbol}</p>
                         </td>
                         <td>
-                            {uiData.status === "loading" && <p className="h-[16px] w-[100px] animate-pulse rounded-[8px] bg-gray-light-3 dark:bg-gray-dark-3"></p>}
+                            {uiData.status === "loading" && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
                             {uiData.status === "loaded" && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">-{tokenBalanceFormatter.format(uiData.data?.debtPerLeveragedToken || 0)}</p>}
                         </td>
                         <td className="pr-2">{0}%</td>
diff --git a/uikit/card/InformationCard.tsx b/uikit/card/InformationCard.tsx
index ca3e2a2b..0a4a149a 100644
--- a/uikit/card/InformationCard.tsx
+++ b/uikit/card/InformationCard.tsx
@@ -20,7 +20,7 @@ const InformationCardSubTitle = ({ children }: { children: ReactNode }) => {
 
 const InformationCardExtra = ({ children, className }: { children: ReactNode; className?: string }) => {
     return (
-        <div style={{ marginBottom: "-1rem !important" }} className={`-m-4 rounded-b-[16px] py-2 px-4 text-sm leading-6 text-white dark:text-gray-dark-10 ${className || ""}`}>
+        <div style={{ marginBottom: "-1rem !important" }} className={`-m-4 rounded-b-2xl py-2 px-4 text-sm leading-6 text-white dark:text-gray-dark-10 ${className || ""}`}>
             {children}
         </div>
     );