Skip to content

Commit e5f30ac

Browse files
grinrygrinry
committed
chore: lending dialog
1 parent 32c9e0d commit e5f30ac

File tree

16 files changed

+492
-100
lines changed

16 files changed

+492
-100
lines changed

‎apps/indexer/src/app/routes/_chain/routes.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Decimal } from '@sovryn/slayer-shared';
1+
import { areAddressesEqual, Decimal } from '@sovryn/slayer-shared';
22
import { and, asc, eq, gte, inArray } from 'drizzle-orm';
33
import { FastifyInstance, FastifyRequest } from 'fastify';
44
import { ZodTypeProvider } from 'fastify-type-provider-zod';
@@ -11,7 +11,6 @@ import {
1111
selectPoolById,
1212
} from '../../../libs/loaders/money-market';
1313
import { paginationResponse, paginationSchema } from '../../../libs/pagination';
14-
import { areAddressesEqual } from '../../../libs/utils/helpers';
1514

1615
interface ReserveDataHumanized {
1716
originalId: number;

‎apps/web-app/src/components/FormComponents.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Textarea as ShadcnTextarea } from '@/components/ui/textarea';
1111
import { Decimal } from '@sovryn/slayer-shared';
1212
import { Loader2Icon } from 'lucide-react';
1313
import { useState } from 'react';
14+
import type { GetBalanceData } from 'wagmi/query';
1415
import { Field, FieldDescription, FieldError, FieldLabel } from './ui/field';
1516

