From 86ebc1ad8247700614f094d71d6d7681c57bf755 Mon Sep 17 00:00:00 2001
From: Lucas Magnus <lucasmagnusdasilva@gmail.com>
Date: Wed, 13 Dec 2023 00:47:59 -0300
Subject: [PATCH] fixes ui contracts

---
 .../app/core/pages/contracts-create/index.tsx |   1 +
 .../app/core/pages/contracts-detail/index.tsx |  37 ++-
 .../molecules/select-asset/index.tsx          |  18 +-
 .../molecules/select-vault/index.tsx          |   4 +-
 .../templates/contracts-create/index.tsx      | 288 +++++++++++-------
 .../components/contract-info/index.tsx        |   3 -
 .../components/deposit-details/index.tsx      |   8 +-
 .../components/deposit/index.tsx              | 162 +++++++---
 .../components/withdraw-details/index.tsx     |   5 -
 .../components/withdraw/index.tsx             |   2 +-
 .../templates/contracts-detail/index.tsx      |  20 +-
 11 files changed, 352 insertions(+), 196 deletions(-)

diff --git a/frontend/src/app/core/pages/contracts-create/index.tsx b/frontend/src/app/core/pages/contracts-create/index.tsx
index 8062110b..60f11ee8 100644
--- 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
index 898a5d17..83f769bd 100644
--- 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
index 80aec060..221f8bd8 100644
--- 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
index 1008b84e..ebabec2b 100644
--- 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,
diff --git a/frontend/src/components/templates/contracts-create/index.tsx b/frontend/src/components/templates/contracts-create/index.tsx
index ba015f51..749f33a0 100644
--- a/frontend/src/components/templates/contracts-create/index.tsx
+++ b/frontend/src/components/templates/contracts-create/index.tsx
@@ -15,19 +15,22 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import React, { useState } from 'react'
-import { FieldValues, UseFormSetValue, useForm } from 'react-hook-form'
+import { FieldValues, useForm } from 'react-hook-form'
 import { NumericFormat } from 'react-number-format'
 
 import { newContractHelper } from 'utils/constants/helpers'
 import { MAX_PAGE_WIDTH } from 'utils/constants/sizes'
 import { toNumber } from 'utils/formatter'
 
+import { SelectCompound, CompoundTime } from './components/select-compound'
+import {
+  SelectCompoundType,
+  TSelectCompoundType,
+} from './components/select-compound-type'
 import { SelectVault } from './components/select-vault'
 import { ActionHelper } from 'components/molecules/action-helper'
 import { ContractsBreadcrumb } from 'components/molecules/contracts-breadcrumb'
 import { SelectAsset } from 'components/molecules/select-asset'
