Feat/disable collateral

src/assets/scss/components/_datatable.scss

@@ -270,9 +270,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;
+          }
         }
       }
 
@@ -285,7 +295,8 @@ table {
       background-color: transparent;
     }
 
-    .table-data-row:hover, .datatable-row-accordion:hover {
+    .table-data-row:hover,
+    .datatable-row-accordion:hover {
       background-color: $white;
     }
 

src/assets/scss/components/_modal.scss

@@ -48,7 +48,7 @@
   }
   &.lg {
     min-width: 40%;
-    max-width: 60%;
+    max-width: 50%;
   }
 
   .modal-header {

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<IProtocolActionButtonProps> = ({
+  poolId,
+  chain,
+  variant = 'primary',
+  icon
+}) => {
+  const [isModalVisible, setIsModalVisible] = useState(false)
+  const onModalToggle = useCallback(() => {
+    setIsModalVisible((prev) => !prev)
+  }, [setIsModalVisible])
+
+  return (
+    <>
+      {isModalVisible && (
+        <ChangeCollateralStatusModal
+          isModalVisible={isModalVisible}
+          onModalToggle={onModalToggle}
+          poolId={poolId}
+          chain={chain}
+        />
+      )}
+      <Button
+        onClick={(e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          onModalToggle()
+        }}
+        variant={variant}
+        iconPosition="left"
+        icon={icon}
+      >
+        Disable Token
+      </Button>
+    </>
+  )
+}
+
+export const ChangeCollateralStatusModal: FC<IProtocolActionModalProps> = ({
+  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 (
+    <Modal isOpen={isModalVisible} onClose={onModalToggle} hasCloseBtn size='sm'>
+      <div className="enable-token-modal">
+        <div className="modal-header">
+          <h3 className="modal-title">Disable {token}</h3>
+        </div>
+        <div className="modal-body">
+          <div className="enable-token-content">
+            <Icon name={TokenIconMapping[token]} width={80} height={80}/>
+
+            {/* TODO update description */}
+            <div className="modal-subtitle">
+              To Supply {token} to Cedro Protocol as
+              collateral, you need to enable it first.
+            </div>
+          </div>
+
+        </div>
+
+        <div className="modal-footer">
+          <Button
+          icon='directionRight'
+          onClick={handleChangeStatus}
+          className="btn btn-primary btn-lg"
+          fullWidth={true}
+          isDisabled = { isBtnLoading}
+          isLoading = {isBtnLoading}
+          size='lg'>
+            Disable {token}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

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'

src/containers/market.tsx

@@ -134,7 +134,30 @@ export const MarketColumnDefinition: Array<ColumnDef<unknown>> = [
           style: {
             display: 'flex',
             justifyContent: 'flex-end',
-            flex: 0.9
+            flex: 1
+          }
+        }
+      }
+    },
+    sortingFn: floatSortingFn
+  },
+  {
+    accessorKey: 'price',
+    header: 'Price',
+    cell: (props) => {
+      const price = props.getValue<string>()
+
+      return (
+        <Price value={price} />
+      )
+    },
+    meta: {
+      getCellContext: () => {
+        return {
+          style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flex: 0.8
           }
         }
       }
@@ -155,7 +178,7 @@ export const MarketColumnDefinition: Array<ColumnDef<unknown>> = [
           style: {
             display: 'flex',
             justifyContent: 'flex-end',
-            flex: 1
+            flex: 0.9
           }
         }
       }
@@ -174,7 +197,7 @@ export const MarketColumnDefinition: Array<ColumnDef<unknown>> = [
           style: {
             display: 'flex',
             justifyContent: 'flex-end',
-            flex: 0.8
+            flex: 0.7
           }
         }
       }
@@ -195,7 +218,7 @@ export const MarketColumnDefinition: Array<ColumnDef<unknown>> = [
           style: {
             display: 'flex',
             justifyContent: 'flex-end',
-            flex: 1
+            flex: 0.9
           }
         }
       }
@@ -214,7 +237,7 @@ export const MarketColumnDefinition: Array<ColumnDef<unknown>> = [
           style: {
             display: 'flex',
             justifyContent: 'flex-end',
-            flex: 0.8
+            flex: 0.7
           }
         }
       }