1617
export function SubscribeButton({ label }: { label: string }) {
@@ -219,10 +220,12 @@ export function AmountField({
219220
label,
220221
placeholder,
221222
description,
223+
balance,
222224
}: {
223225
label: string;
224226
placeholder?: string;
225227
description?: string;
228+
balance?: GetBalanceData;
226229
}) {
227230
const field = useFieldContext<string>();
228231
const errors = useStore(field.store, (state) => state.meta.errors);
@@ -238,7 +241,17 @@ export function AmountField({
238241

239242
return (
240243
<Field>
241-
<FieldLabel htmlFor={label}>{label}</FieldLabel>
244+
<FieldLabel htmlFor={label}>
245+
{label}
246+
247+
{balance && (
248+
<span className="ml-2 text-sm font-normal text-gray-400">
249+
(Balance:{' '}
250+
{Decimal.from(balance.value, balance.decimals).toFormatted(88)}{' '}
251+
{balance.symbol})
252+
</span>
253+
)}
254+
</FieldLabel>
242255
<Input
243256
value={renderedValue}
244257
placeholder={placeholder}

‎apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@ import {
66
TableHeader,
77
TableRow,
88
} from '@/components/ui/table/table';
9-
import React, { useEffect, useState, type FC } from 'react';
9+
import React, { type FC } from 'react';
1010

1111
import { borrowRequestStore } from '@/components/MoneyMarket/stores/borrow-request.store';
1212
import { AmountRenderer } from '@/components/ui/amount-renderer';
1313
import { Button } from '@/components/ui/button';
14-
import { Dialog } from '@/components/ui/dialog';
1514
import { InfoButton } from '@/components/ui/info-button';
1615
import type { MoneyMarketPoolReserve } from '@sovryn/slayer-sdk';
1716

@@ -20,11 +19,11 @@ type AssetsTableProps = {
2019
};
2120

2221
export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
23-
const [sortedAssets, setSortedAssets] =
24-
useState<MoneyMarketPoolReserve[]>(assets);
25-
useEffect(() => {
26-
setSortedAssets(assets);
27-
}, [assets]);
22+
// const [sortedAssets, setSortedAssets] =
23+
// useState<MoneyMarketPoolReserve[]>(assets);
24+
// useEffect(() => {
25+
// setSortedAssets(assets);
26+
// }, [assets]);
2827

2928
const handleBorrow = (reserve: MoneyMarketPoolReserve) =>
3029
borrowRequestStore.getState().setReserve(reserve);
@@ -89,7 +88,7 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
8988
</TableRow>
9089
</TableHeader>
9190
<TableBody>
92-
{sortedAssets.map((asset, index) => (
91+
{assets.map((asset, index) => (
9392
<React.Fragment key={asset.id}>
9493
<TableRow className="hover:bg-transparent">
9594
<TableCell className="border-neutral-800 border-y border-l rounded-tl-[1.25rem] rounded-bl-[1.25rem]">
@@ -144,14 +143,14 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
144143
</TableCell>
145144
</TableRow>
146145

147-
{index !== sortedAssets.length - 1 && (
146+
{index !== assets.length - 1 && (
148147
<TableRow className="h-1 hover:bg-transparent border-none">
149148
<TableCell className="p-0.5" colSpan={4}></TableCell>
150149
</TableRow>
151150
)}
152151
</React.Fragment>
153152
))}
154-
{sortedAssets.length === 0 && (
153+
{assets.length === 0 && (
155154
<TableRow>
156155
<TableCell colSpan={4} className="text-center py-4">
157156
No assets found.
@@ -160,7 +159,6 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
160159
)}
161160
</TableBody>
162161
</Table>
163-
<Dialog></Dialog>
164162
</>
165163
);
166164
};

‎apps/web-app/src/components/MoneyMarket/components/BorrowDialog/BorrowDialog.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ const BorrowDialogForm = () => {
8181
<DialogContent
8282
onInteractOutside={handleEscapes}
8383
onEscapeKeyDown={handleEscapes}
84+
onOpenAutoFocus={(e) => e.preventDefault()}
8485
>
8586
<DialogHeader>
8687
<DialogTitle>Borrow Asset</DialogTitle>

‎apps/web-app/src/components/MoneyMarket/components/LendAssetsList/LendAssetsList.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Accordion } from '@/components/ui/accordion';
22
import { Checkbox } from '@/components/ui/checkbox';
33
import { Label } from '@/components/ui/label';
4+
import type { MoneyMarketPoolReserve } from '@sovryn/slayer-sdk';
45
import { useCallback, useMemo, useState, type FC } from 'react';
5-
import type { LendAsset } from './LendAssetsList.types';
66
import { AssetsTable } from './components/AssetsTable/AssetsTable';
77

88
type LendPAssetsListProps = {
9-
lendAssets: LendAsset[];
9+
lendAssets: MoneyMarketPoolReserve[];
1010
loading?: boolean;
1111
};
1212

@@ -20,12 +20,7 @@ export const LendAssetsList: FC<LendPAssetsListProps> = ({ lendAssets }) => {
2020
);
2121

2222
const filteredAssets = useMemo(
23-
() =>
24-
showZeroBalances
25-
? lendAssets
26-
: lendAssets.filter(
27-
({ balance }) => parseFloat(balance.replace(/,/g, '')) > 0,
28-
),
23+
() => lendAssets,
2924
[lendAssets, showZeroBalances],
3025
);
3126

‎apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx‎

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,62 +6,61 @@ import {
66
TableHeader,
77
TableRow,
88
} from '@/components/ui/table/table';
9-
import { Fragment, useCallback, useEffect, useState, type FC } from 'react';
9+
import { Fragment, type FC } from 'react';
1010

11-
import iconSort from '@/assets/lend/icon-sort.svg';
11+
import { lendRequestStore } from '@/components/MoneyMarket/stores/lend-request.store';
1212
import { AmountRenderer } from '@/components/ui/amount-renderer';
1313
import { Button } from '@/components/ui/button';
1414
import { InfoButton } from '@/components/ui/info-button';
15-
import {
16-
OrderColumn,
17-
OrderType,
18-
type OrderSorting,
19-
} from '@/components/ui/table/table.types';
15+
import type { MoneyMarketPoolReserve } from '@sovryn/slayer-sdk';
2016
import { Check, X } from 'lucide-react';
21-
import type { LendAsset } from '../../LendAssetsList.types';
2217

2318
type AssetsTableProps = {
24-
assets: LendAsset[];
19+
assets: MoneyMarketPoolReserve[];
2520
};
2621

2722
export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
28-
const [sortDirection, setSortDirection] = useState<OrderSorting>(
29-
OrderType.ASC,
30-
);
31-
const [sortedAssets, setSortedAssets] = useState<LendAsset[]>(assets);
32-
useEffect(() => {
33-
setSortedAssets(assets);
34-
}, [assets]);
23+
// const [sortDirection, setSortDirection] = useState<OrderSorting>(
24+
// OrderType.ASC,
25+
// );
26+
// const [sortedAssets, setSortedAssets] =
27+
// useState<MoneyMarketPoolReserve[]>(assets);
28+
// useEffect(() => {
29+
// setSortedAssets(assets);
30+
// }, [assets]);
3531

36-
const sortAssets = useCallback(
37-
(column: keyof LendAsset) => {
38-
const newSortDirection =
39-
sortDirection === OrderType.ASC ? OrderType.DESC : OrderType.ASC;
40-
setSortDirection(newSortDirection);
32+
// const sortAssets = useCallback(
33+
// (column: keyof MoneyMarketPoolReserve) => {
34+
// const newSortDirection =
35+
// sortDirection === OrderType.ASC ? OrderType.DESC : OrderType.ASC;
36+
// setSortDirection(newSortDirection);
4137

42-
const sorted = [...sortedAssets].sort((a, b) => {
43-
if (column === OrderColumn.SYMBOL) {
44-
return newSortDirection === OrderType.ASC
45-
? a[column].localeCompare(b[column])
46-
: b[column].localeCompare(a[column]);
47-
} else if (column === OrderColumn.BALANCE) {
48-
const balanceA = parseFloat(a.balance.replace(/,/g, ''));
49-
const balanceB = parseFloat(b.balance.replace(/,/g, ''));
50-
return newSortDirection === OrderType.ASC
51-
? balanceA - balanceB
52-
: balanceB - balanceA;
53-
} else if (column === OrderColumn.APY) {
54-
const apyA = parseFloat(a.apy.replace('%', ''));
55-
const apyB = parseFloat(b.apy.replace('%', ''));
56-
return newSortDirection === OrderType.ASC ? apyA - apyB : apyB - apyA;
57-
}
58-
return 0;
59-
});
38+
// // const sorted = [...sortedAssets].sort((a, b) => {
39+
// // if (column === OrderColumn.SYMBOL) {
40+
// // return newSortDirection === OrderType.ASC
41+
// // ? a[column].localeCompare(b[column])
42+
// // : b[column].localeCompare(a[column]);
43+
// // } else if (column === OrderColumn.BALANCE) {
44+
// // const balanceA = parseFloat(a.balance.replace(/,/g, ''));
45+
// // const balanceB = parseFloat(b.balance.replace(/,/g, ''));
46+
// // return newSortDirection === OrderType.ASC
47+
// // ? balanceA - balanceB
48+
// // : balanceB - balanceA;
49+
// // } else if (column === OrderColumn.APY) {
50+
// // const apyA = parseFloat(a.apy.replace('%', ''));
51+
// // const apyB = parseFloat(b.apy.replace('%', ''));
52+
// // return newSortDirection === OrderType.ASC ? apyA - apyB : apyB - apyA;
53+
// // }
54+
// // return 0;
55+
// // });
6056

61-
setSortedAssets(sorted);
62-
},
63-
[sortDirection],
64-
);
57+
// // setSortedAssets(sorted);
58+
// },
59+
// [sortDirection],
60+
// );
61+
62+
const handleLending = (reserve: MoneyMarketPoolReserve) =>
63+
lendRequestStore.getState().setReserve(reserve);
6564

6665
return (
6766
<Table className="w-full border-separate">
@@ -70,7 +69,7 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
7069
<TableHead>
7170
<div className="flex items-center gap-2">
7271
<span>Asset</span>
73-
{assets.some((asset) => asset.isSortable) && (
72+
{/* {assets.some((asset) => asset.isSortable) && (
7473
<Button
7574
variant="ghost"
7675
className="p-0 cursor-pointer hover:opacity-80 dark:hover:bg-transparent"
@@ -79,13 +78,13 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
7978
>
8079
<img src={iconSort} alt="Sort Icon" className="w-2 h-2.5" />
8180
</Button>
82-
)}
81+
)} */}
8382
</div>
8483
</TableHead>
8584
<TableHead>
8685
<div className="flex items-center gap-2">
8786
<span>Wallet balance</span>
88-
{assets.some((asset) => asset.isSortable) && (
87+
{/* {assets.some((asset) => asset.isSortable) && (
8988
<Button
9089
variant="ghost"
9190
className="p-0 cursor-pointer hover:opacity-80 dark:hover:bg-transparent"
@@ -94,7 +93,7 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
9493
>
9594
<img src={iconSort} alt="Sort Icon" className="w-2 h-2.5" />
9695
</Button>
97-
)}
96+
)} */}
9897
</div>
9998
</TableHead>
10099
<TableHead>
@@ -103,7 +102,7 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
103102
APY
104103
<InfoButton content="APY - The annual percentage yield (APY) is the real rate of return earned on an investment, taking into account the effect of compounding interest." />
105104
</div>
106-
{assets.some((asset) => asset.isSortable) && (
105+
{/* {assets.some((asset) => asset.isSortable) && (
107106
<Button
108107
variant="ghost"
109108
className="p-0 cursor-pointer hover:opacity-80 dark:hover:bg-transparent"
@@ -112,7 +111,7 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
112111
>
113112
<img src={iconSort} alt="Sort Icon" className="w-2 h-2.5" />
114113
</Button>
115-
)}
114+
)} */}
116115
</div>
117116
</TableHead>
118117
<TableHead>
@@ -124,32 +123,34 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
124123
</TableRow>
125124
</TableHeader>
126125
<TableBody>
127-
{sortedAssets.map((asset, index) => (
128-
<Fragment key={asset.symbol}>
126+
{assets.map((asset, index) => (
127+
<Fragment key={asset.id}>
129128
<TableRow className="hover:bg-transparent">
130129
<TableCell className="border-neutral-800 border-y border-l rounded-tl-[1.25rem] rounded-bl-[1.25rem]">
131130
<div className="flex items-center min-w-24">
132131
<img
133-
src={asset.icon}
134-
alt={asset.symbol}
132+
src={asset.token.logoUrl}
133+
alt={asset.token.symbol}
135134
className="w-8 h-8"
136135
/>
137136
<div className="ml-2">
138-
<p className="text-gray-50 font-medium">{asset.symbol}</p>
137+
<p className="text-gray-50 font-medium">
138+
{asset.token.symbol}
139+
</p>
139140
</div>
140141
</div>
141142
</TableCell>
142143
<TableCell className="border-neutral-800 border-y">
143-
<AmountRenderer value={asset.balance} />
144+
<AmountRenderer value={0} />
144145
</TableCell>
145146
<TableCell className="border-neutral-800 border-y">
146147
<div className="flex items-center">
147-
<AmountRenderer value={asset.apy} suffix="%" />
148+
<AmountRenderer value={0} suffix="%" />
148149
</div>
149150
</TableCell>
150151
<TableCell className="border-neutral-800 border-y">
151152
<div className="flex items-center">
152-
{asset.canBeCollateral ? (
153+
{asset.usageAsCollateralEnabled ? (
153154
<Check className="text-emerald-500 w-4 h-4" />
154155
) : (
155156
<X className="text-red-500 w-4 h-4" />
@@ -158,7 +159,10 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
158159
</TableCell>
159160
<TableCell className="border-neutral-800 border-y border-r rounded-tr-[1.25rem] rounded-br-[1.25rem]">
160161
<div className="flex items-center justify-end gap-4">
161-
<Button className="rounded-full min-w-24 h-10 hover:cursor-pointer">
162+
<Button
163+
className="rounded-full min-w-24 h-10 hover:cursor-pointer"
164+
onClick={() => handleLending(asset)}
165+
>
162166
Lend
163167
</Button>
164168
<Button
@@ -171,14 +175,14 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
171175
</TableCell>
172176
</TableRow>
173177

174-
{index !== sortedAssets.length - 1 && (
178+
{index !== assets.length - 1 && (
175179
<TableRow className="h-1 hover:bg-transparent border-none">
176180
<TableCell className="p-0.5" colSpan={5}></TableCell>
177181
</TableRow>
178182
)}
179183
</Fragment>
180184
))}
181-
{sortedAssets.length === 0 && (
185+
{assets.length === 0 && (
182186
<TableRow>
183187
<TableCell colSpan={5} className="text-center py-4">
184188
No assets found.

0 commit comments

Comments
 (0)