Skip to content

[TASK-6758] Hide token selector on peanut wallet and default token #551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 3, 2024
Merged

[TASK-6758] Hide token selector on peanut wallet and default token #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3b935bb
feat: default token selection for pw
jjramirezn Nov 30, 2024
7317ecc
Merge branch 'peanut-wallet' into feat/default-selection-for-pw
jjramirezn Dec 2, 2024
67455d9
fix: add missing function deinition
jjramirezn Dec 2, 2024
cac8494
chore: remove superflous docs
jjramirezn Dec 2, 2024
8c264ce
fix: correct maxValue for Input
jjramirezn Dec 2, 2024
45af86b
refactor: use parseUnits for converting usd to usdc base units
jjramirezn Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
187 changes: 0 additions & 187 deletions docs/high_level_overview.md
View file
Open in desktop

This file was deleted.

5 changes: 4 additions & 1 deletion src/app/(mobile-ui)/wallet/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { motion } from 'framer-motion'
import { HomeLink } from '@/components/Home/HomeLink'
import { useAuth } from '@/context/authContext'
import { WalletProviderType } from '@/interfaces'
import { formatUnits } from 'viem'

const WalletDetailsPage = () => {
const { selectedWallet } = useWallet()
Expand Down Expand Up @@ -39,7 +40,9 @@ const WalletDetailsPage = () => {

<Card shadowSize="4" className="w-full rounded-md py-10">
<Card.Content className="flex h-full flex-row items-center justify-center">
<div className="text-5xl">{'$ 420.69'}</div>
<div className="text-5xl">
$ {Number(formatUnits(selectedWallet?.balance ?? 0n, 6)).toFixed(2)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: balance is bigint. Might be a rlly large number with 21 decimal places (js formates as scientific notation). Not sure toFixed(2) would help here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

formatUnit handles part of that, it will return the USD(C) amount. Unless the balance is too big, in that case you are right and we would have problems with scientific notation.
I have this task https://www.notion.so/peanutprotocol/Bug-X-chain-from-amount-formatted-wrongly-to-scientific-notation-141838117579807abd12ee396cbfee97?pvs=4 to deal with that

</div>
</Card.Content>
</Card>
<div className="flex flex-row gap-2">
Expand Down
58 changes: 39 additions & 19 deletions src/components/Cashout/Components/Initial.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ import ValidatedInput from '@/components/Global/ValidatedInput'
import { useState, useContext, useEffect, useMemo } from 'react'
import * as _consts from '../Cashout.consts'
import * as context from '@/context'
import { useBalance } from '@/hooks/useBalance'
import { useAuth } from '@/context/authContext'
import { useCreateLink } from '@/components/Create/useCreateLink'
import * as assets from '@/assets'
import { formatIban, validateBankAccount, floorFixed } from '@/utils'
import { formatIban, validateBankAccount, floorFixed, balanceByToken } from '@/utils'
import { FAQComponent } from './Faq.comp'
import { RecipientInfoComponent } from './RecipientInfo.comp'
import Icon from '@/components/Global/Icon'
Expand All @@ -19,6 +18,8 @@ import { MAX_CASHOUT_LIMIT, MIN_CASHOUT_LIMIT } from '@/components/Offramp/Offra
import { Button, Card } from '@/components/0_Bruddle'
import { useWallet } from '@/context/walletContext'
import { sanitizeBankAccount } from '@/utils/format.utils'
import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
import { useWeb3Modal } from '@web3modal/wagmi/react'

export const InitialCashoutView = ({
onNext,
Expand All @@ -31,11 +32,15 @@ export const InitialCashoutView = ({
setOfframpForm,
crossChainDetails,
}: _consts.ICashoutScreenProps) => {
const { selectedTokenPrice, inputDenomination, selectedChainID, selectedTokenAddress } = useContext(
context.tokenSelectorContext
)
const {
selectedTokenPrice,
inputDenomination,
selectedChainID,
setSelectedChainID,
selectedTokenAddress,
setSelectedTokenAddress,
} = useContext(context.tokenSelectorContext)

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

Expand Down Expand Up @@ -68,7 +73,8 @@ export const InitialCashoutView = ({

const { prepareCreateLinkWrapper } = useCreateLink()

const { isConnected, signInModal } = useWallet()
const { isConnected, signInModal, selectedWallet, isExternalWallet, isPeanutWallet } = useWallet()
const { open: web3modalOpen } = useWeb3Modal()

const isBelowMinLimit = useMemo(() => {
if (!usdValue) return false
Expand Down Expand Up @@ -190,11 +196,14 @@ export const InitialCashoutView = ({
}

const maxValue = useMemo(() => {
const balance = balanceByToken(selectedChainID, selectedTokenAddress)
if (!selectedWallet?.balances) {
return selectedWallet?.balance.toString() ?? ''
}
const balance = balanceByToken(selectedWallet.balances, selectedChainID, selectedTokenAddress)
if (!balance) return ''
// 6 decimal places, prettier
return floorFixed(balance.amount, 6)
}, [selectedChainID, selectedTokenAddress, balanceByToken])
}, [selectedChainID, selectedTokenAddress, selectedWallet?.balances, selectedWallet?.balance])

useEffect(() => {
if (!_tokenValue) return
Expand All @@ -211,6 +220,13 @@ export const InitialCashoutView = ({
}
}, [_tokenValue, inputDenomination])

useEffect(() => {
if (isPeanutWallet) {
setSelectedChainID(PEANUT_WALLET_CHAIN.id.toString())
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

setSelectedTokenAddress(PEANUT_WALLET_TOKEN)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: we miiiiiiiiiiight want to support other tokens in the future. Depends on demand and situation. E.g. maybe we find out ppinta token is great for onboarding and we run a promotion campaign partnering with them. Not sure what the best to do in that case would be here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great point and we have to think how we handle it. The idea of PW is absolute abstraction, but that comes with reduced functionality, like you mentioned (and PNT or MORFI are great onboarding tools).

One inmediate issue I can see is what do we do with claim links that contains tokens not supported for x-chain

}
}, [isPeanutWallet])

// Update the bank account selection handler
const handleBankAccountSelect = (accountIdentifier: string) => {
if (!xchainAllowed) return
Expand Down Expand Up @@ -270,16 +286,20 @@ export const InitialCashoutView = ({
Minimum amount is ${MIN_CASHOUT_LIMIT}
</div>
)}
<TokenSelector classNameButton="max-w-[100%]" />
{hasFetchedBalances && balances.length === 0 && (
<div
onClick={() => {
open()
}}
className="cursor-pointer text-h9 underline"
>
( Buy Tokens )
</div>
{isExternalWallet && (
<>
<TokenSelector classNameButton="max-w-[100%]" />
{selectedWallet!.balances!.length === 0 && (
<div
onClick={() => {
web3modalOpen()
}}
className="cursor-pointer text-h9 underline"
>
( Buy Tokens )
</div>
)}
</>
)}
<div className="flex w-full flex-col justify-center gap-3">
<RecipientInfoComponent />
Expand Down
Loading
Loading