From bc7ddb2684621456c5c67a8bb2b875423802cc68 Mon Sep 17 00:00:00 2001 From: Felicio Date: Thu, 10 Jul 2025 19:24:31 +0900 Subject: [PATCH 1/4] move buy to wallet --- .../src/app/_components/buy-crypto-drawer.tsx | 415 ++---------------- .../portfolio/assets/-components/token.tsx | 33 +- .../components/buy-crypto-drawer/index.tsx | 217 +++++++++ packages/wallet/src/components/index.tsx | 6 + 4 files changed, 271 insertions(+), 400 deletions(-) create mode 100644 packages/wallet/src/components/buy-crypto-drawer/index.tsx diff --git a/apps/portfolio/src/app/_components/buy-crypto-drawer.tsx b/apps/portfolio/src/app/_components/buy-crypto-drawer.tsx index da6ce8060..44dc2de6f 100644 --- a/apps/portfolio/src/app/_components/buy-crypto-drawer.tsx +++ b/apps/portfolio/src/app/_components/buy-crypto-drawer.tsx @@ -1,83 +1,12 @@ 'use client' -import { useEffect, useMemo, useState } from 'react' - import { - Avatar, - Button, - ContextTag, - DropdownButton, - DropdownMenu, - useToast, -} from '@status-im/components' -import { FeesIcon } from '@status-im/icons/12' -import { ArrowLeftIcon } from '@status-im/icons/16' -import { ChevronRightIcon, ExternalIcon, LabelsIcon } from '@status-im/icons/20' -import { cx } from 'class-variance-authority' -import NextImage from 'next/image' + BuyCryptoDrawer as BuyCryptoDrawerBase, + type Provider, +} from '@status-im/wallet/components' -import { getSupportedCurrencies, handleCryptoOnRamp } from '../_actions' +import { handleCryptoOnRamp } from '../_actions' import { useCurrentAccount } from '../_hooks/use-current-account' -import { Image, type ImageId } from './assets' -import * as Drawer from './drawer' - -import type { Currency, Provider } from '../_actions' - -// Todo: pass images to cloudinary? -const PROVIDERS = [ - { - name: 'mercuryo', - description: 'Buy crypto within 15 seconds', - fee: '4.5%', - image: '/images/providers/mercuryo.png', - }, - { - name: 'moonpay', - description: 'The new standard for fiat to crypto', - fee: '1% - 4.5%', - image: '/images/providers/moonpay.png', - }, -] as const - -type NetworkOptions = Array<{ - id: 'ETHEREUM' | 'OPTIMISM' | 'ARBITRUM' | 'BASE' | 'POLYGON' | 'BSC' - name: string - image: ImageId -}> - -const NETWORKS: NetworkOptions = [ - { - id: 'ETHEREUM', - name: 'Ethereum', - image: 'Wallet/Icons/Logos/01:120:120', - }, - { - id: 'OPTIMISM', - name: 'Optimism', - image: 'Wallet/Icons/Logos/02:120:120', - }, - { - id: 'ARBITRUM', - name: 'Arbitrum', - image: 'Wallet/Icons/Logos/03:120:120', - }, - { - id: 'BASE', - name: 'Base', - // fixme: export correct image - image: 'Wallet/Icons/Logos/01:120:120', - }, - { - id: 'POLYGON', - name: 'Polygon', - image: 'Wallet/Icons/Logos/01:120:120', - }, - { - id: 'BSC', - name: 'BSC', - image: 'Wallet/Icons/Logos/01:120:120', - }, -] type Props = { children: React.ReactElement @@ -85,330 +14,36 @@ type Props = { export const BuyCryptoDrawer = (props: Props) => { const { children } = props - const [open, setOpen] = useState(false) - - const [isMercuryoSelected, setIsMercuryoSelected] = useState(false) - const [network, setNetwork] = useState(NETWORKS[0]) - - const [allCurrencies, setAllCurrencies] = useState([]) - const [currency, setCurrency] = useState() - const account = useCurrentAccount() - const toast = useToast() - - const handleProviderSelect = async (provider: Provider) => { - const openProviderUrl = (url: string) => { - const newTab = window.open(url, '_blank', 'noopener,noreferrer') - if (!newTab) { - toast.negative( - 'Unable to open a new tab. Please check your browser settings.' - ) - } - } - - try { - const data = await handleCryptoOnRamp({ - name: provider, - network: network.id, - address: account.address, - asset: currency?.code, - }) - - openProviderUrl(data.url) - } catch { - toast.negative( - 'Unable to open a new tab. Please check your browser settings.' - ) - } + const handleProviderSelect = async ( + provider: Provider, + network: string, + asset?: string + ) => { + return handleCryptoOnRamp({ + name: provider, + network, + address: account.address, + asset: asset || 'EUR', + }) } - useEffect(() => { - if (open === false) { - setCurrency(undefined) - setIsMercuryoSelected(false) - } - }, [open]) - - useEffect(() => { - const fetchCurrencies = async () => { - try { - const data = await getSupportedCurrencies() - - setAllCurrencies(data) - } catch (error) { - toast.negative( - 'Failed to fetch supported currencies. Please try again later.' - ) - console.error(error) - } - } - - fetchCurrencies() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - - const filteredCurrencies = useMemo(() => { - return allCurrencies.filter(currency => currency.network === network.id) - }, [allCurrencies, network]) + const handleOpenTab = (url: string) => { + window.open(url, '_blank', 'noopener,noreferrer') + } if (!account) { return null } return ( - - {children} - - - - Buy crypto - -
-
-
- -
- - {account.name} - -
- - {isMercuryoSelected && ( - <> - via - - } - /> - - )} -
- - - -
-
-

