45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { Address } from "@scaffold-ui/components";
|
|
import { QRCodeSVG } from "qrcode.react";
|
|
import { Address as AddressType } from "viem";
|
|
import { hardhat } from "viem/chains";
|
|
import { useTargetNetwork } from "~~/hooks/scaffold-eth";
|
|
|
|
type AddressQRCodeModalProps = {
|
|
address: AddressType;
|
|
modalId: string;
|
|
};
|
|
|
|
export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps) => {
|
|
const { targetNetwork } = useTargetNetwork();
|
|
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
|
|
onlyEnsOrAddress
|
|
blockExplorerAddressLink={
|
|
targetNetwork.id === hardhat.id ? `/blockexplorer/address/${address}` : undefined
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</label>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|