From 0ee782e69eebc3f1fa2f001aacb177103545afcb Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Wed, 20 Jul 2022 15:49:09 +1000
Subject: [PATCH] responsive token list

---
 components/TokenList.tsx     | 292 +++++++++++++++++++++++++----------
 components/shared/Layout.tsx |   4 +-
 2 files changed, 215 insertions(+), 81 deletions(-)

diff --git a/components/TokenList.tsx b/components/TokenList.tsx
index bdf416c7..89e01029 100644
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@@ -1,115 +1,247 @@
+import { Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/solid'
+import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
+import { Fragment, useState } from 'react'
+import { useViewport } from '../hooks/useViewport'
 
 import mangoStore from '../store/state'
 import { formatDecimal, numberFormat } from '../utils/numbers'
-import Button from './shared/Button'
+import { breakpoints } from '../utils/theme'
+import Button, { IconButton } from './shared/Button'
 import ContentBox from './shared/ContentBox'
 
 const TokenList = () => {
+  const { t } = useTranslation('common')
+  const [showTokenDetails, setShowTokenDetails] = useState('')
   const mangoAccount = mangoStore((s) => s.mangoAccount)
   const group = mangoStore((s) => s.group)
+  const { width } = useViewport()
+  const showTableView = width ? width > breakpoints.md : false
 
   const banks = group?.banksMap
     ? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
     : []
 
+  const handleShowTokenDetails = (name: string) => {
+    showTokenDetails ? setShowTokenDetails('') : setShowTokenDetails(name)
+  }
+
   return (
     <ContentBox hideBorder hidePadding>
       <h2>Tokens</h2>
-      <table className="min-w-full">
-        <thead>
-          <tr>
-            <th className="w-[12.5%] text-left">Token</th>
-            <th className="w-[12.5%] text-right">Price</th>
-            <th className="w-[12.5%] text-right">24hr Change</th>
-            <th className="w-[12.5%] text-right">24hr Volume</th>
-            <th className="w-[12.5%] text-right">Rates (APR)</th>
-            <th className="w-[12.5%] text-right">Liquidity</th>
-            <th className="w-[12.5%] text-right">Available Balance</th>
-          </tr>
-        </thead>
-        <tbody>
+      {showTableView ? (
+        <table className="min-w-full">
+          <thead>
+            <tr>
+              <th className="w-[12.5%] text-left">Token</th>
+              <th className="w-[12.5%] text-right">Price</th>
+              <th className="w-[12.5%] text-right">{t('rolling-change')}</th>
+              <th className="w-[12.5%] text-right">{t('daily-volume')}</th>
+              <th className="w-[12.5%] text-right">Rates (APR)</th>
+              <th className="w-[12.5%] text-right">{t('liquidity')}</th>
+              <th className="w-[12.5%] text-right">Available Balance</th>
+            </tr>
+          </thead>
+          <tbody>
+            {banks.map((bank) => {
+              const oraclePrice = bank.value.price
+              return (
+                <tr key={bank.key}>
+                  <td className="w-[12.5%]">
+                    <div className="flex items-center">
+                      <div className="mr-2.5 flex flex-shrink-0 items-center">
+                        <Image
+                          alt=""
+                          width="24"
+                          height="24"
+                          src={`/icons/${bank.value.name.toLowerCase()}.svg`}
+                        />
+                      </div>
+                      <p className="font-bold">{bank.value.name}</p>
+                    </div>
+                  </td>
+                  <td className="w-[12.5%]">
+                    <div className="flex flex-col text-right">
+                      <p>${formatDecimal(oraclePrice.toNumber(), 2)}</p>
+                    </div>
+                  </td>
+                  <td className="w-[12.5%]">
+                    <div className="flex flex-col text-right">
+                      <p className="text-th-green">0%</p>
+                    </div>
+                  </td>
+                  <td className="w-[12.5%]">
+                    <div className="flex flex-col text-right">
+                      <p>1000</p>
+                    </div>
+                  </td>
+                  <td className="w-[12.5%]">
+                    <div className="flex justify-end space-x-2 text-right">
+                      <p className="text-th-green">
+                        {formatDecimal(
+                          bank.value.getDepositRate().toNumber(),
+                          2
+                        )}
+                        %
+                      </p>
+                      <span className="text-th-fgd-4">|</span>
+                      <p className="text-th-red">
+                        {formatDecimal(
+                          bank.value.getBorrowRate().toNumber(),
+                          2
+                        )}
+                        %
+                      </p>
+                    </div>
+                  </td>
+                  <td className="w-[12.5%]">
+                    <div className="flex flex-col text-right">
+                      <p>
+                        {formatDecimal(
+                          bank.value.uiDeposits() - bank.value.uiBorrows(),
+                          bank.value.mintDecimals
+                        )}
+                      </p>
+                    </div>
+                  </td>
+                  <td className="w-[12.5%] pt-4 text-right">
+                    <p className="px-2">
+                      {mangoAccount
+                        ? formatDecimal(mangoAccount.getUi(bank.value))
+                        : 0}
+                    </p>
+                    <p className="px-2 text-xs text-th-fgd-4">
+                      {mangoAccount
+                        ? `$${formatDecimal(
+                            mangoAccount.getUi(bank.value) *
+                              oraclePrice.toNumber(),
+                            2
+                          )}`
+                        : '$0'}
+                    </p>
+                  </td>
+                  <td className="w-[12.5%]">
+                    <div className="flex justify-end space-x-2">
+                      <Button>Buy</Button>
+                      <Button secondary>Sell</Button>
+                    </div>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      ) : (
+        <div className="mt-4 space-y-2">
           {banks.map((bank) => {
             const oraclePrice = bank.value.price
             return (
-              <tr key={bank.key}>
-                <td className="w-[12.5%]">
+              <div className="rounded-md border border-th-bkg-4 p-4">
+                <div className="flex items-center justify-between">
                   <div className="flex items-center">
                     <div className="mr-2.5 flex flex-shrink-0 items-center">
                       <Image
                         alt=""
-                        width="24"
-                        height="24"
+                        width="32"
+                        height="32"
                         src={`/icons/${bank.value.name.toLowerCase()}.svg`}
                       />
                     </div>
-                    <p className="font-bold">{bank.value.name}</p>
+                    <div>
+                      <p className="font-bold">{bank.value.name}</p>
+                      <p>
+                        <span className="mr-1 text-th-fgd-4">Available:</span>
+                        {mangoAccount
+                          ? formatDecimal(mangoAccount.getUi(bank.value))
+                          : 0}
+                      </p>
+                    </div>
                   </div>
-                </td>
-                <td className="w-[12.5%]">
-                  <div className="flex flex-col text-right">
-                    <p>${formatDecimal(oraclePrice.toNumber(), 2)}</p>
+                  <div className="flex items-center space-x-3">
+                    <div className="flex space-x-2">
+                      <Button>Buy</Button>
+                      <Button secondary>Sell</Button>
+                    </div>
+                    <IconButton
+                      onClick={() => handleShowTokenDetails(bank.value.name)}
+                    >
+                      <ChevronDownIcon
+                        className={`${
+                          showTokenDetails === bank.value.name
+                            ? 'rotate-180 transform'
+                            : 'rotate-360 transform'
+                        } default-transition h-5 w-5 flex-shrink-0 text-th-fgd-1`}
+                      />
+                    </IconButton>
                   </div>
-                </td>
-                <td className="w-[12.5%]">
-                  <div className="flex flex-col text-right">
-                    <p className="text-th-green">0%</p>
+                </div>
+                <Transition
+                  appear={true}
+                  show={showTokenDetails === bank.value.name}
+                  as={Fragment}
+                  enter="transition-all ease-in duration-200"
+                  enterFrom="opacity-0"
+                  enterTo="opacity-100"
+                  leave="transition ease-out"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
+                >
+                  <div className="mt-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4">
+                    <div className="col-span-1">
+                      <p className="text-xs text-th-fgd-3">{t('price')}</p>
+                      <p className="font-bold">
+                        ${formatDecimal(oraclePrice.toNumber(), 2)}
+                      </p>
+                    </div>
+                    <div className="col-span-1">
+                      <p className="text-xs text-th-fgd-3">
+                        {t('rolling-change')}
+                      </p>
+                      <p className="font-bold text-th-green">0%</p>
+                    </div>
+                    <div className="col-span-1">
+                      <p className="text-xs text-th-fgd-3">
+                        {t('daily-volume')}
+                      </p>
+                      <p className="font-bold">$1000</p>
+                    </div>
+                    <div className="col-span-1">
+                      <p className="text-xs text-th-fgd-3">Rates (APR)</p>
+                      <p className="space-x-2 font-bold">
+                        <span className="text-th-green">
+                          {formatDecimal(
+                            bank.value.getDepositRate().toNumber(),
+                            2
+                          )}
+                          %
+                        </span>
+                        <span className="font-normal text-th-fgd-4">|</span>
+                        <span className="text-th-red">
+                          {formatDecimal(
+                            bank.value.getBorrowRate().toNumber(),
+                            2
+                          )}
+                          %
+                        </span>
+                      </p>
+                    </div>
+                    <div className="col-span-1">
+                      <p className="text-xs text-th-fgd-3">{t('liquidity')}</p>
+                      <p className="font-bold">
+                        {formatDecimal(
+                          bank.value.uiDeposits() - bank.value.uiBorrows(),
+                          bank.value.mintDecimals
+                        )}
+                      </p>
+                    </div>
                   </div>
-                </td>
-                <td className="w-[12.5%]">
-                  <div className="flex flex-col text-right">
-                    <p>1000</p>
-                  </div>
-                </td>
-                <td className="w-[12.5%]">
-                  <div className="flex justify-end space-x-2 text-right">
-                    <p className="text-th-green">
-                      {formatDecimal(bank.value.getDepositRate().toNumber(), 2)}
-                      %
-                    </p>
-                    <span className="text-th-fgd-4">|</span>
-                    <p className="text-th-red">
-                      {formatDecimal(bank.value.getBorrowRate().toNumber(), 2)}%
-                    </p>
-                  </div>
-                </td>
-                <td className="w-[12.5%]">
-                  <div className="flex flex-col text-right">
-                    <p>
-                      {formatDecimal(
-                        bank.value.uiDeposits() - bank.value.uiBorrows(),
-                        bank.value.mintDecimals
-                      )}
-                    </p>
-                  </div>
-                </td>
-                <td className="w-[12.5%] pt-4 text-right">
-                  <p className="px-2">
-                    {mangoAccount
-                      ? formatDecimal(mangoAccount.getUi(bank.value))
-                      : '-'}
-                  </p>
-                  <p className="px-2 text-xs text-th-fgd-4">
-                    {mangoAccount
-                      ? `$${formatDecimal(
-                          mangoAccount.getUi(bank.value) *
-                            oraclePrice.toNumber(),
-                          2
-                        )}`
-                      : '-'}
-                  </p>
-                </td>
-                <td className="w-[12.5%]">
-                  <div className="flex justify-end space-x-2">
-                    <Button>Buy</Button>
-                    <Button secondary>Sell</Button>
-                  </div>
-                </td>
-              </tr>
+                </Transition>
+              </div>
             )
           })}
-        </tbody>
-      </table>
+        </div>
+      )}
     </ContentBox>
   )
 }
diff --git a/components/shared/Layout.tsx b/components/shared/Layout.tsx
index b4ea5f5b..705c4e09 100644
--- a/components/shared/Layout.tsx
+++ b/components/shared/Layout.tsx
@@ -93,7 +93,9 @@ const Layout = ({ children }: { children: ReactNode }) => {
               {connected ? <WalletDisconnectButton /> : <WalletMultiButton />}
             </div>
           </div>
-          <div className="min-h-screen p-8">{children}</div>
+          <div className={`min-h-screen p-8 ${isMobile ? 'pb-20' : ''}`}>
+            {children}
+          </div>
         </div>
       </div>
     </div>