From 9407b3b46bc4c0b839a2de76d8bfbed9fb875e7a Mon Sep 17 00:00:00 2001
From: Anil Gangapersaud <anil.gangapersaud@circle.com>
Date: Wed, 24 Sep 2025 21:30:38 +0000
Subject: [PATCH 1/2] add cps fund api to sample app

---
 layouts/default.vue       |   4 +
 lib/cpsTradesApi.ts       |  48 +++++
 pages/debug/cps/fund.vue  | 358 ++++++++++++++++++++++++++++++++++++++
 pages/debug/cps/index.vue |   4 +
 4 files changed, 414 insertions(+)
 create mode 100644 pages/debug/cps/fund.vue

diff --git a/layouts/default.vue b/layouts/default.vue
index ae6d7be7..df4697b1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -467,6 +467,10 @@ const cpsTradesLinks = [
     title: 'POST /cps/signatures/funding/presign',
     to: '/debug/cps/funding-presign',
   },
+  {
+    title: 'POST /cps/fund',
+    to: '/debug/cps/fund',
+  },
 ]
 
 const miniVariant = ref(false)
diff --git a/lib/cpsTradesApi.ts b/lib/cpsTradesApi.ts
index 1c4ea5b0..3d6b85b0 100644
--- a/lib/cpsTradesApi.ts
+++ b/lib/cpsTradesApi.ts
@@ -50,6 +50,39 @@ export interface FundingPresignPayload {
   traderType: 'maker' | 'taker'
 }
 
+export interface SingleTradeWitnessPermit2 {
+  permitted: {
+    token: string
+    amount: number
+  }
+  spender: string
+  nonce: number
+  deadline: number
+  witness: {
+    id: number
+  }
+}
+
+export interface BatchTradeWitnessPermit2 {
+  permitted: Array<{
+    token: string
+    amount: number
+  }>
+  spender: string
+  nonce: number
+  deadline: number
+  witness: {
+    ids: number[]
+  }
+}
+
+export interface CpsFundPayload {
+  type: 'maker' | 'taker'
+  signature: string
+  fundingMode: 'gross' | 'net'
+  permit2: SingleTradeWitnessPermit2 | BatchTradeWitnessPermit2
+}
+
 const instance = axios.create({
   baseURL: getAPIHostname(),
 })