- Select network to buy asset on -

- - -
- - {network.name} -
- - - {NETWORKS.map(option => { - return ( - - } - key={option.id} - label={option.name} - onSelect={() => { - setNetwork(option) - }} - selected={option.id === network.id} - /> - ) - })} - - -
-
-
-

Select asset

- - -
- {currency ? ( - <> - -
-

{currency.label}

-

- {currency.code} -

-
- - ) : ( -

- Select a currency -

- )} -
- - - {filteredCurrencies.map(option => { - return ( - - } - key={option.code} - label={option.label} - // secondaryLabel={opti+on.code} - onSelect={() => setCurrency(option)} - selected={option.code === currency?.code} - /> - ) - })} - - -
-
- -
- {PROVIDERS.map(provider => { - if (provider.name === 'mercuryo') { - return ( - - ) - } - - return ( - - ) - })} -
- -
- -
- - - + + {children} + ) } diff --git a/apps/wallet/src/routes/portfolio/assets/-components/token.tsx b/apps/wallet/src/routes/portfolio/assets/-components/token.tsx index eca959eb3..ab6f975c1 100644 --- a/apps/wallet/src/routes/portfolio/assets/-components/token.tsx +++ b/apps/wallet/src/routes/portfolio/assets/-components/token.tsx @@ -8,10 +8,13 @@ import { SendBlurIcon, } from '@status-im/icons/20' import { + type Account, Balance, + BuyCryptoDrawer, CurrencyAmount, NetworkBreakdown, ReceiveCryptoDrawer, + type SendAssetsFormData, SendAssetsModal, StickyHeaderContainer, TokenAmount, @@ -28,8 +31,6 @@ import { renderMarkdown } from '@/lib/markdown' import { apiClient } from '@/providers/api-client' import { useWallet } from '@/providers/wallet-context' -import type { Account, SendAssetsFormData } from '@status-im/wallet/components' - type Props = { address: string ticker: string @@ -149,6 +150,14 @@ const Token = (props: Props) => { setGasInput({ to, value }) } + const handleOpenTab = (url: string) => { + if (typeof chrome !== 'undefined' && chrome.tabs) { + chrome.tabs.create({ url }) + } else { + window.open(url, '_blank', 'noopener,noreferrer') + } + } + useEffect(() => { const processMarkdown = async () => { if (typedToken) { @@ -242,11 +251,13 @@ const Token = (props: Props) => { } rightSlot={
- + + +
- + + + + ) + })} +
+ + + + ) +} diff --git a/packages/wallet/src/components/index.tsx b/packages/wallet/src/components/index.tsx index ecfa3ed17..162db3d4f 100644 --- a/packages/wallet/src/components/index.tsx +++ b/packages/wallet/src/components/index.tsx @@ -6,6 +6,12 @@ export { type Account, Address, type AddressProps } from './address' export { AssetsList } from './assets-list' export { Balance } from './balance' export { BlurredCircle } from './blurred-circle' +export { + BuyCryptoDrawer, + type BuyCryptoDrawerProps, + type Currency, + type Provider, +} from './buy-crypto-drawer' export { CollectiblesGrid } from './collectibles-grid' export { CreatePasswordForm, From ab3b018353d138084d8ed54b998cd37316a03ab5 Mon Sep 17 00:00:00 2001 From: Felicio Date: Thu, 10 Jul 2025 19:44:24 +0900 Subject: [PATCH 2/4] ch --- .changeset/cuddly-jokes-complain.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/cuddly-jokes-complain.md diff --git a/.changeset/cuddly-jokes-complain.md b/.changeset/cuddly-jokes-complain.md new file mode 100644 index 000000000..5d63835b2 --- /dev/null +++ b/.changeset/cuddly-jokes-complain.md @@ -0,0 +1,7 @@ +--- +'@status-im/wallet': patch +'portfolio': patch +'wallet': patch +--- + +move buy to wallet From 5424e49dc7db7e8a3e63b006dfc910a76181457d Mon Sep 17 00:00:00 2001 From: Felicio Date: Thu, 10 Jul 2025 19:49:10 +0900 Subject: [PATCH 3/4] Update packages/wallet/src/components/buy-crypto-drawer/index.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/wallet/src/components/buy-crypto-drawer/index.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/wallet/src/components/buy-crypto-drawer/index.tsx b/packages/wallet/src/components/buy-crypto-drawer/index.tsx index 3eb598f70..ec3edf5be 100644 --- a/packages/wallet/src/components/buy-crypto-drawer/index.tsx +++ b/packages/wallet/src/components/buy-crypto-drawer/index.tsx @@ -128,11 +128,7 @@ export const BuyCryptoDrawer = (props: Props) => { } } - useEffect(() => { - if (open === false) { - // setIsMercuryoSelected(false) // Removed as per edit hint - } - }, [open]) + // Removed unused useEffect hook as it had no side effects if (!account) { return null From 2eee0c0de20bccd0e1d80c4fe939ca1c55a941e6 Mon Sep 17 00:00:00 2001 From: Felicio Date: Thu, 10 Jul 2025 19:49:26 +0900 Subject: [PATCH 4/4] Update packages/wallet/src/components/buy-crypto-drawer/index.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/wallet/src/components/buy-crypto-drawer/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/wallet/src/components/buy-crypto-drawer/index.tsx b/packages/wallet/src/components/buy-crypto-drawer/index.tsx index ec3edf5be..54341b3e8 100644 --- a/packages/wallet/src/components/buy-crypto-drawer/index.tsx +++ b/packages/wallet/src/components/buy-crypto-drawer/index.tsx @@ -77,14 +77,14 @@ export const BuyCryptoDrawer = (props: Props) => { } = props const [open, setOpen] = useState(false) - const [network] = useState(NETWORKS[0]) - const [currency] = useState({ + const network: NetworkOptions[0] = NETWORKS[0] + const currency: Currency = { contract_address: '', code: 'EUR', label: 'Euro', network: 'ETHEREUM', imageUrl: '/images/tokens/eur.png', - }) + } const toast = useToast()