diff --git a/src/app/components/Connect/ConnectSmall.tsx b/src/app/components/Connect/ConnectSmall.tsx index 31570d8e..9f66510b 100644 --- a/src/app/components/Connect/ConnectSmall.tsx +++ b/src/app/components/Connect/ConnectSmall.tsx @@ -20,6 +20,8 @@ interface ConnectSmallProps { address: string; btcWalletBalanceSat?: number; onDisconnect: () => void; + shouldFilterOrdinals: boolean; + setShouldFilterOrdinals: (value: boolean) => void; } export const ConnectSmall: React.FC = ({ @@ -27,6 +29,8 @@ export const ConnectSmall: React.FC = ({ address, btcWalletBalanceSat, onDisconnect, + shouldFilterOrdinals, + setShouldFilterOrdinals, }) => { const [showMenu, setShowMenu] = useState(false); const handleClickOutside = () => { @@ -106,6 +110,17 @@ export const ConnectSmall: React.FC = ({
+
+ +
+ +
+
+

+ Your wallet may contain Bitcoin Ordinals, which are unique digital + assets. If you proceed without filtering, these Ordinals could be + included in future actions involving your balance. +

+

Please select:

+
+
+
+ +
+
+ +
+
+

+ * You can change this setting later if needed +

+ +
+ + ); +}; diff --git a/src/app/page.tsx b/src/app/page.tsx index 02db8f43..974d2e50 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -29,6 +29,7 @@ import { Footer } from "./components/Footer/Footer"; import { Header } from "./components/Header/Header"; import { ConnectModal } from "./components/Modals/ConnectModal"; import { ErrorModal } from "./components/Modals/ErrorModal"; +import { FilterOrdinalsModal } from "./components/Modals/FilterOrdinalsModal"; import { NetworkBadge } from "./components/NetworkBadge/NetworkBadge"; import { Staking } from "./components/Staking/Staking"; import { Stats } from "./components/Stats/Stats"; @@ -118,6 +119,15 @@ const Home: React.FC = () => { }, }); + // Whether or not to filter out ordinals from the UTXOs + const [shouldFilterOrdinals, setShouldFilterOrdinals] = useState(true); + + const [filterOrdinalsModalOpen, setFilterOrdinalsModalOpen] = useState(false); + + const handleShouldFilterOrdinals = (value: boolean) => { + setShouldFilterOrdinals(value); + }; + // Fetch all UTXOs const { data: availableUTXOs, @@ -125,11 +135,15 @@ const Home: React.FC = () => { isError: hasAvailableUTXOsError, refetch: refetchAvailableUTXOs, } = useQuery({ - queryKey: [UTXO_KEY, address], + queryKey: [UTXO_KEY, address, shouldFilterOrdinals], queryFn: async () => { if (btcWallet?.getUtxos && address) { // all confirmed UTXOs from the wallet const mempoolUTXOs = await btcWallet.getUtxos(address); + + // return the UTXOs if we don't need to filter out the ordinals + if (!shouldFilterOrdinals) return mempoolUTXOs; + // filter out the ordinals const filteredUTXOs = await filterOrdinals( mempoolUTXOs, @@ -230,6 +244,7 @@ const Home: React.FC = () => { setBTCWalletNetwork(toNetwork(await walletProvider.getNetwork())); setAddress(address); setPublicKeyNoCoord(publicKeyNoCoord.toString("hex")); + setFilterOrdinalsModalOpen(true); } catch (error: Error | any) { if ( error instanceof WalletError && @@ -324,6 +339,8 @@ const Home: React.FC = () => { onDisconnect={handleDisconnectBTC} address={address} btcWalletBalanceSat={btcWalletBalanceSat} + shouldFilterOrdinals={shouldFilterOrdinals} + setShouldFilterOrdinals={handleShouldFilterOrdinals} />
@@ -388,6 +405,12 @@ const Home: React.FC = () => { onConnect={handleConnectBTC} connectDisabled={!!address} /> +