Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add custom props for styling ConnectBitcoin button #25

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add custom props for styling ConnectBitcoin button #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

import { ConnectButton } from "@rainbow-me/rainbowkit";
import { Balances, ConnectBitcoin } from "@/index";

import { Wallet } from "lucide-react";
const Page = () => {
return (
<div className="m-4">
<div className="flex justify-end gap-2 mb-10">
<ConnectBitcoin />
<ConnectBitcoin className="bg-black border-2 border-gray-700 rounded-sm hover:bg-zinc-900" icon={<Wallet className="w-4 h-4 ml-2" />} />
<ConnectButton label="Connect EVM" showBalance={false} />
</div>
<div className="flex justify-center">
Expand Down
127 changes: 78 additions & 49 deletions src/components/ConnectBitcoin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@ const WalletButton = React.memo(
height="75"
alt={`${label} wallet`}
/>
<div className="py-1 font-rounded font-medium text-sm">
<div className="py-1 text-sm font-medium font-rounded">
{loading.isLoading && loading.walletType === walletType ? (
<div>
<LoaderCircle className="w-4 h-4 animate-spin opacity-50" />
<LoaderCircle className="w-4 h-4 opacity-50 animate-spin" />
</div>
) : (
label
Expand Down Expand Up @@ -93,7 +93,7 @@ const Details = React.memo(({ address, disconnect }: any) => {
<DialogTrigger asChild>
<Button
variant="ghost"
className="mx-2 dark:bg-rainbowkit-dark dark:text-white dark:hover:text-white bg-white hover:bg-white font-rounded text-zinc-800 font-bold text-md rounded-xl shadow-rainbowkit hover:scale-1025 transition-all active:scale-95"
className="mx-2 font-bold transition-all bg-white dark:bg-rainbowkit-dark dark:text-white dark:hover:text-white hover:bg-white font-rounded text-zinc-800 text-md rounded-xl shadow-rainbowkit hover:scale-1025 active:scale-95"
>
{formatAddress(address as string)}
</Button>
Expand All @@ -105,7 +105,7 @@ const Details = React.memo(({ address, disconnect }: any) => {
<div className="flex gap-2 ">
<Button
onClick={(e) => copyToClipboard(address as string, e)}
className="active:scale-95 dark:text-white rounded-xl flex-col flex-1 w-fit h-fit font-semibold font-rounded text-sm hover bg-white hover:bg-zinc-50 hover:scale-1025 transition-all dark:bg-rainbowkit-profileAction"
className="flex-col flex-1 text-sm font-semibold transition-all bg-white active:scale-95 dark:text-white rounded-xl w-fit h-fit font-rounded hover hover:bg-zinc-50 hover:scale-1025 dark:bg-rainbowkit-profileAction"
variant="ghost"
>
{copyStatus ? (
Expand All @@ -117,7 +117,7 @@ const Details = React.memo(({ address, disconnect }: any) => {
</Button>
<Button
onClick={disconnect}
className="active:scale-95 dark:text-white rounded-xl flex-col flex-1 w-fit h-fit font-semibold font-rounded text-sm hover bg-white hover:bg-zinc-50 hover:scale-1025 transition-all dark:bg-rainbowkit-profileAction"
className="flex-col flex-1 text-sm font-semibold transition-all bg-white active:scale-95 dark:text-white rounded-xl w-fit h-fit font-rounded hover hover:bg-zinc-50 hover:scale-1025 dark:bg-rainbowkit-profileAction"
variant="ghost"
>
<LogOut className="w-4 h-4 m-1" strokeWidth="2.5" />
Expand All @@ -129,56 +129,85 @@ const Details = React.memo(({ address, disconnect }: any) => {
);
});

const Connect = React.memo(({ connectWallet, loading }: any) => {
return (
<Dialog>
<DialogTrigger asChild>
<Button
variant="ghost"
className="mx-2 dark:bg-rainbowkit-dark dark:text-foreground dark:hover:text-white bg-white hover:bg-white font-rounded text-zinc-800 font-bold text-md rounded-xl shadow-rainbowkit hover:scale-1025 transition-all active:scale-95"
>
Connect Bitcoin
</Button>
</DialogTrigger>
<DialogContent className="p-5 sm:max-w-[400px] dark:bg-rainbowkit-secondary">
<DialogTitle className="pt-1 dark:text-white font-rounded font-extrabold tracking-normal">
Connect a Bitcoin Wallet
</DialogTitle>
<div className="flex gap-2 justify-between pt-5 px-2 items-start">
<WalletButton
walletType="okx"
icon={okxIcon}
label="OKX"
connectWallet={connectWallet}
loading={loading}
/>
<WalletButton
walletType="xdefi"
icon={xdefiIcon}
label="XDEFI"
connectWallet={connectWallet}
loading={loading}
/>
<WalletButton
walletType="unisat"
icon={unisatIcon}
label="UniSat"
connectWallet={connectWallet}
loading={loading}
/>
</div>
</DialogContent>
</Dialog>
);
});
interface ConnectProps {
connectWallet: (walletType: WalletType) => void;
loading: {
isLoading: boolean;
walletType: WalletType | null;
};
icon?: JSX.Element;
className?: string;
}
const Connect = React.memo(
({ connectWallet, loading, className,icon }: ConnectProps) => {
return (
<Dialog>
<DialogTrigger asChild>
<Button
variant={"ghost"}
className={
className
? className
: `mx-2 font-bold transition-all bg-white dark:bg-rainbowkit-dark dark:text-foreground dark:hover:text-white hover:bg-white font-rounded text-zinc-800 text-md rounded-xl shadow-rainbowkit hover:scale-1025 active:scale-95 `
}
>
Connect Bitcoin {icon}
</Button>
</DialogTrigger>
<DialogContent className="p-5 sm:max-w-[400px] dark:bg-rainbowkit-secondary">
<DialogTitle className="pt-1 font-extrabold tracking-normal dark:text-white font-rounded">
Connect a Bitcoin Wallet
</DialogTitle>
<div className="flex items-start justify-between gap-2 px-2 pt-5">
<WalletButton
walletType="okx"
icon={okxIcon}
label="OKX"
connectWallet={connectWallet}
loading={loading}
/>
<WalletButton
walletType="xdefi"
icon={xdefiIcon}
label="XDEFI"
connectWallet={connectWallet}
loading={loading}
/>
<WalletButton
walletType="unisat"
icon={unisatIcon}
label="UniSat"
connectWallet={connectWallet}
loading={loading}
/>
</div>
</DialogContent>
</Dialog>
);
}
);

export const ConnectBitcoin = () => {
interface ConnectBitcoinProps {
className?: string;
icon?: JSX.Element;
}
export const ConnectBitcoin: React.FC<ConnectBitcoinProps> = ({
className,
icon
}) => {
const { address, loading, connectWallet, disconnect } = useBitcoinWallet();
const modalComponent = useMemo(() => {
if (address) {
return <Details address={address} disconnect={disconnect} />;
}
return <Connect connectWallet={connectWallet} loading={loading} />;
return (
<Connect
connectWallet={connectWallet}
icon={icon}
loading={loading}
className={className}
/>
);
}, [address, loading, connectWallet, disconnect]);

return <div>{modalComponent}</div>;
Expand Down