onSelect(recipient)}
- onKeyDown={(e) => {
- if (e.key === "Enter" || e.key === " ") {
- onSelect(recipient);
- }
- }}
- >
-
-
{
+ const [displayName, setDisplayName] = useState
("");
+ const [isResolvingEns, setIsResolvingEns] = useState(false);
+
+ // Use type predicate for better type narrowing
+ const walletRecipient = isWalletRecipient(recipient);
+ const avatarSrc = walletRecipient ? getAvatarImage(index) : null;
+
+ // Type guard: safely access walletAddress only for wallet recipients
+ const walletAddress = walletRecipient ? recipient.walletAddress : "";
+
+ // Resolve ENS name for wallet recipients (onramp)
+ useEffect(() => {
+ if (walletRecipient && walletAddress) {
+ setIsResolvingEns(true);
+ resolveEnsNameOrShorten(walletAddress)
+ .then((name) => {
+ setDisplayName(name);
+ setIsResolvingEns(false);
+ })
+ .catch(() => {
+ // Fallback to first 5 chars if resolution fails
+ setDisplayName(walletAddress.slice(2, 7));
+ setIsResolvingEns(false);
+ });
+ }
+ }, [recipient, walletAddress]);
+
+ return (
+ onSelect(recipient)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ onSelect(recipient);
+ }
+ }}
+ >
+
+ {!walletRecipient ? (
+ <>
+
+ {recipient.name
+ .split(" ")
+ .filter((name) => name)
+ .slice(0, 2)
+ .map((name) => name[0].toUpperCase())
+ .join("")}
+
+
+
+ {recipient.name.toLowerCase()}
+
+
+ {recipient.accountIdentifier}
+ •
+ {recipient.institution}
+
+
+
+ ) : (
+ <>
+ {avatarSrc && (
+
+
+
+ )}
+
+
+ {recipient.name || (isResolvingEns ? (
+ Resolving...
+ ) : (
+ displayName || shortenAddress(walletAddress, 6, 4)
+ ))}
+
+
+ {shortenAddress(walletAddress, 6, 4)}
+
+
+
)}
- >
- {recipient.name
- .split(" ")
- .filter((name) => name)
- .slice(0, 2)
- .map((name) => name[0].toUpperCase())
- .join("")}
-
-
- {recipient.name.toLowerCase()}
-
-
- {recipient.accountIdentifier}
- •
- {recipient.institution}
-
-
-
-);
+ }`}
+ disabled={isBeingDeleted}
+ >
+ {isBeingDeleted ? (
+
+ ) : (
+
+ )}
+
+
+ );
+};
\ No newline at end of file
diff --git a/app/components/recipient/SavedBeneficiariesModal.tsx b/app/components/recipient/SavedBeneficiariesModal.tsx
index 835582fe..183c4929 100644
--- a/app/components/recipient/SavedBeneficiariesModal.tsx
+++ b/app/components/recipient/SavedBeneficiariesModal.tsx
@@ -9,6 +9,7 @@ import { AnimatedModal } from "../AnimatedComponents";
import { RecipientListItem } from "./RecipientListItem";
import { SearchInput } from "./SearchInput";
import { SavedBeneficiariesModalProps } from "./types";
+import { isBankOrMobileMoneyRecipient } from "@/app/utils";
export const SavedBeneficiariesModal = ({
isOpen,
@@ -21,14 +22,43 @@ export const SavedBeneficiariesModal = ({
institutions,
isLoading = false,
error = null,
+ isSwapped = false,
+ networkName,
}: SavedBeneficiariesModalProps) => {
const [beneficiarySearchTerm, setBeneficiarySearchTerm] = useState("");
const filteredSavedRecipients = useMemo(() => {
- if (!currency) return [];
+ if (!currency && !isSwapped) return [];
const allRecipients = [...savedRecipients];
- const uniqueRecipients = allRecipients.filter(
+ if (isSwapped) {
+ const walletRecipients = allRecipients.filter((r) => r.type === "wallet");
+
+ const uniqueRecipients = walletRecipients.filter(
+ (recipient, index, self) =>
+ index ===
+ self.findIndex(
+ (r) => r.type === "wallet" && recipient.type === "wallet" && r.walletAddress === recipient.walletAddress,
+ ),
+ );
+
+ return uniqueRecipients.filter(
+ (recipient) => {
+ if (recipient.type === "wallet") {
+ const walletAddress = recipient.walletAddress.toLowerCase();
+ const searchTerm = beneficiarySearchTerm.toLowerCase();
+ return walletAddress.includes(searchTerm);
+ }
+ return false;
+ }
+ );
+ }
+
+ const bankRecipientsOnly = allRecipients.filter(
+ isBankOrMobileMoneyRecipient
+ );
+
+ const uniqueRecipients = bankRecipientsOnly.filter(
(recipient, index, self) =>
index ===
self.findIndex(
@@ -52,13 +82,13 @@ export const SavedBeneficiariesModal = ({
.filter((recipient) =>
currentBankCodes.includes(recipient.institutionCode),
);
- }, [savedRecipients, beneficiarySearchTerm, currency, institutions]);
+ }, [savedRecipients, beneficiarySearchTerm, currency, institutions, isSwapped]);
return (
- Saved beneficiaries
+ Saved beneficiaries{networkName ? ` (${networkName})` : ""}
@@ -84,7 +114,7 @@ export const SavedBeneficiariesModal = ({
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
transition={{ duration: 0.2 }}
- className="mt-2 h-[21rem] overflow-y-auto sm:h-[14rem]"
+ className="mt-2 max-h-[21rem] overflow-y-auto sm:max-h-[14rem] [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
>
{isLoading ? (
@@ -115,7 +145,7 @@ export const SavedBeneficiariesModal = ({
) : filteredSavedRecipients.length > 0 ? (
filteredSavedRecipients.map((recipient, index) => (
))
diff --git a/app/components/recipient/types.ts b/app/components/recipient/types.ts
index 10537942..11173ea2 100644
--- a/app/components/recipient/types.ts
+++ b/app/components/recipient/types.ts
@@ -16,6 +16,7 @@ export interface RecipientListItemProps {
onSelect: (recipient: RecipientDetails) => void;
onDelete: (recipient: RecipientDetails) => void;
isBeingDeleted: boolean;
+ index?: number;
}
export interface SavedBeneficiariesModalProps {
@@ -29,6 +30,8 @@ export interface SavedBeneficiariesModalProps {
institutions: InstitutionProps[];
isLoading?: boolean;
error?: string | null;
+ isSwapped?: boolean; // For onramp mode
+ networkName?: string; // Network name for wallet recipients
}
export type SelectBankModalProps = {
diff --git a/app/hooks/useSwapButton.ts b/app/hooks/useSwapButton.ts
index 98be7fb7..e03be725 100644
--- a/app/hooks/useSwapButton.ts
+++ b/app/hooks/useSwapButton.ts
@@ -11,6 +11,7 @@ interface UseSwapButtonProps {
isUserVerified: boolean;
rate?: number | null;
tokenDecimals?: number;
+ isSwapped?: boolean; // true when in onramp mode (fiat in Send, token in Receive)
}
export function useSwapButton({
@@ -21,10 +22,11 @@ export function useSwapButton({
isUserVerified,
rate,
tokenDecimals = 18,
+ isSwapped = false,
}: UseSwapButtonProps) {
const { authenticated } = usePrivy();
const { isInjectedWallet } = useInjectedWallet();
- const { amountSent, currency, recipientName } = watch();
+ const { amountSent, currency, recipientName, walletAddress } = watch();
const isAmountValid = Number(amountSent) >= 0.5;
const isCurrencySelected = Boolean(currency);
@@ -37,7 +39,11 @@ export function useSwapButton({
);
const totalRequired = (Number(amountSent) || 0) + senderFeeAmount;
- const hasInsufficientBalance = totalRequired > balance;
+ // Skip balance check in onramp mode (isSwapped = true)
+ const hasInsufficientBalance = isSwapped ? false : totalRequired > balance;
+
+ // Check recipient based on mode: walletAddress for onramp, recipientName for offramp
+ const hasRecipient = isSwapped ? Boolean(walletAddress) : Boolean(recipientName);
const isEnabled = (() => {
if (!rate) return false;
@@ -64,7 +70,7 @@ export function useSwapButton({
if (!isDirty || !isValid || !isCurrencySelected || !isAmountValid) {
return false;
}
- return Boolean(recipientName);
+ return hasRecipient;
}
if (!isDirty || !isValid || !isCurrencySelected || !isAmountValid) {
@@ -75,7 +81,7 @@ export function useSwapButton({
return true; // Enable for login if amount and currency are valid
}
- return Boolean(recipientName); // Additional check for authenticated users
+ return hasRecipient; // Check walletAddress for onramp, recipientName for offramp
})();
const buttonText = (() => {
diff --git a/app/mocks.ts b/app/mocks.ts
index 00809cb9..f53de333 100644
--- a/app/mocks.ts
+++ b/app/mocks.ts
@@ -17,7 +17,7 @@ export const acceptedCurrencies = [
name: "TZS",
label: "Tanzanian Shilling (TZS)",
},
- {
+ {
name: "MWK",
label: "Malawian Kwacha (MWK)",
disabled: true,
diff --git a/app/pages/MakePayment.tsx b/app/pages/MakePayment.tsx
new file mode 100644
index 00000000..24c9e409
--- /dev/null
+++ b/app/pages/MakePayment.tsx
@@ -0,0 +1,323 @@
+"use client";
+import { useEffect, useState, useRef } from "react";
+import { Copy01Icon } from "hugeicons-react";
+import { PiCheck } from "react-icons/pi";
+import { ImSpinner } from "react-icons/im";
+import {
+ classNames,
+ formatCurrency,
+ formatNumberWithCommas,
+ copyToClipboard,
+ getCurrencySymbol,
+} from "../utils";
+import { primaryBtnClasses, secondaryBtnClasses } from "../components";
+import type { TransactionPreviewProps } from "../types";
+import { useStep, useNetwork } from "../context";
+import { fetchOrderDetails } from "../api/aggregator";
+
+interface PaymentAccountDetails {
+ provider: string;
+ accountNumber: string;
+ amount: number;
+ currency: string;
+ expiresAt: Date;
+}
+
+export const MakePayment = ({
+ stateProps,
+ handleBackButtonClick,
+}: {
+ stateProps: TransactionPreviewProps["stateProps"];
+ handleBackButtonClick: () => void;
+}) => {
+ const { formValues, rate, setTransactionStatus, setCreatedAt, orderId } = stateProps;
+ const { setCurrentStep } = useStep();
+ const { selectedNetwork } = useNetwork();
+ const { amountSent, currency, token, amountReceived } = formValues;
+
+ // Mock payment account details - will be replaced with actual API call
+ const [paymentDetails, setPaymentDetails] = useState({
+ provider: "(4Bay7 Enterprise)",
+ accountNumber: "952157815",
+ amount: amountSent || 29000,
+ currency: currency || "KES",
+ expiresAt: new Date(Date.now() + 30 * 60 * 1000), // 30 minutes from now
+ });
+
+ const [timeRemaining, setTimeRemaining] = useState("");
+ const [isPaymentSent, setIsPaymentSent] = useState(false);
+ const [isCheckingPayment, setIsCheckingPayment] = useState(false);
+ const [isAccountNumberCopied, setIsAccountNumberCopied] = useState(false);
+ const [isAmountCopied, setIsAmountCopied] = useState(false);
+ const pollingIntervalRef = useRef(null);
+ const pollingTimeoutRef = useRef(null);
+
+ // Calculate time remaining
+ useEffect(() => {
+ const updateTimer = () => {
+ const now = new Date();
+ const diff = paymentDetails.expiresAt.getTime() - now.getTime();
+
+ if (diff <= 0) {
+ setTimeRemaining("00:00");
+ return;
+ }
+
+ const minutes = Math.floor(diff / 60000);
+ const seconds = Math.floor((diff % 60000) / 1000);
+ setTimeRemaining(
+ `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`,
+ );
+ };
+
+ updateTimer();
+ const interval = setInterval(updateTimer, 1000);
+
+ return () => clearInterval(interval);
+ }, [paymentDetails.expiresAt]);
+
+ const handlePaymentSent = async () => {
+ setIsPaymentSent(true);
+ setIsCheckingPayment(true);
+
+ // Mark the transaction as pending while the aggregator indexes the deposit
+ setTransactionStatus("pending");
+ setCreatedAt(new Date().toISOString());
+
+ // If no orderId, navigate immediately (shouldn't happen, but safety check)
+ if (!orderId) {
+ setCurrentStep("status");
+ setIsCheckingPayment(false);
+ return;
+ }
+
+ // Poll backend to check if payment has been detected
+ const checkPaymentStatus = async () => {
+ try {
+ const orderDetailsResponse = await fetchOrderDetails(
+ selectedNetwork.chain.id,
+ orderId,
+ );
+
+ const status = orderDetailsResponse.data.status;
+
+ // If status is no longer "pending", payment has been detected
+ if (status !== "pending") {
+ // TODO: Validate amount - compare UI input with backend amount
+ // Once backend response structure is known, add validation here:
+ // - Extract fiat amount from orderDetailsResponse.data (check which field contains it)
+ // - Compare with amountSent from UI (Number(amountSent))
+ // Example structure (to be updated based on actual backend response):
+ // const backendAmount = /* extract from backend response */;
+ // const uiAmount = Number(amountSent) || 0;
+ // if (Math.abs(backendAmount - uiAmount) > tolerance) {
+ // // Handle mismatch
+ // }
+
+ // Clear polling
+ if (pollingIntervalRef.current) {
+ clearInterval(pollingIntervalRef.current);
+ pollingIntervalRef.current = null;
+ }
+ if (pollingTimeoutRef.current) {
+ clearTimeout(pollingTimeoutRef.current);
+ pollingTimeoutRef.current = null;
+ }
+
+ // Update status and navigate
+ setTransactionStatus(
+ status as
+ | "processing"
+ | "fulfilled"
+ | "validated"
+ | "settled"
+ | "refunded",
+ );
+ setIsCheckingPayment(false);
+ setCurrentStep("status");
+ }
+ } catch (error) {
+ console.error("Error checking payment status:", error);
+ // On error, still navigate to status page (it will handle polling there)
+ setIsCheckingPayment(false);
+ setCurrentStep("status");
+ }
+ };
+
+ // Start polling every 3 seconds
+ checkPaymentStatus(); // Check immediately
+ pollingIntervalRef.current = setInterval(checkPaymentStatus, 3000);
+
+ // Set a timeout to stop polling after 30 seconds and navigate anyway
+ pollingTimeoutRef.current = setTimeout(() => {
+ if (pollingIntervalRef.current) {
+ clearInterval(pollingIntervalRef.current);
+ pollingIntervalRef.current = null;
+ }
+ setIsCheckingPayment(false);
+ setCurrentStep("status");
+ }, 30000);
+ };
+
+ // Cleanup polling on unmount
+ useEffect(() => {
+ return () => {
+ if (pollingIntervalRef.current) {
+ clearInterval(pollingIntervalRef.current);
+ }
+ if (pollingTimeoutRef.current) {
+ clearTimeout(pollingTimeoutRef.current);
+ }
+ };
+ }, []);
+
+ const currencySymbol = getCurrencySymbol(paymentDetails.currency);
+ const formattedAmount = `${currencySymbol} ${formatNumberWithCommas(paymentDetails.amount)}`;
+
+ return (
+
+ {/* Header */}
+
+
+ Make payment
+
+
+ Use the payment details below to make payment
+
+
+
+ {/* Account Details Card */}
+
+
+
+ Account Details
+
+
+
+ Send to {formattedAmount} to the account below
+
+
+
+ {/* Fields Container */}
+
+ {/* Provider */}
+
+
+
+ Provider Bank {paymentDetails.provider}
+
+
+
+
+ {/* Account Number */}
+
+
+
+
+ {paymentDetails.accountNumber}
+
+
+
+
+
+
+ {/* Amount */}
+
+
+
+
+ {formattedAmount}
+
+
+
+
+
+
+ {/* Expiry Timer */}
+
+
+ This account is only for this payment. Expires in
+
+
+ {timeRemaining}
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
@@ -601,7 +722,7 @@ export const TransactionForm = ({
Send
- {token && activeBalance && (
+ {token && activeBalance && !isSwapped && (
balance || errors.amountSent)
- ? "text-red-500 dark:text-red-500"
- : "text-neutral-900 dark:text-white/80"
- }`}
+ className={`w-full rounded-xl border-b border-transparent bg-transparent py-2 text-2xl outline-none transition-all placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed dark:placeholder:text-white/30 ${authenticated && !isSwapped && (amountSent > balance || errors.amountSent)
+ ? "text-red-500 dark:text-red-500"
+ : "text-neutral-900 dark:text-white/80"
+ }`}
placeholder="0"
title="Enter amount to send"
/>
-
- setValue("token", selectedToken, { shouldDirty: true })
- }
- className="min-w-32"
- dropdownWidth={160}
- />
+ {isSwapped ? (
+
+ setValue("currency", selectedCurrency, { shouldDirty: true })
+ }
+ className="min-w-80"
+ dropdownWidth={320}
+ isCTA={!currency}
+ />
+ ) : (
+
+ setValue("token", selectedToken, { shouldDirty: true })
+ }
+ className="min-w-32"
+ dropdownWidth={160}
+ />
+ )}
+