From 7ca93bb36ad2fe06952d6011d445070dcf14b82c Mon Sep 17 00:00:00 2001 From: Tong Li Date: Sun, 8 Dec 2024 17:16:07 +1100 Subject: [PATCH] connect button refinement --- public/lock.svg | 3 + src/app/assets/Keplr.png | Bin 0 -> 2981 bytes src/app/assets/OKX.png | Bin 0 -> 1241 bytes src/app/assets/bitcoin.png | Bin 0 -> 1647 bytes src/app/components/Connect/ConnectSmall.tsx | 141 ++++++--------- src/app/components/Connect/ConnectedSmall.tsx | 166 ++++++++++-------- src/app/components/Connect/Menu.tsx | 81 +++++++++ src/app/components/Header/Header.tsx | 33 ++-- src/app/components/Toggle/Toggle.tsx | 19 ++ 9 files changed, 262 insertions(+), 181 deletions(-) create mode 100644 public/lock.svg create mode 100644 src/app/assets/Keplr.png create mode 100644 src/app/assets/OKX.png create mode 100644 src/app/assets/bitcoin.png create mode 100644 src/app/components/Connect/Menu.tsx create mode 100644 src/app/components/Toggle/Toggle.tsx diff --git a/public/lock.svg b/public/lock.svg new file mode 100644 index 00000000..637369de --- /dev/null +++ b/public/lock.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/app/assets/Keplr.png b/src/app/assets/Keplr.png new file mode 100644 index 0000000000000000000000000000000000000000..2fde14ec1d5d61ad55110b1a174313db5f0bb924 GIT binary patch literal 2981 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 Dt)@iu literal 0 HcmV?d00001 diff --git a/src/app/assets/bitcoin.png b/src/app/assets/bitcoin.png new file mode 100644 index 0000000000000000000000000000000000000000..fb5b243ad7c00948241af14d0a975fab3c3ae966 GIT binary patch literal 1647 zcmV-#29WuQP)ZCaeJl0j|*oJ5XJ1ZP37{eOG0X`}ZEHxWS&V&AL6)UVS)e+&3!BVoN z`VfqldMYxXi%3vZXXb#h4Kf`WMDEU~fyeaLWll4mT3bCt+h5?BGr(-ai0~r7=YlMJ z4CQ)S>nU4$Ufcrfh+wWvCp>E&5*GXa8{(fopf#Tb&zS5lUpv=rGuKb}Mjb@wEy#jm ze|RUit)*9EWg9`#S?0)vh5rf3phc&!X(@_ zpUc5YT3Z#p^!76QdV0)}_0}$b5B1{b^fel|V|q{$G0KC%w zYKsR6?spD%95Z52Xxig22|=-@o)69p!rcndbcSBkUcxks2@5vBy8ICM*d>q!E!J1{ zCwEn6&5@10uueuy3@VGJ({S(4hkNHFc#p24S-aYY=x8J^-3{iP1sM>*bXS#g9;XDf z0C9qkSr}AS8;<#jdT&F$upjPE7C~J9rO&7w2{Vcz4IyT7F63h`jG$v$aDUC`f(K%Ag z@a!?$a3n52XyieS5;Zh0g}`F)aSsRCslV-mG)SfE1mn_qT;Cx=>l}Fi{VM(VsF(H= z!M!kn5f(i~(T{n8wDKElLmc4Q^T9&e407i`h4;JHU=|i4r|&}}%{UqHH|(xJ zS&u(o-3R_cjov;6mYJ)e-1Bt6Mw#@ik#>Bi%OMMzw-!n>XoE?F&R*#173~f1ep?E) zc4tt%<^DDFVG|(FP&9B=h*}w2L&1!D#L#+te6W`7$$z2n(LNlC(5*50ptxe;jMI5l zJQ>T@GOHBI#HS**h2_55Xm#pn$AMp z{+sr8)zE{MyjQ|(#m!$KPY@^ka;wsLgQhb*nlT?a)exmh_Ck72C$*9WvrsR60q-}3 za>fkxNrjDL{fb&(M=X2odM(tScf)hA0PgoElkV&AyWYA$jlNj!{uTV=yO0F~JD@)e zf;KHtU;A!ZXPz+yEHTA+_Z)ti2;Xb$9L9%GJc^c!BpB`(QeR)u>bYuo_AL!kH!;`= zp{N!5t0DPWNquWqm9v8K&g)YC-6BD2zhX#!?wn1m6O20V*DGniy^aAv!>*)4|NTwi z&}8)`Zsv?hEiv9L5(4Ls(cR~do972kj$#j7YzmAOsHa)fG)P@@cz<{c?%h-2JGs&C zo8lKl{iPc-P{B6zy;KT2B)O`xwo?d{z$935h9UJuXA9y5Nx!Yhg^fXB7V#9}te=TlDL1my?JC{{qt=Ay2(#xf=ig002ovPDHLkV1ja%2#x>% literal 0 HcmV?d00001 diff --git a/src/app/components/Connect/ConnectSmall.tsx b/src/app/components/Connect/ConnectSmall.tsx index 13ec1983..653b1f0d 100644 --- a/src/app/components/Connect/ConnectSmall.tsx +++ b/src/app/components/Connect/ConnectSmall.tsx @@ -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; @@ -66,91 +65,55 @@ export const ConnectSmall: React.FC = ({ ); }; - return connected ? ( -
- + {!isApiNormal && renderApiNotAvailableTooltip()} +
+ ); + } + + return ( +
+
+ OKX + Keplr +
+
+ Wallet Connected +
+ bc1pnT + | + bbn170
- - {showMenu && ( -
+
+ -
-
- -
-
- -
- -
- )} -
- ) : ( -
- - {!isApiNormal && renderApiNotAvailableTooltip()} + + +
+ setShowMenu(false)} />
); }; diff --git a/src/app/components/Connect/ConnectedSmall.tsx b/src/app/components/Connect/ConnectedSmall.tsx index 0559e3ae..5ac6337d 100644 --- a/src/app/components/Connect/ConnectedSmall.tsx +++ b/src/app/components/Connect/ConnectedSmall.tsx @@ -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; @@ -22,87 +20,107 @@ interface ConnectedSmallProps { export const ConnectedSmall: React.FC = ({ 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 && ( -
- - {showMenu && ( -
-
-

Settings

- -
-
- -
-
- -
- -
- )} -
- ) +
+ OKX + Keplr +
); + + // return ( + // connected && ( + //
+ // + // {showMenu && ( + //
+ //
+ //

Settings

+ // + //
+ //
+ // + //
+ //
+ // + //
+ // + //
+ // )} + //
+ // ) + // ); }; diff --git a/src/app/components/Connect/Menu.tsx b/src/app/components/Connect/Menu.tsx new file mode 100644 index 00000000..4c788a98 --- /dev/null +++ b/src/app/components/Connect/Menu.tsx @@ -0,0 +1,81 @@ +import { Text } from "@babylonlabs-io/bbn-core-ui"; +import { useWalletConnect } from "@babylonlabs-io/bbn-wallet-connect"; +import Image from "next/image"; + +import bitcoin from "@/app/assets/bitcoin.png"; +import bbnIcon from "@/app/assets/icon-black.svg"; +import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider"; +import { useAppState } from "@/app/state"; + +import { Hash } from "../Hash/Hash"; +import { ThemeToggle } from "../ThemeToggle/ThemeToggle"; +import { Toggle } from "../Toggle/Toggle"; + +interface MenuProps { + open: boolean; + onClose: () => void; +} + +export const Menu: React.FC = ({ open, onClose }) => { + const { ordinalsExcluded, includeOrdinals, excludeOrdinals } = useAppState(); + const { disconnect } = useWalletConnect(); + const { address } = useBTCWallet(); + + if (!open) { + return null; + } + + return ( +
+
+ bitcoin +
+ + Bitcoin + + +
+
+
+ + Not using Inscriptions + +
+ +
+
+
+
+ bitcoin +
+ + Babylon Chain + + +
+
+
+
+ +
+
+
+ +
+
+ ); +}; diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx index 57fe344c..86483353 100644 --- a/src/app/components/Header/Header.tsx +++ b/src/app/components/Header/Header.tsx @@ -1,15 +1,12 @@ import { useWalletConnect } from "@babylonlabs-io/bbn-wallet-connect"; -import { twJoin } from "tailwind-merge"; import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider"; import { useAppState } from "@/app/state"; import { shouldDisplayTestingMsg } from "@/config"; -import { ConnectedSmall } from "../Connect/ConnectedSmall"; import { ConnectSmall } from "../Connect/ConnectSmall"; import { Logo } from "../Logo/Logo"; import { TestingInfo } from "../TestingInfo/TestingInfo"; -import { ThemeToggle } from "../ThemeToggle/ThemeToggle"; export const Header = () => { const { connected, disconnect, open } = useWalletConnect(); @@ -37,22 +34,22 @@ export const Header = () => { btcWalletBalanceSat={totalBalance} onDisconnect={disconnect} /> - -
-
-
+ {/*
+

This is the shit

+ +
*/}
diff --git a/src/app/components/Toggle/Toggle.tsx b/src/app/components/Toggle/Toggle.tsx new file mode 100644 index 00000000..e9ec7ceb --- /dev/null +++ b/src/app/components/Toggle/Toggle.tsx @@ -0,0 +1,19 @@ +import { twJoin } from "tailwind-merge"; + +interface ToggleProps { + disabled?: boolean; +} + +export const Toggle: React.FC = ({ disabled = false }) => { + return ( + + ); +};