Skip to content

Commit

Permalink
UI improvements to wallet dropdown and stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@luloxi
luloxi committed Oct 16, 2024
1 parent cd4e64a commit 40a3c5d
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 44 deletions.
24 changes: 1 addition & 23 deletions packages/nextjs/app/profile/_components/ProfileInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import React, { useEffect, useState } from "react";
import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund";
import { Avatar, Badge, Identity, Name } from "@coinbase/onchainkit/identity";
import { useAccount } from "wagmi";
import { PencilIcon } from "@heroicons/react/24/outline";
import { InputBase } from "~~/components/punk-society/InputBase";
import { LoadingBars } from "~~/components/punk-society/LoadingBars";
import { PunkBalance } from "~~/components/punk-society/PunkBalance";
import { PunkConnectButton } from "~~/components/punk-society/PunkConnectButton";
import { TextInput } from "~~/components/punk-society/TextInput";
import { Address } from "~~/components/scaffold-eth";
import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
Expand All @@ -24,18 +21,8 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({ address }) => {
const [isEditing, setIsEditing] = useState(false); // New state for edit mode
const [loadingProfile, setLoadingProfile] = useState(true);

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

const onrampBuyUrl = getOnrampBuyUrl({
projectId,
addresses: connectedAddress ? { [connectedAddress]: ["base"] } : {},
// assets: ["ETH", "USDC"],
assets: ["ETH"],
// presetFiatAmount: 20,
// fiatCurrency: "USD",
});

const { data: punkProfile } = useScaffoldReadContract({
contractName: "BasedProfile",
functionName: "profiles",
Expand Down Expand Up @@ -124,16 +111,7 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({ address }) => {
{bio && <p className="text-base-content">{bio}</p>}
<div className="mt-2">
{address === connectedAddress ? (
<div className="flex flex-col md:flex-row items-center justify-center gap-3">
<div>
<PunkBalance address={connectedAddress} />

<PunkConnectButton />
</div>
<div className="bg-base-200 rounded-lg">
<FundButton fundingUrl={onrampBuyUrl} />
</div>
</div>
<div className="flex flex-col md:flex-row items-center justify-center gap-3"></div>
) : (
<div className="text-base-content">
<Address address={address} />
Expand Down
62 changes: 41 additions & 21 deletions packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import { useRef, useState } from "react";
import Link from "next/link";
import { NetworkOptions } from "./NetworkOptions";
import { FundButton } from "@coinbase/onchainkit/fund";
import { Avatar, Badge, Identity, Name } from "@coinbase/onchainkit/identity";
import CopyToClipboard from "react-copy-to-clipboard";
import { getAddress } from "viem";
import { Address } from "viem";
import { useAccount, useDisconnect } from "wagmi";
import {
ArrowDownLeftIcon,
ArrowLeftOnRectangleIcon,
ArrowTopRightOnSquareIcon,
ArrowUpRightIcon,
ArrowsRightLeftIcon,
CheckCircleIcon,
DocumentDuplicateIcon,
QrCodeIcon,
UserIcon,
WalletIcon,
} from "@heroicons/react/24/outline";
import { useOutsideClick } from "~~/hooks/scaffold-eth";
import { getTargetNetworks } from "~~/utils/scaffold-eth";
Expand Down Expand Up @@ -43,14 +44,21 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
};
useOutsideClick(dropdownRef, closeDropdown);

const openPopupWindow = (url: string | URL | undefined) => {
window.open(url, "popup", "width=800,height=600");
};

return (
<>
<details ref={dropdownRef} className="dropdown dropdown-end leading-3">
{/* <summary
tabIndex={0}
className="btn btn-secondary bg-base-200 btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
> */}
<summary tabIndex={0} className="btn btn-secondary bg-base-300 btn-sm shadow-md dropdown-toggle gap-0 !h-auto">
<summary
tabIndex={0}
className="btn btn-secondary bg-base-300 hover:bg-base-300 btn-sm shadow-md dropdown-toggle gap-0 !h-auto"
>
<Identity
className="rounded-lg bg-base-300 p-0 "
address={address}
Expand All @@ -68,27 +76,46 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
>
<NetworkOptions hidden={!selectingNetwork} />
<li className={selectingNetwork ? "hidden" : ""}>
<div className="btn-sm !rounded-xl flex gap-3 py-3">
<div className="btn-sm !rounded-xl flex gap-3 py-3 bg-orange-500 hover:bg-orange-600 active:bg-orange-500">
<UserIcon className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0" aria-hidden="true" />
{/* <Link href={blockExplorerAddressLink} rel="noopener noreferrer" className="whitespace-nowrap"> */}
<Link href={`/profile/${connectedAddress}`} passHref>
Go to Profile
</Link>
</div>
</li>
<FundButton text="Add funds" className="py-1 px-3.5 gap-1 text-md rounded-xl justify-start font-normal" />
<li className={selectingNetwork ? "hidden" : ""}>
<button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
<WalletIcon className="h-6 w-4 ml-2 sm:ml-0" />
<a
target="_blank"
href="https://wallet.coinbase.com"
rel="noopener noreferrer"
className="whitespace-nowrap"
>
Go to Wallet Dashboard
</a>
<button
className="menu-item btn-sm !rounded-xl bg-[#4f46e5] hover:bg-[#4338CA] active:bg-[#4338CA] flex gap-3 py-3"
type="button"
onClick={() => openPopupWindow("https://wallet.coinbase.com/es-ES/receive")}
>
<ArrowDownLeftIcon className="h-6 w-4 ml-2 sm:ml-0 text-white" />
<span className="text-white">Receive funds</span>
</button>
</li>
<li className={selectingNetwork ? "hidden" : ""}>
<button
className="menu-item btn-sm !rounded-xl bg-[#4f46e5] hover:bg-[#4338CA] active:bg-[#4338CA] flex gap-3 py-3"
type="button"
onClick={() => openPopupWindow("https://wallet.coinbase.com/es-ES/send")}
>
<ArrowUpRightIcon className="h-6 w-4 ml-2 sm:ml-0 text-white" />
<span className="text-white">Send funds</span>
</button>
</li>
<li className={selectingNetwork ? "hidden" : ""}>
<button
className="menu-item btn-sm !rounded-xl bg-[#4f46e5] hover:bg-[#4338CA] active:bg-[#4338CA] flex gap-3 py-3"
type="button"
onClick={() => openPopupWindow("https://wallet.coinbase.com/es-ES/swap")}
>
<ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0 text-white" />
<span className="text-white">Convert funds</span>
</button>
</li>

<li className={selectingNetwork ? "hidden" : ""}>
{addressCopied ? (
<div className="btn-sm !rounded-xl flex gap-3 py-3">
Expand Down Expand Up @@ -119,13 +146,6 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
)}
</li>

<li className={selectingNetwork ? "hidden" : ""}>
<label htmlFor="qrcode-modal" className="btn-sm !rounded-xl flex gap-3 py-3">
<QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
<span className="whitespace-nowrap">View QR Code</span>
</label>
</li>

<li className={selectingNetwork ? "hidden" : ""}>
<button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
<ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
Expand Down

0 comments on commit 40a3c5d

Please sign in to comment.