CheesecakeLabs · lucasmagnus · Feb 6, 2024 · Feb 6, 2024 · Feb 6, 2024 · Feb 6, 2024
diff --git a/frontend/.idea/workspace.xml b/frontend/.idea/workspace.xml
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -72,6 +72,7 @@
     "@testing-library/user-event": "~14.4.3",
     "@trivago/prettier-plugin-sort-imports": "~4.1.1",
     "@types/enzyme": "^3.10.12",
+    "@types/feather-icons": "^4.29.4",
     "@types/jest": "~29.4.1",
     "@types/lodash": "^4.14.191",
     "@types/node": "~18.15.3",

diff --git a/frontend/src/app/core/pages/asset-home/index.tsx b/frontend/src/app/core/pages/asset-home/index.tsx
@@ -102,7 +102,7 @@ export const AssetHome: React.FC = () => {
   }
 
   return (
-    <Flex>
+    <Flex pb="3.5rem">
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <Flex
           flexDir={{ base: 'column-reverse', md: 'row' }}
@@ -117,12 +117,10 @@ export const AssetHome: React.FC = () => {
             />
           )}
           <Flex maxW="966px" flexDir="column" w="full">
-            <Flex justifyContent="space-between" w="full" alignItems="center">
-              <ManagementBreadcrumb title={'Asset home'} />
-              {id && isSmallerThanMd && (
-                <MenuActionsAssetMobile id={id} selected={'HOME'} />
-              )}
-            </Flex>
+            <ManagementBreadcrumb title={'Asset home'} />
+            {id && isSmallerThanMd && (
+              <MenuActionsAssetMobile id={id} selected={'HOME'} />
+            )}
             {loadingAsset || !asset ? (
               <Skeleton h="15rem" />
             ) : (

diff --git a/frontend/src/app/core/pages/authorize-account/index.tsx b/frontend/src/app/core/pages/authorize-account/index.tsx
@@ -160,7 +160,7 @@ export const AuthorizeAccount: React.FC = () => {
   }, [])
 
   return (
-    <Flex>
+    <Flex pb="3.5rem">
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <Flex
           flexDir={{ base: 'column-reverse', md: 'row' }}
@@ -175,13 +175,10 @@ export const AuthorizeAccount: React.FC = () => {
             />
           )}
           <Flex maxW="966px" flexDir="column" w="full">
-            <Flex justifyContent="space-between" w="full" alignItems="center">
-              <ManagementBreadcrumb title={'Authorize'} />
-              {id && isSmallerThanMd && (
-                <MenuActionsAssetMobile id={id} selected={'AUTHORIZE'} />
-              )}
-            </Flex>
-
+            <ManagementBreadcrumb title={'Authorize'} />
+            {id && isSmallerThanMd && (
+              <MenuActionsAssetMobile id={id} selected={'AUTHORIZE'} />
+            )}
             {(loadingAsset && !asset) || !asset ? (
               <Skeleton h="15rem" />
             ) : (

diff --git a/frontend/src/app/core/pages/burn-asset/index.tsx b/frontend/src/app/core/pages/burn-asset/index.tsx
@@ -141,7 +141,7 @@ export const BurnAsset: React.FC = () => {
   }
 
   return (
-    <Flex>
+    <Flex pb="3.5rem">
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <Flex
           flexDir={{ base: 'column-reverse', md: 'row' }}
@@ -153,12 +153,10 @@ export const BurnAsset: React.FC = () => {
             <ActionHelper title={'About Burn'} description={burnHelper} />
           )}
           <Flex maxW="966px" flexDir="column" w="full">
-            <Flex justifyContent="space-between" w="full" alignItems="center">
-              <ManagementBreadcrumb title={'Burn'} />
-              {id && isSmallerThanMd && (
-                <MenuActionsAssetMobile id={id} selected={'BURN'} />
-              )}
-            </Flex>
+            <ManagementBreadcrumb title={'Burn'} />
+            {id && isSmallerThanMd && (
+              <MenuActionsAssetMobile id={id} selected={'BURN'} />
+            )}
             {(loadingAsset && !asset) || !asset ? (
               <Skeleton h="15rem" />
             ) : (

diff --git a/frontend/src/app/core/pages/clawback-asset/index.tsx b/frontend/src/app/core/pages/clawback-asset/index.tsx
@@ -11,6 +11,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 
 import { useAssets } from 'hooks/useAssets'
 import { useAuth } from 'hooks/useAuth'
+import { useHorizon } from 'hooks/useHorizon'
 import { useVaults } from 'hooks/useVaults'
 import { havePermission } from 'utils'
 import { clawbackHelper } from 'utils/constants/helpers'
@@ -32,12 +33,18 @@ export const ClawbackAsset: React.FC = () => {
   const [asset, setAsset] = useState<Hooks.UseAssetsTypes.IAssetDto>()
   const [isLargerThanMd] = useMediaQuery('(min-width: 768px)')
   const [isSmallerThanMd] = useMediaQuery('(max-width: 768px)')
+  const [vaults, setVaults] = useState<
+    Hooks.UseVaultsTypes.IVault[] | undefined
+  >([])
+  const [wallet, setWallet] = useState<string | undefined>()
+  const [walletBalance, setWalletBalance] = useState<string | undefined>()
 
   const { clawback, getAssetById, loadingOperation, loadingAsset } = useAssets()
   const { loadingUserPermissions, userPermissions, getUserPermissions } =
     useAuth()
   const { id } = useParams()
-  const { vaults, getVaults } = useVaults()
+  const { getVaults } = useVaults()
+  const { getAccountData } = useHorizon()
   const toast = useToast()
   const navigate = useNavigate()
 
@@ -98,8 +105,22 @@ export const ClawbackAsset: React.FC = () => {
   }
 
   useEffect(() => {
-    getVaults()
-  }, [getVaults])
+    if (asset) {
+      getVaults(true).then(
+        (result: Hooks.UseVaultsTypes.IVault[] | undefined) => {
+          setVaults(
+            result?.filter(vaultsData =>
+              vaultsData.accountData?.balances.find(
+                balance =>
+                  balance.asset_code === asset?.code &&
+                  balance.asset_issuer === asset?.issuer.key.publicKey
+              )
+            ) || []
+          )
+        }
+      )
+    }
+  }, [getVaults, asset])
 
   useEffect(() => {
     if (id) {
@@ -119,8 +140,22 @@ export const ClawbackAsset: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useEffect(() => {
+    if (wallet) {
+      getAccountData(wallet).then(accountData => {
+        const balance = accountData?.balances.find(
+          balance =>
+            balance.asset_code === asset?.code &&
+            balance.asset_issuer === asset?.issuer.key.publicKey
+        )?.balance
+
+        setWalletBalance(balance)
+      })
+    }
+  }, [wallet, asset?.code, asset?.issuer.key.publicKey, getAccountData])
+
   return (
-    <Flex>
+    <Flex pb="3.5rem">
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <Flex
           flexDir={{ base: 'column-reverse', md: 'row' }}
@@ -135,21 +170,22 @@ export const ClawbackAsset: React.FC = () => {
             />
           )}
           <Flex maxW="966px" flexDir="column" w="full">
-            <Flex justifyContent="space-between" w="full" alignItems="center">
-              <ManagementBreadcrumb title={'Clawback'} />
-              {id && isSmallerThanMd && (
-                <MenuActionsAssetMobile id={id} selected={'CLAWBACK'} />
-              )}
-            </Flex>
+            <ManagementBreadcrumb title={'Clawback'} />
+            {id && isSmallerThanMd && (
+              <MenuActionsAssetMobile id={id} selected={'CLAWBACK'} />
+            )}
             {loadingAsset || !asset ? (
               <Skeleton h="15rem" />
             ) : (
               <ClawbackAssetTemplate
                 onSubmit={onSubmit}
+                setWallet={setWallet}
                 loading={loadingOperation}
                 asset={asset}
                 vaults={vaults}
                 assetData={asset.assetData}
+                wallet={wallet}
+                walletBalance={walletBalance}
               />
             )}
           </Flex>

diff --git a/frontend/src/app/core/pages/contracts-create/index.tsx b/frontend/src/app/core/pages/contracts-create/index.tsx
@@ -95,7 +95,7 @@ export const ContractsCreate: React.FC = () => {
       if (!codContractId) throw new Error('Invalid Contract ID')
 
       const contract = {
-        name: 'Certificate of Deposit',
+        name: 'Yield-bearing asset',
         asset_id: asset.id.toString(),
         vault_id: vault.id.toString(),
         address: codClient.getContractId() || '',

diff --git a/frontend/src/app/core/pages/distribute-asset/index.tsx b/frontend/src/app/core/pages/distribute-asset/index.tsx
@@ -171,7 +171,7 @@ export const DistributeAsset: React.FC = () => {
   }, [])
 
   return (
-    <Flex>
+    <Flex pb="3.5rem">
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <Flex
           flexDir={{ base: 'column-reverse', md: 'row' }}
@@ -186,13 +186,10 @@ export const DistributeAsset: React.FC = () => {
             />
           )}
           <Flex maxW="966px" flexDir="column" w="full">
-            <Flex justifyContent="space-between" w="full" alignItems="center">
-              <ManagementBreadcrumb title={'Distribute'} />
-              {id && isSmallerThanMd && (
-                <MenuActionsAssetMobile id={id} selected={'DISTRIBUTE'} />
-              )}
-            </Flex>
-
+            <ManagementBreadcrumb title={'Distribute'} />
+            {id && isSmallerThanMd && (
+              <MenuActionsAssetMobile id={id} selected={'DISTRIBUTE'} />
+            )}
             {(loadingAsset && !asset) || !asset ? (
               <Skeleton h="15rem" />
             ) : (

diff --git a/frontend/src/app/core/pages/forge-asset/index.tsx b/frontend/src/app/core/pages/forge-asset/index.tsx
@@ -25,15 +25,16 @@ export const ForgeAsset: React.FC = () => {
 
   const onSubmit = async (
     data: FieldValues,
-    setValue: UseFormSetValue<FieldValues>
+    setValue: UseFormSetValue<FieldValues>,
+    flags: string[]
   ): Promise<void> => {
     try {
       const asset = {
         name: data.name,
         code: data.code,
         amount: data.initial_supply,
         asset_type: data.asset_type,
-        set_flags: data.control_mechanisms || [],
+        set_flags: flags,
         image: selectedFile ? await toBase64(selectedFile) : null,
       }
       const assetForged = await forge(asset)

diff --git a/frontend/src/app/core/pages/freeze-account/index.tsx b/frontend/src/app/core/pages/freeze-account/index.tsx
@@ -150,7 +150,7 @@ export const FreezeAccount: React.FC = () => {
   }, [])
 
   return (
-    <Flex>
+    <Flex pb="3.5rem">
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <Flex
           flexDir={{ base: 'column-reverse', md: 'row' }}
@@ -162,12 +162,10 @@ export const FreezeAccount: React.FC = () => {
             <ActionHelper title={'About Freeze'} description={freezeHelper} />
           )}
           <Flex maxW="966px" flexDir="column" w="full">
-            <Flex justifyContent="space-between" w="full" alignItems="center">
-              <ManagementBreadcrumb title={'Freeze'} />
-              {id && isSmallerThanMd && (
-                <MenuActionsAssetMobile id={id} selected={'FREEZE'} />
-              )}
-            </Flex>
+            <ManagementBreadcrumb title={'Freeze'} />
+            {id && isSmallerThanMd && (
+              <MenuActionsAssetMobile id={id} selected={'FREEZE'} />
+            )}
             {(loadingAsset && !asset) || !asset ? (
               <Skeleton h="15rem" />
             ) : (

diff --git a/frontend/src/app/core/pages/mint-asset/index.tsx b/frontend/src/app/core/pages/mint-asset/index.tsx
@@ -141,7 +141,7 @@ export const MintAsset: React.FC = () => {
   }
 
   return (
-    <Flex>
+    <Flex pb="3.5rem">
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <Flex
           flexDir={{ base: 'column-reverse', md: 'row' }}
@@ -153,12 +153,10 @@ export const MintAsset: React.FC = () => {
             <ActionHelper title={'About Mint'} description={mintHelper} />
           )}
           <Flex maxW="966px" flexDir="column" w="full">
-            <Flex justifyContent="space-between" w="full" alignItems="center">
-              <ManagementBreadcrumb title={'Mint'} />
-              {id && isSmallerThanMd && (
-                <MenuActionsAssetMobile id={id} selected={'MINT'} />
-              )}
-            </Flex>
+            <ManagementBreadcrumb title={'Mint'} />
+            {id && isSmallerThanMd && (
+              <MenuActionsAssetMobile id={id} selected={'MINT'} />
+            )}
             {(loadingAsset && !asset) || !asset ? (
               <Skeleton h="15rem" />
             ) : (

diff --git a/frontend/src/app/core/pages/publish-information/index.tsx b/frontend/src/app/core/pages/publish-information/index.tsx
@@ -126,7 +126,7 @@ export const PublishInformation: React.FC = () => {
   }
 
   return (
-    <Flex>
+    <Flex pb="3.5rem">
       <Sidebar highlightMenu={PathRoute.TOKEN_MANAGEMENT}>
         <Flex
           flexDir={{ base: 'column-reverse', md: 'row' }}
@@ -135,15 +135,13 @@ export const PublishInformation: React.FC = () => {
           gap="1.5rem"
         >
           <Flex maxW="966px" flexDir="column" w="full">
-            <Flex justifyContent="space-between" w="full" alignItems="center">
-              <ManagementBreadcrumb title={'Publish information'} />
-              {id && isSmallerThanMd && (
-                <MenuActionsAssetMobile
-                  id={id}
-                  selected={'PUBLISH_INFORMATION'}
-                />
-              )}
-            </Flex>
+            <ManagementBreadcrumb title={'Publish information'} />
+            {id && isSmallerThanMd && (
+              <MenuActionsAssetMobile
+                id={id}
+                selected={'PUBLISH_INFORMATION'}
+              />
+            )}
             {(loadingAsset && !asset) || !asset ? (
               <Skeleton h="15rem" />
             ) : (