From 5b8cc59b8241505ae10dc7773c3f773b9e78f063 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Fri, 15 Nov 2024 15:10:22 +0100
Subject: [PATCH 1/3] Change market price decimal from 2 to 4

---
 centrifuge-app/src/components/LoanList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx
index 75670e5992..03b065e93b 100644
--- a/centrifuge-app/src/components/LoanList.tsx
+++ b/centrifuge-app/src/components/LoanList.tsx
@@ -193,7 +193,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',
           },
         ]),

From b8766163473b80eb82cf2cf8d152d53a40d57d14 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 18 Nov 2024 13:05:32 +0100
Subject: [PATCH 2/3] Add toggle to show/hide repaid assets

---
 centrifuge-app/src/components/LoanList.tsx | 16 +++++++++++++--
 fabric/src/components/Checkbox/index.tsx   | 23 ++++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx
index 03b065e93b..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) => {
@@ -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/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;

From 5806cf95e5612f362c2047601903dd39f3f592ac Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Tue, 19 Nov 2024 11:42:27 +0100
Subject: [PATCH 3/3] Fix bug on wallet button

---
 .../src/components/WalletMenu/ConnectButton.tsx           | 8 ++++++--
 centrifuge-react/src/components/WalletMenu/WalletMenu.tsx | 1 +
 fabric/src/components/Button/WalletButton.tsx             | 6 +++---
 3 files changed, 10 insertions(+), 5 deletions(-)

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>