@@ -57,6 +90,7 @@ const instance = axios.create({
 const CPS_TRADES_PATH = '/v1/exchange/cps/trades'
 const CPS_QUOTES_PATH = '/v1/exchange/cps/quotes'
 const CPS_SIGNATURES_PATH = '/v1/exchange/cps/signatures'
+const CPS_FUND_PATH = '/v1/exchange/cps/fund'
 
 /**
  * Global error handler:
@@ -178,6 +212,19 @@ function getFundingPresignData(payload: FundingPresignPayload) {
   return instance.post(url, payload)
 }
 
+/**
+ * Fund CPS Trade
+ * Note: 'net' funding mode is only available for makers
+ */
+function fund(payload: CpsFundPayload) {
+  // Validate that net funding mode is only used with makers
+  if (payload.fundingMode === 'net' && payload.type !== 'maker') {
+    throw new Error('Net funding mode is only available for makers')
+  }
+
+  return instance.post(CPS_FUND_PATH, payload)
+}
+
 export default {
   getInstance,
   createQuote,
@@ -187,4 +234,5 @@ export default {
   registerSignature,
   getPresignData,
   getFundingPresignData,
+  fund,
 }
diff --git a/pages/debug/cps/fund.vue b/pages/debug/cps/fund.vue
new file mode 100644
index 00000000..bfd3b4dc
--- /dev/null
+++ b/pages/debug/cps/fund.vue
@@ -0,0 +1,358 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" md="4">
+        <v-form v-model="validForm">
+          <v-select
+            v-model="formData.type"
+            :items="typeOptions"
+            :rules="[required]"
+            label="Type"
+          />
+
+          <v-text-field
+            v-model="formData.signature"
+            :rules="[required]"
+            label="Signature"
+            placeholder="Enter signature string"
+          />
+
+          <v-select
+            v-model="formData.fundingMode"
+            :items="fundingModeOptions"
+            :rules="[required, validateNetMode]"
+            label="Funding Mode"
+          />
+
+          <v-select
+            v-model="formData.permit2Type"
+            :items="permit2TypeOptions"
+            :rules="[required]"
+            label="Permit2 Type"
+          />
+
+          <!-- Single Trade Witness Fields -->
+          <div v-if="formData.permit2Type === 'single'">
+            <v-divider class="my-4" />
+            <h3 class="subtitle-1 mb-2">Single Trade Witness Permit2</h3>
+            
+            <v-text-field
+              v-model="formData.single.permitted.token"
+              :rules="[required]"
+              label="Token Address"
+              placeholder="0x1c7d4b196cb0c7b01d743fbc6116a902379c7238"
+            />
+
+            <v-text-field
+              v-model.number="formData.single.permitted.amount"
+              :rules="[required, numberRule]"
+              label="Amount"
+              type="number"
+              placeholder="570000"
+            />
+
+            <v-text-field
+              v-model="formData.single.spender"
+              :rules="[required]"
+              label="Spender Address"
+              placeholder="0x1f91886C7028986aD885ffCee0e40b75C9cd5aC1"
+            />
+
+            <v-text-field
+              v-model.number="formData.single.nonce"
+              :rules="[required, numberRule]"
+              label="Nonce"
+              type="number"
+              placeholder="60410883"
+            />
+
+            <v-text-field
+              v-model.number="formData.single.deadline"
+              :rules="[required, numberRule]"
+              label="Deadline"
+              type="number"
+              placeholder="1757608742"
+            />
+
+            <v-text-field
+              v-model.number="formData.single.witness.id"
+              :rules="[required, numberRule]"
+              label="Witness ID"
+              type="number"
+              placeholder="24"
+            />
+          </div>
+
+          <!-- Batch Trade Witness Fields -->
+          <div v-if="formData.permit2Type === 'batch'">
+            <v-divider class="my-4" />
+            <h3 class="subtitle-1 mb-2">Batch Trade Witness Permit2</h3>
+            
+            <!-- Permitted Tokens Section -->
+            <div class="mb-4">
+              <div class="d-flex justify-space-between align-center mb-2">
+                <h4 class="subtitle-2">Permitted Tokens</h4>
+                <v-btn
+                  size="small"
+                  color="primary"
+                  variant="outlined"
+                  @click="addPermittedToken"
+                >
+                  Add Token
+                </v-btn>
+              </div>
+              
+              <div
+                v-for="(token, index) in formData.batch.permittedTokens"
+                :key="index"
+                class="mb-3 pa-3 border rounded"
+              >
+                <div class="d-flex justify-space-between align-center mb-2">
+                  <span class="subtitle-2">Token {{ index + 1 }}</span>
+                  <v-btn
+                    v-if="formData.batch.permittedTokens.length > 1"
+                    size="small"
+                    color="error"
+                    variant="text"
+                    icon="mdi-delete"
+                    @click="removePermittedToken(index)"
+                  />
+                </div>
+                
+                <v-text-field
+                  v-model="token.token"
+                  :rules="[required]"
+                  label="Token Address"
+                  placeholder="0x1c7d4b196cb0c7b01d743fbc6116a902379c7238"
+                  class="mb-2"
+                />
+                
+                <v-text-field
+                  v-model.number="token.amount"
+                  :rules="[required, numberRule]"
+                  label="Amount"
+                  type="number"
+                  placeholder="570000"
+                />
+              </div>
+            </div>
+
+            <v-text-field
+              v-model="formData.batch.spender"
+              :rules="[required]"
+              label="Spender Address"
+              placeholder="0x1f91886C7028986aD885ffCee0e40b75C9cd5aC1"
+            />
+
+            <v-text-field
+              v-model.number="formData.batch.nonce"
+              :rules="[required, numberRule]"
+              label="Nonce"
+              type="number"
+              placeholder="60410883"
+            />
+
+            <v-text-field
+              v-model.number="formData.batch.deadline"
+              :rules="[required, numberRule]"
+              label="Deadline"
+              type="number"
+              placeholder="1757608742"
+            />
+
+            <v-text-field
+              v-model="formData.batch.witnessIds"
+              :rules="[required]"
+              label="Witness IDs"
+              placeholder="24,25,26"
+              hint="Enter comma-separated numbers"
+              persistent-hint
+            />
+          </div>
+
+          <v-btn
+            variant="flat"
+            class="mb-7 mt-4"
+            color="primary"
+            :loading="loading"
+            :disabled="!validForm || loading"
+            block
+            @click.prevent="makeApiCall"
+          >
+            Fund CPS Trade
+          </v-btn>
+        </v-form>
+      </v-col>
+      <v-col cols="12" md="8">
+        <RequestInfo
+          :url="requestUrl"
+          :payload="payload"
+          :response="response"
+        />
+      </v-col>
+    </v-row>
+    <ErrorSheet
+      :error="error"
+      :show-error="showError"
+      @on-change="onErrorSheetClosed"
+    />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import type { CpsFundPayload, SingleTradeWitnessPermit2, BatchTradeWitnessPermit2 } from '~/lib/cpsTradesApi'
+
+const store = useMainStore()
+const { $cpsTradesApi } = useNuxtApp()
+
+const validForm = ref(false)
+const formData = reactive({
+  type: '' as 'maker' | 'taker' | '',
+  signature: '',
+  fundingMode: '' as 'gross' | 'net' | '',
+  permit2Type: '' as 'single' | 'batch' | '',
+  single: {
+    permitted: {
+      token: '',
+      amount: 0,
+    },
+    spender: '',
+    nonce: 0,
+    deadline: 0,
+    witness: {
+      id: 0,
+    },
+  },
+  batch: {
+    permittedTokens: [
+      {
+        token: '',
+        amount: 0,
+      },
+    ],
+    spender: '',
+    nonce: 0,
+    deadline: 0,
+    witnessIds: '',
+  },
+})
+
+const typeOptions = [
+  { title: 'Maker', value: 'maker' },
+  { title: 'Taker', value: 'taker' },
+]
+
+const fundingModeOptions = [
+  { title: 'Gross', value: 'gross' },
+  { title: 'Net', value: 'net' },
+]
+
+const permit2TypeOptions = [
+  { title: 'Single Trade Witness', value: 'single' },
+  { title: 'Batch Trade Witness', value: 'batch' },
+]
+
+const error = ref<any>({})
+const loading = ref(false)
+const showError = ref(false)
+
+const payload = computed(() => store.getRequestPayload)
+const response = computed(() => store.getRequestResponse)
+const requestUrl = computed(() => store.getRequestUrl)
+
+const required = (v: string | number) => !!v || 'Field is required'
+const numberRule = (v: number) => !isNaN(v) && v > 0 || 'Must be a positive number'
+
+const validateNetMode = (v: string) => {
+  if (v === 'net' && formData.type !== 'maker') {
+    return 'Net funding mode is only available for makers'
+  }
+  return true
+}
+
+const onErrorSheetClosed = () => {
+  error.value = {}
+  showError.value = false
+}
+
+const addPermittedToken = () => {
+  formData.batch.permittedTokens.push({
+    token: '',
+    amount: 0,
+  })
+}
+
+const removePermittedToken = (index: number) => {
+  if (formData.batch.permittedTokens.length > 1) {
+    formData.batch.permittedTokens.splice(index, 1)
+  }
+}
+
+const makeApiCall = async () => {
+  loading.value = true
+
+  try {
+    let permit2: SingleTradeWitnessPermit2 | BatchTradeWitnessPermit2
+
+    if (formData.permit2Type === 'single') {
+      permit2 = {
+        permitted: {
+          token: formData.single.permitted.token,
+          amount: formData.single.permitted.amount,
+        },
+        spender: formData.single.spender,
+        nonce: formData.single.nonce,
+        deadline: formData.single.deadline,
+        witness: {
+          id: formData.single.witness.id,
+        },
+      }
+    } else {
+      // Use the permitted tokens array directly
+      const permittedTokens = formData.batch.permittedTokens.map(token => ({
+        token: token.token,
+        amount: token.amount,
+      }))
+      
+      // Parse witness IDs
+      const witnessIds = formData.batch.witnessIds
+        .split(',')
+        .map((id) => parseInt(id.trim()))
+        .filter((id) => !isNaN(id))
+
+      permit2 = {
+        permitted: permittedTokens,
+        spender: formData.batch.spender,
+        nonce: formData.batch.nonce,
+        deadline: formData.batch.deadline,
+        witness: {
+          ids: witnessIds,
+        },
+      }
+    }
+
+    const payloadData: CpsFundPayload = {
+      type: formData.type as 'maker' | 'taker',
+      signature: formData.signature,
+      fundingMode: formData.fundingMode as 'gross' | 'net',
+      permit2,
+    }
+
+    await $cpsTradesApi.fund(payloadData)
+  } catch (err) {
+    error.value = err
+    showError.value = true
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.border {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+.rounded {
+  border-radius: 4px;
+}
+</style>
diff --git a/pages/debug/cps/index.vue b/pages/debug/cps/index.vue
index 1949c6e6..66d0ad49 100644
--- a/pages/debug/cps/index.vue
+++ b/pages/debug/cps/index.vue
@@ -50,6 +50,10 @@
           <v-chip small color="primary warning">POST</v-chip>
           <a href="/debug/cps/funding-presign">Get presign data for funding</a>
         </p>
+        <p>
+          <v-chip small color="primary warning">POST</v-chip>
+          <a href="/debug/cps/fund">Fund CPS Trade</a>
+        </p>
       </v-card>
     </v-col>
   </v-container>

From dc02f1f5d4ca3f6ab7ff528ab4f1fc6f1563e822 Mon Sep 17 00:00:00 2001
From: Anil Gangapersaud <anil.gangapersaud@circle.com>
Date: Wed, 24 Sep 2025 21:36:48 +0000
Subject: [PATCH 2/2] lint

---
 pages/debug/cps/fund.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/pages/debug/cps/fund.vue b/pages/debug/cps/fund.vue
index bfd3b4dc..a13ed18d 100644
--- a/pages/debug/cps/fund.vue
+++ b/pages/debug/cps/fund.vue
@@ -35,7 +35,7 @@
           <div v-if="formData.permit2Type === 'single'">
             <v-divider class="my-4" />
             <h3 class="subtitle-1 mb-2">Single Trade Witness Permit2</h3>
-            
+
             <v-text-field
               v-model="formData.single.permitted.token"
               :rules="[required]"
@@ -87,7 +87,7 @@
           <div v-if="formData.permit2Type === 'batch'">
             <v-divider class="my-4" />
             <h3 class="subtitle-1 mb-2">Batch Trade Witness Permit2</h3>
-            
+
             <!-- Permitted Tokens Section -->
             <div class="mb-4">
               <div class="d-flex justify-space-between align-center mb-2">
@@ -101,7 +101,7 @@
                   Add Token
                 </v-btn>
               </div>
-              
+
               <div
                 v-for="(token, index) in formData.batch.permittedTokens"
                 :key="index"
@@ -118,7 +118,7 @@
                     @click="removePermittedToken(index)"
                   />
                 </div>
-                
+
                 <v-text-field
                   v-model="token.token"
                   :rules="[required]"
@@ -126,7 +126,7 @@
                   placeholder="0x1c7d4b196cb0c7b01d743fbc6116a902379c7238"
                   class="mb-2"
                 />
-                
+
                 <v-text-field
                   v-model.number="token.amount"
                   :rules="[required, numberRule]"
@@ -200,7 +200,11 @@
 </template>
 
 <script setup lang="ts">
-import type { CpsFundPayload, SingleTradeWitnessPermit2, BatchTradeWitnessPermit2 } from '~/lib/cpsTradesApi'
+import type {
+  CpsFundPayload,
+  SingleTradeWitnessPermit2,
+  BatchTradeWitnessPermit2,
+} from '~/lib/cpsTradesApi'
 
 const store = useMainStore()
 const { $cpsTradesApi } = useNuxtApp()
@@ -261,7 +265,8 @@ const response = computed(() => store.getRequestResponse)
 const requestUrl = computed(() => store.getRequestUrl)
 
 const required = (v: string | number) => !!v || 'Field is required'
-const numberRule = (v: number) => !isNaN(v) && v > 0 || 'Must be a positive number'
+const numberRule = (v: number) =>
+  (!isNaN(v) && v > 0) || 'Must be a positive number'
 
 const validateNetMode = (v: string) => {
   if (v === 'net' && formData.type !== 'maker') {
@@ -309,11 +314,11 @@ const makeApiCall = async () => {
       }
     } else {
       // Use the permitted tokens array directly
-      const permittedTokens = formData.batch.permittedTokens.map(token => ({
+      const permittedTokens = formData.batch.permittedTokens.map((token) => ({
         token: token.token,
         amount: token.amount,
       }))
-      
+
       // Parse witness IDs
       const witnessIds = formData.batch.witnessIds
         .split(',')