feat(frontend): use tenant wallet address prefix in admin UI (#3570)

* feat(frontend): use tenant wallet address prefix setting in create wallet address form

* feat: use proper form values when selecting tenant during WA creation

* fix: fall back on configured open payments url if setting not found

Author: njlie

packages/frontend/app/generated/graphql.ts

@@ -59,6 +59,10 @@ export const listTenants = async (request: Request, args: QueryTenantsArgs) => {
               publicName
               createdAt
               deletedAt
+              settings {
+                key
+                value
+              }
             }
           }
           pageInfo {
@@ -178,6 +182,10 @@ export const getTenantInfo = async (
           publicName
           createdAt
           deletedAt
+          settings {
+            key
+            value
+          }
         }
       }
     `,

packages/frontend/app/lib/api/tenant.server.ts

@@ -120,7 +120,8 @@ export const createWalletAddressSchema = z.object({
   name: z.string().min(1),
   publicName: z.string().optional(),
   asset: z.string().uuid(),
-  tenantId: z.string().uuid().optional()
+  tenantId: z.string().uuid().optional(),
+  waPrefix: z.string().url()
 })
 
 export const updateWalletAddressSchema = z

packages/frontend/app/lib/validate.server.ts

@@ -63,18 +63,18 @@ export default function WalletAddressesPage() {
           <Table.Head columns={['Wallet address', 'Public name', 'Status']} />
           <Table.Body>
             {walletAddresses.edges.length ? (
-              walletAddresses.edges.map((pp) => (
+              walletAddresses.edges.map((wa) => (
                 <Table.Row
-                  key={pp.node.id}
+                  key={wa.node.id}
                   className='cursor-pointer'
-                  onClick={() => navigate(`/wallet-addresses/${pp.node.id}`)}
+                  onClick={() => navigate(`/wallet-addresses/${wa.node.id}`)}
                 >
-                  <Table.Cell>{pp.node.address}</Table.Cell>
+                  <Table.Cell>{wa.node.address}</Table.Cell>
                   <Table.Cell>
                     <div className='flex flex-col'>
-                      {pp.node.publicName ? (
+                      {wa.node.publicName ? (
                         <span className='font-medium'>
-                          {pp.node.publicName}
+                          {wa.node.publicName}
                         </span>
                       ) : (
                         <span className='text-tealish/80'>No public name</span>
@@ -83,9 +83,9 @@ export default function WalletAddressesPage() {
                   </Table.Cell>
                   <Table.Cell>
                     <Badge
-                      color={badgeColorByWalletAddressStatus[pp.node.status]}
+                      color={badgeColorByWalletAddressStatus[wa.node.status]}
                     >
-                      {pp.node.status}
+                      {wa.node.status}
                     </Badge>
                   </Table.Cell>
                 </Table.Row>

packages/frontend/app/routes/wallet-addresses._index.tsx

@@ -20,23 +20,49 @@ import {
 } from '~/shared/utils'
 import { checkAuthAndRedirect } from '../lib/kratos_checks.server'
 import { type LoaderFunctionArgs } from '@remix-run/node'
-import { whoAmI, loadTenants } from '~/lib/api/tenant.server'
+import type { listTenants } from '~/lib/api/tenant.server'
+import { whoAmI, loadTenants, getTenantInfo } from '~/lib/api/tenant.server'
+
+const WALLET_ADDRESS_URL_KEY = 'WALLET_ADDRESS_URL'
+
+const findWASetting = (
+  tenantSettings: Awaited<ReturnType<typeof getTenantInfo>>['settings']
+) => {
+  return tenantSettings.find(
+    (setting) => setting.key === WALLET_ADDRESS_URL_KEY
+  )?.value
+}
+
+const findTenant = (
+  tenants: Awaited<ReturnType<typeof listTenants>>['edges'],
+  tenantId: string
+) => {
+  return tenants.find((tenant) => tenant.node.id === tenantId)
+}
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
   await checkAuthAndRedirect(request.url, cookies)
 
   const assets = await loadAssets(request)
-  const { isOperator } = await whoAmI(request)
+  const { id, isOperator } = await whoAmI(request)
   let tenants
+  let tenantWAPrefix
   if (isOperator) {
-    tenants = await loadTenants(request)
+    const loadedTenants = await loadTenants(request)
+    tenants = loadedTenants.filter(
+      (tenant) => findWASetting(tenant.node.settings) || tenant.node.id === id
+    )
+  } else {
+    const tenant = await getTenantInfo(request, { id })
+    const waPrefixSetting = findWASetting(tenant.settings)
+    tenantWAPrefix = waPrefixSetting ?? getOpenPaymentsUrl()
   }
-  return json({ assets, tenants })
+  return json({ assets, tenants, tenantWAPrefix })
 }
 
 export default function CreateWalletAddressPage() {
-  const { assets, tenants } = useLoaderData<typeof loader>()
+  const { assets, tenants, tenantWAPrefix } = useLoaderData<typeof loader>()
   const response = useActionData<typeof action>()
   const { state } = useNavigation()
   const isSubmitting = state === 'submitting'
@@ -52,6 +78,12 @@ export default function CreateWalletAddressPage() {
     }))
   }
 
+  const currentTenant =
+    tenants && tenantId ? findTenant(tenants, tenantId.value) : null
+  const waPrefix = currentTenant
+    ? findWASetting(currentTenant.node.settings)
+    : tenantWAPrefix
+
   return (
     <div className='pt-4 flex flex-col space-y-4'>
       <div className='flex flex-col rounded-md bg-offwhite px-6'>
@@ -75,9 +107,14 @@ export default function CreateWalletAddressPage() {
               </div>
               <div className='md:col-span-2 bg-white rounded-md shadow-md'>
                 <div className='w-full p-4 space-y-3'>
+                  <Input
+                    name='waPrefix'
+                    value={waPrefix ?? getOpenPaymentsUrl()}
+                    type={'hidden'}
+                  />
                   <Input
                     required
-                    addOn={getOpenPaymentsUrl()}
+                    addOn={waPrefix ?? getOpenPaymentsUrl()}
                     name='name'
                     label='Wallet address name'
                     placeholder='jdoe'
@@ -158,7 +195,7 @@ export async function action({ request }: ActionFunctionArgs) {
     return json({ errors }, { status: 400 })
   }
 
-  const baseUrl = removeTrailingAndLeadingSlash(getOpenPaymentsUrl())
+  const baseUrl = removeTrailingAndLeadingSlash(result.data.waPrefix)
   const path = removeTrailingAndLeadingSlash(result.data.name)
 
   const response = await createWalletAddress(request, {