Add toggle to show/hide repaid assets

centrifuge · Nov 18, 2024 · b876616 · b876616
1 parent 5b8cc59
commit b876616
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git 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
@@ -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;