From c56fc05216a250d1515d50d1e1d10de670e7d26f Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Sun, 19 Mar 2023 21:28:13 +1100
Subject: [PATCH] swap history mobile display

---
 components/TokenList.tsx             |   6 +-
 components/shared/BalancesTable.tsx  |   6 +-
 components/stats/TokenStats.tsx      |   4 +-
 components/swap/SwapHistoryTable.tsx | 297 +++++++++++++--------------
 4 files changed, 148 insertions(+), 165 deletions(-)

diff --git a/components/TokenList.tsx b/components/TokenList.tsx
index 530c9aed..c180c402 100644
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@@ -269,7 +269,7 @@ const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => {
       {({ open }) => (
         <>
           <Disclosure.Button
-            className={`w-full border-t border-th-bkg-3 px-6 py-4 text-left first:border-t-0 focus:outline-none`}
+            className={`w-full border-t border-th-bkg-3 p-4 text-left first:border-t-0 focus:outline-none`}
           >
             <div className="flex items-center justify-between">
               <div className="flex items-start">
@@ -304,7 +304,7 @@ const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => {
                 <ChevronDownIcon
                   className={`${
                     open ? 'rotate-180' : 'rotate-360'
-                  } h-6 w-6 flex-shrink-0 text-th-fgd-1`}
+                  } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
                 />
               </div>
             </div>
@@ -315,7 +315,7 @@ const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => {
             enterTo="opacity-100"
           >
             <Disclosure.Panel>
-              <div className="mx-6 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+              <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
                 <div className="col-span-1">
                   <p className="text-xs text-th-fgd-3">
                     {t('trade:in-orders')}
diff --git a/components/shared/BalancesTable.tsx b/components/shared/BalancesTable.tsx
index 9ed1f003..ea429edc 100644
--- a/components/shared/BalancesTable.tsx
+++ b/components/shared/BalancesTable.tsx
@@ -137,7 +137,7 @@ const BalancesTable = () => {
               {({ open }) => (
                 <>
                   <Disclosure.Button
-                    className={`w-full border-t border-th-bkg-3 px-6 py-4 text-left focus:outline-none ${
+                    className={`w-full border-t border-th-bkg-3 p-4 text-left focus:outline-none ${
                       i === 0 ? 'border-t-0' : ''
                     }`}
                   >
@@ -173,7 +173,7 @@ const BalancesTable = () => {
                       <ChevronDownIcon
                         className={`${
                           open ? 'rotate-180' : 'rotate-360'
-                        } h-6 w-6 flex-shrink-0 text-th-fgd-1`}
+                        } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
                       />
                     </div>
                   </Disclosure.Button>
@@ -183,7 +183,7 @@ const BalancesTable = () => {
                     enterTo="opacity-100"
                   >
                     <Disclosure.Panel>
-                      <div className="mx-6 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                      <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
                         <div className="col-span-1">
                           <p className="text-xs text-th-fgd-3">
                             {t('trade:in-orders')}
diff --git a/components/stats/TokenStats.tsx b/components/stats/TokenStats.tsx
index e85fd958..d7604ede 100644
--- a/components/stats/TokenStats.tsx
+++ b/components/stats/TokenStats.tsx
@@ -263,7 +263,7 @@ const TokenStats = () => {
                 {({ open }) => (
                   <>
                     <Disclosure.Button
-                      className={`w-full border-t border-th-bkg-3 px-6 py-4 text-left focus:outline-none ${
+                      className={`w-full border-t border-th-bkg-3 p-4 text-left focus:outline-none ${
                         i === 0 ? 'border-t-0' : ''
                       }`}
                     >
@@ -296,7 +296,7 @@ const TokenStats = () => {
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-6 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
                           <div className="col-span-1">
                             <p className="mb-0.5 text-xs">
                               {t('total-deposits')}
diff --git a/components/swap/SwapHistoryTable.tsx b/components/swap/SwapHistoryTable.tsx
index e600df46..91c1b65d 100644
--- a/components/swap/SwapHistoryTable.tsx
+++ b/components/swap/SwapHistoryTable.tsx
@@ -1,16 +1,12 @@
-import { Fragment, useCallback, useEffect, useState } from 'react'
-import {
-  ArrowRightIcon,
-  ChevronDownIcon,
-  NoSymbolIcon,
-} from '@heroicons/react/20/solid'
+import { useCallback, useEffect, useState } from 'react'
+import { ChevronDownIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
 import dayjs from 'dayjs'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
 import { breakpoints } from '../../utils/theme'
 import { useViewport } from '../../hooks/useViewport'
-import { IconButton, LinkButton } from '../shared/Button'
-import { Transition } from '@headlessui/react'
+import { LinkButton } from '../shared/Button'
+import { Disclosure, Transition } from '@headlessui/react'
 import SheenLoader from '../shared/SheenLoader'
 import mangoStore from '@store/mangoStore'
 import { countLeadingZeros, floorToDecimal } from '../../utils/numbers'
@@ -31,7 +27,6 @@ const SwapHistoryTable = () => {
   const swapHistory = mangoStore((s) => s.mangoAccount.swapHistory.data)
   const loadSwapHistory = mangoStore((s) => s.mangoAccount.swapHistory.loading)
   const { mangoTokens } = useJupiterMints()
-  const [showSwapDetails, setSwapDetails] = useState('')
   const [offset, setOffset] = useState(0)
   const actions = mangoStore.getState().actions
   const { mangoAccountAddress } = useMangoAccount()
@@ -64,10 +59,6 @@ const SwapHistoryTable = () => {
     )
   }, [actions, offset, mangoAccountAddress])
 
-  const handleShowSwapDetails = (signature: string) => {
-    showSwapDetails ? setSwapDetails('') : setSwapDetails(signature)
-  }
-
   return mangoAccountAddress && (swapHistory.length || loadSwapHistory) ? (
     <>
       {showTableView ? (
@@ -256,7 +247,7 @@ const SwapHistoryTable = () => {
         </Table>
       ) : (
         <div>
-          {swapHistory.map((h) => {
+          {swapHistory.map((h, i) => {
             const {
               block_datetime,
               signature,
@@ -282,158 +273,150 @@ const SwapHistoryTable = () => {
                 ? loan_origination_fee.toFixed(4)
                 : 0
 
-            let baseLogoURI
-            let quoteLogoURI
-
             const inSymbol = formatTokenSymbol(swap_in_symbol)
             const outSymbol = formatTokenSymbol(swap_out_symbol)
 
-            if (mangoTokens.length) {
-              baseLogoURI = mangoTokens.find(
-                (t) => t.symbol.toUpperCase() === inSymbol.toUpperCase()
-              )?.logoURI
-              quoteLogoURI = mangoTokens.find(
-                (t) => t.symbol.toUpperCase() === outSymbol.toUpperCase()
-              )?.logoURI
-            }
-
             const inDecimals = countLeadingZeros(swap_in_amount) + 2
             const outDecimals = countLeadingZeros(swap_out_amount) + 2
 
             return (
-              <div key={signature} className="border-b border-th-bkg-3 p-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center">
-                      <div className="mr-2 flex flex-shrink-0 items-center">
-                        <Image
-                          alt=""
-                          width="24"
-                          height="24"
-                          src={baseLogoURI || ''}
-                        />
-                      </div>
-                      <div>
-                        <p className="whitespace-nowrap font-mono text-th-fgd-1">
-                          <FormatNumericValue
-                            value={swap_in_amount}
-                            decimals={inDecimals}
-                          />{' '}
-                          <span className="font-body text-th-fgd-3">
-                            {inSymbol}
-                          </span>
-                        </p>
-                        <p className="font-mono text-xs text-th-fgd-3">
-                          <span className="font-body text-th-fgd-4">
-                            {t('price')}:
-                          </span>{' '}
-                          <FormatNumericValue value={swap_in_price_usd} isUsd />
-                        </p>
-                      </div>
-                    </div>
-                    <ArrowRightIcon className="mx-4 h-4 w-4 flex-shrink-0 text-th-fgd-4" />
-                    <div className="flex items-center">
-                      <div className="mr-2 flex flex-shrink-0 items-center">
-                        <Image
-                          alt=""
-                          width="24"
-                          height="24"
-                          src={quoteLogoURI || ''}
-                        />
-                      </div>
-                      <div>
-                        <p className="whitespace-nowrap font-mono text-th-fgd-1">
-                          <FormatNumericValue
-                            value={swap_out_amount}
-                            decimals={outDecimals}
-                          />{' '}
-                          <span className="font-body text-th-fgd-3">
-                            {outSymbol}
-                          </span>
-                        </p>
-                        <p className="font-mono text-xs text-th-fgd-3">
-                          <span className="font-body text-th-fgd-4">
-                            {t('price')}:
-                          </span>{' '}
-                          <FormatNumericValue
-                            value={swap_out_price_usd}
-                            isUsd
+              <Disclosure key={signature}>
+                {({ open }) => (
+                  <>
+                    <Disclosure.Button
+                      className={`w-full border-t border-th-bkg-3 p-4 text-left focus:outline-none ${
+                        i === 0 ? 'border-t-0' : ''
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="whitespace-nowrap text-sm text-th-fgd-1">
+                            {dayjs(block_datetime).format('ddd D MMM')}
+                          </p>
+                          <p className="text-xs text-th-fgd-3">
+                            {dayjs(block_datetime).format('h:mma')}
+                          </p>
+                        </div>
+                        <div className="flex items-center justify-end pl-4">
+                          <div className="mr-3 flex items-center">
+                            <p className="text-right font-mono text-th-fgd-1">
+                              <FormatNumericValue
+                                value={swap_in_amount}
+                                decimals={inDecimals}
+                              />{' '}
+                              <span className="font-body text-th-fgd-2">
+                                {inSymbol}
+                              </span>{' '}
+                              <span className="font-body text-th-fgd-4">
+                                to
+                              </span>{' '}
+                              <FormatNumericValue
+                                value={swap_out_amount}
+                                decimals={outDecimals}
+                              />{' '}
+                              <span className="font-body text-th-fgd-2">
+                                {outSymbol}
+                              </span>
+                            </p>
+                          </div>
+                          <ChevronDownIcon
+                            className={`${
+                              open ? 'rotate-180' : 'rotate-360'
+                            } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
                           />
-                        </p>
+                        </div>
                       </div>
-                    </div>
-                  </div>
-                  <IconButton
-                    onClick={() => handleShowSwapDetails(signature)}
-                    size="medium"
-                  >
-                    <ChevronDownIcon
-                      className={`${
-                        showSwapDetails === signature
-                          ? 'rotate-180'
-                          : 'rotate-360'
-                      } h-6 w-6 flex-shrink-0 text-th-fgd-1`}
-                    />
-                  </IconButton>
-                </div>
-                <Transition
-                  appear={true}
-                  show={showSwapDetails === signature}
-                  as={Fragment}
-                  enter="transition 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('date')}</p>
-                      <p className="text-th-fgd-1">
-                        {dayjs(block_datetime).format('ddd D MMM')}
-                      </p>
-                      <p className="text-xs text-th-fgd-3">
-                        {dayjs(block_datetime).format('h:mma')}
-                      </p>
-                    </div>
-                    <div className="col-span-1">
-                      <p className="text-xs text-th-fgd-3">{t('borrow')}</p>
-                      <p className="font-mono text-th-fgd-1">
-                        {borrowAmount}{' '}
-                        <span className="font-body text-th-fgd-3">
-                          {inSymbol}
-                        </span>
-                      </p>
-                    </div>
-                    <div className="col-span-1">
-                      <p className="text-xs text-th-fgd-3">{t('borrow-fee')}</p>
-                      <p className="font-mono text-th-fgd-1">${borrowFee}</p>
-                    </div>
-                    <div className="col-span-1">
-                      <p className="mb-0.5 text-xs text-th-fgd-3">
-                        {t('transaction')}
-                      </p>
-                      <a
-                        className="default-transition flex items-center text-th-fgd-1 hover:text-th-fgd-3"
-                        href={`${preferredExplorer.url}${signature}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <Image
-                          alt=""
-                          width="20"
-                          height="20"
-                          src={`/explorer-logos/${preferredExplorer.name}.png`}
-                        />
-                        <span className="ml-1.5">{`View on ${t(
-                          `settings:${preferredExplorer.name}`
-                        )}`}</span>
-                      </a>
-                    </div>
-                  </div>
-                </Transition>
-              </div>
+                    </Disclosure.Button>
+                    <Transition
+                      enter="transition ease-in duration-200"
+                      enterFrom="opacity-0"
+                      enterTo="opacity-100"
+                    >
+                      <Disclosure.Panel>
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                          <div className="col-span-1">
+                            <p className="text-xs text-th-fgd-3">
+                              {t('value')}
+                            </p>
+                            <p className="font-mono text-th-fgd-1">
+                              <FormatNumericValue
+                                value={swap_out_price_usd * swap_out_amount}
+                                isUsd
+                              />
+                            </p>
+                          </div>
+                          <div className="col-span-1">
+                            <p className="text-xs text-th-fgd-3">
+                              {`${swap_in_symbol} ${t('price')}`}
+                            </p>
+                            <p className="font-mono text-th-fgd-1">
+                              <FormatNumericValue
+                                value={swap_in_price_usd}
+                                isUsd
+                              />
+                            </p>
+                          </div>
+                          <div className="col-span-1">
+                            <p className="text-xs text-th-fgd-3">
+                              {`${swap_out_symbol} ${t('price')}`}
+                            </p>
+                            <p className="font-mono text-th-fgd-1">
+                              <FormatNumericValue
+                                value={swap_out_price_usd}
+                                isUsd
+                              />
+                            </p>
+                          </div>
+                          {borrowAmount ? (
+                            <>
+                              <div className="col-span-1">
+                                <p className="text-xs text-th-fgd-3">
+                                  {t('borrow')}
+                                </p>
+                                <p className="font-mono text-th-fgd-1">
+                                  {borrowAmount}{' '}
+                                  <span className="font-body text-th-fgd-3">
+                                    {inSymbol}
+                                  </span>
+                                </p>
+                              </div>
+                              <div className="col-span-1">
+                                <p className="text-xs text-th-fgd-3">
+                                  {t('borrow-fee')}
+                                </p>
+                                <p className="font-mono text-th-fgd-1">
+                                  ${borrowFee}
+                                </p>
+                              </div>
+                            </>
+                          ) : null}
+                          <div className="col-span-1">
+                            <p className="mb-0.5 text-xs text-th-fgd-3">
+                              {t('transaction')}
+                            </p>
+                            <a
+                              className="default-transition flex items-center text-th-fgd-1 hover:text-th-fgd-3"
+                              href={`${preferredExplorer.url}${signature}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              <Image
+                                alt=""
+                                width="16"
+                                height="16"
+                                src={`/explorer-logos/${preferredExplorer.name}.png`}
+                              />
+                              <span className="ml-1.5">
+                                {t(`settings:${preferredExplorer.name}`)}
+                              </span>
+                            </a>
+                          </div>
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </>
+                )}
+              </Disclosure>
             )
           })}
         </div>