From 603acd1e2ebf63ec335ab5b7ebfade86657965cf Mon Sep 17 00:00:00 2001 From: Yunip Shrestha Date: Fri, 1 Mar 2024 00:35:59 +0545 Subject: [PATCH 1/3] add change status button and modal --- src/assets/scss/components/_datatable.scss | 17 ++- .../Datatable/AccordionTable.component.tsx | 13 ++- .../ChangeCollateralStatus.component.tsx | 110 ++++++++++++++++++ src/components/modal/index.tsx | 1 + 4 files changed, 133 insertions(+), 8 deletions(-) create mode 100644 src/components/modal/ChangeCollateralStatus.component.tsx diff --git a/src/assets/scss/components/_datatable.scss b/src/assets/scss/components/_datatable.scss index de1242dd..f9c979fc 100644 --- a/src/assets/scss/components/_datatable.scss +++ b/src/assets/scss/components/_datatable.scss @@ -262,9 +262,19 @@ table { } .actions { display: flex; - justify-content: end; + justify-content: space-between; column-gap: 10px; - padding: 20px; + padding: 20px 20px 20px 0; + + .left { + display: flex; + column-gap: 10px; + } + .right { + justify-self: end; + display: flex; + column-gap: 10px; + } } } @@ -277,7 +287,8 @@ table { background-color: transparent; } - .table-data-row:hover, .datatable-row-accordion:hover { + .table-data-row:hover, + .datatable-row-accordion:hover { background-color: $white; } diff --git a/src/components/Datatable/AccordionTable.component.tsx b/src/components/Datatable/AccordionTable.component.tsx index 73d1791f..506dfbe3 100644 --- a/src/components/Datatable/AccordionTable.component.tsx +++ b/src/components/Datatable/AccordionTable.component.tsx @@ -11,7 +11,7 @@ import { type SortingState, getSortedRowModel } from '@tanstack/react-table' -import { Borrow, ChainListCheckbox, Icon, Repay, Supply, Withdraw } from '@/components' +import { Borrow, ChainListCheckbox, ChangeCollateralStatus, Icon, Repay, Supply, Withdraw } from '@/components' import { eSupportedChains, type tSupportedChains } from '@cedro-finance/sdk' import type { IDashboardData } from '@/@types/store.types' import { useNetwork } from 'wagmi' @@ -264,20 +264,23 @@ const DatatableRowAccordion: FC = (props) => {
+
+ +
{ props.type === 'supply' ? ( - <> +
- +
) : ( - <> +
- +
) }
diff --git a/src/components/modal/ChangeCollateralStatus.component.tsx b/src/components/modal/ChangeCollateralStatus.component.tsx new file mode 100644 index 00000000..79fe838a --- /dev/null +++ b/src/components/modal/ChangeCollateralStatus.component.tsx @@ -0,0 +1,110 @@ +/* eslint-disable @typescript-eslint/no-misused-promises */ +import { type FC, useMemo, useCallback, useState } from 'react' +import { Button, Modal, Icon } from '@/components' +import { TokenIconMapping } from '@/constants' +import { toast } from 'react-toastify' +import { cedroClient } from '@/configs/chainConfig' +import { type IProtocolActionModalProps, type IProtocolActionButtonProps } from '@/@types/misc.types' + +export const ChangeCollateralStatus: FC = ({ + poolId, + chain, + variant = 'primary', + icon +}) => { + const [isModalVisible, setIsModalVisible] = useState(false) + const onModalToggle = useCallback(() => { + setIsModalVisible((prev) => !prev) + }, [setIsModalVisible]) + + return ( + <> + {isModalVisible && ( + + )} + + + ) +} + +export const ChangeCollateralStatusModal: FC = ({ + poolId, + chain: selectedChain, + isModalVisible, + onModalToggle +}) => { + const [isBtnLoading, setIsBtnLoading] = useState(false) + const isTokenDisabled = false + + const token = useMemo(() => { + const { tokenConfig } = cedroClient.Config.getPoolTokenForChain(selectedChain, poolId) + return tokenConfig.symbol + }, [poolId, selectedChain]) + + const handleChangeStatus = useCallback(() => { + setIsBtnLoading(true) + try { + if (isTokenDisabled) { + toast.success(`${token} Enabled`) + } else { + toast.success(`${token} Disabled`) + } + } catch (error) { + toast.error(`Error while approving ${token}`) + } finally { + setIsBtnLoading(false) + onModalToggle() + } + }, [selectedChain, poolId]) + + return ( + +
+
+

Disable {token}

+
+
+
+ + + {/* TODO update description */} +
+ To Supply {token} to Cedro Protocol as + collateral, you need to enable it first. +
+
+ +
+ +
+ +
+
+ + ) +} diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx index f917de42..ac630fba 100644 --- a/src/components/modal/index.tsx +++ b/src/components/modal/index.tsx @@ -3,3 +3,4 @@ export { ModalHeader } from './ModalHeader.component' export { SwitchNetwork } from './SwitchNetwork.component' export { TestTokens } from './TestTokens.component' export { LiquidationList } from './LiquidationList.component' +export { ChangeCollateralStatus } from './ChangeCollateralStatus.component' From 1029e9750a289ce978e1d54561035387e9f2a8f5 Mon Sep 17 00:00:00 2001 From: Yunip Shrestha Date: Fri, 1 Mar 2024 00:53:46 +0545 Subject: [PATCH 2/3] add price to market table --- src/containers/market.tsx | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/containers/market.tsx b/src/containers/market.tsx index c5a76856..0556f116 100644 --- a/src/containers/market.tsx +++ b/src/containers/market.tsx @@ -133,7 +133,30 @@ export const MarketColumnDefinition: Array> = [ style: { display: 'flex', justifyContent: 'flex-end', - flex: 0.9 + flex: 1 + } + } + } + }, + sortingFn: floatSortingFn + }, + { + accessorKey: 'price', + header: 'Price', + cell: (props) => { + const price = props.getValue() + + return ( + + ) + }, + meta: { + getCellContext: () => { + return { + style: { + display: 'flex', + justifyContent: 'flex-end', + flex: 0.8 } } } @@ -154,7 +177,7 @@ export const MarketColumnDefinition: Array> = [ style: { display: 'flex', justifyContent: 'flex-end', - flex: 1 + flex: 0.9 } } } @@ -173,7 +196,7 @@ export const MarketColumnDefinition: Array> = [ style: { display: 'flex', justifyContent: 'flex-end', - flex: 0.8 + flex: 0.7 } } } @@ -194,7 +217,7 @@ export const MarketColumnDefinition: Array> = [ style: { display: 'flex', justifyContent: 'flex-end', - flex: 1 + flex: 0.9 } } } @@ -213,7 +236,7 @@ export const MarketColumnDefinition: Array> = [ style: { display: 'flex', justifyContent: 'flex-end', - flex: 0.8 + flex: 0.7 } } } From 149607a78f203e22bce1f21b84606ffe3bbd1dbc Mon Sep 17 00:00:00 2001 From: Yunip Shrestha Date: Fri, 1 Mar 2024 01:06:01 +0545 Subject: [PATCH 3/3] update size for lg modal --- src/assets/scss/components/_modal.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss index 41d4e046..8536f4fb 100644 --- a/src/assets/scss/components/_modal.scss +++ b/src/assets/scss/components/_modal.scss @@ -47,8 +47,8 @@ max-width: 600px; } &.lg { - min-width: 60%; - max-width: 75%; + min-width: 40%; + max-width: 50%; } .modal-header {