feat: sbtc integration

config/wallet-config.json

@@ -93,6 +93,20 @@
   "recoverUninscribedTaprootUtxosFeatureEnabled": true,
   "runesEnabled": true,
   "swapsEnabled": true,
+  "sbtc": {
+    "enabled": true,
+    "swapsEnabled": false,
+    "emilyApiUrl": "https://beta.sbtc-emily.com",
+    "showPromoLinkOnNetworks": ["testnet", "sbtcTestnet"],
+    "contracts": {
+      "mainnet": {
+        "address": "SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-token::sbtc-token"
+      },
+      "testnet": {
+        "address": "SNGWPN3XDAQE673MXYXF81016M50NHF5X5PWWM70.sbtc-token::sbtc-token"
+      }
+    }
+  },
   "tokensEnabledByDefault": [
     "DOGGOTOTHEMOON",
     "RSICGENESISRUNE",
@@ -108,6 +122,7 @@
     "SM26NBC8SFHNW4P1Y4DFH27974P56WN86C92HPEHH.token-lqstx::lqstx",
     "SP1Y5YSTAHZ88XYK1VPDH24GY0HPX5J4JECTMY4A1.velar-token::velar",
     "SP4SZE494VC2YC5JYG7AYFQ44F5Q4PYV7DVMDPBG.ststx-token::ststx",
-    "SP2C2YFP12AJZB4MABJBAJ55XECVS7E4PMMZ89YZR.arkadiko-token::diko"
+    "SP2C2YFP12AJZB4MABJBAJ55XECVS7E4PMMZ89YZR.arkadiko-token::diko",
+    "SNGWPN3XDAQE673MXYXF81016M50NHF5X5PWWM70.sbtc-token::sbtc-token"
   ]
 }

config/wallet-config.schema.json

