Asigna integration

package.json

@@ -11,6 +11,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@asigna/btc-connect": "0.0.16",
     "@bitcoinerlab/secp256k1": "1.1.1",
     "@headlessui/react": "2.1.2",
     "@heroicons/react": "2.1.5",

src/comps/ConnectWallet.tsx

@@ -17,7 +17,8 @@ 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 +33,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 +50,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 +73,8 @@ const ConnectWallet = ({ onClose }: ConnectWalletProps) => {
           break;
         case WalletProvider.XVERSE:
           addresses = await getAddressesXverse();
+        case WalletProvider.ASIGNA:
+          addresses = await getAddressesAsigna(asignaConnect);
       }
       const isMainnetAddress =
         addresses.payment.address.startsWith("bc1") ||
@@ -109,7 +122,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 +165,13 @@ 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";
@@ -248,6 +249,8 @@ const DepositFlowConfirm = ({
   const maxFee = useAtomValue(depositMaxFeeAtom);
   const config = useAtomValue(bridgeConfigAtom);
 
+  const { openSignBtcAmount } = useAsignaConnect();
+
   const walletInfo = useAtomValue(walletInfoAtom);
   const handleNextClick = async () => {
     try {
@@ -313,6 +316,9 @@ const DepositFlowConfirm = ({
           case WalletProvider.XVERSE:
             txId = await sendBTCXverse(params);
             break;
+          case WalletProvider.ASIGNA:
+            txId = await openSignBtcAmount(params, true);
+            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/HomeApp.tsx

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

src/util/atoms.ts

@@ -28,6 +28,7 @@ export const eventsAtom = atom<NotificationEventType[]>([]);
 export enum WalletProvider {
   LEATHER = "leather",
   XVERSE = "xverse",
+  ASIGNA = 'asigna',
 }
 
 type Address = {

src/util/wallet-utils/src/checkWallets.ts

@@ -11,6 +11,7 @@ const checkXverseProvider = async () => {
 export enum WalletType {
   xverse = "xverse",
   leather = "leather",
+  asigna = 'asigna',
 }
 export const checkAvailableWallets: () => Promise<{
   [key in WalletType]: boolean;
@@ -21,5 +22,6 @@ export const checkAvailableWallets: () => Promise<{
   return {
     leather: isLeather,
     xverse: isXverse,
+    asigna: window.top !== window.self,
   };
 };

src/util/wallet-utils/src/getAddress.ts

@@ -81,6 +81,24 @@ export const getAddressesXverse: getAddresses = async (params) => {
   return getWalletAddresses(result);
 };
 
+export const getAddressesAsigna = async (action: () => Promise<any>) => {
+  const response = await action();
+  return {
+    taproot: {
+      address: '',
+      publicKey: '',
+    },
+    payment: {
+      address: response.address,
+      publicKey: response.publicKey,
+    },
+    stacks: {
+      address: '',
+      publicKey: '',
+    },
+  };
+}
+
 const extractAddressByType = (
   addresses: Address[],
   addressType: BtcAddress["type"],