-
Notifications
You must be signed in to change notification settings - Fork 851
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Shadcn rainbowkit button + dropdown (#937)
* feat: shadcn rainbowkit button * revert: ghost button colors * chore: prevent qr modal autofocus * fix: network options * fix: redundant comment * chore: ring-accent * fix: open menu and qr modal on enter and close on esc * revert: button changes * revert: dropdown-menu changes * fix: avoid passing classNames * fix: return w-full justify-start * fix: dropdow items was clickable during closing menu animation
- Loading branch information
Showing
11 changed files
with
283 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 15 additions & 22 deletions
37
packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,26 @@ | ||
| import { QRCodeSVG } from "qrcode.react"; | ||
| import { Address as AddressType } from "viem"; | ||
| import { Address } from "~~/components/scaffold-eth"; | ||
| import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "~~/components/ui/dialog"; | ||
|
|
||
| type AddressQRCodeModalProps = { | ||
| address: AddressType; | ||
| modalId: string; | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps) => { | ||
| export const AddressQRCodeModal = ({ address, children }: AddressQRCodeModalProps) => { | ||
| return ( | ||
| <> | ||
| <div> | ||
| <input type="checkbox" id={`${modalId}`} className="modal-toggle" /> | ||
| <label htmlFor={`${modalId}`} 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={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3"> | ||
| ✕ | ||
| </label> | ||
| <div className="space-y-3 py-6"> | ||
| <div className="flex flex-col items-center gap-6"> | ||
| <QRCodeSVG value={address} size={256} /> | ||
| <Address address={address} format="long" disableAddressLink /> | ||
| </div> | ||
| </div> | ||
| </label> | ||
| </label> | ||
| </div> | ||
| </> | ||
| <Dialog> | ||
| <DialogTrigger asChild>{children}</DialogTrigger> | ||
| <DialogContent onOpenAutoFocus={e => e.preventDefault()}> | ||
| <DialogHeader> | ||
| <DialogTitle>Address QR Code</DialogTitle> | ||
| </DialogHeader> | ||
| <div className="flex flex-col items-center gap-6 py-6 break-all"> | ||
| <QRCodeSVG value={address} size={256} /> | ||
| <Address address={address} format="long" disableAddressLink /> | ||
| </div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 24 additions & 21 deletions
45
...ges/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,35 @@ | ||
| import { NetworkOptions } from "./NetworkOptions"; | ||
| import { ChevronDown } from "lucide-react"; | ||
| import { useDisconnect } from "wagmi"; | ||
| import { ArrowLeftOnRectangleIcon, ChevronDownIcon } from "@heroicons/react/24/outline"; | ||
| import { ArrowLeftOnRectangleIcon } from "@heroicons/react/24/outline"; | ||
| import { Button } from "~~/components/ui/button"; | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuTrigger, | ||
| } from "~~/components/ui/dropdown-menu"; | ||
|
|
||
| export const WrongNetworkDropdown = () => { | ||
| const { disconnect } = useDisconnect(); | ||
|
|
||
| return ( | ||
| <div className="dropdown dropdown-end mr-2"> | ||
| <label tabIndex={0} className="btn btn-error btn-sm dropdown-toggle gap-1"> | ||
| <span>Wrong network</span> | ||
| <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" | ||
| > | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <Button variant="destructive" size="sm"> | ||
| Wrong network | ||
| <ChevronDown className="h-4 w-4 ml-2" /> | ||
| </Button> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="end"> | ||
| <NetworkOptions /> | ||
| <li> | ||
| <button | ||
| className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3" | ||
| type="button" | ||
| onClick={() => disconnect()} | ||
| > | ||
| <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" /> | ||
| <DropdownMenuItem asChild> | ||
| <Button variant="ghost" size="sm" className="w-full justify-start" onClick={() => disconnect()}> | ||
| <ArrowLeftOnRectangleIcon className="mr-2 h-4 w-4" /> | ||
| <span>Disconnect</span> | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </Button> | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.