Skip to content

Commit

Permalink
connect button refinement
Browse files Browse the repository at this point in the history
  • Loading branch information
@supertong @jeremy-babylonlabs
supertong authored and jeremy-babylonlabs committed Dec 16, 2024
1 parent 263c5ff commit 7ca93bb
Show file tree
Hide file tree
Showing 9 changed files with 262 additions and 181 deletions.
3 changes: 3 additions & 0 deletions public/lock.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/app/assets/Keplr.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/app/assets/OKX.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/app/assets/bitcoin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
141 changes: 52 additions & 89 deletions src/app/components/Connect/ConnectSmall.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import { Button, Text } from "@babylonlabs-io/bbn-core-ui";
import Image from "next/image";
import { useRef, useState } from "react";
import { AiOutlineInfoCircle } from "react-icons/ai";
import { FaBitcoin } from "react-icons/fa";
import { IoMdClose } from "react-icons/io";
import { MdKeyboardArrowDown } from "react-icons/md";
import { PiWalletBold } from "react-icons/pi";
import { Tooltip } from "react-tooltip";
import { useOnClickOutside } from "usehooks-ts";

import keplr from "@/app/assets/Keplr.png";
import okx from "@/app/assets/OKX.png";
import { useHealthCheck } from "@/app/hooks/useHealthCheck";
import { useAppState } from "@/app/state";
import { getNetworkConfig } from "@/config/network.config";
import { satoshiToBtc } from "@/utils/btc";
import { maxDecimals } from "@/utils/maxDecimals";
import { trim } from "@/utils/trim";

import { Hash } from "../Hash/Hash";
import { LoadingSmall } from "../Loading/Loading";
import { Menu } from "./Menu";

