fixes ui contracts

CheesecakeLabs · Dec 13, 2023 · 86ebc1a · 86ebc1a
1 parent 353f6be
commit 86ebc1a
Show file tree

Hide file tree

Showing 11 changed files with 352 additions and 196 deletions.
diff --git a/frontend/src/app/core/pages/contracts-create/index.tsx b/frontend/src/app/core/pages/contracts-create/index.tsx
@@ -31,6 +31,7 @@ export const ContractsCreate: React.FC = () => {
   const { vaults, loadingVaults, getVaults } = useVaults()
   const { sign, submit, getSponsorPK } = useTransactions()
   const { getLatestSequenceLedger } = useHorizon()
+
   const toast = useToast()
   const navigate = useNavigate()
 

diff --git a/frontend/src/app/core/pages/contracts-detail/index.tsx b/frontend/src/app/core/pages/contracts-detail/index.tsx
@@ -1,7 +1,7 @@
 import { Flex, useToast } from '@chakra-ui/react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { FieldValues, UseFormSetValue } from 'react-hook-form'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import { useAuth } from 'hooks/useAuth'
 import { useContracts } from 'hooks/useContracts'
@@ -38,6 +38,7 @@ export const ContractsDetail: React.FC = () => {
   const [currentInVault, setCurrentInVault] = useState<string>()
 
   const { id } = useParams()
+  const navigate = useNavigate()
 
   useEffect(() => {
     getUserPermissions()
@@ -66,10 +67,10 @@ export const ContractsDetail: React.FC = () => {
       const userYield =
         Number((await getYield(wallet, contract.address)) || 0) / 10000000
 
-      const estimatedPrematureWithdraw = await getEstimatedPrematureWithdraw(
-        wallet,
-        contract.address
-      )
+      const estimatedPrematureWithdraw =
+        Number(
+          (await getEstimatedPrematureWithdraw(wallet, contract.address)) || 0
+        ) / 10000000
 
       if (!timeLeft) {
         timeLeft =
@@ -236,21 +237,43 @@ export const ContractsDetail: React.FC = () => {
     return history ? history[0]?.deposit_amount : undefined
   }
 
+  const hasAssetInVault = (): boolean => {
+    return (
+      profile?.vault?.accountData?.balances.find(
+        balance =>
+          balance.asset_code === contract?.asset.code &&
+          balance.asset_issuer === contract?.asset.issuer.key.publicKey
+      ) !== undefined
+    )
+  }
+
+  const accessWallet = (): void => {
+    navigate(`${PathRoute.VAULT_DETAIL}/${profile?.vault_id}`)
+  }
+
+  const accessProfile = (): void => {
+    navigate(`${PathRoute.PROFILE}`)
+  }
+
   return (
     <Flex>
       <Sidebar highlightMenu={PathRoute.SOROBAN_SMART_CONTRACTS}>
         <ContractsDetailTemplate
           onSubmitWithdraw={onSubmitWithdraw}
           onSubmitDeposit={onSubmitDeposit}
+          currentBalance={getCurrentBalance()}
+          deposited={getDepositedValue()}
+          hasAssetInVault={hasAssetInVault()}
+          accessWallet={accessWallet}
+          accessProfile={accessProfile}
+          hasWallet={profile?.vault_id !== undefined}
           loading={loadingPosition}
           contract={contract}
           userAccount={profile?.vault?.wallet?.key.publicKey}
           isDepositing={isDepositing}
           isWithdrawing={isWithdrawing}
           contractData={contractData}
-          currentBalance={getCurrentBalance()}
           history={history}
-          deposited={getDepositedValue()}
           userPermissions={userPermissions}
           currentInVault={currentInVault}
         />

diff --git a/frontend/src/components/molecules/select-asset/index.tsx b/frontend/src/components/molecules/select-asset/index.tsx
@@ -1,5 +1,11 @@
-import { useColorMode } from '@chakra-ui/react'
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { Flex, Text, useColorMode } from '@chakra-ui/react'
+import React, {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useEffect,
+  useState,
+} from 'react'
 import Select from 'react-select'
 
 export interface IOption {
@@ -38,6 +44,13 @@ export const SelectAsset: React.FC<ISelectAsset> = ({
     setOptions(ops || [])
   }, [assets])
 
+  const formatLabel = (data: IOption): ReactNode => (
+    <Flex alignItems="center" gap="0.75rem">
+      <Text fontSize="xs" minW="3rem">{data.label}</Text>
+      <Text fontSize="sm">{data.value.name}</Text>
+    </Flex>
+  )
+
   return (
     <Select
       options={options}
@@ -46,6 +59,7 @@ export const SelectAsset: React.FC<ISelectAsset> = ({
       }}
       value={selected}
       placeholder="Select asset"
+      formatOptionLabel={formatLabel}
       styles={{
         control: baseStyles => ({
           ...baseStyles,

diff --git a/frontend/src/components/molecules/select-vault/index.tsx b/frontend/src/components/molecules/select-vault/index.tsx
@@ -64,7 +64,7 @@ export const SelectVault: React.FC<ISelectVault> = ({
     setOptions(ops || [])
   }, [distributorWallet, vaults])
 
-  const formatGroupLabel = (data: IOption): ReactNode => (
+  const formatLabel = (data: IOption): ReactNode => (
     <Flex alignItems="center" gap="0.75rem">
       {data.isPersonal ? (
         <User width="16px" height="16px" fill="gray" />
@@ -80,7 +80,7 @@ export const SelectVault: React.FC<ISelectVault> = ({
       options={options}
       onChange={(newValue): void => setWallet(newValue?.value)}
       isOptionDisabled={(option): boolean => option.disabled}
-      formatOptionLabel={formatGroupLabel}
+      formatOptionLabel={formatLabel}
       styles={{
         control: baseStyles => ({
           ...baseStyles,