From 40a3c5d501968a753b1e88b91fd1b150a57ea57d Mon Sep 17 00:00:00 2001
From: Lulox <lulox.eth@protonmail.com>
Date: Wed, 16 Oct 2024 02:00:18 -0300
Subject: [PATCH] UI improvements to wallet dropdown and stuff

---
 .../app/profile/_components/ProfileInfo.tsx   | 24 +------
 .../PunkConnectButton/AddressInfoDropdown.tsx | 62 ++++++++++++-------
 2 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/packages/nextjs/app/profile/_components/ProfileInfo.tsx b/packages/nextjs/app/profile/_components/ProfileInfo.tsx
index 37daf12..0a6db0f 100644
--- a/packages/nextjs/app/profile/_components/ProfileInfo.tsx
+++ b/packages/nextjs/app/profile/_components/ProfileInfo.tsx
@@ -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";
@@ -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",
@@ -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} />
diff --git a/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx
index 5f5b723..b4c281a 100644
--- a/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx
@@ -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";
@@ -43,6 +44,10 @@ 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">
@@ -50,7 +55,10 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
           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}
@@ -68,7 +76,7 @@ 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>
@@ -76,19 +84,38 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
               </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">
@@ -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" />