interface ConnectSmallProps {
loading?: boolean;
Expand Down Expand Up @@ -66,91 +65,55 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({
);
};

return connected ? (
<div className="relative mr-[-10px] text-sm hidden md:flex" ref={ref}>
<button
className="flex cursor-pointer outline-none items-stretch"
onClick={() => setShowMenu(!showMenu)}
>
{(typeof btcWalletBalanceSat === "number" || loading) && (
<div className="flex items-center rounded-lg border border-base-200/75 p-2 pr-4">
<div className="flex items-center gap-1">
<FaBitcoin className="text-primary" />
{typeof btcWalletBalanceSat === "number" && (
<p>
<strong>
{maxDecimals(satoshiToBtc(btcWalletBalanceSat), 8)}{" "}
{coinName}
</strong>
</p>
)}
{loading && <LoadingSmall text="Loading..." />}
</div>
</div>
)}
<div
className="relative right-[10px] flex items-center rounded-lg border border-primary bg-[#fdf2ec] p-2 dark:border-white dark:bg-base-200"
data-testid="address"
if (!connected) {
return (
<div className="flex items-center gap-1">
<Button
size="large"
color="secondary"
className="h-[2.5rem] min-h-[2.5rem] rounded-full px-6 py-2 text-white text-base md:rounded-lg"
onClick={onConnect}
// Disable the button if the user is already connected
// or: API is not available, geo-blocked, or has an error
disabled={connected || !isApiNormal}
>
{trim(address)}
<PiWalletBold size={20} className="flex md:hidden" />
<span className="hidden md:flex">Connect Wallets</span>
</Button>
{!isApiNormal && renderApiNotAvailableTooltip()}
</div>
);
}

return (
<div className="relative flex flex-row gap-4">
<div className="flex flex-row">
<Image src={okx} alt="OKX" width={40} height={40} />
<Image
src={keplr}
alt="Keplr"
width={40}
height={40}
className="-ml-3"
/>
</div>
<div className="flex flex-col text-secondary-contrast">
<Text variant="body1">Wallet Connected</Text>
<div className="flex flex-row text-sm gap-2">
<Text variant="body1">bc1pnT</Text>
<Text variant="body1">|</Text>
<Text variant="body1">bbn170</Text>
</div>
</button>
{showMenu && (
<div
className="absolute right-[10px] top-0 z-10 mt-[4.5rem] flex flex-col gap-4 rounded-lg bg-base-300 p-4 shadow-lg"
style={{
// margin - border
width: "calc(100% - 8px)",
}}
</div>
<div>
<button
onClick={() => setShowMenu(!showMenu)}
className="flex items-center justify-center p-2 border rounded border-secondary-contrast text-secondary-contrast"
>
<div className="flex items-center justify-between">
<h3 className="font-bold dark:text-neutral-content">Settings</h3>
<button
className="btn btn-circle btn-ghost btn-sm"
onClick={() => setShowMenu(false)}
>
<IoMdClose size={24} />
</button>
</div>
<div className="flex flex-col">
<Hash value={address} address noFade fullWidth />
</div>
<div className="form-control">
<label className="label cursor-pointer">
<span className="label-text">Ordinals included</span>
<input
type="checkbox"
className="toggle toggle-primary"
checked={!ordinalsExcluded}
onChange={ordinalsExcluded ? includeOrdinals : excludeOrdinals}
/>
</label>
</div>
<button
className="btn btn-outline btn-sm"
onClick={() => {
setShowMenu(false);
onDisconnect();
}}
>
Disconnect
</button>
</div>
)}
</div>
) : (
<div className="flex items-center gap-1">
<button
className="btn-primary btn h-[2.5rem] min-h-[2.5rem] rounded-full px-2 text-white md:rounded-lg"
onClick={onConnect}
// Disable the button if the user is already connected
// or: API is not available, geo-blocked, or has an error
disabled={connected || !isApiNormal}
>
<PiWalletBold size={20} className="flex md:hidden" />
<span className="hidden md:flex">Connect Wallets</span>
</button>
{!isApiNormal && renderApiNotAvailableTooltip()}
<MdKeyboardArrowDown size={24} />
</button>
</div>
<Menu open={showMenu} onClose={() => setShowMenu(false)} />
</div>
);
};
166 changes: 92 additions & 74 deletions src/app/components/Connect/ConnectedSmall.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { useRef, useState } from "react";
import { FaBitcoin } from "react-icons/fa";
import { IoMdClose } from "react-icons/io";
import { useWalletConnect } from "@babylonlabs-io/bbn-wallet-connect";
import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { useOnClickOutside } from "usehooks-ts";

import keplr from "@/app/assets/Keplr.png";
import okx from "@/app/assets/OKX.png";
import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
import { useCosmosWallet } from "@/app/context/wallet/CosmosWalletProvider";
import { useAppState } from "@/app/state";
import { getNetworkConfig } from "@/config/network.config";
import { satoshiToBtc } from "@/utils/btc";
import { maxDecimals } from "@/utils/maxDecimals";
import { trim } from "@/utils/trim";

import { Hash } from "../Hash/Hash";
import { LoadingSmall } from "../Loading/Loading";

interface ConnectedSmallProps {
loading?: boolean;
Expand All @@ -22,87 +20,107 @@ interface ConnectedSmallProps {

export const ConnectedSmall: React.FC<ConnectedSmallProps> = ({
loading = false,
connected,
address,
btcWalletBalanceSat,
onDisconnect,
}) => {
const { ordinalsExcluded, includeOrdinals, excludeOrdinals } = useAppState();
const { connected } = useWalletConnect();
const btc = useBTCWallet();
const bbn = useCosmosWallet();

const [showMenu, setShowMenu] = useState(false);
const handleClickOutside = () => {
setShowMenu(false);
};

useEffect(() => {
const action = async () => {
console.log({ btc, network: await btc.getNetwork(), bbn });
};
action();
}, [bbn, btc]);

const ref = useRef(null);
useOnClickOutside(ref, handleClickOutside);

const { coinName } = getNetworkConfig();

if (!connected) {
return null;
}

return (
connected && (
<div className="relative flex text-sm" ref={ref}>
<button
className="flex cursor-pointer outline-none items-stretch w-full justify-between"
onClick={() => setShowMenu(!showMenu)}
>
<div className="flex items-center rounded-lg border border-base-200/75 p-2 pr-4 w-full">
<div className="flex items-center gap-1 w-full justify-center">
<FaBitcoin className="text-primary" />
{typeof btcWalletBalanceSat === "number" && (
<p>
<strong>
{maxDecimals(satoshiToBtc(btcWalletBalanceSat), 8)}{" "}
{coinName}
</strong>
</p>
)}
{loading && <LoadingSmall text="Loading..." />}
</div>
</div>
<div className="relative flex items-center rounded-lg border border-primary bg-[#fdf2ec] p-2 dark:border-white dark:bg-base-200">
{trim(address)}
</div>
</button>
{showMenu && (
<div className="absolute top-0 z-10 mt-[4.5rem] flex flex-col gap-4 rounded-lg bg-base-300 p-4 shadow-lg w-full">
<div className="flex items-center justify-between">
<h3 className="font-bold dark:text-neutral-content">Settings</h3>
<button
className="btn btn-circle btn-ghost btn-sm"
onClick={() => setShowMenu(false)}
>
<IoMdClose size={24} />
</button>
</div>
<div className="flex flex-col">
<Hash value={address} address noFade fullWidth />
</div>
<div className="form-control">
<label className="label cursor-pointer">
<span className="label-text">Ordinals included</span>
<input
type="checkbox"
className="toggle toggle-primary"
checked={!ordinalsExcluded}
onChange={
ordinalsExcluded ? includeOrdinals : excludeOrdinals
}
/>
</label>
</div>
<button
className="btn btn-outline btn-sm"
onClick={() => {
setShowMenu(false);
onDisconnect();
}}
>
Disconnect
</button>
</div>
)}
</div>
)
<div className="flex flex-row gap-4">
<Image src={okx} alt="OKX" width={40} height={40} />
<Image src={keplr} alt="Keplr" width={40} height={40} />
</div>
);

// return (
// connected && (
// <div className="relative flex text-sm" ref={ref}>
// <button
// className="flex cursor-pointer outline-none items-stretch w-full justify-between"
// onClick={() => setShowMenu(!showMenu)}
// >
// <div className="flex items-center rounded-lg border border-base-200/75 p-2 pr-4 w-full">
// <div className="flex items-center gap-1 w-full justify-center">
// <FaBitcoin className="text-primary" />
// {typeof btcWalletBalanceSat === "number" && (
// <p>
// <strong>
// {maxDecimals(satoshiToBtc(btcWalletBalanceSat), 8)}{" "}
// {coinName}
// </strong>
// </p>
// )}
// {loading && <LoadingSmall text="Loading..." />}
// </div>
// </div>
// <div className="relative flex items-center rounded-lg border border-primary bg-[#fdf2ec] p-2 dark:border-white dark:bg-base-200">
// {trim(address)}
// </div>
// </button>
// {showMenu && (
// <div className="absolute top-0 z-10 mt-[4.5rem] flex flex-col gap-4 rounded-lg bg-base-300 p-4 shadow-lg w-full">
// <div className="flex items-center justify-between">
// <h3 className="font-bold dark:text-neutral-content">Settings</h3>
// <button
// className="btn btn-circle btn-ghost btn-sm"
// onClick={() => setShowMenu(false)}
// >
// <IoMdClose size={24} />
// </button>
// </div>
// <div className="flex flex-col">
// <Hash value={address} address noFade fullWidth />
// </div>
// <div className="form-control">
// <label className="label cursor-pointer">
// <span className="label-text">Ordinals included</span>
// <input
// type="checkbox"
// className="toggle toggle-primary"
// checked={!ordinalsExcluded}
// onChange={
// ordinalsExcluded ? includeOrdinals : excludeOrdinals
// }
// />
// </label>
// </div>
// <button
// className="btn btn-outline btn-sm"
// onClick={() => {
// setShowMenu(false);
// onDisconnect();
// }}
// >
// Disconnect
// </button>
// </div>
// )}
// </div>
// )
// );
};
Loading

0 comments on commit 7ca93bb

Please sign in to comment.