feature: Ordinals filtering modal

src/app/components/Connect/ConnectSmall.tsx

@@ -20,13 +20,17 @@ interface ConnectSmallProps {
   address: string;
   btcWalletBalanceSat?: number;
   onDisconnect: () => void;
+  shouldFilterOrdinals: boolean;
+  setShouldFilterOrdinals: (value: boolean) => void;
 }
 
 export const ConnectSmall: React.FC<ConnectSmallProps> = ({
   onConnect,
   address,
   btcWalletBalanceSat,
   onDisconnect,
+  shouldFilterOrdinals,
+  setShouldFilterOrdinals,
 }) => {
   const [showMenu, setShowMenu] = useState(false);
   const handleClickOutside = () => {
@@ -106,6 +110,17 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({
           <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={!shouldFilterOrdinals}
+                onChange={() => setShouldFilterOrdinals(!shouldFilterOrdinals)}
+              />
+            </label>
+          </div>
           <button
             className="btn btn-outline btn-sm"
             onClick={() => {

src/app/components/Connect/ConnectedSmall.tsx

@@ -15,12 +15,16 @@ interface ConnectedSmallProps {
   address: string;
   onDisconnect: () => void;
   btcWalletBalanceSat?: number;
+  shouldFilterOrdinals: boolean;
+  setShouldFilterOrdinals: (value: boolean) => void;
 }
 
 export const ConnectedSmall: React.FC<ConnectedSmallProps> = ({
   address,
   btcWalletBalanceSat,
   onDisconnect,
+  shouldFilterOrdinals,
+  setShouldFilterOrdinals,
 }) => {
   const [showMenu, setShowMenu] = useState(false);
   const handleClickOutside = () => {
@@ -72,6 +76,19 @@ export const ConnectedSmall: React.FC<ConnectedSmallProps> = ({
             <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={!shouldFilterOrdinals}
+                  onChange={() =>
+                    setShouldFilterOrdinals(!shouldFilterOrdinals)
+                  }
+                />
+              </label>
+            </div>
             <button
               className="btn btn-outline btn-sm"
               onClick={() => {

src/app/components/Header/Header.tsx

@@ -11,13 +11,17 @@ interface HeaderProps {
   address: string;
   btcWalletBalanceSat?: number;
   onDisconnect: () => void;
+  shouldFilterOrdinals: boolean;
+  setShouldFilterOrdinals: (value: boolean) => void;
 }
 
 export const Header: React.FC<HeaderProps> = ({
   onConnect,
   address,
   btcWalletBalanceSat,
   onDisconnect,
+  shouldFilterOrdinals,
+  setShouldFilterOrdinals,
 }) => {
   return (
     <nav>
@@ -36,6 +40,8 @@ export const Header: React.FC<HeaderProps> = ({
             address={address}
             btcWalletBalanceSat={btcWalletBalanceSat}
             onDisconnect={onDisconnect}
+            shouldFilterOrdinals={shouldFilterOrdinals}
+            setShouldFilterOrdinals={setShouldFilterOrdinals}
           />
           <ThemeToggle />
         </div>
@@ -46,6 +52,8 @@ export const Header: React.FC<HeaderProps> = ({
             address={address}
             btcWalletBalanceSat={btcWalletBalanceSat}
             onDisconnect={onDisconnect}
+            shouldFilterOrdinals={shouldFilterOrdinals}
+            setShouldFilterOrdinals={setShouldFilterOrdinals}
           />
         </div>
       </div>

src/app/components/Modals/ConnectModal.tsx

@@ -189,8 +189,9 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
                   checked={noInscription}
                 />
                 <span className="label-text text-xs leading-snug md:text-sm">
-                  I certify that there are no Bitcoin inscriptions tokens in my
-                  wallet.
+                  I certify that staking bitcoin with ordinals, bitcoin NFTs,
+                  Ruins, or any other bitcoin inscriptions can cause their
+                  complete and permanent loss.
                 </span>
               </label>
             </div>

src/app/components/Modals/FilterOrdinalsModal.tsx

@@ -0,0 +1,88 @@
+import { IoMdClose } from "react-icons/io";
+
+import { GeneralModal } from "./GeneralModal";
+
+interface FilterOrdinalsModalProps {
+  open: boolean;
+  onClose: (value: boolean) => void;
+  shouldFilterOrdinals: boolean;
+  setShouldFilterOrdinals: (value: boolean) => void;
+}
+
+export const FilterOrdinalsModal: React.FC<FilterOrdinalsModalProps> = ({
+  open,
+  onClose,
+  shouldFilterOrdinals,
+  setShouldFilterOrdinals,
+}) => {
+  return (
+    <GeneralModal open={open} onClose={onClose}>
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="font-bold">
+          Ordinals, Bitcoin NFTs, Runes, Bitcoin inscriptions
+        </h3>
+        <button
+          className="btn btn-circle btn-ghost btn-sm"
+          onClick={() => onClose(false)}
+        >
+          <IoMdClose size={24} />
+        </button>
+      </div>
+      <div className="flex flex-col gap-4 md:max-w-[34rem]">
+        <div className="flex flex-col gap-4 leading-snug text-sm">
+          <p>
+            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.
+          </p>
+          <p>Please select:</p>
+        </div>
+        <div className="flex flex-col gap-4 rounded-xl bg-base-100 p-3 md:p-4">
+          <div className="form-control">
+            <label className="label cursor-pointer justify-start gap-2">
+              <input
+                type="radio"
+                name="ordinals-radio"
+                className="radio checked:bg-primary"
+                checked={!shouldFilterOrdinals}
+                onChange={() => setShouldFilterOrdinals(false)}
+              />
+              <span className="label-text">
+                I want to <strong>include</strong> ordinals, bitcoin NFTs,
+                Ruins, and any other bitcoin inscriptions in my stakable bitcoin
+                balance. I understand that doing so can cause their complete and
+                permanent loss and agree that I am solely liable and responsible
+                for their loss. I have been warned.
+              </span>
+            </label>
+          </div>
+          <div className="form-control">
+            <label className="label cursor-pointer justify-start gap-2">
+              <input
+                type="radio"
+                name="ordinals-radio"
+                className="radio checked:bg-primary"
+                checked={shouldFilterOrdinals}
+                onChange={() => setShouldFilterOrdinals(true)}
+              />
+              <span className="label-text">
+                I would like to <strong>exclude</strong> ordinals, bitcoin NFTs,
+                Ruins, and any other bitcoin inscriptions in my stakable bitcoin
+                balance
+              </span>
+            </label>
+          </div>
+        </div>
+        <p className="text-xs opacity-50">
+          * You can change this setting later if needed
+        </p>
+        <button
+          className="btn-primary btn flex-1"
+          onClick={() => onClose(false)}
+        >
+          Confirm
+        </button>
+      </div>
+    </GeneralModal>
+  );
+};

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,18 +119,31 @@ const Home: React.FC<HomeProps> = () => {
     },
   });
 
+  // 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,
     error: availableUTXOsError,
     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<HomeProps> = () => {
         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<HomeProps> = () => {
         onDisconnect={handleDisconnectBTC}
         address={address}
         btcWalletBalanceSat={btcWalletBalanceSat}
+        shouldFilterOrdinals={shouldFilterOrdinals}
+        setShouldFilterOrdinals={handleShouldFilterOrdinals}
       />
       <div className="container mx-auto flex justify-center p-6">
         <div className="container flex flex-col gap-6">
@@ -388,6 +405,12 @@ const Home: React.FC<HomeProps> = () => {
         onConnect={handleConnectBTC}
         connectDisabled={!!address}
       />
+      <FilterOrdinalsModal
+        open={filterOrdinalsModalOpen}
+        onClose={setFilterOrdinalsModalOpen}
+        shouldFilterOrdinals={shouldFilterOrdinals}
+        setShouldFilterOrdinals={handleShouldFilterOrdinals}
+      />
       <ErrorModal
         open={isErrorOpen}
         errorMessage={error.message}