Qrcode receiver modal

packages/nextjs/components/Footer.tsx

@@ -15,7 +15,7 @@ export const Footer = () => {
   return (
     <div className="min-h-0 p-5 mb-11 lg:mb-0">
       <div>
-        <div className="fixed flex justify-between items-center w-full z-20 p-4 bottom-0 left-0 pointer-events-none">
+        <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex space-x-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
               <div className="btn btn-primary btn-sm font-normal cursor-auto">

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx

@@ -1,9 +1,20 @@
+import { useState } from "react";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { QRCodeSVG } from "qrcode.react";
+import CopyToClipboard from "react-copy-to-clipboard";
 import { useDisconnect, useSwitchNetwork } from "wagmi";
-import { ArrowLeftOnRectangleIcon, ArrowsRightLeftIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
-import { Balance, BlockieAvatar } from "~~/components/scaffold-eth";
+import {
+  ArrowLeftOnRectangleIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowsRightLeftIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  DocumentDuplicateIcon,
+  QrCodeIcon,
+} from "@heroicons/react/24/outline";
+import { Address, Balance, BlockieAvatar } from "~~/components/scaffold-eth";
 import { useNetworkColor } from "~~/hooks/scaffold-eth";
-import { getTargetNetwork } from "~~/utils/scaffold-eth";
+import { getBlockExplorerAddressLink, getTargetNetwork } from "~~/utils/scaffold-eth";
 
 /**
  * Custom Wagmi Connect Button (watch balance + custom design)
@@ -13,11 +24,15 @@ export const RainbowKitCustomConnectButton = () => {
   const configuredNetwork = getTargetNetwork();
   const { disconnect } = useDisconnect();
   const { switchNetwork } = useSwitchNetwork();
+  const [addressCopied, setAddressCopied] = useState(false);
 
   return (
     <ConnectButton.Custom>
-      {({ account, chain, openAccountModal, openConnectModal, mounted }) => {
+      {({ account, chain, openConnectModal, mounted }) => {
         const connected = mounted && account && chain;
+        const blockExplorerAddressLink = account
+          ? getBlockExplorerAddressLink(getTargetNetwork(), account.address)
+          : undefined;
 
         return (
           <>
@@ -69,24 +84,101 @@ export const RainbowKitCustomConnectButton = () => {
 
               return (
                 <div className="px-2 flex justify-end items-center">
-                  <div className="flex justify-center items-center border-1 rounded-lg">
-                    <div className="flex flex-col items-center mr-1">
-                      <Balance address={account.address} className="min-h-0 h-auto" />
-                      <span className="text-xs" style={{ color: networkColor }}>
-                        {chain.name}
-                      </span>
-                    </div>
-                    <button
-                      onClick={openAccountModal}
-                      type="button"
-                      className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md"
-                    >
+                  <div className="flex flex-col items-center mr-1">
+                    <Balance address={account.address} className="min-h-0 h-auto" />
+                    <span className="text-xs" style={{ color: networkColor }}>
+                      {chain.name}
+                    </span>
+                  </div>
+                  <div className="dropdown dropdown-end">
+                    <label tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle">
                       <BlockieAvatar address={account.address} size={24} ensImage={account.ensAvatar} />
                       <span className="ml-2 mr-1">{account.displayName}</span>
-                      <span>
-                        <ChevronDownIcon className="h-6 w-4" />
-                      </span>
-                    </button>
+                      <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
+                    </label>
+                    <ul
+                      tabIndex={0}
+                      className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
+                    >
+                      <li>
+                        {addressCopied ? (
+                          <div className="btn-sm !rounded-xl">
+                            <CheckCircleIcon
+                              className=" text-xl font-normal h-6 w-4 cursor-pointer"
+                              aria-hidden="true"
+                            />
+                            <span className=" whitespace-nowrap">Copy address</span>
+                          </div>
+                        ) : (
+                          <CopyToClipboard
+                            text={account.address}
+                            onCopy={() => {
+                              setAddressCopied(true);
+                              setTimeout(() => {
+                                setAddressCopied(false);
+                              }, 800);
+                            }}
+                          >
+                            <div className="btn-sm !rounded-xl">
+                              <DocumentDuplicateIcon
+                                className=" text-xl font-normal h-6 w-4 cursor-pointer"
+                                aria-hidden="true"
+                              />
+                              <span className=" whitespace-nowrap">Copy address</span>
+                            </div>
+                          </CopyToClipboard>
+                        )}
+                      </li>
+                      <li>
+                        <label htmlFor="qrcode-modal" className="btn-sm !rounded-xl">
+                          <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
+                          <span className="whitespace-nowrap">View QR Code</span>
+                        </label>
+                      </li>
+                      <li>
+                        <button className="menu-item btn-sm !rounded-xl" type="button">
+                          <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
+                          <a
+                            target="_blank"
+                            href={blockExplorerAddressLink}
+                            rel="noopener noreferrer"
+                            className="whitespace-nowrap"
+                          >
+                            View on Block Explorer
+                          </a>
+                        </button>
+                      </li>
+                      <li>
+                        <button
+                          className="menu-item text-error btn-sm !rounded-xl"
+                          type="button"
+                          onClick={() => disconnect()}
+                        >
+                          <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Disconnect</span>
+                        </button>
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    <input type="checkbox" id="qrcode-modal" className="modal-toggle" />
+                    <label htmlFor="qrcode-modal" className="modal cursor-pointer">
+                      <label className="modal-box relative">
+                        {/* dummy input to capture event onclick on modal box */}
+                        <input className="h-0 w-0 absolute top-0 left-0" />
+                        <label
+                          htmlFor="qrcode-modal"
+                          className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3"
+                        >
+                          ✕
+                        </label>
+                        <div className="space-y-3 py-6">
+                          <div className="flex space-x-4 flex-col items-center gap-6">
+                            <QRCodeSVG value={account.address} size={256} />
+                            <Address address={account.address} format="long" disableAddressLink />
+                          </div>
+                        </div>
+                      </label>
+                    </label>
                   </div>
                 </div>
               );

packages/nextjs/package.json

@@ -22,6 +22,7 @@
     "daisyui": "^2.31.0",
     "next": "^13.1.6",
     "nextjs-progressbar": "^0.0.16",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-blockies": "^1.4.1",
     "react-copy-to-clipboard": "^5.1.0",

yarn.lock

@@ -1817,6 +1817,7 @@ __metadata:
     nextjs-progressbar: ^0.0.16
     postcss: ^8.4.16
     prettier: ^2.8.4
+    qrcode.react: ^3.1.0
     react: ^18.2.0
     react-blockies: ^1.4.1
     react-copy-to-clipboard: ^5.1.0
@@ -10893,6 +10894,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"qrcode.react@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "qrcode.react@npm:3.1.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 94a2942ecf83f461d869adb20305ae663c6d1abe93ef2c72442b07d756ce70cf6deb6fd588dc5b382b48c6991cfde1dfd5ac9b814c1461e71d5edb2d945e67fc
+  languageName: node
+  linkType: hard
+
 "qrcode@npm:1.5.0":
   version: 1.5.0
   resolution: "qrcode@npm:1.5.0"