From 0198a914668ee9205e215dc37dff4aa5aa7410b8 Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Thu, 18 Jul 2024 12:37:14 -0600
Subject: [PATCH] fix(frontend): [assets] getting asset details in loader of
 deposit and withdraw liquidity components

---
 .../assets.$assetId.deposit-liquidity.tsx     | 27 +++++++++++++++----
 .../assets.$assetId.withdraw-liquidity.tsx    | 27 +++++++++++++++----
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx b/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
index 64b86ac5aa..a14f5c62f3 100644
--- a/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
+++ b/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
@@ -1,28 +1,45 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
-import { useNavigate } from '@remix-run/react'
+import { json, type ActionFunctionArgs } from '@remix-run/node'
+import { useLoaderData, useNavigate } from '@remix-run/react'
 import { v4 } from 'uuid'
 import { LiquidityDialog } from '~/components/LiquidityDialog'
-import { depositAssetLiquidity } from '~/lib/api/asset.server'
+import { depositAssetLiquidity, getAssetInfo } from '~/lib/api/asset.server'
 import { messageStorage, setMessageAndRedirect } from '~/lib/message.server'
 import { amountSchema } from '~/lib/validate.server'
 import { redirectIfUnauthorizedAccess } from '../lib/kratos_checks.server'
 import { type LoaderFunctionArgs } from '@remix-run/node'
+import { z } from 'zod'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
   await redirectIfUnauthorizedAccess(request.url, cookies)
-  return null
+
+  const assetId = params.assetId
+
+  const result = z.string().uuid().safeParse(assetId)
+  if (!result.success) {
+    throw json(null, { status: 400, statusText: 'Invalid asset ID.' })
+  }
+
+  const asset = await getAssetInfo({ id: result.data })
+
+  if (!asset) {
+    throw json(null, { status: 404, statusText: 'Asset not found.' })
+  }
+
+  return json({ asset })
 }
 
 export default function AssetDepositLiquidity() {
   const navigate = useNavigate()
   const dismissDialog = () => navigate('..', { preventScrollReset: true })
+  const { asset } = useLoaderData<typeof loader>()
 
   return (
     <LiquidityDialog
       onClose={dismissDialog}
       title='Deposit asset liquidity'
       type='Deposit'
+      asset={asset}
     />
   )
 }
diff --git a/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx b/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
index c8b4a8d7a1..e6fbbb9c08 100644
--- a/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
+++ b/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
@@ -1,28 +1,45 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
-import { useNavigate } from '@remix-run/react'
+import { json, type ActionFunctionArgs } from '@remix-run/node'
+import { useLoaderData, useNavigate } from '@remix-run/react'
 import { v4 } from 'uuid'
 import { LiquidityDialog } from '~/components/LiquidityDialog'
-import { withdrawAssetLiquidity } from '~/lib/api/asset.server'
+import { getAssetInfo, withdrawAssetLiquidity } from '~/lib/api/asset.server'
 import { messageStorage, setMessageAndRedirect } from '~/lib/message.server'
 import { amountSchema } from '~/lib/validate.server'
 import { redirectIfUnauthorizedAccess } from '~/lib/kratos_checks.server'
 import { type LoaderFunctionArgs } from '@remix-run/node'
+import { z } from 'zod'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
   await redirectIfUnauthorizedAccess(request.url, cookies)
-  return null
+
+  const assetId = params.assetId
+
+  const result = z.string().uuid().safeParse(assetId)
+  if (!result.success) {
+    throw json(null, { status: 400, statusText: 'Invalid asset ID.' })
+  }
+
+  const asset = await getAssetInfo({ id: result.data })
+
+  if (!asset) {
+    throw json(null, { status: 404, statusText: 'Asset not found.' })
+  }
+
+  return json({ asset })
 }
 
 export default function AssetWithdrawLiquidity() {
   const navigate = useNavigate()
   const dismissDialog = () => navigate('..', { preventScrollReset: true })
+  const { asset } = useLoaderData<typeof loader>()
 
   return (
     <LiquidityDialog
       onClose={dismissDialog}
       title='Withdraw asset liquidity'
       type='Withdraw'
+      asset={asset}
     />
   )
 }