refactor: api clients and add stx-20 balances

src/app/common/api/fetch-wrapper.ts → src/app/api/api.utils.ts

@@ -2,10 +2,7 @@ import axios from 'axios';
 
 import { analytics } from '@shared/utils/analytics';
 
-const leatherHeaders: HeadersInit = {
-  'x-leather-version': VERSION,
-  'x-hiro-product': 'leather',
-};
+import { leatherHeaders } from './stacks/clients/hiro-api-client';
 
 function isErrorCode(statusCode: number) {
   return statusCode >= 400;
@@ -19,6 +16,7 @@ function trackApiError(url: string, statusCode: number) {
  * @deprecated Use `axios` directly instead. Fetch only needed for interation
  * with generated stacks blockchain api library
  */
+// TEMPORARY RELOCATION
 export async function wrappedFetch(input: RequestInfo, init: RequestInit = {}) {
   const initHeaders = init.headers || {};
   // eslint-disable-next-line no-restricted-globals

src/app/api/stacks/clients/hiro-api-client.ts

@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+import { type DefaultNetworkConfigurations, defaultNetworksKeyedById } from '@shared/constants';
+
+export const leatherHeaders = {
+  'x-leather-version': VERSION,
+  'x-hiro-product': 'leather',
+};
+
+export function hiroApiClient(network: DefaultNetworkConfigurations) {
+  return axios.create({
+    baseURL: defaultNetworksKeyedById[network].chain.stacks.url,
+    headers: { ...leatherHeaders },
+  });
+}

src/app/api/stacks/clients/stx20-api-client.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+export function stx20ApiClient() {
+  return axios.create({
+    baseURL: 'https://api.stx20.com/api/v1',
+  });
+}

src/app/api/stacks/services/account-service.ts

@@ -0,0 +1,16 @@
+import type { AddressBalanceResponse } from '@stacks/stacks-blockchain-api-types';
+
+import type { DefaultNetworkConfigurations } from '@shared/constants';
+
+// import type { AddressBalanceResponse } from '@shared/models/account.model';
+import { hiroApiClient } from '../clients/hiro-api-client';
+
+export function fetchAccountBalances(network: DefaultNetworkConfigurations, signal?: AbortSignal) {
+  return async (principal: string): Promise<AddressBalanceResponse> => {
+    const response = await hiroApiClient(network).get<AddressBalanceResponse>(
+      `/extended/v1/address/${principal}/balances`,
+      { signal }
+    );
+    return response.data;
+  };
+}

src/app/api/stacks/services/stx20-service.ts

@@ -0,0 +1,7 @@
+import { stx20ApiClient } from '../clients/stx20-api-client';
+import type { Stx20Balance, Stx20BalanceResponse } from '../types/stx20-types';
+
+export async function fetchStx20Balances(address: string): Promise<Stx20Balance[]> {
+  const response = await stx20ApiClient().get<Stx20BalanceResponse>(`/balance/${address}`);
+  return response.data.balances;
+}

src/app/api/stacks/types/stx20-types.ts

@@ -0,0 +1,19 @@
+import type { Money } from '@shared/models/money.model';
+
+/* API RESPONSE TYPES */
+export interface Stx20Balance {
+  ticker: string;
+  balance: string;
+  updateDate: string;
+}
+
+export interface Stx20BalanceResponse {
+  address: string;
+  balances: Stx20Balance[];
+}
+
+/* LEATHER TYPES */
+export interface Stx20Token extends Omit<Stx20Balance, 'balance'> {
+  balance: Money;
+  marketData: null;
+}

src/app/components/crypto-assets/stacks/stx20-token-asset-list/stx20-token-asset-item.layout.tsx

@@ -0,0 +1,43 @@
+import { styled } from 'leather-styles/jsx';
+
+import type { Stx20Token } from '@app/api/stacks/types/stx20-types';
+import { formatBalance } from '@app/common/format-balance';
+import { Avatar } from '@app/ui/components/avatar/avatar';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Pressable } from '@app/ui/pressable/pressable';
+
+interface Stx20TokenAssetItemLayoutProps {
+  token: Stx20Token;
+}
+export function Stx20TokenAssetItemLayout({ token }: Stx20TokenAssetItemLayoutProps) {
+  const balanceAsString = token.balance.amount.toString();
+  const formattedBalance = formatBalance(balanceAsString);
+
+  return (
+    <Pressable my="space.02">
+      <ItemLayout
+        flagImg={
+          // TODO: Replace, need avatar for STX-20
+          <Avatar.Root>
+            <Avatar.Image alt="STX20" src="" />
+            <Avatar.Fallback>STX20</Avatar.Fallback>
+          </Avatar.Root>
+        }
+        titleLeft={token.ticker}
+        captionLeft="STX-20"
+        titleRight={
+          <BasicTooltip
+            asChild
+            label={formattedBalance.isAbbreviated ? balanceAsString : undefined}
+            side="left"
+          >
+            <styled.span data-testid={token.ticker} fontWeight={500} textStyle="label.02">
+              {formattedBalance.value}
+            </styled.span>
+          </BasicTooltip>
+        }
+      />
+    </Pressable>
+  );
+}

src/app/components/crypto-assets/stacks/stx20-token-asset-list/stx20-token-asset-list.tsx

@@ -0,0 +1,12 @@
+import type { Stx20Token } from '@app/api/stacks/types/stx20-types';
+
+import { Stx20TokenAssetItemLayout } from './stx20-token-asset-item.layout';
+
+interface Stx20TokenAssetListProps {
+  stx20Tokens: Stx20Token[];
+}
+export function Stx20TokenAssetList({ stx20Tokens }: Stx20TokenAssetListProps) {
+  return stx20Tokens.map((token, i) => (
+    <Stx20TokenAssetItemLayout key={`${token.ticker}${i}`} token={token} />
+  ));
+}

src/app/components/loaders/stx20-tokens-loader.tsx

@@ -0,0 +1,11 @@
+import type { Stx20Token } from '@app/api/stacks/types/stx20-types';
+import { useStx20Tokens } from '@app/query/stacks/stx20/stx20-tokens.hooks';
+
+interface Stx20TokensLoaderProps {
+  address: string;
+  children(runes: Stx20Token[]): React.ReactNode;
+}
+export function Stx20TokensLoader({ address, children }: Stx20TokensLoaderProps) {
+  const { data: stx20Tokens = [] } = useStx20Tokens(address);
+  return children(stx20Tokens);
+}

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

@@ -10,8 +10,16 @@ import {
   BitcoinTaprootAccountLoader,
 } from '@app/components/account/bitcoin-account-loader';
 import { BitcoinContractEntryPoint } from '@app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point';
+import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
+import { RunesAssetList } from '@app/components/crypto-assets/bitcoin/runes-asset-list/runes-asset-list';
+import { Src20TokenAssetList } from '@app/components/crypto-assets/bitcoin/src20-token-asset-list/src20-token-asset-list';
 import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout';
+import { Stx20TokenAssetList } from '@app/components/crypto-assets/stacks/stx20-token-asset-list/stx20-token-asset-list';
+import { Brc20TokensLoader } from '@app/components/loaders/brc20-tokens-loader';
+import { RunesLoader } from '@app/components/loaders/runes-loader';
+import { Src20TokensLoader } from '@app/components/loaders/src20-tokens-loader';
 import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader';
+import { Stx20TokensLoader } from '@app/components/loaders/stx20-tokens-loader';
 import { useHasBitcoinLedgerKeychain } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
@@ -20,7 +28,6 @@ import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 import { Collectibles } from '../collectibles/collectibles';
 import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers';
 import { AddStacksLedgerKeysItem } from './components/add-stacks-ledger-keys-item';
-import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list';
 import { ConnectLedgerAssetBtn } from './components/connect-ledger-asset-button';
 import { StacksBalanceListItem } from './components/stacks-balance-list-item';
 import { StacksFungibleTokenAssetList } from './components/stacks-fungible-token-asset-list';
@@ -74,6 +81,9 @@ export function AssetsList() {
           <>
             <StacksBalanceListItem address={account.address} />
             <StacksFungibleTokenAssetList address={account.address} />
+            <Stx20TokensLoader address={account.address}>
+              {stx20Tokens => <Stx20TokenAssetList stx20Tokens={stx20Tokens} />}
+            </Stx20TokensLoader>
           </>
         )}
       </CurrentStacksAccountLoader>
@@ -82,10 +92,17 @@ export function AssetsList() {
         {nativeSegwitAccount => (
           <BitcoinTaprootAccountLoader current>
             {taprootAccount => (
-              <BitcoinFungibleTokenAssetList
-                btcAddressNativeSegwit={nativeSegwitAccount.address}
-                btcAddressTaproot={taprootAccount.address}
-              />
+              <>
+                <Brc20TokensLoader>
+                  {brc20Tokens => <Brc20TokenAssetList brc20Tokens={brc20Tokens} />}
+                </Brc20TokensLoader>
+                <Src20TokensLoader address={nativeSegwitAccount.address}>
+                  {src20Tokens => <Src20TokenAssetList src20Tokens={src20Tokens} />}
+                </Src20TokensLoader>
+                <RunesLoader addresses={[nativeSegwitAccount.address, taprootAccount.address]}>
+                  {runes => <RunesAssetList runes={runes} />}
+                </RunesLoader>
+              </>
             )}
           </BitcoinTaprootAccountLoader>
         )}

src/app/query/bitcoin/bitcoin-client.ts

@@ -177,7 +177,7 @@ interface RunesOutputsByAddressResponse {
   data: RunesOutputsByAddress[];
 }
 
-class BestinslotApi {
+class BestinSlotApi {
   url = BESTINSLOT_API_BASE_URL_MAINNET;
   testnetUrl = BESTINSLOT_API_BASE_URL_TESTNET;
 
@@ -405,13 +405,13 @@ export class BitcoinClient {
   addressApi: AddressApi;
   feeEstimatesApi: FeeEstimatesApi;
   transactionsApi: TransactionsApi;
-  BestinslotApi: BestinslotApi;
+  bestinSlotApi: BestinSlotApi;
 
   constructor(basePath: string) {
     this.configuration = new Configuration(basePath);
     this.addressApi = new AddressApi(this.configuration);
     this.feeEstimatesApi = new FeeEstimatesApi(this.configuration);
     this.transactionsApi = new TransactionsApi(this.configuration);
-    this.BestinslotApi = new BestinslotApi(this.configuration);
+    this.bestinSlotApi = new BestinSlotApi(this.configuration);
   }
 }

src/app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks.ts

@@ -14,7 +14,7 @@ import { brc20TransferInitiated } from '@app/store/ordinals/ordinals.slice';
 import type { Brc20Token } from '../../bitcoin-client';
 import { useAverageBitcoinFeeRates } from '../../fees/fee-estimates.hooks';
 import { useOrdinalsbotClient } from '../../ordinalsbot-client';
-import { createBrc20TransferInscription, encodeBrc20TransferInscription } from './brc-20.utils';
+import { createBrc20TransferInscription, encodeBrc20TransferInscription } from './brc20.utils';
 
 // ts-unused-exports:disable-next-line
 export function useBrc20FeatureFlag() {

src/app/query/bitcoin/ordinals/brc20/brc20-tokens.query.ts

@@ -51,11 +51,11 @@ export function useGetBrc20TokensQuery() {
       }
 
       const brc20TokensPromises = addressesData.map(async address => {
-        const brc20Tokens = await client.BestinslotApi.getBrc20Balances(address);
+        const brc20Tokens = await client.bestinSlotApi.getBrc20Balances(address);
 
         const tickerPromises = await Promise.all(
           brc20Tokens.data.map(token => {
-            return client.BestinslotApi.getBrc20TickerInfo(token.ticker);
+            return client.bestinSlotApi.getBrc20TickerInfo(token.ticker);
           })
         );
 

src/app/query/bitcoin/ordinals/brc20/brc-20.utils.spec.ts → src/app/query/bitcoin/ordinals/brc20/brc20.utils.spec.ts

@@ -1,4 +1,4 @@
-import { encodeBrc20TransferInscription } from './brc-20.utils';
+import { encodeBrc20TransferInscription } from './brc20.utils';
 
 describe(encodeBrc20TransferInscription.name, () => {
   test('that it encodes the BRC-20 transfer correctly', () => {

src/app/query/bitcoin/runes/runes-outputs-by-address.query.ts

@@ -18,7 +18,7 @@ export function useGetRunesOutputsByAddressQuery<T extends unknown = RunesOutput
   return useQuery({
     queryKey: ['runes-outputs-by-address', address],
     queryFn: () =>
-      client.BestinslotApi.getRunesOutputsByAddress({
+      client.bestinSlotApi.getRunesOutputsByAddress({
         address,
         network: network.chain.bitcoin.bitcoinNetwork,
       }),

src/app/query/bitcoin/runes/runes-ticker-info.query.ts

@@ -17,7 +17,7 @@ export function useGetRunesTickerInfoQuery(runeNames: string[]): UseQueryResult<
         enabled: !!runeName && (network.chain.bitcoin.bitcoinNetwork === 'testnet' || runesEnabled),
         queryKey: ['runes-ticker-info', runeName],
         queryFn: () =>
-          client.BestinslotApi.getRunesTickerInfo(runeName, network.chain.bitcoin.bitcoinNetwork),
+          client.bestinSlotApi.getRunesTickerInfo(runeName, network.chain.bitcoin.bitcoinNetwork),
       };
     }),
   });

src/app/query/bitcoin/runes/runes-wallet-balances.query.ts

@@ -21,7 +21,7 @@ export function useGetRunesWalletBalancesByAddressesQuery<T extends unknown = Ru
         enabled: !!address && (network.chain.bitcoin.bitcoinNetwork === 'testnet' || runesEnabled),
         queryKey: ['runes-wallet-balances', address],
         queryFn: () =>
-          client.BestinslotApi.getRunesWalletBalances(
+          client.bestinSlotApi.getRunesWalletBalances(
             address,
             network.chain.bitcoin.bitcoinNetwork
           ),

src/app/query/bitcoin/transaction/use-check-utxos.ts

@@ -55,15 +55,15 @@ async function checkInscribedUtxosByBestinslot({
    * @see https://docs.bestinslot.xyz/reference/api-reference/ordinals-and-brc-20-and-bitmap-v3-api-mainnet+testnet/inscriptions
    */
   const inscriptionIdsList = await Promise.all(
-    txids.map(id => client.BestinslotApi.getInscriptionsByTransactionId(id))
+    txids.map(id => client.bestinSlotApi.getInscriptionsByTransactionId(id))
   );
 
   const inscriptionIds = inscriptionIdsList.flatMap(inscription =>
     inscription.data.map(data => data.inscription_id)
   );
 
   const inscriptionsList = await Promise.all(
-    inscriptionIds.map(id => client.BestinslotApi.getInscriptionById(id))
+    inscriptionIds.map(id => client.bestinSlotApi.getInscriptionById(id))
   );
 
   const hasInscribedUtxos = inscriptionsList.some(resp => {

src/app/query/stacks/balance/stacks-ft-balances.hooks.ts

@@ -19,17 +19,17 @@ import {
   createStacksFtCryptoAssetBalanceTypeWrapper,
 } from './stacks-ft-balances.utils';
 import { parseBalanceResponse } from './stx-balance.hooks';
-import { useStacksAccountBalanceQuery } from './stx-balance.query';
+import { useStacksAccountBalancesQuery } from './stx-balance.query';
 
 export function useStacksCryptoCurrencyAssetBalance(address: string) {
-  return useStacksAccountBalanceQuery(address, {
+  return useStacksAccountBalancesQuery(address, {
     select: resp =>
       createStacksCryptoCurrencyAssetTypeWrapper(parseBalanceResponse(resp).stx.unlockedStx.amount),
   });
 }
 
 function useStacksFungibleTokenAssetBalances(address: string) {
-  return useStacksAccountBalanceQuery(address, {
+  return useStacksAccountBalancesQuery(address, {
     select: resp => convertFtBalancesToStacksFungibleTokenAssetBalanceType(resp.fungible_tokens),
   });
 }

src/app/query/stacks/balance/stacks-ft-balances.utils.ts

@@ -60,7 +60,7 @@ export function convertFtBalancesToStacksFungibleTokenAssetBalanceType(
   return (
     Object.entries(ftBalances)
       .map(([key, value]) => {
-        const balance = new BigNumber(value.balance);
+        const balance = new BigNumber(value?.balance ?? 0);
         return createStacksFtCryptoAssetBalanceTypeWrapper(balance, key);
       })
       // Assets users have traded will persist in the api response