-import { SelectCompound, CompoundTime } from './components/select-compound'
-import { SelectCompoundType, TSelectCompoundType } from './components/select-compound-type'
 
 interface IContractsCreateTemplate {
   onSubmit(
@@ -56,10 +59,23 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
     Hooks.UseAssetsTypes.IAssetDto | undefined
   >()
   const [compound, setCompound] = useState<CompoundTime>(CompoundTime['10 min'])
-  const [compoundType, setCompoundType] = useState<TSelectCompoundType>('Simple interest')
+  const [compoundType, setCompoundType] =
+    useState<TSelectCompoundType>('Simple interest')
 
   const { handleSubmit, setValue, getValues, register } = useForm()
 
+  const filteredAssets = (): Hooks.UseAssetsTypes.IAssetDto[] | undefined => {
+    return (
+      assets?.filter(asset =>
+        vault?.accountData?.balances.some(
+          balance =>
+            asset.code === balance.asset_code &&
+            asset.issuer.key.publicKey === balance.asset_issuer
+        )
+      ) || []
+    )
+  }
+
   return (
     <Flex flexDir="row" gap="1.5rem" w="full" justifyContent="center">
       <Flex maxW={MAX_PAGE_WIDTH} alignSelf="center" flexDir="column" w="full">
@@ -86,140 +102,178 @@ export const ContractsCreateTemplate: React.FC<IContractsCreateTemplate> = ({
               New Certificate of Deposit
             </Text>
           </Flex>
-          {loading ? <Skeleton w="full" h="16rem" /> : <Box p="1rem">
-            <form
-              onSubmit={handleSubmit(data => {
-                if (!asset) {
-                  throw new Error('Invalid asset')
-                }
-                
-                if(!vault){
-                  throw new Error('Invalid vault')
-                }
-
-                onSubmit(data, asset, vault, compoundType, compound)
-              })}
-            >
-              <Flex flexDir={{ md: 'row', sm: 'column' }} gap="1.5rem">
-                <FormControl>
-                  <FormLabel>Vault</FormLabel>
-                  <SelectVault vaults={vaults} setVault={setVault} />
-                </FormControl>
-
-                <FormControl>
-                  <FormLabel>Asset</FormLabel>
-                  <SelectAsset assets={assets} setAsset={setAsset} />
-                </FormControl>
-              </Flex>
-
-              <Flex
-                flexDir={{ md: 'row', sm: 'column' }}
-                gap="1.5rem"
-                mt="1.5rem"
+          {loading ? (
+            <Skeleton w="full" h="16rem" />
+          ) : (
+            <Box p="1rem">
+              <form
+                onSubmit={handleSubmit(data => {
+                  if (!asset) {
+                    throw new Error('Invalid asset')
+                  }
+
+                  if (!vault) {
+                    throw new Error('Invalid vault')
+                  }
+
+                  onSubmit(data, asset, vault, compoundType, compound)
+                })}
               >
-                <Flex w="full" flexDir={{ md: 'row', sm: 'column' }} gap="1.5rem">
+                <Flex flexDir={{ md: 'row', sm: 'column' }} gap="1.5rem">
                   <FormControl>
-                    <FormLabel>Minimum Deposit</FormLabel>
-                    <Input
-                      as={NumericFormat}
-                      decimalScale={7}
-                      thousandSeparator=","
-                      placeholder="Minimum deposit"
-                      autoComplete="off"
-                      value={getValues('min_deposit')}
-                      onChange={(event): void => {
-                        setValue('min_deposit', toNumber(event.target.value))
-                      }}
-                    />
+                    <FormLabel>Vault</FormLabel>
+                    <SelectVault vaults={vaults} setVault={setVault} />
                   </FormControl>
 
                   <FormControl>
-                    <FormLabel>Term</FormLabel>
-                    <InputGroup>
-                      <Input
-                        as={NumericFormat}
-                        placeholder="day(s)"
-                        decimalScale={0}
-                        autoComplete="off"
-                        value={getValues('term')}
-                        onChange={(event): void => {
-                          setValue('term', toNumber(event.target.value))
-                        }}
-                      />
-                      <InputRightAddon children='days' />
-                    </InputGroup>
+                    <FormLabel>Asset</FormLabel>
+                    <SelectAsset
+                      assets={filteredAssets()}
+                      setAsset={setAsset}
+                    />
                   </FormControl>
                 </Flex>
 
-                <Flex w="full" flexDir={{ md: 'row', sm: 'column' }} gap="1.5rem">
-                  <FormControl>
-                    <FormLabel>Yield Rate</FormLabel>
-                    <InputGroup>
-                      <Input
-                        type="number"
-                        placeholder="Yield Rate"
-                        {...register('yield_rate', {
-                          required: true,
-                        })}
-                      />
-                      <InputRightAddon children='%' />
-                    </InputGroup>
-                  </FormControl>
-
-                  <FormControl>
-                    <FormLabel>Penalty rate</FormLabel>
-                    <InputGroup>
+                <Flex
+                  flexDir={{ md: 'row', sm: 'column' }}
+                  gap="1.5rem"
+                  mt="1.5rem"
+                >
+                  <Flex
+                    w="full"
+                    flexDir={{ md: 'row', sm: 'column' }}
+                    gap="1.5rem"
+                  >
+                    <FormControl>
+                      <FormLabel>Minimum Deposit</FormLabel>
                       <Input
                         as={NumericFormat}
                         decimalScale={7}
                         thousandSeparator=","
-                        placeholder="Penalty rate"
+                        placeholder="Minimum deposit"
                         autoComplete="off"
-                        value={getValues('penalty_rate')}
+                        value={getValues('min_deposit')}
                         onChange={(event): void => {
-                          setValue('penalty_rate', toNumber(event.target.value))
+                          setValue('min_deposit', toNumber(event.target.value))
                         }}
                       />
-                      <InputRightAddon children='%' />
-                    </InputGroup>
+                    </FormControl>
 
-                  </FormControl>
-                </Flex>
-              </Flex>
-
-              <Flex
-                flexDir={{ md: 'row', sm: 'column' }}
-                gap="1.5rem"
-                mt="1.5rem"
-                bg="gray.50"
-                p="1rem"
-                borderRadius="0.25rem"
-                _dark={{ bg: 'black.600' }}
-              >
-                <FormControl w="full">
-                  <FormLabel>Compound</FormLabel>
-                  <SelectCompoundType compoundType={compoundType} setCompoundType={setCompoundType} />
-                  {compoundType === 'Compound interest' && <SelectCompound compound={compound} setCompound={setCompound} />}
-                </FormControl>
-
-                <Flex w="full" flexDir="column" pt="1.5rem" mx="1rem" gap="0.5rem">
-                  <Text fontSize="sm"><b>Simple Interest:</b> Interest payment based on a percentage of the deposited amount over the term period.</Text>
-                  <Text fontSize="sm"><b>Compound interest:</b> Interest earned not just based on the deposited amount, but also on the interest already earned so far at each compound interval.</Text>
+                    <FormControl>
+                      <FormLabel>Term</FormLabel>
+                      <InputGroup>
+                        <Input
+                          as={NumericFormat}
+                          placeholder="day(s)"
+                          decimalScale={0}
+                          autoComplete="off"
+                          value={getValues('term')}
+                          onChange={(event): void => {
+                            setValue('term', toNumber(event.target.value))
+                          }}
+                        />
+                        <InputRightAddon children="days" />
+                      </InputGroup>
+                    </FormControl>
+                  </Flex>
+
+                  <Flex
+                    w="full"
+                    flexDir={{ md: 'row', sm: 'column' }}
+                    gap="1.5rem"
+                  >
+                    <FormControl>
+                      <FormLabel>Yield Rate</FormLabel>
+                      <InputGroup>
+                        <Input
+                          type="number"
+                          placeholder="Yield Rate"
+                          {...register('yield_rate', {
+                            required: true,
+                          })}
+                        />
+                        <InputRightAddon children="%" />
+                      </InputGroup>
+                    </FormControl>
+
+                    <FormControl>
+                      <FormLabel>Penalty rate</FormLabel>
+                      <InputGroup>
+                        <Input
+                          as={NumericFormat}
+                          decimalScale={7}
+                          thousandSeparator=","
+                          placeholder="Penalty rate"
+                          autoComplete="off"
+                          value={getValues('penalty_rate')}
+                          onChange={(event): void => {
+                            setValue(
+                              'penalty_rate',
+                              toNumber(event.target.value)
+                            )
+                          }}
+                        />
+                        <InputRightAddon children="%" />
+                      </InputGroup>
+                    </FormControl>
+                  </Flex>
                 </Flex>
-              </Flex>
 
-              <Flex justifyContent="flex-end" mt="1rem">
-                <Button
-                  type="submit"
-                  variant="primary"
+                <Flex
+                  flexDir={{ md: 'row', sm: 'column' }}
+                  gap="1.5rem"
                   mt="1.5rem"
-                  isLoading={creatingContract}
+                  bg="gray.50"
+                  p="1rem"
+                  borderRadius="0.25rem"
+                  _dark={{ bg: 'black.600' }}
                 >
-                  Create Certificate of Deposit
-                </Button>
-              </Flex>
-            </form>
-          </Box>}
+                  <FormControl w="full">
+                    <FormLabel>Compound</FormLabel>
+                    <SelectCompoundType
+                      compoundType={compoundType}
+                      setCompoundType={setCompoundType}
+                    />
+                    {compoundType === 'Compound interest' && (
+                      <SelectCompound
+                        compound={compound}
+                        setCompound={setCompound}
+                      />
+                    )}
+                  </FormControl>
+
+                  <Flex
+                    w="full"
+                    flexDir="column"
+                    pt="1.5rem"
+                    mx="1rem"
+                    gap="0.5rem"
+                  >
+                    <Text fontSize="sm">
+                      <b>Simple Interest:</b> Interest payment based on a
+                      percentage of the deposited amount over the term period.
+                    </Text>
+                    <Text fontSize="sm">
+                      <b>Compound interest:</b> Interest earned not just based
+                      on the deposited amount, but also on the interest already
+                      earned so far at each compound interval.
+                    </Text>
+                  </Flex>
+                </Flex>
+
+                <Flex justifyContent="flex-end" mt="1rem">
+                  <Button
+                    type="submit"
+                    variant="primary"
+                    mt="1.5rem"
+                    isLoading={creatingContract}
+                  >
+                    Create Certificate of Deposit
+                  </Button>
+                </Flex>
+              </form>
+            </Box>
+          )}
         </Container>
       </Flex>
       <VStack mt="2.5rem">
diff --git a/frontend/src/components/templates/contracts-detail/components/contract-info/index.tsx b/frontend/src/components/templates/contracts-detail/components/contract-info/index.tsx
index 38578130..10d9ab09 100644
--- a/frontend/src/components/templates/contracts-detail/components/contract-info/index.tsx
+++ b/frontend/src/components/templates/contracts-detail/components/contract-info/index.tsx
@@ -20,9 +20,6 @@ export const ContractInfo: React.FC<IContractInfo> = ({ contract }) => {
 
   return (
     <Flex flexDir="column">
-      <Text fontSize="sm" mb="0.5rem" ms="0.25rem">
-        Contract details
-      </Text>
       <Flex
         flexDir="column"
         alignItems="center"
diff --git a/frontend/src/components/templates/contracts-detail/components/deposit-details/index.tsx b/frontend/src/components/templates/contracts-detail/components/deposit-details/index.tsx
index 0d7bb4e2..d256ee0f 100644
--- a/frontend/src/components/templates/contracts-detail/components/deposit-details/index.tsx
+++ b/frontend/src/components/templates/contracts-detail/components/deposit-details/index.tsx
@@ -59,15 +59,11 @@ export const DepositDetails: React.FC<IDepositDetails> = ({
 
   return (
     <Flex flexDir="column" w="full">
-      <Text fontSize="sm" mb="0.5rem" ms="0.25rem">
-        Deposit info
-      </Text>
       <Flex
         flexDir="column"
         w="full"
         maxW="full"
         gap="0.75rem"
-        mt="0.5rem"
         borderRadius="0.25rem"
         p="1rem"
       >
@@ -103,7 +99,7 @@ export const DepositDetails: React.FC<IDepositDetails> = ({
                   w="fit-content"
                   mb="0.15rem"
                 >
-                  Current yield
+                  Accrued Yield
                 </Text>
                 <Text ms="0.5rem">{`${(contractData.yield / 100).toFixed(
                   2
@@ -144,7 +140,7 @@ export const DepositDetails: React.FC<IDepositDetails> = ({
                     w="fit-content"
                     mb="0.15rem"
                   >
-                    Composed in
+                    Compounds in
                   </Text>
                   <Flex ms="0.5rem">
                     <Countdown
diff --git a/frontend/src/components/templates/contracts-detail/components/deposit/index.tsx b/frontend/src/components/templates/contracts-detail/components/deposit/index.tsx
index 48ed2004..d31a0949 100644
--- a/frontend/src/components/templates/contracts-detail/components/deposit/index.tsx
+++ b/frontend/src/components/templates/contracts-detail/components/deposit/index.tsx
@@ -22,16 +22,24 @@ interface IDeposit {
     data: FieldValues,
     setValue: UseFormSetValue<FieldValues>
   ): Promise<void>
+  accessWallet(): void
+  accessProfile(): void
   contract: Hooks.UseContractsTypes.IContract | undefined
   loading: boolean
   currentBalance: string
+  hasAssetInVault: boolean
+  hasWallet: boolean
 }
 
 export const Deposit: React.FC<IDeposit> = ({
   onSubmit,
+  accessWallet,
+  accessProfile,
   loading,
   contract,
   currentBalance,
+  hasAssetInVault,
+  hasWallet,
 }) => {
   const {
     formState: { errors },
@@ -62,64 +70,120 @@ export const Deposit: React.FC<IDeposit> = ({
             {`Deposit ${contract?.asset.code}`}
           </Text>
         </Flex>
-        <Flex w="full" alignItems="center" flexDir="column" mt="1.5rem">
-          <Text fontSize="xs">Current in my wallet</Text>
-          <Flex
-            bg="gray.100"
-            borderRadius="full"
-            mb="0.5rem"
-            mt="0.25rem"
-            w="fit-content"
-            px="0.75rem"
-            py="0.25rem"
-            alignItems="center"
-            gap="0.5rem"
-            stroke="black"
-            _dark={{ bg: 'black.800', color: 'white' }}
-          >
-            {contract?.asset?.image ? (
-              <Img src={base64ToImg(contract.asset.image)} w="16px" h="16px" />
-            ) : (
-              getCurrencyIcon(contract?.asset.code || '', '1rem')
-            )}
-            {`${toCrypto(Number(currentBalance))} ${contract?.asset.code}`}
+        {!hasWallet ? (
+          <Flex flexDir="column" p="1rem" alignItems="center">
+            <Text
+              bg="gray.100"
+              borderRadius="full"
+              mb="0.5rem"
+              mt="0.25rem"
+              w="fit-content"
+              px="0.75rem"
+              py="0.25rem"
+              alignItems="center"
+            >
+              You don't have a wallet yet
+            </Text>
+            <Button
+              w="full"
+              borderRadius="1.5rem"
+              variant="primary"
+              mt="1.5rem"
+              onClick={accessProfile}
+            >
+              Access my profile
+            </Button>
           </Flex>
-        </Flex>
-        <Box p="1rem">
-          <form
-            onSubmit={handleSubmit(data => {
-              data.amount = amount
-              onSubmit(data, setValue)
-            })}
-          >
-            <FormControl isInvalid={errors?.amount !== undefined}>
-              <Input
-                as={NumericFormat}
-                decimalScale={7}
-                thousandSeparator=","
-                placeholder="Amount to deposit..."
-                autoComplete="off"
-                onChange={(target): void => {
-                  setAmount(toNumber(target.currentTarget.value))
-                  limitExceeded(target.currentTarget.value)
-                }}
-              />
-              <FormErrorMessage>Required</FormErrorMessage>
-            </FormControl>
+        ) : hasAssetInVault ? (
+          <>
+            <Flex w="full" alignItems="center" flexDir="column" mt="1.5rem">
+              <Text fontSize="xs">Current in my wallet</Text>
+              <Flex
+                bg="gray.100"
+                borderRadius="full"
+                mb="0.5rem"
+                mt="0.25rem"
+                w="fit-content"
+                px="0.75rem"
+                py="0.25rem"
+                alignItems="center"
+                gap="0.5rem"
+                stroke="black"
+                _dark={{ bg: 'black.800', color: 'white' }}
+              >
+                {contract?.asset?.image ? (
+                  <Img
+                    src={base64ToImg(contract.asset.image)}
+                    w="16px"
+                    h="16px"
+                  />
+                ) : (
+                  getCurrencyIcon(contract?.asset.code || '', '1rem')
+                )}
+                {`${toCrypto(Number(currentBalance))} ${contract?.asset.code}`}
+              </Flex>
+            </Flex>
+            <Box p="1rem">
+              <form
+                onSubmit={handleSubmit(data => {
+                  data.amount = amount
+                  onSubmit(data, setValue)
+                })}
+              >
+                <FormControl isInvalid={errors?.amount !== undefined}>
+                  <Input
+                    as={NumericFormat}
+                    decimalScale={7}
+                    thousandSeparator=","
+                    placeholder="Amount to deposit..."
+                    autoComplete="off"
+                    onChange={(target): void => {
+                      setAmount(toNumber(target.currentTarget.value))
+                      limitExceeded(target.currentTarget.value)
+                    }}
+                  />
+                  <FormErrorMessage>Required</FormErrorMessage>
+                </FormControl>
 
+                <Button
+                  w="full"
+                  borderRadius="1.5rem"
+                  type="submit"
+                  variant="primary"
+                  isLoading={loading}
+                  mt="1.5rem"
+                  isDisabled={Number(currentBalance) === 0 || isLimitExceeded}
+                >
+                  Deposit
+                </Button>
+              </form>
+            </Box>
+          </>
+        ) : (
+          <Flex flexDir="column" p="1rem" alignItems="center">
+            <Text
+              bg="gray.100"
+              borderRadius="full"
+              mb="0.5rem"
+              mt="0.25rem"
+              w="fit-content"
+              px="0.75rem"
+              py="0.25rem"
+              alignItems="center"
+            >
+              You don't have this asset in your account
+            </Text>
             <Button
               w="full"
               borderRadius="1.5rem"
-              type="submit"
               variant="primary"
-              isLoading={loading}
               mt="1.5rem"
-              isDisabled={Number(currentBalance) === 0 || isLimitExceeded}
+              onClick={accessWallet}
             >
-              Deposit
+              Access my wallet
             </Button>
-          </form>
-        </Box>
+          </Flex>
+        )}
       </Container>
     </Flex>
   )
diff --git a/frontend/src/components/templates/contracts-detail/components/withdraw-details/index.tsx b/frontend/src/components/templates/contracts-detail/components/withdraw-details/index.tsx
index b48fcd13..71556529 100644
--- a/frontend/src/components/templates/contracts-detail/components/withdraw-details/index.tsx
+++ b/frontend/src/components/templates/contracts-detail/components/withdraw-details/index.tsx
@@ -14,18 +14,13 @@ export const WithdrawDetails: React.FC<IWithdrawDetails> = ({
   contractData,
   history,
 }) => {
-
   return (
     <Flex flexDir="column" w="full">
-      <Text fontSize="sm" mb="0.5rem" ms="0.25rem">
-        Deposit info
-      </Text>
       <Flex
         flexDir="column"
         w="full"
         maxW="full"
         gap="0.75rem"
-        mt="0.5rem"
         borderRadius="0.25rem"
         p="1rem"
       >
diff --git a/frontend/src/components/templates/contracts-detail/components/withdraw/index.tsx b/frontend/src/components/templates/contracts-detail/components/withdraw/index.tsx
index 3943b021..9adb5e3b 100644
--- a/frontend/src/components/templates/contracts-detail/components/withdraw/index.tsx
+++ b/frontend/src/components/templates/contracts-detail/components/withdraw/index.tsx
@@ -220,7 +220,7 @@ export const Withdraw: React.FC<IWithdraw> = ({
               mt="1rem"
             >
               <Text color="white" fontSize="sm" w="full" textAlign="center">
-                {isDone ? 'Withdraw' : 'Withdraw premature'}
+                {isDone ? 'Withdraw' : 'Withdraw with penalty'}
               </Text>
             </Button>
           </form>
diff --git a/frontend/src/components/templates/contracts-detail/index.tsx b/frontend/src/components/templates/contracts-detail/index.tsx
index 36fe18b0..7c895f96 100644
--- a/frontend/src/components/templates/contracts-detail/index.tsx
+++ b/frontend/src/components/templates/contracts-detail/index.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { FieldValues, UseFormSetValue } from 'react-hook-form'
 
 import { havePermission } from 'utils'
+import { MAX_PAGE_WIDTH } from 'utils/constants/sizes'
 
 import { ContractInfo } from './components/contract-info'
 import { Deposit } from './components/deposit'
@@ -18,6 +19,8 @@ interface IContractsDetailTemplate {
     data: FieldValues,
     setValue: UseFormSetValue<FieldValues>
   ): Promise<void>
+  accessWallet(): void
+  accessProfile(): void
   contractData: Hooks.UseContractsTypes.IContractData | undefined
   contract: Hooks.UseContractsTypes.IContract | undefined
   loading: boolean
@@ -29,11 +32,15 @@ interface IContractsDetailTemplate {
   deposited: number | undefined
   userPermissions: Hooks.UseAuthTypes.IUserPermission[] | undefined
   currentInVault: string | undefined
+  hasAssetInVault: boolean
+  hasWallet: boolean
 }
 
 export const ContractsDetailTemplate: React.FC<IContractsDetailTemplate> = ({
   onSubmitWithdraw,
   onSubmitDeposit,
+  accessWallet,
+  accessProfile,
   contract,
   contractData,
   isWithdrawing,
@@ -44,10 +51,12 @@ export const ContractsDetailTemplate: React.FC<IContractsDetailTemplate> = ({
   deposited,
   userPermissions,
   currentInVault,
+  hasAssetInVault,
+  hasWallet,
 }) => {
   return (
     <Flex flexDir="column" w="full">
-      <Flex maxW="full" alignSelf="center" flexDir="column" w="full">
+      <Flex maxW={MAX_PAGE_WIDTH} alignSelf="center" flexDir="column" w="full">
         {loading || !contract ? (
           <Skeleton w="full" h="14rem" />
         ) : (
@@ -69,8 +78,6 @@ export const ContractsDetailTemplate: React.FC<IContractsDetailTemplate> = ({
                 maxW="full"
                 gap="2rem"
               >
-                <ContractInfo contract={contract} />
-
                 {contractData?.position &&
                 havePermission(
                   Permissions.INVEST_CERTIFICATE,
@@ -90,6 +97,7 @@ export const ContractsDetailTemplate: React.FC<IContractsDetailTemplate> = ({
                     history={history}
                   />
                 )}
+                <ContractInfo contract={contract} />
               </Container>
               {contractData?.position ? (
                 <Withdraw
@@ -99,7 +107,7 @@ export const ContractsDetailTemplate: React.FC<IContractsDetailTemplate> = ({
                   isDone={!contractData.timeLeft || contractData.timeLeft === 0}
                   withdrawValue={
                     contractData.timeLeft && contractData.timeLeft > 0
-                      ? Number(contractData.position)
+                      ? Number(contractData.estimatedPrematureWithdraw)
                       : Number(contractData.position)
                   }
                   contractData={contractData}
@@ -109,9 +117,13 @@ export const ContractsDetailTemplate: React.FC<IContractsDetailTemplate> = ({
               ) : (
                 <Deposit
                   onSubmit={onSubmitDeposit}
+                  accessWallet={accessWallet}
+                  accessProfile={accessProfile}
                   contract={contract}
                   loading={isDepositing}
                   currentBalance={currentBalance}
+                  hasAssetInVault={hasAssetInVault}
+                  hasWallet={hasWallet}
                 />
               )}
             </Flex>