diff --git a/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx index b4c281a..4549fe2 100644 --- a/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx +++ b/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx @@ -1,7 +1,7 @@ import { useRef, useState } from "react"; import Link from "next/link"; import { NetworkOptions } from "./NetworkOptions"; -import { FundButton } from "@coinbase/onchainkit/fund"; +import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund"; import { Avatar, Badge, Identity, Name } from "@coinbase/onchainkit/identity"; import CopyToClipboard from "react-copy-to-clipboard"; import { getAddress } from "viem"; @@ -37,7 +37,18 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre const [addressCopied, setAddressCopied] = useState(false); const [selectingNetwork, setSelectingNetwork] = useState(false); + const dropdownRef = useRef(null); + + const projectId = process.env.NEXT_PUBLIC_CDP_PROJECT_ID || ""; + + const onrampBuyUrl = getOnrampBuyUrl({ + projectId, + addresses: { connectedAddress: ["base"] }, + assets: ["USDC", "ETH"], + presetFiatAmount: 20, + fiatCurrency: "USD", + }); const closeDropdown = () => { setSelectingNetwork(false); dropdownRef.current?.removeAttribute("open"); @@ -84,7 +95,11 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre - +