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 00000000..2fde14ec Binary files /dev/null and b/src/app/assets/Keplr.png differ diff --git a/src/app/assets/OKX.png b/src/app/assets/OKX.png new file mode 100644 index 00000000..6fd0fb9e Binary files /dev/null and b/src/app/assets/OKX.png differ diff --git a/src/app/assets/bitcoin.png b/src/app/assets/bitcoin.png new file mode 100644 index 00000000..fb5b243a Binary files /dev/null and b/src/app/assets/bitcoin.png differ 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 ( + + ); +};