SOV-3003: Update mobile lending (#654)

* SOV-3003: Update mobile lending * Create nine-bobcats-end.md * feat: update table props --------- Co-authored-by: Peiman <[email protected]>
DistributedCollective · Nov 3, 2023 · 45f981a · 45f981a
1 parent 60ce693
commit 45f981a
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 31 deletions.
diff --git a/.changeset/nine-bobcats-end.md b/.changeset/nine-bobcats-end.md
@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@sovryn/ui": patch
+---
+
+SOV-3003: Update mobile lending
diff --git a/...rontend/src/app/2_molecules/FixedInterestPoolRowSubTitle/FixedInterestPoolRowSubTitle.tsx b/...rontend/src/app/2_molecules/FixedInterestPoolRowSubTitle/FixedInterestPoolRowSubTitle.tsx
@@ -0,0 +1,59 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { HelperButton } from '@sovryn/ui';
+
+import { LendFrameBalance } from '../../5_pages/LendPage/components/LendFrame/components/LendFrameBalance/LendFrameBalance';
+import { useGetAssetBalanceOf } from '../../5_pages/LendPage/components/LendFrame/components/LendFrameBalance/hooks/useGetAssetBalanceOf';
+import { LendFrameInterestEarned } from '../../5_pages/LendPage/components/LendFrame/components/LendFrameInterestEarned/LendFrameInterestEarned';
+import { NextSupplyInterestRate } from '../../5_pages/LendPage/components/NextSupplyInterestRate/NextSupplyInterestRate';
+import { useAccount } from '../../../hooks/useAccount';
+import { translations } from '../../../locales/i18n';
+import { LendingPool } from '../../../utils/LendingPool';
+
+type FixedInterestPoolRowSubTitleProps = {
+  pool: LendingPool;
+};
+
+export const FixedInterestPoolRowSubTitle: FC<
+  FixedInterestPoolRowSubTitleProps
+> = ({ pool }) => {
+  const asset = useMemo(() => pool.getAsset(), [pool]);
+  const { account } = useAccount();
+  const { assetBalance } = useGetAssetBalanceOf(asset);
+
+  if (!account || Number(assetBalance) === 0) {
+    return null;
+  }
+
+  return (
+    <div className="text-gray-30 text-xs font-medium bg-gray-70 rounded-b rounded-t-none px-4 pb-2 -mt-2">
+      <div className="flex justify-between items-center w-full mb-2">
+        <span className="flex items-center gap-1">
+          {t(translations.lendPage.table.lendApr)}{' '}
+          <HelperButton content={t(translations.lendPage.table.lendAprInfo)} />
+        </span>
+        <NextSupplyInterestRate
+          asset={pool.getAsset()}
+          className="text-xs pr-0"
+        />
+      </div>
+
+      <div className="flex justify-between items-center w-full mb-2">
+        <span>{t(translations.lendPage.table.balance)}</span>
+        <LendFrameBalance pool={pool} />
+      </div>
+
+      <div className="flex justify-between items-center w-full">
+        <span className="flex items-center gap-1">
+          {t(translations.lendPage.table.interestEarned)}{' '}
+          <HelperButton
+            content={t(translations.lendPage.table.interestEarnedInfo)}
+          />
+        </span>
+        <LendFrameInterestEarned pool={pool} />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/frontend/src/app/5_pages/LendPage/components/LendFrame/LendFrame.tsx b/apps/frontend/src/app/5_pages/LendPage/components/LendFrame/LendFrame.tsx
@@ -7,7 +7,7 @@ import { Paragraph, Table } from '@sovryn/ui';
 import { translations } from '../../../../../locales/i18n';
 import { LendingPoolDictionary } from '../../../../../utils/LendingPoolDictionary';
 import { COLUMNS_CONFIG } from './LendFrame.constants';
-import { generateRowTitle } from './LendFrame.utils';
+import { generateRowSubTitle, generateRowTitle } from './LendFrame.utils';
 import { LendFrameDetails } from './components/LendFrameDetails/LendFrameDetails';
 
 export const LendFrame: FC = () => {
@@ -21,7 +21,7 @@ export const LendFrame: FC = () => {
         </Paragraph>
       </div>
 
-      <div className="bg-gray-80 py-4 px-4 rounded">
+      <div className="lg:bg-gray-80 lg:p-4 rounded">
         <Table
           columns={COLUMNS_CONFIG}
           rows={lendPools}
@@ -33,6 +33,7 @@ export const LendFrame: FC = () => {
           expandedContent={pool => <LendFrameDetails pool={pool} />}
           expandedClassNames="border border-gray-70 border-t-0"
           preventExpandOnClickClass="prevent-row-click"
+          subtitleRenderer={generateRowSubTitle}
         />
       </div>
     </div>

diff --git a/apps/frontend/src/app/5_pages/LendPage/components/LendFrame/LendFrame.utils.tsx b/apps/frontend/src/app/5_pages/LendPage/components/LendFrame/LendFrame.utils.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
 
+import { FixedInterestPoolRowSubTitle } from '../../../../2_molecules/FixedInterestPoolRowSubTitle/FixedInterestPoolRowSubTitle';
 import { FixedInterestPoolRowTitle } from '../../../../2_molecules/FixedInterestPoolRowTitle/FixedInterestPoolRowTitle';
 import { LendingPool } from '../../../../../utils/LendingPool';
 
 export const generateRowTitle = (pool: LendingPool) => (
   <FixedInterestPoolRowTitle pool={pool} isBorrow={false} />
 );
+
+export const generateRowSubTitle = (pool: LendingPool) => (
+  <FixedInterestPoolRowSubTitle pool={pool} />
+);
diff --git a/...end/src/app/5_pages/LendPage/components/NextSupplyInterestRate/NextSupplyInterestRate.tsx b/...end/src/app/5_pages/LendPage/components/NextSupplyInterestRate/NextSupplyInterestRate.tsx
@@ -1,21 +1,30 @@
 import React, { FC } from 'react';
 
+import classNames from 'classnames';
+
 import { SupportedTokens } from '@sovryn/contracts';
 
 import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
 import { useGetNextSupplyInterestRate } from '../../hooks/useGetNextSupplyInterestRate';
 
 type NextSupplyInterestRateProps = {
   asset: SupportedTokens;
+  className?: string;
 };
 
 export const NextSupplyInterestRate: FC<NextSupplyInterestRateProps> = ({
   asset,
+  className,
 }) => {
   const { interestRate } = useGetNextSupplyInterestRate(asset);
 
   return (
-    <div className="lg:text-base text-sm pr-1 lg:font-semibold font-medium prevent-row-click">
+    <div
+      className={classNames(
+        className,
+        'lg:text-base text-sm pr-1 lg:font-semibold font-medium prevent-row-click',
+      )}
+    >
       <AmountRenderer
         value={interestRate}
         suffix={`%`}

diff --git a/packages/ui/src/2_molecules/Table/Table.types.ts b/packages/ui/src/2_molecules/Table/Table.types.ts
@@ -35,6 +35,7 @@ export type TableProps<RowType extends RowObject> = {
   preventExpandOnClickClass?: string;
   mobileRenderer?: (row: RowType) => ReactNode;
   hideHeader?: boolean;
+  subtitleRenderer?: (row: RowType) => ReactNode;
 };
 
 export enum OrderDirection {

diff --git a/packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx b/packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx
@@ -19,6 +19,7 @@ export const TableMobile = <RowType extends RowObject>({
   className,
   expandedContent,
   mobileRenderer,
+  subtitleRenderer,
 }: TableProps<RowType>) => (
   <div className={classNames(styles.wrapper, className)}>
     {rows &&
@@ -33,6 +34,7 @@ export const TableMobile = <RowType extends RowObject>({
           dataAttribute={dataAttribute}
           expandedContent={expandedContent}
           renderer={mobileRenderer}
+          subtitleRenderer={subtitleRenderer}
         />
       ))}
 

diff --git a/packages/ui/src/2_molecules/Table/components/TableMobile/components/TableMobileRow.tsx b/packages/ui/src/2_molecules/Table/components/TableMobile/components/TableMobileRow.tsx
@@ -14,6 +14,7 @@ type TableMobileRowProps<RowType extends RowObject> = {
   title: ReactNode;
   expandedContent?: (row: RowType) => ReactNode;
   renderer?: (row: RowType) => ReactNode;
+  subtitleRenderer?: (row: RowType) => ReactNode;
 };
 
 export const TableMobileRow = <RowType extends RowObject>({
@@ -24,6 +25,7 @@ export const TableMobileRow = <RowType extends RowObject>({
   title,
   expandedContent,
   renderer,
+  subtitleRenderer,
 }: TableMobileRowProps<RowType>) => {
   const [open, setOpen] = useState(false);
 
@@ -32,33 +34,36 @@ export const TableMobileRow = <RowType extends RowObject>({
   }, [onRowClick, row]);
 
   return (
-    <Accordion
-      open={open}
-      onClick={setOpen}
-      label={title}
-      labelClassName={styles.accordion}
-      dataAttribute={dataAttribute}
-      style={AccordionStyle.secondary}
-    >
-      <div onClick={onClick} className={styles.row}>
-        {!renderer &&
-          columns.map(column => (
-            <SimpleTableRow
-              key={column.id.toString()}
-              label={column.title}
-              labelClassName={column.labelClassName}
-              value={
-                column.cellRenderer
-                  ? column.cellRenderer(row, column.id)
-                  : row[column.id]
-              }
-              valueClassName={column.valueClassName}
-              className={column.className}
-            />
-          ))}
-        {expandedContent && <div>{expandedContent(row)}</div>}
-        {renderer && renderer(row)}
-      </div>
-    </Accordion>
+    <>
+      <Accordion
+        open={open}
+        onClick={setOpen}
+        label={title}
+        labelClassName={styles.accordion}
+        dataAttribute={dataAttribute}
+        style={AccordionStyle.secondary}
+      >
+        <div onClick={onClick} className={styles.row}>
+          {!renderer &&
+            columns.map(column => (
+              <SimpleTableRow
+                key={column.id.toString()}
+                label={column.title}
+                labelClassName={column.labelClassName}
+                value={
+                  column.cellRenderer
+                    ? column.cellRenderer(row, column.id)
+                    : row[column.id]
+                }
+                valueClassName={column.valueClassName}
+                className={column.className}
+              />
+            ))}
+          {expandedContent && <div>{expandedContent(row)}</div>}
+          {renderer && renderer(row)}
+        </div>
+      </Accordion>
+      {!open && subtitleRenderer && subtitleRenderer(row)}
+    </>
   );
 };