diff --git a/unlock-app/src/components/content/SettingsContent.tsx b/unlock-app/src/components/content/SettingsContent.tsx index dcc588370c3..f760d4c3076 100644 --- a/unlock-app/src/components/content/SettingsContent.tsx +++ b/unlock-app/src/components/content/SettingsContent.tsx @@ -4,6 +4,7 @@ import { ReactNode, useState } from 'react' import { SettingsContext } from '~/components/interface/locks/Settings' import { PaymentSettings } from '../interface/user-account/PaymentSettings' import AccountInfo from '../interface/user-account/AccountInfo' +import { Funding } from '../interface/user-account/Funding' export const SettingsContent = () => { const [selectedIndex, setSelectedIndex] = useState(0) @@ -11,7 +12,7 @@ export const SettingsContent = () => { const tabs: { label: string description?: string - id: 'account' | 'payments' + id: 'account' | 'payments' | 'funding' children: ReactNode }[] = [ { @@ -27,6 +28,12 @@ export const SettingsContent = () => { description: 'Configure your credit card payment settings.', children: , }, + { + id: 'funding', + label: 'Funding', + description: 'Fund your account with ETH.', + children: , + }, ] return ( diff --git a/unlock-app/src/components/interface/user-account/Funding.tsx b/unlock-app/src/components/interface/user-account/Funding.tsx new file mode 100644 index 00000000000..888520b7d6f --- /dev/null +++ b/unlock-app/src/components/interface/user-account/Funding.tsx @@ -0,0 +1,88 @@ +import { LoginModal as FundingModal, useFundWallet } from '@privy-io/react-auth' + +import { Badge, Button, Modal, Placeholder } from '@unlock-protocol/ui' +import { useState } from 'react' +import { ToastHelper } from '~/components/helpers/toast.helper' +import { useAuthenticate } from '~/hooks/useAuthenticate' +import { useWeb3Service } from '~/utils/withWeb3Service' +import { useQuery } from '@tanstack/react-query' +import { base } from 'viem/chains' +import { SettingCard } from '../locks/Settings/elements/SettingCard' +import { useEthPrice } from '~/hooks/useEthPrice' + +export const Funding = () => { + const { account } = useAuthenticate() + const web3Service = useWeb3Service() + const { fundWallet } = useFundWallet({ + onUserExited: () => { + ToastHelper.error('Funding operation cancelled') + }, + }) + const [showFundingModal, setShowFundingModal] = useState(false) + + const { isPending: isLoadingBalance, data: userBalance } = useQuery({ + queryKey: ['getBalance', account, 8453], + queryFn: async () => { + return parseFloat(await web3Service.getAddressBalance(account!, 8453)) + }, + }) + + const { data: ethPrice } = useEthPrice({ + amount: userBalance?.toFixed(4), + network: 8453, + }) + + const handleFundWallet = async () => { + setShowFundingModal(true) + await fundWallet(account!, { + chain: base, + }) + } + + return ( + + + {isLoadingBalance ? ( + + + + ) : ( + + Your current balance + + + {userBalance?.toFixed(4)} ETH + + {userBalance && ethPrice && ethPrice > 0 && ( + + (≈{' '} + + ${new Intl.NumberFormat().format(ethPrice)} + + ) + + )} + + + )} + + Fund Account + + + + + + + ) +} diff --git a/unlock-app/src/hooks/useEthPrice.ts b/unlock-app/src/hooks/useEthPrice.ts new file mode 100644 index 00000000000..544d3c973ae --- /dev/null +++ b/unlock-app/src/hooks/useEthPrice.ts @@ -0,0 +1,24 @@ +import { useQuery } from '@tanstack/react-query' +import { locksmith } from '~/config/locksmith' + +export const useEthPrice = ({ + amount, + network, +}: { + amount: string | undefined + network: number +}) => { + return useQuery({ + queryKey: ['getEthPrice', amount, network], + queryFn: async () => { + if (!amount) return null + try { + const response = await locksmith.price(network, parseFloat(amount)) + return response.data.result?.priceInAmount + } catch (error) { + return null + } + }, + enabled: !!amount, + }) +}