Skip to content

Commit

Permalink
Merge pull request #411 from peanutprotocol/fix/cashout-minor-issues
Browse files Browse the repository at this point in the history 
cashout-fix: disable cashout inputs when not available + minor FAQ issue
  • Loading branch information
@Hugo0
Hugo0 authored Oct 4, 2024
2 parents d4737f1 + 0f780c4 commit 2dc9a21
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 25 deletions.
9 changes: 7 additions & 2 deletions src/components/Cashout/Components/Faq.comp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { CrispButton } from '@/components/CrispChat'
import Icon from '@/components/Global/Icon'
import { Menu, Transition } from '@headlessui/react'
import Link from 'next/link'

export const FAQComponent = ({ className }: { className?: string }) => {
return (
Expand All @@ -22,13 +23,17 @@ export const FAQComponent = ({ className }: { className?: string }) => {
<Menu.Items className="shadow-primary-4 absolute bottom-full z-[10000] mb-1 mr-1 w-64 border border-n-1 bg-white px-6 py-3 md:left-0 md:right-auto">
<Menu.Item as={'div'} className={'text-h8 font-normal'}>
<p>
Cashing out requires KYC. <br></br>Min cashout: $10, max $100k.
Cashing out requires{' '}
<Link href="/kyc" className="text-blue-600 underline">
KYC
</Link>
. <br></br>Min cashout: $10, max $100k.
</p>
<br></br>
<p>Fees:</p>
<ul className="list-disc pl-5">
<li>Peanut sponsors gas</li>
<li>we have to charge a $1 fee for EU cashouts, and $0.5 for US transfers</li>
<li>We have to charge a $1 fee for EU cashouts, and $0.5 for US transfers</li>
</ul>
<br></br>
<p>Usually takes 20mins, but can take up to 3 business days.</p>
Expand Down
62 changes: 40 additions & 22 deletions src/components/Cashout/Components/Initial.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,37 +10,34 @@ import * as context from '@/context'
import Loading from '@/components/Global/Loading'
import { useBalance } from '@/hooks/useBalance'
import { useAuth } from '@/context/authContext'
import { useForm } from 'react-hook-form'
import { useWalletType } from '@/hooks/useWalletType'
import { useCreateLink } from '@/components/Create/useCreateLink'
import { GlobalLoginComponent } from '@/components/Global/LoginComponent'
import { Icon as ChakraIcon } from '@chakra-ui/react'
import * as assets from '@/assets'
import * as utils from '@/utils'
import { FAQComponent } from './Faq.comp'
import { RecipientInfoComponent } from './RecipientInfo.comp'
import { motion, AnimatePresence } from 'framer-motion'
import Icon from '@/components/Global/Icon'
import { twMerge } from 'tailwind-merge'

export const InitialCashoutView = ({
onNext,
tokenValue,
usdValue,
setUsdValue,
setTokenValue,
setRecipient,
recipient,
setPreparedCreateLinkWrapperResponse,
setInitialKYCStep,
setOfframpForm,
crossChainDetails,
}: _consts.ICashoutScreenProps) => {
const { selectedTokenPrice, inputDenomination, selectedChainID } = useContext(context.tokenSelectorContext)

const { balances, hasFetchedBalances } = useBalance()
const { user, fetchUser, isFetchingUser } = useAuth()
const [, setUserType] = useState<'NEW' | 'EXISTING' | undefined>(undefined)

const xchainAllowed = useMemo( (): boolean => {
const xchainAllowed = useMemo((): boolean => {
/**
* Checks to validate if the chain we want to cash out from allows cross-chain operations.
*
Expand All @@ -49,10 +46,10 @@ export const InitialCashoutView = ({
* There may be chains that are not supported to conduct that cross-chain operation (e.g., due to gas costs,
* business strategy, etc.), so we'd like to block user action in that case.
*/
return crossChainDetails.find((chain: any) => chain.chainId.toString() === selectedChainID.toString()) != undefined
},
[selectedChainID]
)
return (
crossChainDetails.find((chain: any) => chain.chainId.toString() === selectedChainID.toString()) != undefined
)
}, [selectedChainID])

const { setLoadingState, loadingState, isLoading } = useContext(context.loadingStateContext)
const [errorState, setErrorState] = useState<{
Expand Down Expand Up @@ -269,12 +266,16 @@ export const InitialCashoutView = ({
?.map((account, index) => (
<div
key={index}
className={`flex w-full cursor-pointer items-center justify-between border border-black p-2 ${
className={twMerge(
'flex w-full items-center justify-between border border-black p-2',
selectedBankAccount === account.account_identifier
? 'bg-purple-1'
: 'hover:bg-gray-100'
}`}
: 'hover:bg-gray-100',
xchainAllowed && 'cursor-pointer',
!xchainAllowed && 'opacity-60'
)}
onClick={() => {
if (!xchainAllowed) return
if (selectedBankAccount === account.account_identifier) {
setSelectedBankAccount(undefined)
} else {
Expand All @@ -285,10 +286,7 @@ export const InitialCashoutView = ({
>
<div className="flex flex-grow items-center">
<Icon name={'bank'} className="mr-2 h-4 fill-gray-1" />
<label
htmlFor={`bank-${index}`}
className="cursor-pointer text-right"
>
<label htmlFor={`bank-${index}`} className="text-right">
{utils.formatIban(account.account_identifier)}
</label>
</div>
Expand Down Expand Up @@ -321,17 +319,27 @@ export const InitialCashoutView = ({
<label className="text-left text-h8 font-light">
Cashout to a new bank account:
</label>
<div className="flex w-full cursor-pointer border border-black p-2">
<div
className={twMerge(
'flex w-full border border-black p-2',
xchainAllowed && 'cursor-pointer',
!xchainAllowed && 'opacity-60'
)}
>
<label className="ml-2 text-right">To:</label>
<input
type="text"
className="ml-2 w-full border-none outline-none"
className={twMerge(
!xchainAllowed && 'bg-transparent',
'ml-2 w-full border-none outline-none'
)}
placeholder="IBAN / US account number"
value={newBankAccount}
onChange={(e) => setNewBankAccount(e.target.value)}
onFocus={() => setActiveInput('newBankAccount')}
spellCheck="false"
autoComplete="iban"
disabled={!xchainAllowed}
/>
</div>
</motion.div>
Expand All @@ -341,17 +349,27 @@ export const InitialCashoutView = ({
) : (
<div className="flex w-full flex-col items-start justify-center gap-2">
<label className="text-left text-h8 font-light">Cashout to a new bank account:</label>
<div className="flex w-full cursor-pointer border border-black p-2">
<div
className={twMerge(
'flex w-full border border-black p-2',
xchainAllowed && 'cursor-pointer',
!xchainAllowed && 'opacity-60'
)}
>
<label className="ml-2 text-right">To:</label>
<input
type="text"
className="ml-2 w-full border-none outline-none"
className={twMerge(
!xchainAllowed && 'bg-transparent',
'ml-2 w-full border-none outline-none'
)}
placeholder="IBAN / US account number"
value={newBankAccount}
onChange={(e) => setNewBankAccount(e.target.value)}
onFocus={() => setActiveInput('newBankAccount')}
spellCheck="false"
autoComplete="iban"
disabled={!xchainAllowed}
/>
</div>
</div>
Expand Down Expand Up @@ -400,7 +418,7 @@ export const InitialCashoutView = ({
{MAX_CASHOUT_LIMIT.toLocaleString()}.
</span>
)}
{!crossChainDetails.find((chain: any) => chain.chainId.toString() === selectedChainID.toString()) && (
{!xchainAllowed && (
<span className=" text-h8 font-normal ">
<ChakraIcon name="warning" className="-mt-0.5" /> You cannot cashout on this chain.
</span>
Expand Down
12 changes: 11 additions & 1 deletion src/components/Global/TokenAmountInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,20 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit }: To

utils.estimateStableCoin(1)

const formRef = useRef<HTMLFormElement>(null)

const handleContainerClick = () => {
if (inputRef.current) {
inputRef.current.focus()
}
}

return (
<form
className={`relative max-w-96 rounded-none border border-n-1 px-2 py-4 dark:border-white ${className}`}
ref={formRef}
className={`relative max-w-96 cursor-text rounded-none border border-n-1 px-2 py-4 dark:border-white ${className}`}
action=""
onClick={handleContainerClick}
>
<div className="flex h-14 w-full flex-row items-center justify-center gap-1">
{}
Expand Down

0 comments on commit 2dc9a21

Please sign in to comment.