From cbc95e24b601be9af490c297ac831456d50a72a3 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Tue, 19 Nov 2024 13:25:49 +0100
Subject: [PATCH] Assets feedback (#2541)

* Change market price decimal from 2 to 4

* Add toggle to show/hide repaid assets

* Fix bug on wallet button
---
 centrifuge-app/src/components/LoanList.tsx    | 18 ++++++++++++---
 .../components/WalletMenu/ConnectButton.tsx   |  8 +++++--
 .../src/components/WalletMenu/WalletMenu.tsx  |  1 +
 fabric/src/components/Button/WalletButton.tsx |  6 ++---
 fabric/src/components/Checkbox/index.tsx      | 23 +++++++++++++++++++
 5 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx
index 75670e5992..711103b6d4 100644
--- a/centrifuge-app/src/components/LoanList.tsx
+++ b/centrifuge-app/src/components/LoanList.tsx
@@ -4,6 +4,7 @@ import {
   AnchorButton,
   Box,
   Button,
+  Checkbox,
   IconDownload,
   Pagination,
   PaginationContainer,
@@ -63,6 +64,7 @@ export function LoanList({ loans, snapshots }: Props) {
   const templateIds = poolMetadata?.loanTemplates?.map((s) => s.id) ?? []
   const templateId = templateIds.at(-1)
   const { data: templateMetadata } = useMetadata<LoanTemplate>(templateId)
+  const [showRepaid, setShowRepaid] = React.useState(false)
 
   const additionalColumns: Column[] =
     templateMetadata?.keyAttributes?.map((key, index) => {
@@ -193,7 +195,7 @@ export function LoanList({ loans, snapshots }: Props) {
           {
             align: 'left',
             header: <SortableTableHeader label="Market price" />,
-            cell: (l: Row) => formatBalance(l.marketPrice ?? 0, pool.currency, 2, 0),
+            cell: (l: Row) => formatBalance(l.marketPrice ?? 0, pool.currency, 4, 0),
             sortKey: 'marketPrice',
           },
         ]),
@@ -268,7 +270,17 @@ export function LoanList({ loans, snapshots }: Props) {
     <>
       <Box pt={1} pb={2} paddingX={1} display="flex" justifyContent="space-between" alignItems="center">
         <Text variant="heading4">{rows.filter((row) => !row.marketValue?.isZero()).length} ongoing assets</Text>
-        <Box display="flex">
+        <Box display="flex" alignItems="center">
+          <Box mr={2}>
+            <Checkbox
+              label={
+                <Text color="textSecondary" variant="body2">
+                  Show repaid assets
+                </Text>
+              }
+              onChange={(e) => setShowRepaid(!showRepaid)}
+            />
+          </Box>
           <Button
             variant="inverted"
             style={{ marginRight: 12 }}
@@ -295,7 +307,7 @@ export function LoanList({ loans, snapshots }: Props) {
           <LoadBoundary>
             <Box overflow="auto">
               <DataTable
-                data={rows}
+                data={showRepaid ? rows : rows.filter((row) => !row?.marketValue?.isZero())}
                 columns={columns}
                 onRowClicked={(row) => `${basePath}/${poolId}/assets/${row.id}`}
                 pageSize={20}
diff --git a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx b/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx
index 7cc939d4a8..4cb6592e25 100644
--- a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx
+++ b/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx
@@ -1,8 +1,12 @@
-import { WalletButton } from '@centrifuge/fabric'
+import { WalletButton, WalletButtonProps } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useWallet } from '../WalletProvider'
 
-export function ConnectButton({ label = 'Connect wallet', ...rest }) {
+type Props = WalletButtonProps & {
+  label?: string
+}
+
+export function ConnectButton({ label = 'Connect wallet', ...rest }: Props) {
   const { showNetworks, pendingConnect } = useWallet()
 
   return (
diff --git a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx
index 84089d5914..e77da9526b 100644
--- a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx
+++ b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx
@@ -93,6 +93,7 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
                 ? substrate.selectedAccount?.name
                 : undefined
             }
+            displayAddress={formattedAddress}
             address={address}
             balance={balance ? formatBalanceAbbreviated(balance, symbol) : undefined}
             icon={
diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
index bc6a7fe3e7..7aa16974de 100644
--- a/fabric/src/components/Button/WalletButton.tsx
+++ b/fabric/src/components/Button/WalletButton.tsx
@@ -69,7 +69,7 @@ export function WalletButton({
         loadingMessage={loadingMessage}
         active={active}
       >
-        {alias ? (
+        {alias && address ? (
           <Box position="relative" flex="1 1 auto">
             <Shelf position="absolute" top="0" bottom="0" left="0" width="100%" m="auto" height="30px">
               <Text
@@ -92,10 +92,10 @@ export function WalletButton({
             fontWeight={500}
             style={{ margin: address ? 0 : 'auto' }}
           >
-            {alias || connectLabel}
+            {displayAddress ? truncate(displayAddress) : connectLabel}
           </Text>
         )}
-        {alias && balance && (
+        {address && balance && (
           <Text variant="body3" color="textInverted" style={{ marginLeft: 'auto' }}>
             {balance}
           </Text>
diff --git a/fabric/src/components/Checkbox/index.tsx b/fabric/src/components/Checkbox/index.tsx
index ea8368deb0..1de1e3c69c 100644
--- a/fabric/src/components/Checkbox/index.tsx
+++ b/fabric/src/components/Checkbox/index.tsx
@@ -106,6 +106,29 @@ const StyledCheckbox = styled.input`
   align-self: center;
   margin: -20px 0;
   cursor: pointer;
+  appearance: none;
+  border: 2px solid ${({ theme }) => theme.colors.borderPrimary};
+  border-radius: 4px;
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary};
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.textGold};
+    border-color: ${({ theme }) => theme.colors.textGold};
+  }
+
+  &:checked::after {
+    content: '';
+    display: block;
+    width: 6px;
+    height: 10px;
+    border: solid ${({ theme }) => theme.colors.backgroundPrimary};
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+    position: absolute;
+    top: 3px;
+    left: 6px;
+  }
 
   &:focus-visible + span {
     display: block;