+ );
+}
\ No newline at end of file
diff --git a/agw-onramp/src/components/onramp/SmartAmountInput.tsx b/agw-onramp/src/components/onramp/SmartAmountInput.tsx
new file mode 100644
index 0000000..74de63a
--- /dev/null
+++ b/agw-onramp/src/components/onramp/SmartAmountInput.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { type Currency } from '@/services/onramp';
+import {
+ formatFiatCurrency,
+ isValidAmount,
+ parseAmount
+} from '@/utils/currencyUtils';
+
+interface SmartAmountInputProps {
+ fiatCurrency: Currency; // The fiat currency the user will pay with (USD, EUR, etc.)
+ initialFiatAmount: number; // Starting amount to show in the input
+ limits?: {
+ currencyCode: string;
+ defaultAmount: number;
+ minimumAmount: number; // Smallest amount they can buy
+ maximumAmount: number; // Largest amount they can buy
+ };
+ onAmountChange: (fiatAmount: number, cryptoAmount: number) => void; // Called when user changes amount
+ onValidationChange?: (isValid: boolean) => void; // Called when validation status changes
+}
+
+export function SmartAmountInput({
+ fiatCurrency,
+ initialFiatAmount,
+ limits,
+ onAmountChange,
+ onValidationChange
+}: SmartAmountInputProps) {
+ // Store the raw numeric input (what user logically typed)
+ const [rawValue, setRawValue] = useState(initialFiatAmount.toString());
+
+ // Any validation error message to show the user
+ const [error, setError] = useState('');
+
+ // Reference to the input element
+ const inputRef = useRef(null);
+
+ // Format the raw value for display
+ function formatForDisplay(value: string): string {
+ if (!value || value === '' || value === '.') {
+ return value;
+ }
+
+ const num = parseFloat(value);
+ if (isNaN(num)) {
+ return value; // Return as-is if not a valid number
+ }
+
+ // Format with commas and ensure 2 decimal places
+ return num.toLocaleString('en-US', {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2
+ });
+ }
+
+ // Calculate cursor position in formatted string based on raw string position
+ function calculateFormattedCursorPosition(rawValue: string, rawCursorPos: number): number {
+ if (rawCursorPos === 0) return 1; // After the $
+
+ // Get the part of raw value before cursor
+ const beforeCursor = rawValue.slice(0, rawCursorPos);
+
+ // Format just the part before cursor
+ const num = parseFloat(beforeCursor);
+ if (isNaN(num)) {
+ return rawCursorPos + 1; // +1 for the $
+ }
+
+ const formattedBefore = num.toLocaleString('en-US');
+ return formattedBefore.length + 1; // +1 for the $
+ }
+
+ // Calculate raw cursor position from formatted cursor position
+ function calculateRawCursorPosition(formattedValue: string, formattedCursorPos: number): number {
+ if (formattedCursorPos <= 1) return 0;
+
+ // Remove $ and get the part before cursor
+ const withoutDollar = formattedValue.slice(1, formattedCursorPos);
+
+ // Remove commas to get raw position
+ const rawBefore = withoutDollar.replace(/,/g, '');
+ return rawBefore.length;
+ }
+
+ // Update input when props change
+ useEffect(() => {
+ setRawValue(initialFiatAmount.toString());
+ }, [initialFiatAmount, fiatCurrency.currencyCode]);
+
+ // Auto-focus the input
+ useEffect(() => {
+ if (inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, []);
+
+ // Validation function
+ const validateAmount = useCallback((value: string) => {
+ // Empty input is allowed
+ if (!value.trim()) {
+ setError('');
+ onValidationChange?.(false);
+ return null;
+ }
+
+ // Check if it's a valid number format
+ if (!isValidAmount(value)) {
+ setError('Please enter a valid amount');
+ onValidationChange?.(false);
+ return null;
+ }
+
+ const numValue = parseAmount(value);
+
+ // Check against limits
+ if (limits) {
+ if (numValue < limits.minimumAmount) {
+ setError(`Minimum amount is ${formatFiatCurrency(limits.minimumAmount, fiatCurrency.currencyCode)}`);
+ onValidationChange?.(false);
+ return null;
+ }
+
+ if (numValue > limits.maximumAmount) {
+ setError(`Maximum amount is ${formatFiatCurrency(limits.maximumAmount, fiatCurrency.currencyCode)}`);
+ onValidationChange?.(false);
+ return null;
+ }
+ }
+
+ setError('');
+ onValidationChange?.(true);
+ return numValue;
+ }, [fiatCurrency, limits, onValidationChange]);
+
+ // Handle input changes
+ const handleInputChange = (e: React.ChangeEvent) => {
+ const formattedValue = e.target.value;
+ const formattedCursorPos = e.target.selectionStart || 0;
+
+ // Remove $ symbol
+ let value = formattedValue.startsWith('$') ? formattedValue.slice(1) : formattedValue;
+
+ // Remove commas and any non-numeric chars except decimal
+ value = value.replace(/[^0-9.]/g, '');
+
+ // Handle multiple decimal points
+ const parts = value.split('.');
+ if (parts.length > 2) {
+ value = parts[0] + '.' + parts.slice(1).join('');
+ }
+
+ // Limit decimal places to 2
+ if (parts.length === 2 && parts[1].length > 2) {
+ value = parts[0] + '.' + parts[1].slice(0, 2);
+ }
+
+ setRawValue(value);
+
+ // Calculate where cursor should be in raw value
+ const rawCursorPos = calculateRawCursorPosition(formattedValue, formattedCursorPos);
+
+ // Format and restore cursor position
+ setTimeout(() => {
+ if (inputRef.current) {
+ const newFormattedPos = calculateFormattedCursorPosition(value, rawCursorPos);
+ inputRef.current.setSelectionRange(newFormattedPos, newFormattedPos);
+ }
+ }, 0);
+
+ // Validate and notify parent
+ const amount = validateAmount(value);
+ if (amount !== null) {
+ onAmountChange(amount, 0);
+ }
+ };
+
+ // Prevent cursor from moving before the $ symbol
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ const input = e.target as HTMLInputElement;
+ const cursorPosition = input.selectionStart || 0;
+
+ // Prevent left arrow key from moving cursor before $
+ if (e.key === 'ArrowLeft' && cursorPosition <= 1) {
+ e.preventDefault();
+ }
+
+ // Prevent home key from moving cursor before $
+ if (e.key === 'Home') {
+ e.preventDefault();
+ input.setSelectionRange(1, 1);
+ }
+ };
+
+ // Prevent clicking before the $ symbol
+ const handleClick = (e: React.MouseEvent) => {
+ const input = e.target as HTMLInputElement;
+ setTimeout(() => {
+ const cursorPosition = input.selectionStart || 0;
+ if (cursorPosition < 1) {
+ input.setSelectionRange(1, 1);
+ }
+ }, 0);
+ };
+
+ // Prevent text selection from including the $ symbol
+ const handleSelect = (e: React.SyntheticEvent) => {
+ const input = e.target as HTMLInputElement;
+ setTimeout(() => {
+ const start = input.selectionStart || 0;
+ const end = input.selectionEnd || 0;
+
+ if (start < 1) {
+ input.setSelectionRange(Math.max(1, start), Math.max(1, end));
+ }
+ }, 0);
+ };
+
+ const displayValue = formatForDisplay(rawValue);
+
+ return (
+
+
+
+
+ {/* Main Input */}
+
+
+
+
+ {/* Error Message */}
+ {error && (
+
+ {error}
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/agw-onramp/src/components/ui/BackgroundEffects.tsx b/agw-onramp/src/components/ui/BackgroundEffects.tsx
new file mode 100644
index 0000000..01f4c6c
--- /dev/null
+++ b/agw-onramp/src/components/ui/BackgroundEffects.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export function BackgroundEffects() {
+ return (
+ <>
+ {/* Grid background */}
+ {/* */}
+
+ {/* Aurora gradients */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/agw-onramp/src/components/wallet/ConnectedState.tsx b/agw-onramp/src/components/wallet/ConnectedState.tsx
new file mode 100644
index 0000000..25a0202
--- /dev/null
+++ b/agw-onramp/src/components/wallet/ConnectedState.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { useAccount } from "wagmi";
+import { useLoginWithAbstract } from "@abstract-foundation/agw-react";
+import { QuickPurchaseFlow } from "@/components/onramp/QuickPurchaseFlow";
+
+export function ConnectedState() {
+ const { address } = useAccount();
+ const { logout } = useLoginWithAbstract();
+
+ if (!address) return null;
+
+ // Trim wallet address for mobile display
+ const trimmedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
+
+ return (
+
+ {/* Wallet Status Header */}
+
+
+
+ Connected to wallet
+
+
{trimmedAddress}
+
+
+
+
+
+
+ );
+}
diff --git a/agw-onramp/src/components/wallet/SignInButton.tsx b/agw-onramp/src/components/wallet/SignInButton.tsx
new file mode 100644
index 0000000..004ae5c
--- /dev/null
+++ b/agw-onramp/src/components/wallet/SignInButton.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import Image from "next/image";
+import { useLoginWithAbstract } from "@abstract-foundation/agw-react";
+import { useAccount } from "wagmi";
+
+export function SignInButton() {
+ const { login } = useLoginWithAbstract();
+ const { status } = useAccount();
+
+ if (status === "connecting" || status === "reconnecting") {
+ return (
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/agw-onramp/src/fonts/Avenue Mono.ttf b/agw-onramp/src/fonts/Avenue Mono.ttf
new file mode 100644
index 0000000..25440e3
Binary files /dev/null and b/agw-onramp/src/fonts/Avenue Mono.ttf differ
diff --git a/agw-onramp/src/fonts/GeistMonoVF.woff b/agw-onramp/src/fonts/GeistMonoVF.woff
new file mode 100644
index 0000000..f2ae185
Binary files /dev/null and b/agw-onramp/src/fonts/GeistMonoVF.woff differ
diff --git a/agw-onramp/src/fonts/GeistVF.woff b/agw-onramp/src/fonts/GeistVF.woff
new file mode 100644
index 0000000..1b62daa
Binary files /dev/null and b/agw-onramp/src/fonts/GeistVF.woff differ
diff --git a/agw-onramp/src/fonts/Roobert-Bold.ttf b/agw-onramp/src/fonts/Roobert-Bold.ttf
new file mode 100644
index 0000000..114d18b
Binary files /dev/null and b/agw-onramp/src/fonts/Roobert-Bold.ttf differ
diff --git a/agw-onramp/src/fonts/Roobert-Heavy.ttf b/agw-onramp/src/fonts/Roobert-Heavy.ttf
new file mode 100644
index 0000000..d6cc791
Binary files /dev/null and b/agw-onramp/src/fonts/Roobert-Heavy.ttf differ
diff --git a/agw-onramp/src/fonts/Roobert-Light.ttf b/agw-onramp/src/fonts/Roobert-Light.ttf
new file mode 100644
index 0000000..8073c42
Binary files /dev/null and b/agw-onramp/src/fonts/Roobert-Light.ttf differ
diff --git a/agw-onramp/src/fonts/Roobert-Medium.ttf b/agw-onramp/src/fonts/Roobert-Medium.ttf
new file mode 100644
index 0000000..9476331
Binary files /dev/null and b/agw-onramp/src/fonts/Roobert-Medium.ttf differ
diff --git a/agw-onramp/src/fonts/Roobert-Regular.ttf b/agw-onramp/src/fonts/Roobert-Regular.ttf
new file mode 100644
index 0000000..a57834b
Binary files /dev/null and b/agw-onramp/src/fonts/Roobert-Regular.ttf differ
diff --git a/agw-onramp/src/fonts/Roobert-SemiBold.ttf b/agw-onramp/src/fonts/Roobert-SemiBold.ttf
new file mode 100644
index 0000000..a5108bf
Binary files /dev/null and b/agw-onramp/src/fonts/Roobert-SemiBold.ttf differ
diff --git a/agw-onramp/src/hooks/useGeoLocation.ts b/agw-onramp/src/hooks/useGeoLocation.ts
new file mode 100644
index 0000000..5820110
--- /dev/null
+++ b/agw-onramp/src/hooks/useGeoLocation.ts
@@ -0,0 +1,147 @@
+"use client";
+
+/**
+ * Detects the user's country to provide a better UX.
+ *
+ * The widget asks for the user's country, so we load their country.
+ * We also load their native currency to show them on the input field.
+ *
+ * Detection strategy:
+ * 1. First try server-side detection via Vercel geo headers (most accurate)
+ * 2. Fall back to client-side timezone detection (less accurate but works offline)
+ * 3. Finally default to US if all else fails (ensures app always works)
+ */
+
+import { useState, useEffect } from 'react';
+
+export interface GeoLocation {
+ country?: string; // ISO country code like 'US', 'GB', 'DE'
+ region?: string; // State/province if available
+ city?: string; // City if available
+ detected: boolean; // Whether we successfully detected their location (vs fallback)
+}
+
+export function useGeoLocation(): GeoLocation {
+ const [geoLocation, setGeoLocation] = useState({
+ detected: false, // Start as undetected
+ });
+
+ useEffect(() => {
+ const detectLocation = async () => {
+ try {
+ // Strategy 1: Try server-side geo detection first
+ // This uses Vercel's geo headers which are very accurate
+ const response = await fetch('/api/geo');
+ if (response.ok) {
+ const data = await response.json();
+ if (data.country) {
+ setGeoLocation({
+ country: data.country,
+ region: data.region,
+ city: data.city,
+ detected: true, // Successfully detected
+ });
+ return;
+ }
+ }
+
+ // Strategy 2: Fall back to client-side timezone detection
+ // Less accurate but works when server-side detection fails
+ const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+ const countryFromTimezone = getCountryFromTimezone(timezone);
+
+ if (countryFromTimezone) {
+ setGeoLocation({
+ country: countryFromTimezone,
+ detected: true,
+ });
+ return;
+ }
+
+ // Strategy 3: Default to US as final fallback
+ // This ensures the app always works even if geo detection completely fails
+ setGeoLocation({
+ country: 'US',
+ detected: false, // This is a fallback, not real detection
+ });
+ } catch (error) {
+ console.warn('Failed to detect geo-location:', error);
+ // Use fallback on any error
+ setGeoLocation({
+ country: 'US',
+ detected: false,
+ });
+ }
+ };
+
+ detectLocation();
+ }, []);
+
+ return geoLocation;
+}
+
+// Timezone-based country detection as a fallback
+// This is less accurate than IP-based detection but works when that fails
+function getCountryFromTimezone(timezone: string): string | null {
+ // Direct mappings for common timezones
+ const timezoneCountryMap: Record = {
+ 'America/New_York': 'US',
+ 'America/Chicago': 'US',
+ 'America/Denver': 'US',
+ 'America/Los_Angeles': 'US',
+ 'America/Phoenix': 'US',
+ 'America/Toronto': 'CA',
+ 'America/Vancouver': 'CA',
+ 'America/Montreal': 'CA',
+ 'Europe/London': 'GB',
+ 'Europe/Berlin': 'DE',
+ 'Europe/Paris': 'FR',
+ 'Europe/Rome': 'IT',
+ 'Europe/Madrid': 'ES',
+ 'Europe/Amsterdam': 'NL',
+ 'Europe/Stockholm': 'SE',
+ 'Europe/Zurich': 'CH',
+ 'Asia/Tokyo': 'JP',
+ 'Asia/Shanghai': 'CN',
+ 'Asia/Singapore': 'SG',
+ 'Asia/Hong_Kong': 'HK',
+ 'Asia/Seoul': 'KR',
+ 'Australia/Sydney': 'AU',
+ 'Australia/Melbourne': 'AU',
+ };
+
+ // Check direct mapping first
+ if (timezoneCountryMap[timezone]) {
+ return timezoneCountryMap[timezone];
+ }
+
+ // For unmapped timezones, try some pattern matching
+ // Extract country from timezone format like "America/New_York"
+ if (timezone.startsWith('America/')) {
+ // Most America/* timezones are US, with some exceptions for Canada
+ if (timezone.includes('Toronto') || timezone.includes('Vancouver') || timezone.includes('Montreal')) {
+ return 'CA';
+ }
+ return 'US'; // Default America/* to US
+ }
+
+ if (timezone.startsWith('Europe/')) {
+ // Try to map European cities to countries
+ const city = timezone.split('/')[1];
+ const europeanCities: Record = {
+ 'London': 'GB',
+ 'Berlin': 'DE',
+ 'Paris': 'FR',
+ 'Rome': 'IT',
+ 'Madrid': 'ES',
+ 'Amsterdam': 'NL',
+ 'Stockholm': 'SE',
+ 'Zurich': 'CH',
+ };
+ return europeanCities[city] || null;
+ }
+
+ // If we can't determine the country, return null
+ // The calling code will fall back to US
+ return null;
+}
\ No newline at end of file
diff --git a/agw-onramp/src/services/onramp.ts b/agw-onramp/src/services/onramp.ts
new file mode 100644
index 0000000..b1f6217
--- /dev/null
+++ b/agw-onramp/src/services/onramp.ts
@@ -0,0 +1,231 @@
+/**
+ * The FIAT on-ramp flow is about getting a quote to generate a widget URL with.
+ * Our end goal is to get a quote from a provider, and get a widget URL that
+ * allows the user to execute that quote inside the widget.
+ *
+ * To create a quote, we need some information:
+ * - country `string` The ISO country code for the user.
+ * - destinationCurrency `string` The code for the Crypto Currency.
+ * - sourceCurrency `string` The code for the Fiat Currency.
+ * - amount `string` The amount (in source currency) to buy.
+ * - paymentMethod `string` The identifier for the Payment Method (e.g. Apple Pay, Credit Card, etc.)
+ * - walletAddress `string` The wallet address for the user making this request (does not have to be AGW)
+ * - toAddress `string` The deposit address on Base returned in the quote
+ * - serviceProvider `string` Service Provider to use for this session
+ * - redirectUrl `string (optional)` URL to navigate back to when widget flow is complete
+ * - referrer `string (optional)` The name of the app referring the user to the Onramp
+ *
+ * So we basically just need the user to provide this information, or load it ourselves,
+ * and then call the API to get a quote, and pass that quote to the widget endpoint.
+ *
+ * Most of that logic is in this file, except for the geo-location stuff.
+ */
+
+// This is Abstract's staging onramp API. In production, you'd use the production URL
+const ONRAMP_BASE_URL = 'https://onramp.staging-portal.abs.xyz';
+
+// The Country interface represents a country that supports crypto purchases
+// Each country has different available currencies and payment methods
+export interface Country {
+ countryCode: string; // ISO country code like 'US', 'GB', 'DE'
+ name: string; // Display name like 'United States'
+ flagImageUrl: string; // URL to flag image for the UI
+ regions?: Array<{
+ regionCode: string;
+ name: string;
+ }> | null; // Some countries have regions with different rules
+ defaultFiatCurrency: string; // What currency this country typically uses (USD, EUR, etc.)
+}
+
+// Currency can be either fiat (USD, EUR) or crypto (ETH, USDC)
+// The API returns both types but separates them into fiat/crypto arrays
+export interface Currency {
+ currencyCode: string; // Like 'USD', 'EUR', 'ETH_BASE', 'USDC_BASE'
+ name: string; // Human readable name
+ symbolImageUrl: string; // URL to currency icon
+ symbol?: string; // Short symbol like '$', '€', 'ETH'
+ chainCode?: string; // For crypto: which blockchain
+ chainName?: string; // For crypto: chain display name
+ chainId?: string | null; // For crypto: chain ID number
+ contractAddress?: string | null; // For crypto: token contract address
+}
+
+// Payment methods vary by country - some have Apple Pay, others only cards, etc.
+export interface PaymentMethod {
+ paymentMethod: string; // Unique ID like 'APPLE_PAY', 'CREDIT_DEBIT_CARD'
+ name: string; // Display name for users
+ paymentType: string; // Category like 'CARD', 'MOBILE_WALLET', 'BANK_TRANSFER'
+ logos: {
+ light: string; // Logo URL for light theme
+ dark: string; // Logo URL for dark theme
+ };
+}
+
+// A Quote tells you exactly how much crypto you'll get for your fiat money
+// Different providers give different quotes, so you can pick the best one
+export interface Quote {
+ transactionType: string;
+ sourceAmount: number; // How much fiat the user will pay (including fees)
+ sourceAmountWithoutFees: number; // The actual purchase amount before fees
+ fiatAmountWithoutFees: number; // Same as above, in fiat currency
+ destinationAmountWithoutFees: number | null; // How much crypto before fees
+ sourceCurrencyCode: string; // What fiat currency (USD, EUR, etc.)
+ countryCode: string; // Which country this quote is for
+ totalFee: number; // All fees combined
+ networkFee: number | null; // Blockchain network fees
+ transactionFee: number; // Provider's transaction fee
+ destinationAmount: number; // Final crypto amount user will receive
+ destinationCurrencyCode: string; // Which crypto (ETH_BASE, USDC_BASE, etc.)
+ exchangeRate: number; // How much 1 unit of fiat equals in crypto
+ paymentMethodType: string; // Which payment method was used for this quote
+ customerScore: number; // Some kind of risk/trust score
+ serviceProvider: string; // Which provider gave this quote (MoonPay, etc.)
+ institutionName: string | null; // Bank or institution name if applicable
+ lowKyc: boolean | null; // Whether this requires minimal identity verification
+ partnerFee: number; // Abstract's partner fee
+ walletAddress: string; // User's wallet where crypto will be sent
+ toAddress: string; // Specific address for this transaction
+ relayFee: number; // Fee for relaying the transaction
+}
+
+// After the user picks a quote, you create a WidgetSession
+// This opens a payment window where they complete the actual purchase
+export interface WidgetSession {
+ id: string; // Session ID for tracking
+ externalSessionId: string; // Provider's session ID
+ externalCustomerId: string; // Provider's customer ID
+ customerId: string; // Abstract's customer ID
+ widgetUrl: string; // URL to open in popup/new tab for payment
+ token: string; // Auth token for the session
+}
+
+// Service providers are companies that actually process the payments
+export interface ServiceProvider {
+ serviceProvider: string; // Unique ID
+ name: string; // Display name like "MoonPay"
+ status: string; // Whether they're active, maintenance, etc.
+ categories: string[]; // What types of transactions they support
+ categoryStatuses: Record; // Status for each category
+ websiteUrl: string; // Provider's website
+ customerSupportUrl: string; // Where users can get help
+ logos: {
+ dark: string; // Logo for dark theme
+ light: string; // Logo for light theme
+ darkShort: string; // Compact logo for dark theme
+ lightShort: string; // Compact logo for light theme
+ };
+}
+
+// The config endpoint gives you all the basic setup info you need
+export interface ConfigResponse {
+ countries: Country[]; // All supported countries
+ limits: Array<{
+ currencyCode: string; // Which currency these limits apply to
+ defaultAmount: number; // Suggested default amount (good UX to pre-fill this)
+ minimumAmount: number; // Smallest allowed purchase
+ maximumAmount: number; // Largest allowed purchase
+ }>;
+ serviceProviders: ServiceProvider[]; // All available payment providers
+}
+
+// API responses are wrapped in these interfaces
+export interface CurrenciesResponse {
+ fiat: Currency[]; // Available fiat currencies for this country
+ crypto: Currency[]; // Available crypto currencies for this country
+}
+
+export interface PaymentMethodsResponse {
+ paymentMethods: PaymentMethod[]; // Available payment methods for this country
+}
+
+export interface QuoteResponse {
+ quotes: Quote[]; // Multiple quotes from different providers - user or app picks the best one
+}
+
+/**
+ * OnrampService handles all the API calls to Abstract's onramp service.
+ */
+export class OnrampService {
+ // Helper method to make HTTP requests with error handling
+ // All onramp API calls go through this to ensure consistent error handling
+ private static async makeRequest(endpoint: string, options?: RequestInit): Promise {
+ const response = await fetch(`${ONRAMP_BASE_URL}${endpoint}`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ ...options?.headers,
+ },
+ ...options,
+ });
+
+ if (!response.ok) {
+ // Try to get a detailed error message from the API response
+ let errorMessage = `Onramp API error: ${response.status} ${response.statusText}`;
+ try {
+ const errorBody = await response.text();
+ if (errorBody) {
+ errorMessage += ` - ${errorBody}`;
+ }
+ } catch {
+ // If we can't read the error body, just use the status
+ }
+ console.error(`API Request failed: ${endpoint}`, errorMessage);
+ throw new Error(errorMessage);
+ }
+
+ return response.json();
+ }
+
+ // Step 1: Get the initial configuration
+ // Call this first to get supported countries, limits, and providers
+ static async getConfig(): Promise {
+ return this.makeRequest('/config');
+ }
+
+ // Step 2: Get available currencies for a specific country
+ // Different countries support different fiat and crypto currencies
+ static async getCurrencies(country: string): Promise {
+ return this.makeRequest(`/currencies?country=${encodeURIComponent(country)}`);
+ }
+
+ // Step 3: Get payment methods available in that country
+ // Some countries have Apple Pay, others only have cards, etc.
+ static async getPaymentMethods(country: string): Promise {
+ return this.makeRequest(`/payment-methods?country=${encodeURIComponent(country)}`);
+ }
+
+ // Step 4: Get quotes from providers
+ // This tells you how much crypto you'll get for your fiat money
+ // You get multiple quotes and can pick the best one (lowest fees, most crypto, etc.)
+ static async getQuote(params: {
+ country: string; // User's country
+ destinationCurrency: string; // What crypto they want (ETH_BASE, USDC_BASE, etc.)
+ sourceCurrency: string; // What fiat they're paying with (USD, EUR, etc.)
+ amount: string; // How much fiat they want to spend
+ paymentMethod: string; // Which payment method they chose
+ walletAddress: string; // Where to send the crypto
+ }): Promise {
+ const queryParams = new URLSearchParams(params);
+ return this.makeRequest(`/quote?${queryParams}`);
+ }
+
+ // Step 5: Create a payment session
+ // After user picks a quote, create a widget session to handle the actual payment
+ // This returns a URL that you open in a popup/new tab where user completes payment
+ static async createWidgetSession(params: {
+ country: string;
+ destinationCurrency: string;
+ sourceCurrency: string;
+ amount: string;
+ paymentMethod: string;
+ walletAddress: string;
+ toAddress: string; // From the selected quote
+ serviceProvider: string; // From the selected quote
+ redirectUrl?: string; // Where to go after payment (usually back to your app)
+ referrer?: string; // Your app name for tracking
+ }): Promise {
+ return this.makeRequest('/widget', {
+ method: 'POST',
+ body: JSON.stringify(params),
+ });
+ }
+}
\ No newline at end of file
diff --git a/agw-onramp/src/utils/currencyUtils.ts b/agw-onramp/src/utils/currencyUtils.ts
new file mode 100644
index 0000000..3035046
--- /dev/null
+++ b/agw-onramp/src/utils/currencyUtils.ts
@@ -0,0 +1,159 @@
+/**
+* Utilities for formatting/validating/converting between different currencies on the UI.
+*/
+
+import { type Currency } from '@/services/onramp';
+
+// Simple conversion result - always converts from fiat input to crypto output
+export interface CurrencyConversion {
+ fiatAmount: number;
+ cryptoAmount: number;
+ exchangeRate: number;
+ fiatCurrency: string;
+ cryptoCurrency: string;
+}
+
+export function formatCurrency(amount: number, currencyCode: string, options?: {
+ minimumFractionDigits?: number;
+ maximumFractionDigits?: number;
+}): string {
+ const { minimumFractionDigits = 2, maximumFractionDigits = 6 } = options || {};
+
+ // Clean up currency code (remove _BASE suffix)
+ // From a technical POV, we get currency on Base chain first and bridge to Abstract.
+ // But we don't want to confuse users by showing them Base in the UI.
+ const cleanCurrencyCode = currencyCode.replace('_BASE', '');
+
+ const formattedNumber = new Intl.NumberFormat('en-US', {
+ style: 'decimal',
+ minimumFractionDigits,
+ maximumFractionDigits,
+ }).format(amount);
+
+ return `${formattedNumber} ${cleanCurrencyCode}`;
+}
+
+export function formatFiatCurrency(amount: number, currencyCode: string): string {
+ return formatCurrency(amount, currencyCode, {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ });
+}
+
+export function formatCryptoCurrency(amount: number, currencyCode: string): string {
+ const cleanCode = currencyCode.replace('_BASE', '');
+
+ // Different precision for different crypto currencies
+ const precision = cleanCode === 'USDC' ? 2 : 6;
+
+ return formatCurrency(amount, currencyCode, {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: precision,
+ });
+}
+
+export function getCurrencyDisplayName(currency: Currency): string {
+ if (currency.currencyCode === 'ETH_BASE') {
+ return 'Ether';
+ }
+ return currency.name;
+}
+
+export function getCurrencySymbol(currencyCode: string): string {
+ const cleanCode = currencyCode.replace('_BASE', '');
+
+ switch (cleanCode) {
+ case 'USD':
+ return '$';
+ case 'EUR':
+ return '€';
+ case 'GBP':
+ return '£';
+ case 'CAD':
+ return 'C$';
+ case 'AUD':
+ return 'A$';
+ case 'JPY':
+ return '¥';
+ default:
+ return cleanCode;
+ }
+}
+
+// Convert fiat amount to crypto amount using the exchange rate
+// Always assumes fiat input -> crypto output (no bi-directional conversion needed)
+export function convertCurrency(
+ fiatAmount: number,
+ exchangeRate: number,
+ fiatCurrency: Currency,
+ cryptoCurrency: Currency
+): CurrencyConversion {
+ const cryptoAmount = fiatAmount / exchangeRate;
+
+ return {
+ fiatAmount,
+ cryptoAmount,
+ exchangeRate,
+ fiatCurrency: fiatCurrency.currencyCode,
+ cryptoCurrency: cryptoCurrency.currencyCode,
+ };
+}
+
+// The API returns a default amount, this is just a backup if it doesn't.
+export function getDefaultFiatAmount(currencyCode: string): number {
+ const cleanCode = currencyCode.replace('_BASE', '');
+
+ // Default amounts based on currency
+ switch (cleanCode) {
+ case 'USD':
+ return 50;
+ case 'EUR':
+ return 45;
+ case 'GBP':
+ return 40;
+ case 'CAD':
+ return 65;
+ case 'AUD':
+ return 75;
+ case 'JPY':
+ return 7500;
+ default:
+ return 50; // Default to 50 units
+ }
+}
+
+// This is for our "quick amount" presets.
+export function getPresetAmounts(currencyCode: string): number[] {
+ const defaultAmount = getDefaultFiatAmount(currencyCode);
+
+ return [
+ defaultAmount,
+ defaultAmount * 2,
+ defaultAmount * 5,
+ ];
+}
+
+export function isValidAmount(amount: string): boolean {
+ if (!amount || amount.trim() === '') return false;
+
+ const num = parseFloat(amount);
+ return !isNaN(num) && num > 0 && isFinite(num);
+}
+
+export function parseAmount(amount: string): number {
+ if (!isValidAmount(amount)) return 0;
+ return parseFloat(amount);
+}
+
+export function formatAmountInput(value: string): string {
+ // Remove any non-numeric characters except decimal point
+ const cleaned = value.replace(/[^0-9.]/g, '');
+
+ // Ensure only one decimal point
+ const parts = cleaned.split('.');
+ if (parts.length > 2) {
+ return parts[0] + '.' + parts.slice(1).join('');
+ }
+
+ return cleaned;
+}
\ No newline at end of file
diff --git a/agw-onramp/src/utils/deviceDetection.ts b/agw-onramp/src/utils/deviceDetection.ts
new file mode 100644
index 0000000..3974f5e
--- /dev/null
+++ b/agw-onramp/src/utils/deviceDetection.ts
@@ -0,0 +1,153 @@
+/**
+ * Utilities for detecting the user's device and browser to automatically select
+ * the most relevant payment method to default to when we open the checkout page. e.g:
+ * - Apple Pay on iOS/macOS devices
+ * - Google Pay on Android or Chrome
+ * - Credit card as universal fallback
+ *
+ * This is just a nice-to-have for improved UX.
+ */
+
+import { type PaymentMethod } from '@/services/onramp';
+
+export interface DeviceInfo {
+ isApple: boolean; // iOS, macOS devices
+ isAndroid: boolean; // Android devices
+ isChrome: boolean; // Chrome browser (supports Google Pay)
+ isSafari: boolean; // Safari browser
+ isMobile: boolean; // Any mobile device
+ userAgent: string; // Full user agent string for debugging
+}
+
+// Detect the user's device and browser for smart payment method selection
+export function getDeviceInfo(): DeviceInfo {
+ if (typeof window === 'undefined') {
+ // Server-side rendering fallback - can't detect device on server
+ return {
+ isApple: false,
+ isAndroid: false,
+ isChrome: false,
+ isSafari: false,
+ isMobile: false,
+ userAgent: '',
+ };
+ }
+
+ const userAgent = window.navigator.userAgent;
+
+ // Detect Apple devices (iPhone, iPad, Mac)
+ // These users likely have Apple Pay set up
+ const isApple = /Mac|iPhone|iPad|iPod/.test(userAgent);
+
+ // Detect Android devices
+ // These users might have Google Pay
+ const isAndroid = /Android/.test(userAgent);
+
+ // Detect Chrome browser (exclude Edge which also includes "Chrome" in UA)
+ // Chrome users can use Google Pay on web
+ const isChrome = /Chrome/.test(userAgent) && !/Edge|Edg/.test(userAgent);
+
+ // Detect Safari browser (exclude Chrome on iOS which also includes "Safari")
+ const isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
+
+ // Detect mobile devices for different UX considerations
+ const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/.test(userAgent);
+
+ return {
+ isApple,
+ isAndroid,
+ isChrome,
+ isSafari,
+ isMobile,
+ userAgent, // Keep full UA for debugging
+ };
+}
+
+// Pick the best payment method for the user's device.
+export function getSmartPaymentMethod(paymentMethods: PaymentMethod[]): PaymentMethod | null {
+ if (paymentMethods.length === 0) return null;
+
+ const deviceInfo = getDeviceInfo();
+
+ // Priority order: try most convenient methods first, fall back to universal ones
+ const priorities: Array<{ condition: boolean; methodName: string }> = [
+ // Apple Pay for Apple devices - high convenience, high adoption on Apple devices
+ { condition: deviceInfo.isApple, methodName: 'APPLE_PAY' },
+ // Google Pay for Android or Chrome - good for Android users and Chrome desktop
+ { condition: deviceInfo.isAndroid || deviceInfo.isChrome, methodName: 'GOOGLE_PAY' },
+ // Credit/Debit Card - universal fallback that works everywhere
+ { condition: true, methodName: 'CREDIT_DEBIT_CARD' },
+ ];
+
+ // Find the first matching payment method that's available
+ for (const priority of priorities) {
+ if (priority.condition) {
+ const method = paymentMethods.find(m => m.paymentMethod === priority.methodName);
+ if (method) {
+ return method;
+ }
+ }
+ }
+
+ // If none of our preferred methods are available, just use the first one
+ return paymentMethods[0];
+}
+
+// Get a user-friendly display name for payment methods
+export function getPaymentMethodDisplayName(paymentMethod: PaymentMethod): string {
+ switch (paymentMethod.paymentMethod) {
+ case 'APPLE_PAY':
+ return 'Apple Pay';
+ case 'GOOGLE_PAY':
+ return 'Google Pay';
+ case 'CREDIT_DEBIT_CARD':
+ return 'Credit/Debit Card';
+ default:
+ // For unknown payment methods, use the name from the API
+ return paymentMethod.name;
+ }
+}
+
+// Get an emoji icon for payment methods.
+export function getPaymentMethodIcon(paymentMethod: PaymentMethod): string {
+ switch (paymentMethod.paymentMethod) {
+ case 'APPLE_PAY':
+ return '📱';
+ case 'GOOGLE_PAY':
+ return '📱';
+ case 'CREDIT_DEBIT_CARD':
+ return '💳';
+ default:
+ // Fall back to icons based on payment type category
+ switch (paymentMethod.paymentType) {
+ case 'MOBILE_WALLET':
+ return '📱';
+ case 'CARD':
+ return '💳';
+ case 'BANK_TRANSFER':
+ case 'ACH':
+ case 'SEPA':
+ return '🏦';
+ default:
+ return '💰';
+ }
+ }
+}
+
+// Check if a payment method is recommended for the current device
+// Useful for highlighting preferred payment methods in the UI
+export function isPaymentMethodRecommended(paymentMethod: PaymentMethod): boolean {
+ const deviceInfo = getDeviceInfo();
+
+ // Apple Pay is recommended on Apple devices
+ if (deviceInfo.isApple && paymentMethod.paymentMethod === 'APPLE_PAY') {
+ return true;
+ }
+
+ // Google Pay is recommended on Android or Chrome
+ if ((deviceInfo.isAndroid || deviceInfo.isChrome) && paymentMethod.paymentMethod === 'GOOGLE_PAY') {
+ return true;
+ }
+
+ return false;
+}
\ No newline at end of file
diff --git a/agw-onramp/src/utils/paymentRouteUtils.ts b/agw-onramp/src/utils/paymentRouteUtils.ts
new file mode 100644
index 0000000..997a2d2
--- /dev/null
+++ b/agw-onramp/src/utils/paymentRouteUtils.ts
@@ -0,0 +1,119 @@
+import { PaymentMethod, Quote } from '@/services/onramp';
+import { getSmartPaymentMethod } from './deviceDetection';
+
+export interface PaymentRoute {
+ id: string;
+ paymentMethod: PaymentMethod;
+ serviceProvider: string;
+ quote: Quote;
+ displayName: string;
+ totalFee: number;
+}
+
+/**
+ * Gets the smart default payment route based on device detection and lowest fees
+ */
+export function getSmartDefaultPaymentRoute(
+ paymentMethods: PaymentMethod[],
+ quotes: Quote[]
+): { paymentMethod: PaymentMethod; provider: string } | null {
+ if (paymentMethods.length === 0 || quotes.length === 0) {
+ return null;
+ }
+
+ // 1. Get smart payment method based on device
+ const smartPaymentMethod = getSmartPaymentMethod(paymentMethods);
+
+ // 2. Filter quotes for that payment method
+ const relevantQuotes = smartPaymentMethod
+ ? quotes.filter(q => q.paymentMethodType === smartPaymentMethod.paymentMethod)
+ : [];
+
+ // If no quotes for smart payment method, fall back to any quotes
+ const quotesToConsider = relevantQuotes.length > 0 ? relevantQuotes : quotes;
+
+ // 3. Find provider with lowest total fee
+ const bestQuote = quotesToConsider.reduce((best, current) =>
+ current.totalFee < best.totalFee ? current : best
+ );
+
+ // 4. Get the actual payment method for the best quote
+ const actualPaymentMethod = paymentMethods.find(
+ pm => pm.paymentMethod === bestQuote.paymentMethodType
+ ) || smartPaymentMethod;
+
+ if (!actualPaymentMethod) {
+ return null;
+ }
+
+ return {
+ paymentMethod: actualPaymentMethod,
+ provider: bestQuote.serviceProvider
+ };
+}
+
+/**
+ * Creates payment route combinations from available quotes
+ */
+export function createPaymentRoutes(
+ paymentMethods: PaymentMethod[],
+ quotes: Quote[]
+): PaymentRoute[] {
+ const routes: PaymentRoute[] = [];
+
+ // Group quotes by payment method and provider combination
+ quotes.forEach(quote => {
+ const paymentMethod = paymentMethods.find(
+ pm => pm.paymentMethod === quote.paymentMethodType
+ );
+
+ if (paymentMethod) {
+ const route: PaymentRoute = {
+ id: `${quote.paymentMethodType}-${quote.serviceProvider}`,
+ paymentMethod,
+ serviceProvider: quote.serviceProvider,
+ quote,
+ displayName: `${paymentMethod.name} via ${quote.serviceProvider}`,
+ totalFee: quote.totalFee
+ };
+
+ routes.push(route);
+ }
+ });
+
+ // Sort by lowest fees first
+ return routes.sort((a, b) => a.totalFee - b.totalFee);
+}
+
+/**
+ * Gets available providers for a specific payment method
+ */
+export function getProvidersForPaymentMethod(
+ paymentMethodType: string,
+ quotes: Quote[]
+): string[] {
+ const providers = quotes
+ .filter(q => q.paymentMethodType === paymentMethodType)
+ .map(q => q.serviceProvider);
+
+ return Array.from(new Set(providers));
+}
+
+/**
+ * Gets the best quote for a specific payment method and provider combination
+ */
+export function getBestQuoteForRoute(
+ paymentMethodType: string,
+ provider: string,
+ quotes: Quote[]
+): Quote | null {
+ const relevantQuotes = quotes.filter(
+ q => q.paymentMethodType === paymentMethodType && q.serviceProvider === provider
+ );
+
+ if (relevantQuotes.length === 0) return null;
+
+ return relevantQuotes.reduce((best, current) =>
+ current.totalFee < best.totalFee ? current : best
+ );
+}
\ No newline at end of file
diff --git a/agw-onramp/tsconfig.json b/agw-onramp/tsconfig.json
new file mode 100644
index 0000000..c133409
--- /dev/null
+++ b/agw-onramp/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}