Skip to content

Commit

Permalink
fix: mobile layout for Connect Modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@totraev
totraev committed Sep 10, 2024
1 parent b421e42 commit 284f658
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 125 deletions.
262 changes: 138 additions & 124 deletions src/app/components/Modals/ConnectModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,140 +131,154 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
};

return (
<GeneralModal open={open} onClose={onClose}>
<div className="mb-4 flex items-center justify-between">
<h3 className="font-bold">Connect wallet</h3>
<button
className="btn btn-circle btn-ghost btn-sm"
onClick={() => onClose(false)}
>
<IoMdClose size={24} />
</button>
</div>
<div className="flex flex-col justify-center gap-2">
<div className="form-control">
<label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-4">
<input
type="checkbox"
className="checkbox-primary checkbox"
onChange={(e) => setTermsAccepted(e.target.checked)}
checked={termsAccepted}
/>
<span className="label-text">
I certify that I have read and accept the updated{" "}
<a
href="https://babylonlabs.io/terms-of-use"
target="_blank"
rel="noopener noreferrer"
className="link link-primary"
>
Terms of Use
</a>
{" and "}
<a
href="https://babylonlabs.io/privacy-policy"
target="_blank"
rel="noopener noreferrer"
className="link link-primary"
>
Privacy Policy
</a>
.
</span>
</label>
<GeneralModal className="flex" open={open} onClose={onClose}>
<div className="flex flex-col flex-1 min-h-0">
<div className="mb-4 flex items-center justify-between">
<h3 className="font-bold">Connect wallet</h3>
<button
className="btn btn-circle btn-ghost btn-sm"
onClick={() => onClose(false)}
>
<IoMdClose size={24} />
</button>
</div>
<div className="form-control">
<label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-4">
<input
type="checkbox"
className="checkbox-primary checkbox"
onChange={(e) => setNoInscription(e.target.checked)}
checked={noInscription}
/>
<span className="label-text">
I certify that there are no Bitcoin inscriptions tokens in my
wallet.
</span>
</label>
</div>
<div className="form-control">
<label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-4">
<input
type="checkbox"
className="checkbox-primary checkbox"
onChange={(e) => setNoHWWallet(e.target.checked)}
checked={noHWWallet}
/>
<span className="label-text md:max-w-[34rem]">
I acknowledge that Keystone via QR code is the only hardware
wallet supporting Bitcoin Staking. Using any other hardware
wallets through any means (such as connection to software /
extension / mobile wallet) can lead to permanent inability to
withdraw the stake.
</span>
</label>
</div>
<div className="my-4 flex flex-col gap-4">
<h3 className="text-center font-semibold">Choose wallet</h3>
<div className="grid max-h-[15rem] md:max-h-[20rem] grid-cols-1 gap-4 overflow-y-auto">
{walletList.map(
({
provider,
name,
linkToDocs,
icon,
isQRWallet,
supportedNetworks,
}) => {
if (name === BROWSER_INJECTED_WALLET_NAME) {
return buildInjectableWallet(isInjectable, name);
}
const walletAvailable = isQRWallet || !!window[provider as any];

// If the wallet is integrated but does not support the current network, do not display it
if (
!supportedNetworks ||
!supportedNetworks.includes(getNetworkConfig().network)
) {
return null;
}

return (
<div className="overflow-y-auto">
<div className="flex flex-col justify-center gap-2">
<div className="form-control">
<label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-3 md:p-4">
<input
type="checkbox"
className="checkbox-primary checkbox"
onChange={(e) => setTermsAccepted(e.target.checked)}
checked={termsAccepted}
/>
<span className="label-text text-xs leading-snug md:text-sm">
I certify that I have read and accept the updated{" "}
<a
key={name}
className={`relative flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary ${selectedWallet === name ? "border-primary" : "border-base-100"} ${!walletAvailable ? "opacity-50" : ""}`}
onClick={() => walletAvailable && setSelectedWallet(name)}
href={!walletAvailable ? linkToDocs : undefined}
href="https://babylonlabs.io/terms-of-use"
target="_blank"
rel="noopener noreferrer"
className="link link-primary"
>
<div className="flex flex-1 items-center gap-2">
<div className="flex h-10 w-10 items-center justify-center rounded-full border bg-white p-2">
<Image src={icon} alt={name} width={26} height={26} />
</div>
<p>{name}</p>
{isQRWallet && (
<div>
<span
className="cursor-pointer text-xs"
data-tooltip-id={name}
data-tooltip-content="QR codes used for connection/signing"
data-tooltip-place="top"
>
<AiOutlineInfoCircle />
</span>
<Tooltip id={name} className="tooltip-wrap" />
</div>
)}
</div>
Terms of Use
</a>
{" and "}
<a
href="https://babylonlabs.io/privacy-policy"
target="_blank"
rel="noopener noreferrer"
className="link link-primary"
>
Privacy Policy
</a>
);
},
)}
.
</span>
</label>
</div>
<div className="form-control">
<label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-3 md:p-4">
<input
type="checkbox"
className="checkbox-primary checkbox"
onChange={(e) => setNoInscription(e.target.checked)}
checked={noInscription}
/>
<span className="label-text text-xs leading-snug md:text-sm">
I certify that there are no Bitcoin inscriptions tokens in my
wallet.
</span>
</label>
</div>
<div className="form-control">
<label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-3 md:p-4">
<input
type="checkbox"
className="checkbox-primary checkbox"
onChange={(e) => setNoHWWallet(e.target.checked)}
checked={noHWWallet}
/>
<span className="label-text text-xs leading-snug md:text-sm md:max-w-[34rem]">
I acknowledge that Keystone via QR code is the only hardware
wallet supporting Bitcoin Staking. Using any other hardware
wallets through any means (such as connection to software /
extension / mobile wallet) can lead to permanent inability to
withdraw the stake.
</span>
</label>
</div>
<div className="mt-4 flex flex-col gap-4">
<h3 className="text-center font-semibold">Choose wallet</h3>
<div className="grid md:max-h-[20rem] grid-cols-1 gap-4 md:overflow-y-auto">
{walletList.map(
({
provider,
name,
linkToDocs,
icon,
isQRWallet,
supportedNetworks,
}) => {
if (name === BROWSER_INJECTED_WALLET_NAME) {
return buildInjectableWallet(isInjectable, name);
}
const walletAvailable =
isQRWallet || !!window[provider as any];

// If the wallet is integrated but does not support the current network, do not display it
if (
!supportedNetworks ||
!supportedNetworks.includes(getNetworkConfig().network)
) {
return null;
}

return (
<a
key={name}
className={`relative flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary ${selectedWallet === name ? "border-primary" : "border-base-100"} ${!walletAvailable ? "opacity-50" : ""}`}
onClick={() =>
walletAvailable && setSelectedWallet(name)
}
href={!walletAvailable ? linkToDocs : undefined}
target="_blank"
rel="noopener noreferrer"
>
<div className="flex flex-1 items-center gap-2">
<div className="flex h-10 w-10 items-center justify-center rounded-full border bg-white p-2">
<Image
src={icon}
alt={name}
width={26}
height={26}
/>
</div>
<p>{name}</p>
{isQRWallet && (
<div>
<span
className="cursor-pointer text-xs"
data-tooltip-id={name}
data-tooltip-content="QR codes used for connection/signing"
data-tooltip-place="top"
>
<AiOutlineInfoCircle />
</span>
<Tooltip id={name} className="tooltip-wrap" />
</div>
)}
</div>
</a>
);
},
)}
</div>
</div>
</div>
</div>

<button
className="btn-primary btn h-[2.5rem] min-h-[2.5rem] rounded-lg px-2 text-white"
className="btn-primary mt-4 btn h-[2.5rem] min-h-[2.5rem] rounded-lg px-2 text-white"
onClick={handleConnect}
disabled={
connectDisabled ||
Expand Down
4 changes: 3 additions & 1 deletion src/app/components/Modals/GeneralModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ interface GeneralModalProps {
onClose: (value: boolean) => void;
small?: boolean;
children: ReactNode;
className?: string;
}

export const GeneralModal: React.FC<GeneralModalProps> = ({
open,
onClose,
children,
small,
className = "",
}) => {
const modalRef = useRef(null);

Expand Down Expand Up @@ -43,7 +45,7 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
onClose={() => onClose(false)}
classNames={{
modalContainer: "flex items-end justify-center md:items-center",
modal: `m-0 w-full max-w-none rounded-t-2xl bg-base-300 shadow-lg md:w-auto md:rounded-b-2xl max-h-[85svh] min-w-[20rem] md:min-w-[30rem] ${getSize()}`,
modal: `m-0 w-full max-w-none rounded-t-2xl bg-base-300 shadow-lg md:w-auto md:rounded-b-2xl max-h-[100svh] min-w-[20rem] md:max-h-[85svh] md:min-w-[30rem] ${getSize()} ${className}`,
}}
showCloseIcon={false}
blockScroll={false}
Expand Down

0 comments on commit 284f658

Please sign in to comment.