Skip to content

Commit 40a3c5d

Browse files
luloxiluloxi
committed
UI improvements to wallet dropdown and stuff
1 parent cd4e64a commit 40a3c5d

File tree

2 files changed

+42
-44
lines changed

2 files changed

+42
-44
lines changed

‎packages/nextjs/app/profile/_components/ProfileInfo.tsx‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import React, { useEffect, useState } from "react";
2-
import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund";
32
import { Avatar, Badge, Identity, Name } from "@coinbase/onchainkit/identity";
43
import { useAccount } from "wagmi";
54
import { PencilIcon } from "@heroicons/react/24/outline";
65
import { InputBase } from "~~/components/punk-society/InputBase";
76
import { LoadingBars } from "~~/components/punk-society/LoadingBars";
8-
import { PunkBalance } from "~~/components/punk-society/PunkBalance";
9-
import { PunkConnectButton } from "~~/components/punk-society/PunkConnectButton";
107
import { TextInput } from "~~/components/punk-society/TextInput";
118
import { Address } from "~~/components/scaffold-eth";
129
import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
@@ -24,18 +21,8 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({ address }) => {
2421
const [isEditing, setIsEditing] = useState(false); // New state for edit mode
2522
const [loadingProfile, setLoadingProfile] = useState(true);
2623

27-
const projectId = process.env.NEXT_PUBLIC_CDP_PROJECT_ID ? process.env.NEXT_PUBLIC_CDP_PROJECT_ID : "";
2824
const { address: connectedAddress } = useAccount();
2925

30-
const onrampBuyUrl = getOnrampBuyUrl({
31-
projectId,
32-
addresses: connectedAddress ? { [connectedAddress]: ["base"] } : {},
33-
// assets: ["ETH", "USDC"],
34-
assets: ["ETH"],
35-
// presetFiatAmount: 20,
36-
// fiatCurrency: "USD",
37-
});
38-
3926
const { data: punkProfile } = useScaffoldReadContract({
4027
contractName: "BasedProfile",
4128
functionName: "profiles",
@@ -124,16 +111,7 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({ address }) => {
124111
{bio && <p className="text-base-content">{bio}</p>}
125112
<div className="mt-2">
126113
{address === connectedAddress ? (
127-
<div className="flex flex-col md:flex-row items-center justify-center gap-3">
128-
<div>
129-
<PunkBalance address={connectedAddress} />
130-
131-
<PunkConnectButton />
132-
</div>
133-
<div className="bg-base-200 rounded-lg">
134-
<FundButton fundingUrl={onrampBuyUrl} />
135-
</div>
136-
</div>
114+
<div className="flex flex-col md:flex-row items-center justify-center gap-3"></div>
137115
) : (
138116
<div className="text-base-content">
139117
<Address address={address} />

‎packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { useRef, useState } from "react";
22
import Link from "next/link";
33
import { NetworkOptions } from "./NetworkOptions";
4+
import { FundButton } from "@coinbase/onchainkit/fund";
45
import { Avatar, Badge, Identity, Name } from "@coinbase/onchainkit/identity";
56
import CopyToClipboard from "react-copy-to-clipboard";
67
import { getAddress } from "viem";
78
import { Address } from "viem";
89
import { useAccount, useDisconnect } from "wagmi";
910
import {
11+
ArrowDownLeftIcon,
1012
ArrowLeftOnRectangleIcon,
1113
ArrowTopRightOnSquareIcon,
14+
ArrowUpRightIcon,
1215
ArrowsRightLeftIcon,
1316
CheckCircleIcon,
1417
DocumentDuplicateIcon,
15-
QrCodeIcon,
1618
UserIcon,
17-
WalletIcon,
1819
} from "@heroicons/react/24/outline";
1920
import { useOutsideClick } from "~~/hooks/scaffold-eth";
2021
import { getTargetNetworks } from "~~/utils/scaffold-eth";
@@ -43,14 +44,21 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
4344
};
4445
useOutsideClick(dropdownRef, closeDropdown);
4546

47+
const openPopupWindow = (url: string | URL | undefined) => {
48+
window.open(url, "popup", "width=800,height=600");
49+
};
50+
4651
return (
4752
<>
4853
<details ref={dropdownRef} className="dropdown dropdown-end leading-3">
4954
{/* <summary
5055
tabIndex={0}
5156
className="btn btn-secondary bg-base-200 btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
5257
> */}
53-
<summary tabIndex={0} className="btn btn-secondary bg-base-300 btn-sm shadow-md dropdown-toggle gap-0 !h-auto">
58+
<summary
59+
tabIndex={0}
60+
className="btn btn-secondary bg-base-300 hover:bg-base-300 btn-sm shadow-md dropdown-toggle gap-0 !h-auto"
61+
>
5462
<Identity
5563
className="rounded-lg bg-base-300 p-0 "
5664
address={address}
@@ -68,27 +76,46 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
6876
>
6977
<NetworkOptions hidden={!selectingNetwork} />
7078
<li className={selectingNetwork ? "hidden" : ""}>
71-
<div className="btn-sm !rounded-xl flex gap-3 py-3">
79+
<div className="btn-sm !rounded-xl flex gap-3 py-3 bg-orange-500 hover:bg-orange-600 active:bg-orange-500">
7280
<UserIcon className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0" aria-hidden="true" />
7381
{/* <Link href={blockExplorerAddressLink} rel="noopener noreferrer" className="whitespace-nowrap"> */}
7482
<Link href={`/profile/${connectedAddress}`} passHref>
7583
Go to Profile
7684
</Link>
7785
</div>
7886
</li>
87+
<FundButton text="Add funds" className="py-1 px-3.5 gap-1 text-md rounded-xl justify-start font-normal" />
7988
<li className={selectingNetwork ? "hidden" : ""}>
80-
<button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
81-
<WalletIcon className="h-6 w-4 ml-2 sm:ml-0" />
82-
<a
83-
target="_blank"
84-
href="https://wallet.coinbase.com"
85-
rel="noopener noreferrer"
86-
className="whitespace-nowrap"
87-
>
88-
Go to Wallet Dashboard
89-
</a>
89+
<button
90+
className="menu-item btn-sm !rounded-xl bg-[#4f46e5] hover:bg-[#4338CA] active:bg-[#4338CA] flex gap-3 py-3"
91+
type="button"
92+
onClick={() => openPopupWindow("https://wallet.coinbase.com/es-ES/receive")}
93+
>
94+
<ArrowDownLeftIcon className="h-6 w-4 ml-2 sm:ml-0 text-white" />
95+
<span className="text-white">Receive funds</span>
96+
</button>
97+
</li>
98+
<li className={selectingNetwork ? "hidden" : ""}>
99+
<button
100+
className="menu-item btn-sm !rounded-xl bg-[#4f46e5] hover:bg-[#4338CA] active:bg-[#4338CA] flex gap-3 py-3"
101+
type="button"
102+
onClick={() => openPopupWindow("https://wallet.coinbase.com/es-ES/send")}
103+
>
104+
<ArrowUpRightIcon className="h-6 w-4 ml-2 sm:ml-0 text-white" />
105+
<span className="text-white">Send funds</span>
90106
</button>
91107
</li>
108+
<li className={selectingNetwork ? "hidden" : ""}>
109+
<button
110+
className="menu-item btn-sm !rounded-xl bg-[#4f46e5] hover:bg-[#4338CA] active:bg-[#4338CA] flex gap-3 py-3"
111+
type="button"
112+
onClick={() => openPopupWindow("https://wallet.coinbase.com/es-ES/swap")}
113+
>
114+
<ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0 text-white" />
115+
<span className="text-white">Convert funds</span>
116+
</button>
117+
</li>
118+
92119
<li className={selectingNetwork ? "hidden" : ""}>
93120
{addressCopied ? (
94121
<div className="btn-sm !rounded-xl flex gap-3 py-3">
@@ -119,13 +146,6 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
119146
)}
120147
</li>
121148

122-
<li className={selectingNetwork ? "hidden" : ""}>
123-
<label htmlFor="qrcode-modal" className="btn-sm !rounded-xl flex gap-3 py-3">
124-
<QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
125-
<span className="whitespace-nowrap">View QR Code</span>
126-
</label>
127-
</li>
128-
129149
<li className={selectingNetwork ? "hidden" : ""}>
130150
<button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
131151
<ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />

0 commit comments

Comments
 (0)