feat: btc to sbtc swap

package.json

@@ -174,7 +174,7 @@
     "@stacks/auth": "6.15.0",
     "@stacks/blockchain-api-client": "6.3.4",
     "@stacks/common": "6.13.0",
-    "@stacks/connect": "7.4.0",
+    "@stacks/connect": "7.9.0",
     "@stacks/connect-ui": "6.1.1",
     "@stacks/encryption": "6.15.0",
     "@stacks/network": "7.0.2",

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

@@ -11,7 +11,7 @@ import { useConfigSbtc } from '@app/query/common/remote-config/remote-config.que
 
 import { getPrincipalFromContractId } from '../utils';
 
-function castBitcoinMarketDataToSbtcMarketData(bitcoinMarketData: MarketData) {
+export function castBitcoinMarketDataToSbtcMarketData(bitcoinMarketData: MarketData) {
   return createMarketData(
     createMarketPair('sBTC', 'USD'),
     createMoney(bitcoinMarketData.price.amount.toNumber(), 'USD')

src/app/pages/home/components/account-actions.tsx

@@ -74,7 +74,16 @@ export function AccountActions() {
             </Box>
           </BasicTooltip>
         ),
-        [ChainID.Testnet]: null,
+        // Temporary for sBTC testing
+        [ChainID.Testnet]: (
+          <IconButton
+            data-testid={HomePageSelectors.SwapBtn}
+            disabled={swapsBtnDisabled}
+            icon={<ArrowsRepeatLeftRightIcon />}
+            label="Swap"
+            onClick={() => navigate(RouteUrls.Swap.replace(':base', 'STX').replace(':quote', ''))}
+          />
+        ),
       })}
     </Flex>
   );

src/app/pages/swap/bitflow-swap-container.tsx

@@ -11,13 +11,17 @@ import {
 } from '@stacks/transactions';
 
 import { defaultSwapFee } from '@leather.io/query';
-import { isDefined, isError, isUndefined } from '@leather.io/utils';
+import {
+  isDefined,
+  isError,
+  isUndefined,
+  migratePositiveAssetBalancesToTop,
+} from '@leather.io/utils';
 
 import { logger } from '@shared/logger';
 import { RouteUrls } from '@shared/route-urls';
 import { bitflow } from '@shared/utils/bitflow-sdk';
 
-import { migratePositiveAssetBalancesToTop } from '@app/common/asset-utils';
 import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading';
 import { Content, Page } from '@app/components/layout';
 import { PageHeader } from '@app/features/container/headers/page.header';
@@ -29,6 +33,7 @@ import { estimateLiquidityFee, formatDexPathItem } from './bitflow-swap.utils';
 import { SwapForm } from './components/swap-form';
 import { generateSwapRoutes } from './generate-swap-routes';
 import { useBitflowSwap } from './hooks/use-bitflow-swap';
+import { useBtcSwapAsset, useSBtcSwapAsset } from './hooks/use-sbtc-bridge-assets';
 import { useStacksBroadcastSwap } from './hooks/use-stacks-broadcast-swap';
 import { SwapFormValues } from './hooks/use-swap-form';
 import { useSwapNavigate } from './hooks/use-swap-navigate';
@@ -38,22 +43,27 @@ export const bitflowSwapRoutes = generateSwapRoutes(<BitflowSwapContainer />);
 
 function BitflowSwapContainer() {
   const [isSendingMax, setIsSendingMax] = useState(false);
+  const [isPreparingSwapReview, setIsPreparingSwapReview] = useState(false);
   const navigate = useNavigate();
   const swapNavigate = useSwapNavigate();
   const { setIsLoading, setIsIdle, isLoading } = useLoading(LoadingKeys.SUBMIT_SWAP_TRANSACTION);
   const currentAccount = useCurrentStacksAccount();
   const generateUnsignedTx = useGenerateStacksContractCallUnsignedTx();
   const signTx = useSignStacksTransaction();
   const broadcastStacksSwap = useStacksBroadcastSwap();
-  const [isPreparingSwapReview, setIsPreparingSwapReview] = useState(false);
+
+  // Bridge assets
+  const btcAsset = useBtcSwapAsset();
+  const sBtcAsset = useSBtcSwapAsset();
+
   const {
     fetchRouteQuote,
     fetchQuoteAmount,
     isFetchingExchangeRate,
     onSetIsFetchingExchangeRate,
     onSetSwapSubmissionData,
     slippage,
-    swapAssets,
+    bitflowSwapAssets,
     swapSubmissionData,
   } = useBitflowSwap();
 
@@ -81,7 +91,7 @@ function BitflowSwapContainer() {
         protocol: 'Bitflow',
         dexPath: routeQuote.route.dex_path.map(formatDexPathItem),
         router: routeQuote.route.token_path
-          .map(x => swapAssets.find(asset => asset.currency === x))
+          .map(x => bitflowSwapAssets.find(asset => asset.currency === x))
           .filter(isDefined),
         slippage,
         sponsored: false,
@@ -185,8 +195,8 @@ function BitflowSwapContainer() {
     onSetIsSendingMax: value => setIsSendingMax(value),
     onSubmitSwapForReview,
     onSubmitSwap,
-    swappableAssetsBase: migratePositiveAssetBalancesToTop(swapAssets),
-    swappableAssetsQuote: swapAssets,
+    swappableAssetsBase: [...[btcAsset], ...migratePositiveAssetBalancesToTop(bitflowSwapAssets)],
+    swappableAssetsQuote: [...[sBtcAsset], ...bitflowSwapAssets],
     swapSubmissionData,
   };
 

src/app/pages/swap/components/swap-asset-dialog/components/swap-asset-item.tsx

@@ -1,15 +1,16 @@
 import { SwapSelectors } from '@tests/selectors/swap.selectors';
 
-import { type SwapAsset, isFtAsset, useGetFungibleTokenMetadataQuery } from '@leather.io/query';
+import { isFtAsset, useGetFungibleTokenMetadataQuery } from '@leather.io/query';
 import {
   Avatar,
   ItemLayout,
   Pressable,
   defaultFallbackDelay,
   getAvatarFallback,
 } from '@leather.io/ui';
-import { formatMoneyWithoutSymbol } from '@leather.io/utils';
+import { formatMoneyWithoutSymbol, isString } from '@leather.io/utils';
 
+import type { SwapAsset } from '@app/pages/swap/swap.context';
 import { convertSwapAssetBalanceToFiat } from '@app/pages/swap/swap.utils';
 
 interface SwapAssetItemProps {
@@ -28,10 +29,14 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
     <Pressable data-testid={SwapSelectors.SwapAssetListItem} onClick={onClick} my="space.02">
       <ItemLayout
         img={
-          <Avatar.Root>
-            <Avatar.Image alt={fallback} src={asset.icon} />
-            <Avatar.Fallback delayMs={defaultFallbackDelay}>{fallback}</Avatar.Fallback>
-          </Avatar.Root>
+          isString(asset.icon) ? (
+            <Avatar.Root>
+              <Avatar.Image alt={fallback} src={asset.icon} />
+              <Avatar.Fallback delayMs={defaultFallbackDelay}>{fallback}</Avatar.Fallback>
+            </Avatar.Root>
+          ) : (
+            asset.icon
+          )
         }
         titleLeft={displayName}
         captionLeft={asset.name}