Open Banking UI

import { usePayment } from '@/hooks/usePayment'
import { PaymentRequest } from '@/types/payment'
 
export function PaymentForm() {
  const { initiatePayment, loading, error } = usePayment()
 
  const handleSubmit = async (data: PaymentRequest) => {
    const result = await initiatePayment({
      creditorAccount: {
        iban: data.iban,
        currency: 'EUR'
      },
      instructedAmount: {
        amount: data.amount,
        currency: 'EUR'
      },
      debtorAccount: {
        iban: userAccount.iban
      },
      remittanceInformationUnstructured: data.description
    })
 
    if (result.success) {
      // Redirect to bank for authorization
      window.location.href = result.authorizationUrl
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <TextField label="Recipient IBAN" name="iban" required />
      <TextField label="Amount" name="amount" type="number" required />
      <TextField label="Description" name="description" />
      <Button type="submit" disabled={loading}>
        Initiate Payment
      </Button>
      {error && <Alert severity="error">{error.message}</Alert>}
    </form>
  )
}

export function SCAHandler() {
  const { completeAuthentication } = useAuth()
  const location = useLocation()
 
  useEffect(() => {
    const params = new URLSearchParams(location.search)
    const code = params.get('code')
    const state = params.get('state')
 
    if (code && state) {
      completeAuthentication({ code, state })
    }
  }, [location])
 
  return

import { generateCodeVerifier, generateCodeChallenge } from '@/utils/pkce'
 
export const useAccountLinking = () => {
  const initiateLink = async (bankId: string) => {
    // Generate PKCE challenge
    const codeVerifier = generateCodeVerifier()
    const codeChallenge = await generateCodeChallenge(codeVerifier)
 
    // Store verifier for callback
    sessionStorage.setItem('code_verifier', codeVerifier)
 
    // Build authorization URL
    const params = new URLSearchParams({
      response_type: 'code'

import { useInfiniteQuery } from '@tanstack/react-query'
import { useVirtual } from 'react-virtual'
 
export function TransactionList({ accountId }) {
  const {
    data,
    fetchNextPage,
    hasNextPage
  } = useInfiniteQuery({
    queryKey: ['transactions', accountId],
    queryFn: ({ pageParam = 0 }) =>
      fetchTransactions(accountId, { offset: pageParam }),
    getNextPageParam: (lastPage) => lastPage.nextOffset
  })
 
  const

import { IntlProvider, FormattedMessage, FormattedNumber } from 'react-intl'
 
export function App() {
  const [locale, setLocale] = useState('en')
  const messages = useMemo(() => require(`./locales/${locale}.json`), [locale])
 
  return (
    <IntlProvider locale={locale} messages={messages}>
      <Router>
        <Routes />
      </Router>
    </IntlProvider

# Development build
npm run build:dev  # Uses .env.dev
 
# Sandbox build
npm run build:sandbox  # Uses .env.sandbox
 
# Production build
npm run build:production  # Uses .env.production

#!/bin/bash
 
# Build for environment
npm run build:${ENV}
 
# Upload to S3
aws --profile=${AWS_PROFILE} s3 sync --delete ./dist s3://pay-${ENV}.acubeapi.com
 
# Invalidate CloudFront cache
aws --profile=${AWS_PROFILE} cloudfront create-invalidation \
  --distribution-id ${DISTRIBUTION_ID} \
  --paths "/*"

import { rest } from 'msw'
 
export const handlers = [
  // Mock payment initiation
  rest.post('/api/payments', (req, res, ctx) => {
    return res(
      ctx.status(201),
      ctx.json({
        paymentId: '123-456-789',
        status: 'pending',
        authorizationUrl: 'https://bank.example.com/auth'
      })
    )
  }),
 
  // Mock account list
  rest.get('/api/accounts', (