fix: handle new gql schema properly in frontend

Author: njlie

localenv/mock-account-servicing-entity/generated/graphql.ts

@@ -17,6 +17,11 @@ exports.up = function (knex) {
         `DELETE FROM "tenantSettings" WHERE "key" = 'WALLET_ADDRESS_URL'`
       )
     })
+    .then(() => {
+      return knex.raw(
+        `UPDATE "tenants" SET "walletAddressPrefix" = '${process.env.OPEN_PAYMENTS_URL}' WHERE "id" = '${process.env.OPERATOR_TENANT_ID}'`
+      )
+    })
     .then(() => {
       return knex.raw(
         `UPDATE "tenants" SET "walletAddressPrefix" = '${process.env.OPEN_PAYMENTS_URL}/' || gen_random_uuid() WHERE "walletAddressPrefix" IS NULL`

packages/backend/migrations/20250930210751_add_prefix_to_tenant.js

@@ -1592,7 +1592,7 @@ type Tenant implements Model {
   "Public name for the tenant."
   publicName: String
   "Prefix for wallet addresses belonging to this tenant."
-  walletAddressPrefix: String
+  walletAddressPrefix: String!
   "The date and time that this tenant was created."
   createdAt: String!
   "The date and time that this tenant was deleted."

packages/backend/src/graphql/generated/graphql.schema.json

@@ -22,7 +22,7 @@ type SelectProps = {
   defaultValue?: SelectOption
   description?: ReactNode
   onChange?: (value: React.SetStateAction<SelectOption | undefined>) => void
-  bringForward?: boolean
+  bringForward?: 1 | 2
 }
 
 export const Select = ({
@@ -69,7 +69,9 @@ export const Select = ({
       {name ? (
         <input type='hidden' name={name} value={internalValue.value} />
       ) : null}
-      <div className={`relative ${bringForward ? 'forward' : ''}`}>
+      <div
+        className={`relative ${bringForward ? `forward-${bringForward}` : ''}`}
+      >
         {label ? (
           <Combobox.Label as={Label} htmlFor={id} required={required}>
             {label}

packages/backend/src/graphql/generated/graphql.ts

@@ -56,6 +56,7 @@ export const listTenants = async (request: Request, args: QueryTenantsArgs) => {
               apiSecret
               idpConsentUrl
               idpSecret
+              walletAddressPrefix
               publicName
               createdAt
               deletedAt

packages/backend/src/graphql/schema.graphql

@@ -14,25 +14,12 @@ import { createWalletAddress } from '~/lib/api/wallet-address.server'
 import { messageStorage, setMessageAndRedirect } from '~/lib/message.server'
 import { createWalletAddressSchema } from '~/lib/validate.server'
 import type { ZodFieldErrors } from '~/shared/types'
-import {
-  getOpenPaymentsUrl,
-  removeTrailingAndLeadingSlash
-} from '~/shared/utils'
+import { removeTrailingAndLeadingSlash } from '~/shared/utils'
 import { checkAuthAndRedirect } from '../lib/kratos_checks.server'
 import { type LoaderFunctionArgs } from '@remix-run/node'
 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
@@ -49,14 +36,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   let tenants
   let tenantWAPrefix
   if (isOperator) {
-    const loadedTenants = await loadTenants(request)
-    tenants = loadedTenants.filter(
-      (tenant) => findWASetting(tenant.node.settings) || tenant.node.id === id
-    )
+    tenants = await loadTenants(request)
   } else {
     const tenant = await getTenantInfo(request, { id })
-    const waPrefixSetting = findWASetting(tenant.settings)
-    tenantWAPrefix = waPrefixSetting ?? getOpenPaymentsUrl()
+    tenantWAPrefix = tenant.walletAddressPrefix
   }
   return json({ assets, tenants, tenantWAPrefix })
 }
@@ -80,9 +63,6 @@ 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'>
@@ -107,25 +87,6 @@ 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={waPrefix ?? getOpenPaymentsUrl()}
-                    name='name'
-                    label='Wallet address name'
-                    placeholder='jdoe'
-                    error={response?.errors?.fieldErrors.name}
-                  />
-                  <Input
-                    name='publicName'
-                    label='Public name'
-                    placeholder='Public name'
-                    error={response?.errors?.fieldErrors.publicName}
-                  />
                   {tenants ? (
                     <Select
                       options={tenants.map((tenant) => ({
@@ -137,7 +98,7 @@ export default function CreateWalletAddressPage() {
                       label='Tenant'
                       required
                       onChange={(value) => setTenantId(value)}
-                      bringForward
+                      bringForward={2}
                     />
                   ) : (
                     <Select
@@ -150,6 +111,7 @@ export default function CreateWalletAddressPage() {
                       placeholder='Select asset...'
                       label='Asset'
                       required
+                      bringForward={1}
                     />
                   )}
                   {tenants && tenantId && (
@@ -160,8 +122,32 @@ export default function CreateWalletAddressPage() {
                       placeholder='Select asset...'
                       label='Asset'
                       required
+                      bringForward={1}
                     />
                   )}
+                  <Input
+                    name='waPrefix'
+                    value={
+                      currentTenant?.node.walletAddressPrefix ?? tenantWAPrefix
+                    }
+                    type={'hidden'}
+                  />
+                  <Input
+                    required
+                    addOn={
+                      currentTenant?.node.walletAddressPrefix ?? tenantWAPrefix
+                    }
+                    name='name'
+                    label='Wallet address name'
+                    placeholder='jdoe'
+                    error={response?.errors?.fieldErrors.name}
+                  />
+                  <Input
+                    name='publicName'
+                    label='Public name'
+                    placeholder='Public name'
+                    error={response?.errors?.fieldErrors.publicName}
+                  />
                 </div>
               </div>
             </div>

packages/frontend/app/components/ui/Select.tsx

@@ -7,6 +7,10 @@ a.default-link {
   text-decoration: revert;
 }
 
-div.forward {
+div.forward-1 {
   z-index: 1;
 }
+
+div.forward-2 {
+  z-index: 2;
+}