feat(phantom-and-oyl): support phantom and oyl wallet (#402)

* feat: support phantom and oyl wallet

* fix: svg size and format

README.md

@@ -15,6 +15,8 @@
 | Xverse     | ✅             | ✅                 |
 | Magic Eden | ✅             | ✅                 |
 | Leather    | ✅             | ✅                 |
+| Phantom    | ✅             | ✅                 |
+| Oyl        | ✅             | ✅                 |
 
 ## Quick Start
 

packages/ord-connect/package.json

@@ -60,7 +60,7 @@
     ]
   },
   "peerDependencies": {
-    "@ordzaar/ordit-sdk": "^4.1.1",
+    "@ordzaar/ordit-sdk": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }

packages/ord-connect/src/components/PostConnectButton/index.tsx

@@ -7,6 +7,8 @@ import LeatherWalletIcon from "../../assets/leather-wallet.svg";
 import LogoutIcon from "../../assets/logout.svg";
 import MagicEdenIcon from "../../assets/magiceden-wallet.svg";
 import OKXWalletIcon from "../../assets/okx-wallet.svg";
+import OylWalletIcon from "../../assets/oyl-wallet.svg";
+import PhantomWalletIcon from "../../assets/phantom-wallet.svg";
 import UnisatWalletIcon from "../../assets/unisat-wallet.svg";
 import XverseWalletIcon from "../../assets/xverse-wallet.svg";
 import {
@@ -22,6 +24,8 @@ const WALLET_TO_ICON: Record<Wallet, string> = {
   [Wallet.XVERSE]: XverseWalletIcon,
   [Wallet.LEATHER]: LeatherWalletIcon,
   [Wallet.OKX]: OKXWalletIcon,
+  [Wallet.PHANTOM]: PhantomWalletIcon,
+  [Wallet.OYL]: OylWalletIcon,
 } as const;
 
 interface PostConnectButtonProps {

packages/ord-connect/src/components/SelectWalletModal/WalletButton.tsx

@@ -13,6 +13,8 @@ const WALLET_TO_NAME: Record<Wallet, string> = {
   [Wallet.XVERSE]: "Xverse",
   [Wallet.LEATHER]: "Leather",
   [Wallet.OKX]: "OKX",
+  [Wallet.PHANTOM]: "Phantom",
+  [Wallet.OYL]: "Oyl",
 } as const;
 
 export interface WalletButtonProps {

packages/ord-connect/src/components/SelectWalletModal/hooks/useConnect.ts

@@ -6,6 +6,8 @@ import {
 import { getAddresses as getLeatherAddresses } from "@ordzaar/ordit-sdk/leather";
 import { getAddresses as getMagicEdenAddress } from "@ordzaar/ordit-sdk/magiceden";
 import { getAddresses as getOKXAddresses } from "@ordzaar/ordit-sdk/okx";
+import { getAddresses as getOylAddresses } from "@ordzaar/ordit-sdk/oyl";
+import { getAddresses as getPhantomAddresses } from "@ordzaar/ordit-sdk/phantom";
 import { getAddresses as getUnisatAddresses } from "@ordzaar/ordit-sdk/unisat";
 import { getAddresses as getXverseAddresses } from "@ordzaar/ordit-sdk/xverse";
 
@@ -31,6 +33,8 @@ const WALLET_CHROME_EXTENSION_URL: Record<Wallet, string> = {
   [Wallet.UNISAT]: "https://unisat.io/download", // their www subdomain doesn't work
   [Wallet.XVERSE]: "https://www.xverse.app/download",
   [Wallet.LEATHER]: "https://leather.io/install-extension",
+  [Wallet.PHANTOM]: "https://phantom.com/download",
+  [Wallet.OYL]: "https://www.oyl.io/#get-wallet",
 };
 
 const connectWallet = async (
@@ -209,6 +213,84 @@ const connectWallet = async (
         },
       };
     }
+    case Wallet.PHANTOM: {
+      const phantom = await getPhantomAddresses(network);
+      if (!phantom || phantom.length < 1) {
+        throw new Error("Phantom via Ordit returned no addresses");
+      }
+
+      const paymentsAddress = phantom.find(
+        (walletAddress) => walletAddress.format === "segwit",
+      );
+
+      if (!paymentsAddress) {
+        throw new Error("Phantom via Ordit did not return a Segwit address");
+      }
+
+      const ordinalsAddress = phantom.find(
+        (walletAddress) => walletAddress.format === "taproot",
+      );
+
+      if (!ordinalsAddress) {
+        throw new Error("Phantom via Ordit did not return a Taproot address");
+      }
+
+      return {
+        address: {
+          ordinals: ordinalsAddress.address,
+          payments: paymentsAddress.address,
+        },
+        publicKey: {
+          ordinals: ordinalsAddress.publicKey,
+          payments: paymentsAddress.publicKey,
+        },
+        format: {
+          ordinals: ordinalsAddress.format,
+          payments: paymentsAddress.format,
+        },
+      };
+    }
+    case Wallet.OYL: {
+      const oyl = await getOylAddresses(network);
+      if (!oyl || oyl.length < 1) {
+        throw new Error("Oyl via Ordit returned no addresses");
+      }
+
+      const paymentsAddress = oyl.find(
+        (walletAddress) =>
+          walletAddress.format === "p2sh-p2wpkh" ||
+          walletAddress.format === "segwit",
+      );
+
+      if (!paymentsAddress) {
+        throw new Error(
+          "Oyl via Ordit did not return a P2SH or Segwit address",
+        );
+      }
+
+      const ordinalsAddress = oyl.find(
+        (walletAddress) => walletAddress.format === "taproot",
+      );
+
+      if (!ordinalsAddress) {
+        throw new Error("Oyl via Ordit did not return a Taproot address");
+      }
+
+      return {
+        address: {
+          ordinals: ordinalsAddress.address,
+          payments: paymentsAddress.address,
+        },
+        publicKey: {
+          ordinals: ordinalsAddress.publicKey,
+          payments: paymentsAddress.publicKey,
+        },
+        format: {
+          ordinals: ordinalsAddress.format,
+          payments: paymentsAddress.format,
+        },
+      };
+    }
     default:
       throw new Error("Invalid wallet");
   }

packages/ord-connect/src/components/SelectWalletModal/index.tsx

@@ -5,6 +5,8 @@ import CloseModalIcon from "../../assets/close-modal.svg";
 import LeatherWalletIcon from "../../assets/leather-wallet.svg";
 import MagicEdenWalletIcon from "../../assets/magiceden-wallet.svg";
 import OKXWalletIcon from "../../assets/okx-wallet.svg";
+import OylWalletIcon from "../../assets/oyl-wallet.svg";
+import PhantomWalletIcon from "../../assets/phantom-wallet.svg";
 import UnisatWalletIcon from "../../assets/unisat-wallet.svg";
 import XverseWalletIcon from "../../assets/xverse-wallet.svg";
 import {
@@ -95,6 +97,22 @@ export function SelectWalletModal({
         order: 24,
         chains: [Chain.BITCOIN],
       },
+      {
+        wallet: Wallet.PHANTOM,
+        onConnect: () => connectWallet(Wallet.PHANTOM),
+        icon: PhantomWalletIcon,
+        hidden: isMobile,
+        order: 25,
+        chains: [Chain.BITCOIN],
+      },
+      {
+        wallet: Wallet.OYL,
+        onConnect: () => connectWallet(Wallet.OYL),
+        icon: OylWalletIcon,
+        hidden: isMobile,
+        order: 26,
+        chains: [Chain.BITCOIN],
+      },
     ];
 
     const walletList = ALL_WALLETS.filter(

packages/ord-connect/src/components/SelectWalletModal/style.css

@@ -152,6 +152,7 @@
 .ord-connect-wallet-modal .wallet-icon {
   width: 32px;
   height: 32px;
+  border-radius: 9999px;
 }
 
 .ord-connect-wallet-modal .wallet-option {
@@ -286,6 +287,7 @@
   .ord-connect-wallet-modal .wallet-icon {
     width: 40px;
     height: 40px;
+    border-radius: 9999px;
   }
 
   .ord-connect-wallet-modal .wallet-option-label {

packages/ord-connect/src/lib/signMessage.ts

@@ -5,6 +5,8 @@ import {
 } from "@ordzaar/ordit-sdk/leather";
 import { signMessage as signMagicEdenMessage } from "@ordzaar/ordit-sdk/magiceden";
 import { signMessage as signOKXMessage } from "@ordzaar/ordit-sdk/okx";
+import { signMessage as signOylMessage } from "@ordzaar/ordit-sdk/oyl";
+import { signMessage as signPhantomMessage } from "@ordzaar/ordit-sdk/phantom";
 import { signMessage as signUnisatMessage } from "@ordzaar/ordit-sdk/unisat";
 import { signMessage as signXverseMessage } from "@ordzaar/ordit-sdk/xverse";
 
@@ -72,5 +74,15 @@ export default async function signMessage({
     return base64;
   }
 
+  if (wallet === Wallet.PHANTOM) {
+    const { base64 } = await signPhantomMessage(message, address, network);
+    return base64;
+  }
+
+  if (wallet === Wallet.OYL) {
+    const { base64 } = await signOylMessage(message, address, network);
+    return base64;
+  }
+
   throw new Error("Invalid wallet selected");
 }

packages/ord-connect/src/lib/signPsbt.ts

@@ -2,6 +2,8 @@ import { Psbt } from "bitcoinjs-lib";
 import { signPsbt as signLeatherPsbt } from "@ordzaar/ordit-sdk/leather";
 import { signPsbt as signMagicEdenPsbt } from "@ordzaar/ordit-sdk/magiceden";
 import { signPsbt as signOKXPsbt } from "@ordzaar/ordit-sdk/okx";
+import { signPsbt as signOylPsbt } from "@ordzaar/ordit-sdk/oyl";
+import { signPsbt as signPhantomPsbt } from "@ordzaar/ordit-sdk/phantom";
 import { signPsbt as signUnisatPsbt } from "@ordzaar/ordit-sdk/unisat";
 import { signPsbt as signXversePsbt } from "@ordzaar/ordit-sdk/xverse";
 
@@ -124,6 +126,38 @@ export default async function signPsbt({
     return signedOKXPsbt;
   }
 
+  if (wallet === Wallet.PHANTOM) {
+    const signedPhantomPsbt = await signPhantomPsbt(psbt, {
+      finalize,
+      extractTx,
+      network,
+      inputsToSign: options?.inputsToSign ?? [
+        {
+          address,
+          signingIndexes: options?.signingIndexes ?? getAllInputIndices(), // If signingIndexes is not provided, just sign everything
+          sigHash: options?.sigHash,
+        },
+      ],
+    });
+    return signedPhantomPsbt;
+  }
+
+  if (wallet === Wallet.OYL) {
+    const signedOylPsbt = await signOylPsbt(psbt, {
+      finalize,
+      extractTx,
+      network,
+      inputsToSign: options?.inputsToSign ?? [
+        {
+          address,
+          signingIndexes: options?.signingIndexes ?? getAllInputIndices(), // If signingIndexes is not provided, just sign everything
+          sigHash: options?.sigHash,
+        },
+      ],
+    });
+    return signedOylPsbt;
+  }
+
   // else throw error
   throw new Error("Invalid wallet selected");
 }

packages/ord-connect/src/providers/OrdConnectProvider.tsx

@@ -23,6 +23,8 @@ export enum Wallet {
   MAGICEDEN = "magiceden",
   LEATHER = "leather",
   OKX = "okx",
+  PHANTOM = "phantom",
+  OYL = "oyl",
 }
 
 export enum Chain {