@@ -149,6 +149,54 @@
     "swapsEnabled": {
       "type": "boolean",
       "description": "Determines whether or not the swaps feature is enabled"
+    },
+    "sbtc": {
+      "type": "object",
+      "description": "Configuration for SBTC",
+      "properties": {
+        "enabled": {
+          "type": "boolean",
+          "description": "Determines whether or not SBTC is enabled"
+        },
+        "swapsEnabled": {
+          "type": "boolean",
+          "description": "Determines whether or not the stacks swaps feature is enabled for sBTC"
+        },
+        "emilyApiUrl": {
+          "type": "string",
+          "description": "URL for the Emily API"
+        },
+        "showPromoLinkOnNetworks": {
+          "type": "array",
+          "description": "Networks on which the promo link should be shown",
+          "items": {
+            "type": "string"
+          }
+        },
+        "contracts": {
+          "type": "object",
+          "properties": {
+            "mainnet": {
+              "type": "object",
+              "properties": {
+                "address": {
+                  "type": "string",
+                  "description": "Mainnet contract address"
+                }
+              }
+            },
+            "testnet": {
+              "type": "object",
+              "properties": {
+                "address": {
+                  "type": "string",
+                  "description": "Testnet contract address"
+                }
+              }
+            }
+          }
+        }
+      }
     }
   },
   "$defs": {

package.json

@@ -146,15 +146,15 @@
     "@hirosystems/token-metadata-api-client": "1.2.0",
     "@hookform/resolvers": "3.9.1",
     "@leather.io/analytics": "2.0.1",
-    "@leather.io/bitcoin": "0.16.5",
-    "@leather.io/constants": "0.13.3",
-    "@leather.io/crypto": "1.6.12",
-    "@leather.io/models": "0.21.0",
-    "@leather.io/query": "2.23.0",
-    "@leather.io/stacks": "1.3.5",
+    "@leather.io/bitcoin": "0.17.0",
+    "@leather.io/constants": "0.13.5",
+    "@leather.io/crypto": "1.6.14",
+    "@leather.io/models": "0.22.0",
+    "@leather.io/query": "2.26.1",
+    "@leather.io/stacks": "1.4.0",
     "@leather.io/tokens": "0.12.1",
-    "@leather.io/ui": "1.37.0",
-    "@leather.io/utils": "0.19.1",
+    "@leather.io/ui": "1.39.0",
+    "@leather.io/utils": "0.21.1",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.5.0",
     "@noble/secp256k1": "2.1.0",
@@ -193,7 +193,6 @@
     "@types/lodash.uniqby": "4.7.7",
     "@typescript-eslint/eslint-plugin": "7.5.0",
     "@zondax/ledger-stacks": "1.0.4",
-    "alex-sdk": "2.1.4",
     "are-passive-events-supported": "1.1.1",
     "argon2-browser": "1.18.0",
     "assert": "2.1.0",
@@ -249,6 +248,7 @@
     "redux-persist": "6.0.0",
     "remark-gfm": "4.0.0",
     "rxjs": "7.8.1",
+    "sbtc": "0.2.5",
     "style-loader": "3.3.4",
     "ts-debounce": "4.0.0",
     "url": "0.11.3",
@@ -268,9 +268,9 @@
     "@btckit/types": "0.0.19",
     "@chromatic-com/storybook": "3.2.2",
     "@leather.io/eslint-config": "0.7.0",
-    "@leather.io/panda-preset": "0.5.2",
+    "@leather.io/panda-preset": "0.5.3",
     "@leather.io/prettier-config": "0.6.0",
-    "@leather.io/rpc": "2.1.18",
+    "@leather.io/rpc": "2.1.20",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.46.1",

src/app/common/asset-utils.ts

@@ -5,12 +5,6 @@ import {
   isMoneyGreaterThanZero,
 } from '@leather.io/utils';
 
-export function migratePositiveAssetBalancesToTop<T extends { balance: Money }[]>(assets: T) {
-  const assetsWithPositiveBalance = assets.filter(asset => asset.balance.amount.isGreaterThan(0));
-  const assetsWithZeroBalance = assets.filter(asset => asset.balance.amount.isEqualTo(0));
-  return [...assetsWithPositiveBalance, ...assetsWithZeroBalance] as T;
-}
-
 export function convertAssetBalanceToFiat<
   T extends { balance: Money | null; marketData: MarketData | null },
 >(asset: T) {

src/app/common/hooks/use-calculate-sip10-fiat-value.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+
+import { type MarketData, createMarketData, createMarketPair } from '@leather.io/models';
+import {
+  useAlexCurrencyPriceAsMarketData,
+  useCryptoCurrencyMarketDataMeanAverage,
+} from '@leather.io/query';
+import { createMoney } from '@leather.io/utils';
+
+import { useConfigSbtc } from '@app/query/common/remote-config/remote-config.query';
+
+import { getPrincipalFromContractId } from '../utils';
+
+export function castBitcoinMarketDataToSbtcMarketData(bitcoinMarketData: MarketData) {
+  return createMarketData(
+    createMarketPair('sBTC', 'USD'),
+    createMoney(bitcoinMarketData.price.amount.toNumber(), 'USD')
+  );
+}
+
+export function useSip10FiatMarketData() {
+  const priceAsMarketData = useAlexCurrencyPriceAsMarketData();
+  const bitcoinMarketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
+  const { isSbtcContract } = useConfigSbtc();
+
+  return useMemo(
+    () => ({
+      getTokenMarketData(principal: string, symbol: string) {
+        const lookupIdentifier = principal.includes('::')
+          ? getPrincipalFromContractId(principal)
+          : principal;
+
+        if (isSbtcContract(lookupIdentifier)) {
+          return castBitcoinMarketDataToSbtcMarketData(bitcoinMarketData);
+        }
+
+        return priceAsMarketData(lookupIdentifier, symbol);
+      },
+    }),
+    [bitcoinMarketData, isSbtcContract, priceAsMarketData]
+  );
+}

src/app/common/hooks/use-manage-tokens.ts

@@ -1,5 +1,6 @@
 import { useConfigTokensEnabledByDefault } from '@leather.io/query';
 
+import { useConfigSbtc } from '@app/query/common/remote-config/remote-config.query';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useUserAllTokens } from '@app/store/manage-tokens/manage-tokens.slice';
 
@@ -17,6 +18,7 @@ interface FilterTokensArgs<T> {
 
 export function useManageTokens() {
   const configEnabledTokens = useConfigTokensEnabledByDefault();
+  const { contractId: sbtcContractId, isSbtcEnabled } = useConfigSbtc();
 
   const accountIndex = useCurrentAccountIndex();
   const userTokensList = useUserAllTokens();
@@ -29,6 +31,14 @@ export function useManageTokens() {
     return token?.enabled ?? isEnabledByDefault;
   }
 
+  function sortTokens(tokens: any[]) {
+    return tokens.sort((a, b) => {
+      if (a.info.contractId === sbtcContractId) return -1;
+      if (b.info.contractId === sbtcContractId) return 1;
+      return 0;
+    });
+  }
+
   function filterTokens<T>({
     tokens,
     filter = 'all',
@@ -37,7 +47,9 @@ export function useManageTokens() {
   }: FilterTokensArgs<T>): T[] {
     if (filter === 'all') return tokens;
 
-    return tokens.filter(t => {
+    const sortedTokens = isSbtcEnabled ? sortTokens(tokens) : tokens;
+
+    return sortedTokens.filter(t => {
       const tokenId = getTokenId(t);
       const tokenEnabled = isTokenEnabled({ tokenId, preEnabledTokensIds });
 

src/app/components/nonce-setter.tsx

@@ -4,13 +4,17 @@ import { useFormikContext } from 'formik';
 
 import { useNextNonce } from '@leather.io/query';
 
-import { StacksSendFormValues, StacksTransactionFormValues } from '@shared/models/form.model';
+import {
+  StacksSendFormValues,
+  StacksTransactionFormValues,
+  type SwapFormValues,
+} from '@shared/models/form.model';
 
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
 export function NonceSetter() {
   const { setFieldValue, touched, values } = useFormikContext<
-    StacksSendFormValues | StacksTransactionFormValues
+    StacksSendFormValues | StacksTransactionFormValues | SwapFormValues
   >();
   const stxAddress = useCurrentStacksAccountAddress();
   const { data: nextNonce } = useNextNonce(stxAddress);

src/app/components/sbtc-deposit-status-item/sbtc-deposit-status-item.tsx

@@ -0,0 +1,39 @@
+import SbtcAvatarIconSrc from '@assets/avatars/sbtc-avatar-icon.png';
+
+import { Avatar, Caption, Title } from '@leather.io/ui';
+import { truncateMiddle } from '@leather.io/utils';
+
+import { analytics } from '@shared/utils/analytics';
+
+import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link';
+import type { SbtcDepositInfo } from '@app/query/sbtc/sbtc-deposits.query';
+
+import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
+
+interface SbtcDepositTransactionItemProps {
+  deposit: SbtcDepositInfo;
+}
+export function SbtcDepositTransactionItem({ deposit }: SbtcDepositTransactionItemProps) {
+  const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
+
+  const openTxLink = () => {
+    void analytics.track('view_bitcoin_transaction');
+    handleOpenTxLink({ txid: deposit.bitcoinTxid });
+  };
+
+  return (
+    <TransactionItemLayout
+      openTxLink={openTxLink}
+      txCaption={truncateMiddle(deposit.bitcoinTxid, 4)}
+      txIcon={
+        <Avatar.Root>
+          <Avatar.Image alt="ST" src={SbtcAvatarIconSrc} />
+        </Avatar.Root>
+      }
+      txStatus={<Caption color="yellow.action-primary-default">Pending</Caption>}
+      txTitle={<Title textStyle="label.02">BTC → sBTC</Title>}
+      // Api is only returning 0 right now
+      txValue={''} // deposit.amount.toString()
+    />
+  );
+}

src/app/components/stacks-asset-avatar.tsx

@@ -3,15 +3,15 @@ import { Box, BoxProps } from 'leather-styles/jsx';
 import { Avatar, DynamicColorCircle, StxAvatarIcon, defaultFallbackDelay } from '@leather.io/ui';
 
 interface StacksAssetAvatarProps extends BoxProps {
-  gradientString?: string;
-  imageCanonicalUri?: string;
+  img?: string;
+  gradientString: string;
   isStx?: boolean;
   size?: string;
 }
 export function StacksAssetAvatar({
   children,
   gradientString,
-  imageCanonicalUri,
+  img,
   isStx,
   size = '36',
   ...props
@@ -20,10 +20,10 @@ export function StacksAssetAvatar({
 
   const { color } = props;
 
-  if (imageCanonicalUri)
+  if (img)
     return (
       <Avatar.Root>
-        <Avatar.Image alt="FT" src={encodeURI(imageCanonicalUri)} />
+        <Avatar.Image alt="FT" src={encodeURI(img)} />
         <Avatar.Fallback delayMs={defaultFallbackDelay}>FT</Avatar.Fallback>
       </Avatar.Root>
     );

src/app/components/tx-asset-item.tsx

@@ -18,7 +18,7 @@ export function TxAssetItem(props: TxAssetItemProps) {
       <HStack>
         <StacksAssetAvatar
           gradientString={iconString}
-          imageCanonicalUri={imageCanonicalUri}
+          img={imageCanonicalUri}
           isStx={iconString === 'STX'}
           size="32"
         />

src/app/features/activity-list/activity-list.tsx

@@ -12,6 +12,7 @@ import {
 
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
+import { useSbtcPendingDeposits } from '@app/query/sbtc/sbtc-deposits.query';
 import { useZeroIndexTaprootAddress } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
@@ -63,6 +64,9 @@ export function ActivityList() {
     [nsPendingTxs, trPendingTxs]
   );
 
+  const { isLoading: isLoadingSbtcDeposits, pendingSbtcDeposits } =
+    useSbtcPendingDeposits(stxAddress);
+
   const { isLoading: isLoadingStacksTransactions, data: stacksTransactionsWithTransfers } =
     useGetAccountTransactionsWithTransfersQuery(stxAddress);
   const {
@@ -80,7 +84,8 @@ export function ActivityList() {
     isLoadingNsBitcoinTransactions ||
     isLoadingTrBitcoinTransactions ||
     isLoadingStacksTransactions ||
-    isLoadingStacksPendingTransactions;
+    isLoadingStacksPendingTransactions ||
+    isLoadingSbtcDeposits;
 
   const transactionListBitcoinTxs = useMemo(() => {
     return convertBitcoinTxsToListType(
@@ -99,7 +104,9 @@ export function ActivityList() {
 
   const hasSubmittedTransactions = submittedTransactions.length > 0;
   const hasPendingTransactions =
-    bitcoinPendingTxs.length > 0 || stacksPendingTransactions.length > 0;
+    bitcoinPendingTxs.length > 0 ||
+    stacksPendingTransactions.length > 0 ||
+    pendingSbtcDeposits.length > 0;
   const hasTransactions =
     transactionListBitcoinTxs.length > 0 || transactionListStacksTxs.length > 0;
 
@@ -128,6 +135,7 @@ export function ActivityList() {
         {hasPendingTransactions && (
           <PendingTransactionList
             bitcoinTxs={isBitcoinEnabled ? bitcoinPendingTxs : []}
+            sBtcDeposits={pendingSbtcDeposits}
             stacksTxs={stacksPendingTransactions}
           />
         )}