From 99fa0d6bee802493c74a66e0ff71b7668407ad7b Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 30 Oct 2025 12:41:34 +0530 Subject: [PATCH 1/5] feat: add flow improvements --- .../add-money/[country]/bank/page.tsx | 17 ++- .../components/AddMoneyBankDetails.tsx | 138 ++++++++++-------- .../components/OnrampConfirmationModal.tsx | 71 +++++++-- .../Global/CopyToClipboard/index.tsx | 2 +- src/components/Global/InfoCard/index.tsx | 30 ++++ .../views/ReqFulfillBankFlowManager.tsx | 4 +- tailwind.config.js | 6 + 7 files changed, 190 insertions(+), 78 deletions(-) create mode 100644 src/components/Global/InfoCard/index.tsx diff --git a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx index 008c88951..e8f2872a6 100644 --- a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx +++ b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx @@ -16,7 +16,7 @@ import { useCreateOnramp } from '@/hooks/useCreateOnramp' import { useRouter, useParams } from 'next/navigation' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { formatUnits } from 'viem' -import Icon from '@/components/Global/Icon' +// import Icon from '@/components/Global/Icon' import PeanutLoading from '@/components/Global/PeanutLoading' import EmptyState from '@/components/Global/EmptyStates/EmptyState' import { UserDetailsForm, type UserDetailsFormData } from '@/components/AddMoney/UserDetailsForm' @@ -25,6 +25,8 @@ import AddMoneyBankDetails from '@/components/AddMoney/components/AddMoneyBankDe import { getCurrencyConfig, getCurrencySymbol, getMinimumAmount } from '@/utils/bridge.utils' import { OnrampConfirmationModal } from '@/components/AddMoney/components/OnrampConfirmationModal' import { InitiateBridgeKYCModal } from '@/components/Kyc/InitiateBridgeKYCModal' +import InfoCard from '@/components/Global/InfoCard' +import { Icon } from '@/components/Global/Icons/Icon' type AddStep = 'inputAmount' | 'kyc' | 'loading' | 'collectUserDetails' | 'showDetails' @@ -342,10 +344,13 @@ export default function OnrampBankPage() { } hideBalance={true} /> -
- - This must exactly match what you send from your bank -
+ + +
+ + This must match what you send from your bank! +
+ Share Details diff --git a/src/components/AddMoney/components/OnrampConfirmationModal.tsx b/src/components/AddMoney/components/OnrampConfirmationModal.tsx index 6e07590bc..07cf1dc3e 100644 --- a/src/components/AddMoney/components/OnrampConfirmationModal.tsx +++ b/src/components/AddMoney/components/OnrampConfirmationModal.tsx @@ -1,15 +1,25 @@ 'use client' import ActionModal from '@/components/Global/ActionModal' +import { Icon } from '@/components/Global/Icons/Icon' +import InfoCard from '@/components/Global/InfoCard' import { Slider } from '@/components/Slider' interface OnrampConfirmationModalProps { visible: boolean onClose: () => void onConfirm: () => void + amount: string + currency: string } -export const OnrampConfirmationModal = ({ visible, onClose, onConfirm }: OnrampConfirmationModalProps) => { +export const OnrampConfirmationModal = ({ + visible, + onClose, + onConfirm, + amount, + currency, +}: OnrampConfirmationModalProps) => { return ( - In the following step you'll see a
"Deposit Message" item
copy and - paste it exactly as it is on
the description field of your transfer. -
-
- - Without it your deposit will be returned and might take 2-10 working days to process. - - - } footer={
v && onConfirm()} />
} + content={ +
+ +
    +
  1. Bank details to send money to
    2. +
  2. A deposit reference code
    3. +
+ +

You MUST:

+ +
+ + + Send exactly{' '} + + {currency} + {amount}{' '} + + (the exact amount shown) + +
+ +
+ + Copy the reference code exactly +
+
+ + Paste it in the description/reference field +
+ + + +
+ +
+ + If the amount or reference don't match: + + + Your deposit will fail and it will take 2 to 10 days to return to your bank and + might incur fees. + +
+
+ +
+ } preventClose={false} modalPanelClassName="max-w-md mx-8" /> diff --git a/src/components/Global/CopyToClipboard/index.tsx b/src/components/Global/CopyToClipboard/index.tsx index 22ab57e6c..e2ec25a82 100644 --- a/src/components/Global/CopyToClipboard/index.tsx +++ b/src/components/Global/CopyToClipboard/index.tsx @@ -7,7 +7,7 @@ interface Props { textToCopy: string fill?: string className?: string - iconSize?: '2' | '4' | '6' | '8' + iconSize?: '2' | '3' | '4' | '6' | '8' type?: 'button' | 'icon' buttonSize?: ButtonSize } diff --git a/src/components/Global/InfoCard/index.tsx b/src/components/Global/InfoCard/index.tsx new file mode 100644 index 000000000..2568ac902 --- /dev/null +++ b/src/components/Global/InfoCard/index.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import Card from '../Card' +import { twMerge } from 'tailwind-merge' + +interface InfoCardProps { + children: React.ReactNode + variant?: 'warning' | 'error' | 'info' | 'default' + className?: string +} + +const InfoCard = ({ children, variant = 'default', className }: InfoCardProps) => { + const getClassNames = () => { + switch (variant) { + case 'warning': + return 'border-yellow-9 bg-yellow-10 text-yellow-11' + case 'error': + return 'border-error-5 bg-error-6 text-error' + case 'info': + return 'border-secondary-7 bg-secondary-9 text-black' + case 'default': + return 'border-grey-1 bg-grey-4 text-black' + default: + return 'border-grey-1 bg-grey-4 text-black' + } + } + + return {children} +} + +export default InfoCard diff --git a/src/components/Request/views/ReqFulfillBankFlowManager.tsx b/src/components/Request/views/ReqFulfillBankFlowManager.tsx index 561452b7f..defde0d56 100644 --- a/src/components/Request/views/ReqFulfillBankFlowManager.tsx +++ b/src/components/Request/views/ReqFulfillBankFlowManager.tsx @@ -18,7 +18,7 @@ import ErrorAlert from '@/components/Global/ErrorAlert' import { Button } from '@/components/0_Bruddle' import { updateUserById } from '@/app/actions/users' import { type Address } from 'viem' -import { getCurrencyConfig, getMinimumAmount } from '@/utils/bridge.utils' +import { getCurrencyConfig, getCurrencySymbol, getMinimumAmount } from '@/utils/bridge.utils' import { getCurrencyPrice } from '@/app/actions/currency' /** @@ -188,6 +188,8 @@ export const ReqFulfillBankFlowManager = ({ parsedPaymentData }: { parsedPayment onConfirm={() => { handleOnrampConfirmation() }} + amount={chargeDetails?.tokenAmount ?? '0'} + currency={getCurrencySymbol(getCurrencyConfig(selectedCountry?.id ?? '', 'onramp').currency)} /> ) case RequestFulfillmentBankFlowStep.DepositBankDetails: diff --git a/tailwind.config.js b/tailwind.config.js index e53e6a824..af056ea97 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -27,6 +27,7 @@ module.exports = { 6: '#E9EEFB', 7: '#5883FF', 8: '#D4B6FF', + 9: '#D6E1FF', }, grey: { 1: '#5F646D', @@ -57,6 +58,9 @@ module.exports = { 6: '#885B00', 7: '#FFE6B3', 8: '#FAE184', + 9: '#FDE047', + 10: '#FEFCE8', + 11: '#CA8A04', }, green: { 1: '#98E9AB', @@ -113,6 +117,8 @@ module.exports = { 2: '#EA8282', 3: '#FF4A4A', 4: '#FC5555', + 5: '#FF3B30', + 6: '#FFE9E9', }, }, zIndex: { From 4c1f9c11586e9aea1e464a1644a120555bc9e3dd Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 30 Oct 2025 12:51:17 +0530 Subject: [PATCH 2/5] feat: Add withdraw flow info text --- src/components/AddWithdraw/DynamicBankAccountForm.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/AddWithdraw/DynamicBankAccountForm.tsx b/src/components/AddWithdraw/DynamicBankAccountForm.tsx index 2c8cace94..dfceb4791 100644 --- a/src/components/AddWithdraw/DynamicBankAccountForm.tsx +++ b/src/components/AddWithdraw/DynamicBankAccountForm.tsx @@ -18,6 +18,7 @@ import useSavedAccounts from '@/hooks/useSavedAccounts' import { useAppDispatch, useAppSelector } from '@/redux/hooks' import { bankFormActions } from '@/redux/slices/bank-form-slice' import { useDebounce } from '@/hooks/useDebounce' +import { Icon } from '../Global/Icons/Icon' const isIBANCountry = (country: string) => { return BRIDGE_ALPHA3_TO_ALPHA2[country.toUpperCase()] !== undefined @@ -428,6 +429,11 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D })} )} + +
+ +

You can only withdraw to accounts under your name.

+