feat(wallet/frontend): add gatehub withdrawal; remove rapyd withdrawal feature

packages/wallet/frontend/src/lib/api/account.ts

@@ -5,7 +5,7 @@ import {
   type ErrorResponse,
   type SuccessResponse
 } from '../httpClient'
-import { createAccountSchema, withdrawFundsSchema } from '@wallet/shared'
+import { createAccountSchema } from '@wallet/shared'
 import { WalletAddressResponse } from '@wallet/shared/src'
 
 export type Account = {
@@ -29,18 +29,13 @@ type CreateAccountResult = SuccessResponse<Account>
 type CreateAccountError = ErrorResponse<CreateAccountArgs | undefined>
 type CreateAccountResponse = CreateAccountResult | CreateAccountError
 
-type WithdrawFundsArgs = z.infer<typeof withdrawFundsSchema>
-type WithdrawFundsError = ErrorResponse<WithdrawFundsArgs | undefined>
-type WithdrawFundsResponse = SuccessResponse | WithdrawFundsError
-
 interface AccountService {
   get: (accountId: string, cookies?: string) => Promise<GetAccountResponse>
   list: (
     cookies?: string,
     include?: ('walletAddresses' | 'walletAddressKeys')[]
   ) => Promise<ListAccountsResponse>
   create: (args: CreateAccountArgs) => Promise<CreateAccountResponse>
-  withdraw: (args: WithdrawFundsArgs) => Promise<WithdrawFundsResponse>
 }
 
 const createAccountService = (): AccountService => ({
@@ -97,22 +92,6 @@ const createAccountService = (): AccountService => ({
         'We were not able to create your account. Please try again.'
       )
     }
-  },
-
-  async withdraw(args) {
-    try {
-      const response = await httpClient
-        .post('accounts/withdraw', {
-          json: args
-        })
-        .json<SuccessResponse>()
-      return response
-    } catch (error) {
-      return getError<WithdrawFundsArgs>(
-        error,
-        'We were not able to withdraw the funds. Please try again.'
-      )
-    }
   }
 })
 

packages/wallet/frontend/src/pages/account/[accountId].tsx

@@ -27,7 +27,6 @@ import { PageHeader } from '@/components/PageHeader'
 import { Request } from '@/components/icons/Request'
 import { ListWalletAddressesResponse } from '@wallet/shared/src'
 import { WalletAddressesTable } from '@/components/WalletAddressesTable'
-import { WithdrawFundsDialog } from '@/components/dialogs/WithdrawFundsDialog'
 import { Withdraw } from '@/components/icons/Withdraw'
 import { Link } from '@/ui/Link'
 
@@ -128,23 +127,16 @@ const AccountPage: NextPageWithLayout<AccountPageProps> = ({
                   Deposit
                 </span>
               </Link>
-              <button
+              <Link
                 id="withdraw"
-                onClick={() => {
-                  openDialog(
-                    <WithdrawFundsDialog
-                      account={account}
-                      onClose={closeDialog}
-                    />
-                  )
-                }}
+                href="/withdraw"
                 className="group flex aspect-square min-w-28 flex-shrink-0 flex-grow-0 basis-1/4 flex-col items-center justify-center rounded-lg border-2 text-center transition-[box-shadow] duration-200 dark:hover:shadow-glow-button dark:focus:shadow-glow-button"
               >
                 <Withdraw className="mb-1 h-8 w-8 transition-[filter] duration-200 group-hover:dark:drop-shadow-glow-svg group-focus:dark:drop-shadow-glow-svg" />
                 <span className="text-center text-[smaller] leading-4 underline-offset-2 transition-transform group-hover:scale-110 group-hover:underline group-focus:scale-110 group-focus:underline group-focus:underline-offset-2 dark:group-hover:decoration-transparent">
                   Withdraw
                 </span>
-              </button>
+              </Link>
             </div>
             <h2 className="mb-2 text-2xl font-bold">Payment Pointers</h2>
             {allWalletAddresses.walletAddresses.length > 0 ? (

packages/wallet/frontend/src/pages/withdraw.tsx

@@ -0,0 +1,66 @@
+import { AppLayout } from '@/components/layouts/AppLayout'
+import { PageHeader } from '@/components/PageHeader'
+import { userService } from '@/lib/api/user'
+import { NextPageWithLayout } from '@/lib/types/app'
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next/types'
+import { useEffect } from 'react'
+
+type WithdrawPageProps = InferGetServerSidePropsType<typeof getServerSideProps>
+
+const WithdrawPage: NextPageWithLayout<WithdrawPageProps> = ({ url }) => {
+  useEffect(() => {
+    const onWithdrawComplete = (e: MessageEvent) => {
+      // TODO: Handle the received message from iframe
+      // https://docs.gatehub.net/api-documentation/c3OPAp5dM191CDAdwyYS/gatehub-products/gatehub-onboarding#message-events
+      console.log('received message from iframe', { e })
+    }
+    window.addEventListener('message', onWithdrawComplete, false)
+
+    return () => {
+      window.removeEventListener('message', onWithdrawComplete)
+    }
+  }, [])
+
+  return (
+    <>
+      <PageHeader title="Withdraw" />
+      {/* TODO: Styling */}
+      <iframe
+        src={url}
+        sandbox="allow-top-navigation allow-forms allow-same-origin allow-popups allow-scripts"
+        scrolling="no"
+        frameBorder="0"
+      ></iframe>
+    </>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<{
+  url: string
+}> = async (ctx) => {
+  const response = await userService.getGateHubIframeSrc(
+    { type: 'ramp' },
+    ctx.req.headers.cookie
+  )
+
+  if (!response.success || !response.result) {
+    return {
+      notFound: true
+    }
+  }
+
+  const url = new URL(response.result.url)
+  url.searchParams.append('paymentType', 'withdraw')
+
+  return {
+    props: {
+      url: url.href
+    }
+  }
+}
+
+WithdrawPage.getLayout = function (page) {
+  return <AppLayout>{page}</AppLayout>
+}
+
+export default WithdrawPage

packages/wallet/shared/src/types/account.ts

@@ -1,17 +1,5 @@
 import { z } from 'zod'
 
-// TODO: Remove this when adding GateHub withdraw
-export const fundAccountSchema = z.object({
-  accountId: z.string().uuid(),
-  amount: z.coerce
-    .number({
-      invalid_type_error: 'Please enter a valid amount'
-    })
-    .positive({ message: 'Please enter an amount' })
-})
-
-export const withdrawFundsSchema = fundAccountSchema
-
 export const createAccountSchema = z.object({
   name: z
     .string()