Asigna integration

package.json

@@ -11,31 +11,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@asigna/btc-connect": "0.0.24",
     "@bitcoinerlab/secp256k1": "1.1.1",
-    "@headlessui/react": "2.1.2",
     "@heroicons/react": "2.1.5",
-    "@noble/hashes": "1.5.0",
     "@scure/bip32": "1.3.3",
     "@stacks/transactions": "7.0.2",
     "@tanstack/react-query": "5.61.5",
-    "add": "2.0.6",
-    "babel-loader": "9.2.1",
-    "bip174": "3.0.0-rc.1",
     "bitcoinjs-lib": "7.0.0-rc.0",
-    "bs58check": "4.0.0",
-    "c32check": "2.0.0",
     "ecpair": "3.0.0-rc.0",
     "formik": "2.4.6",
     "framer-motion": "11.11.11",
     "jotai": "2.10.1",
     "next": "14.2.21",
-    "process": "0.11.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "sats-connect": "3.0.1",
+    "sats-connect": "3.1.0",
     "server-only": "0.0.1",
-    "webpack": "5.95.0",
-    "yarn": "1.22.22",
     "yup": "1.4.0"
   },
   "devDependencies": {

src/actions/get-sbtc-bridge-config.ts

@@ -13,6 +13,7 @@ export default cache(async function getSbtcBridgeConfig() {
   const BANNER_CONTENT = env.BANNER_CONTENT;
   const RECLAIM_LOCK_TIME = env.RECLAIM_LOCK_TIME;
   const PUBLIC_MEMPOOL_URL = env.PUBLIC_MEMPOOL_URL;
+  const MEMPOOL_API_URL = env.MEMPOOL_API_URL;
   const SUPPORT_LINK = env.SUPPORT_LINK;
   const POLLING_INTERVAL = env.POLLING_INTERVAL;
 
@@ -25,5 +26,6 @@ export default cache(async function getSbtcBridgeConfig() {
     PUBLIC_MEMPOOL_URL,
     SUPPORT_LINK,
     POLLING_INTERVAL,
+    MEMPOOL_API_URL,
   };
 });

src/app/layout-client.tsx

@@ -10,6 +10,7 @@ import { Suspense, useEffect } from "react";
 import { bridgeConfigAtom } from "@/util/atoms";
 import Header from "@/comps/Header";
 import Footer from "@/comps/footer";
+import { AsignaSignActionModals } from "@asigna/btc-connect";
 
 export default function LayoutClient({
   children,
@@ -33,6 +34,7 @@ export default function LayoutClient({
             <Header config={config} />
             {children}
             <Footer supportLink={config.SUPPORT_LINK} />
+            <AsignaSignActionModals />
           </Suspense>
         </main>
       </QueryClientProvider>

src/comps/ConnectWallet.tsx

@@ -17,7 +17,11 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { useNotifications } from "@/hooks/use-notifications";
 import { NotificationStatusType } from "./Notifications";
 import { useEffect, useState } from "react";
-import { getAddresses } from "@/util/wallet-utils/src/getAddress";
+import {
+  getAddresses,
+  getAddressesAsigna,
+} from "@/util/wallet-utils/src/getAddress";
+import { useAsignaConnect } from "@asigna/btc-connect";
 
 const WALLET_PROVIDERS = [
   {
@@ -32,6 +36,12 @@ const WALLET_PROVIDERS = [
     walletProvider: WalletProvider.XVERSE,
     installUrl: "https://xverse.app",
   },
+  {
+    image: "/images/AsignaMultisig.svg",
+    name: "Asigna Multisig",
+    walletProvider: WalletProvider.ASIGNA,
+    installUrl: "https://btc.asigna.io",
+  },
 ];
 
 type ConnectWalletProps = {
@@ -43,16 +53,20 @@ const ConnectWallet = ({ onClose }: ConnectWalletProps) => {
   }>({
     leather: false,
     xverse: false,
+    asigna: false,
   });
   useEffect(() => {
     checkAvailableWallets().then(setAvailableWallets);
   }, []);
+
   const setWalletInfo = useSetAtom(walletInfoAtom);
 
   const setShowTos = useSetAtom(showTosAtom);
 
   const { notify } = useNotifications();
   const { WALLET_NETWORK } = useAtomValue(bridgeConfigAtom);
+  const { connect: asignaConnect } = useAsignaConnect();
+
   const handleSelectWallet = async (wallet: WalletProvider) => {
     try {
       let addresses: Awaited<ReturnType<getAddresses>> | null = null;
@@ -62,6 +76,9 @@ const ConnectWallet = ({ onClose }: ConnectWalletProps) => {
           break;
         case WalletProvider.XVERSE:
           addresses = await getAddressesXverse();
+          break;
+        case WalletProvider.ASIGNA:
+          addresses = await getAddressesAsigna({ action: asignaConnect });
       }
       const isMainnetAddress =
         addresses.payment.address.startsWith("bc1") ||
@@ -109,7 +126,7 @@ const ConnectWallet = ({ onClose }: ConnectWalletProps) => {
         style={{
           backgroundColor: "#FFF5EB",
         }}
-        className=" rounded-lg  flex flex-col items-center justify-between p-6 w-full h-screen sm:h-[400px] sm:w-[340px]  shadow-lg"
+        className=" rounded-lg  flex flex-col items-center justify-between p-6 w-full h-screen sm:h-[500px] sm:w-[340px]  shadow-lg"
       >
         <div className="w-full flex flex-col gap-2 items-center justify-center">
           <Heading>Connect Wallet</Heading>
@@ -152,8 +169,16 @@ const ConnectWallet = ({ onClose }: ConnectWalletProps) => {
                     alt={provider.name}
                   />
                   <p className="ml-4 text-black">
-                    {provider.name}{" "}
-                    {!available && " is not available click to install"}
+                    {provider.walletProvider === WalletProvider.ASIGNA &&
+                    !available ? (
+                      "Open as an embedded app in Asigna"
+                    ) : (
+                      <>
+                        {provider.name}
+                        {""}
+                        {!available && " is not available click to install"}
+                      </>
+                    )}
                   </p>
                 </div>
                 {available ? (

src/comps/Deposit.tsx

@@ -40,6 +40,7 @@ import { sendBTCLeather, sendBTCXverse } from "@/util/wallet-utils";
 import useMintCaps from "@/hooks/use-mint-caps";
 import { getAggregateKey } from "@/util/get-aggregate-key";
 import getBitcoinNetwork from "@/util/get-bitcoin-network";
+import { useAsignaConnect } from "@asigna/btc-connect";
 import { useQuery } from "@tanstack/react-query";
 import getBtcBalance from "@/actions/get-btc-balance";
 import { useDepositStatus } from "@/hooks/use-deposit-status";
@@ -266,6 +267,8 @@ const DepositFlowConfirm = ({
   const config = useAtomValue(bridgeConfigAtom);
   const { notifyEmily, isPending: isPendingNotifyEmily } = useEmilyDeposit();
 
+  const { openSignBtcAmount } = useAsignaConnect();
+
   const walletInfo = useAtomValue(walletInfoAtom);
   const handleNextClick = async () => {
     try {
@@ -278,14 +281,25 @@ const DepositFlowConfirm = ({
       // user cannot continue if they're not connected
       const paymentAddress = walletInfo.addresses.payment!;
 
-      const reclaimPublicKey = paymentAddress.publicKey;
+      let reclaimPublicKeys = [paymentAddress.publicKey];
+      let signatureThreshold = 1;
+
+      if (walletInfo.selectedWallet === WalletProvider.ASIGNA) {
+        const { threshold, users } = walletInfo.addresses.musig!;
+        signatureThreshold = threshold;
+        reclaimPublicKeys = users.map((user) => user.publicKey);
+      }
 
       // Parse lockTime from env variable
       const parsedLockTime = parseInt(lockTime || "144");
 
       // Create the reclaim script and convert to Buffer
       const reclaimScript = Buffer.from(
-        createReclaimScript(parsedLockTime, reclaimPublicKey),
+        createReclaimScript(
+          parsedLockTime,
+          reclaimPublicKeys,
+          signatureThreshold,
+        ),
       );
 
       const reclaimScriptHex = uint8ArrayToHexString(reclaimScript);
@@ -303,7 +317,8 @@ const DepositFlowConfirm = ({
         maxFee,
         parsedLockTime,
         getBitcoinNetwork(config.WALLET_NETWORK),
-        reclaimPublicKey,
+        reclaimPublicKeys,
+        signatureThreshold,
       );
 
       let txId = "";
@@ -331,6 +346,13 @@ const DepositFlowConfirm = ({
           case WalletProvider.XVERSE:
             txId = await sendBTCXverse(params);
             break;
+          case WalletProvider.ASIGNA:
+            txId = (await openSignBtcAmount(
+              params,
+              true,
+              config.MEMPOOL_API_URL + "/",
+            )) as string;
+            break;
         }
       } catch (error) {
         let errorMessage = error;

src/comps/Faqs.tsx

@@ -108,6 +108,17 @@ const faqs = [
             wallets are supported — two leading wallets with seamless
             integrations designed for Bitcoin and Stacks users.
           </li>
+          <li>
+            <a 
+              className="text-blue-600 underline"
+              href="https://www.asigna.io/"
+              target="_blank"
+            >
+              Asigna Multisig
+            </a>{" "} 
+            is also supported on both the Bitcoin and Stacks sides, providing
+            reliable functionality for multisig setups.
+          </li>
           <li>
             We are actively working with institutional custodians, staking
             providers, and other 3rd party wallets to support sBTC. More will be

src/comps/Header.tsx

@@ -39,6 +39,7 @@ const Header = ({ config }: { config: BridgeConfig }) => {
         payment: null,
         taproot: null,
         stacks: null,
+        musig: null,
       },
     });
     notify({

src/comps/HomeApp.tsx

@@ -5,6 +5,7 @@ import Faqs from "./Faqs";
 import DepositFlow from "./Deposit";
 import { TransferAction } from "./TransferHome";
 import LandingAnimation from "./core/LandingAnimation";
+
 // import { usePathname, useRouter } from "next/navigation";
 
 export enum SECTION {
@@ -63,6 +64,7 @@ const HomeApp = () => {
         )} */}
         {selectedSection === SECTION.TRANSFER && <TransferAction />}
       </LandingAnimation>
+
       <Faqs />
     </>
   );

src/comps/ReclaimManager.tsx

@@ -30,7 +30,8 @@ import {
   signPSBTLeather,
   signPSBTXverse,
 } from "@/util/wallet-utils/src/sign-psbt";
-
+import { useAsignaConnect } from "@asigna/btc-connect";
+import { Psbt } from "bitcoinjs-lib";
 /*
   Goal : User server side rendering as much as possible
   - Break down the components into either their own file or smaller components
@@ -329,6 +330,7 @@ const ReclaimDeposit = ({
   const walletInfo = useAtomValue(walletInfoAtom);
   const setShowWallet = useSetAtom(showConnectWalletAtom);
   const router = useRouter();
+  const { openSignPsbt } = useAsignaConnect();
 
   const { WALLET_NETWORK: walletNetwork, SUPPORT_LINK } =
     useAtomValue(bridgeConfigAtom);
@@ -380,12 +382,18 @@ const ReclaimDeposit = ({
       address: walletInfo.addresses.payment!.address,
       network: walletNetwork,
     };
-    let signedPsbt = "";
+    let signedPsbt: Psbt | undefined = undefined;
     if (walletInfo.selectedWallet === WalletProvider.LEATHER) {
-      signedPsbt = await signPSBTLeather(params);
+      signedPsbt = Psbt.fromHex(await signPSBTLeather(params));
     }
     if (walletInfo.selectedWallet === WalletProvider.XVERSE) {
-      signedPsbt = await signPSBTXverse(params);
+      signedPsbt = Psbt.fromHex(await signPSBTXverse(params));
+    }
+    if (walletInfo.selectedWallet === WalletProvider.ASIGNA) {
+      signedPsbt = (await openSignPsbt(
+        Psbt.fromHex(psbtHex).toBase64(),
+        false,
+      )) as any;
     }
 
     if (signedPsbt) {

src/util/atoms.ts

@@ -4,6 +4,7 @@ import { atom, createStore } from "jotai";
 import { NotificationEventType } from "@/comps/Notifications";
 import getSbtcBridgeConfig from "@/actions/get-sbtc-bridge-config";
 import { atomWithStorage } from "jotai/utils";
+import { AsignaUser } from "./wallet-utils/src/getAddress";
 
 export const store = createStore();
 
@@ -18,6 +19,7 @@ export const bridgeConfigAtom = atom<BridgeConfig>({
   PUBLIC_MEMPOOL_URL: "",
   SUPPORT_LINK: undefined,
   POLLING_INTERVAL: 5000,
+  MEMPOOL_API_URL: "",
 });
 export const depositMaxFeeAtom = atom(80000);
 
@@ -29,6 +31,7 @@ export const eventsAtom = atom<NotificationEventType[]>([]);
 export enum WalletProvider {
   LEATHER = "leather",
   XVERSE = "xverse",
+  ASIGNA = "asigna",
 }
 
 type Address = {
@@ -43,12 +46,17 @@ export const walletInfoAtom = atomWithStorage<{
     payment: Address | null;
     taproot: Address | null;
     stacks: Address | null;
+    musig: {
+      users: AsignaUser[];
+      threshold: number;
+    } | null;
   };
 }>("walletInfoV3", {
   selectedWallet: null,
   addresses: {
     payment: null,
     taproot: null,
     stacks: null,
+    musig: null,
   },
 });