Merge pull request leather-io#3733 from hirosystems/release/countrysi…

…de-village

Release/countryside village

README.md

@@ -9,7 +9,7 @@ Hiro Wallet is the most popular and trusted wallet for apps built on Bitcoin. Co
 
 To integrate this wallet into your app, we recommend [@stacks/connect](https://github.com/hirosystems/connect).
 
-[📚 See Hiro Wallet API Reference →](https://github.com/hirosystems/wallet/wiki)
+[📚 See Hiro Wallet Developer Documentation →](https://hirowallet.gitbook.io/developers)
 
 [📩 Join the mailing list for updates →](https://forms.gle/sdZPu2jbX1AeQ8Fi9)
 

src/app/common/hooks/use-intersection-observer.ts

@@ -0,0 +1,28 @@
+import { RefObject, useEffect } from 'react';
+
+export function useIntersectionObserver(
+  elementRef: RefObject<Element>,
+  intersectionCallback: IntersectionObserverCallback,
+  { threshold = 0, root = null, rootMargin = '0% 0% 20% 0%' }
+) {
+  return useEffect(() => {
+    if (
+      !('IntersectionObserver' in window) ||
+      !('IntersectionObserverEntry' in window) ||
+      !elementRef.current
+    ) {
+      // TO-DO: add error handling
+      return;
+    }
+
+    const observer = new IntersectionObserver(intersectionCallback, {
+      threshold,
+      root,
+      rootMargin,
+    });
+
+    observer.observe(elementRef.current);
+
+    return () => observer.disconnect();
+  }, [elementRef, intersectionCallback, threshold, root, rootMargin]);
+}

src/app/common/utils.ts

@@ -17,6 +17,14 @@ export function createNullArrayOfLength(length: number) {
   return new Array(length).fill(null);
 }
 
+export function createNumArrayOfRange(fromIndex: number, toIndex: number) {
+  const result = [];
+  for (let i = fromIndex; i <= toIndex; i++) {
+    result.push(i);
+  }
+  return result;
+}
+
 function kebabCase(str: string) {
   return str.replace(KEBAB_REGEX, match => '-' + match.toLowerCase());
 }

src/app/common/utils/counter.ts

@@ -7,6 +7,9 @@ export function createCounter(startPosition = 0) {
     increment() {
       return (count += 1);
     },
+    incrementBy(amount: number) {
+      return (count += amount);
+    },
     decrement() {
       return (count -= 1);
     },

src/app/components/crypto-assets/bitcoin/brc20-token-asset/brc20-token-asset-item.layout.tsx

@@ -12,18 +12,16 @@ import { Tooltip } from '@app/components/tooltip';
 import { Text } from '@app/components/typography';
 
 import { AssetCaption } from '../../components/asset-caption';
-import { SubBalance } from '../../components/sub-balance';
 
 interface Brc20TokenAssetItemLayoutProps extends BoxProps {
   balance: Money;
   caption: string;
   isPressable?: boolean;
-  subBalance?: Money;
   title: string;
 }
 export const Brc20TokenAssetItemLayout = forwardRefWithAs(
   (props: Brc20TokenAssetItemLayoutProps, ref) => {
-    const { balance, caption, isPressable, subBalance, title, ...rest } = props;
+    const { balance, caption, isPressable, title, ...rest } = props;
     const [component, bind] = usePressable(isPressable);
 
     const formattedBalance = formatBalance(balance.amount.toString());
@@ -44,7 +42,6 @@ export const Brc20TokenAssetItemLayout = forwardRefWithAs(
           </SpaceBetween>
           <SpaceBetween height="1.25rem" width="100%">
             <AssetCaption caption={caption} />
-            {subBalance ? <SubBalance balance={subBalance} /> : null}
           </SpaceBetween>
           {component}
         </Flag>

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -14,15 +14,12 @@ import { SpaceBetween } from '@app/components/layout/space-between';
 import { Tooltip } from '@app/components/tooltip';
 import { Caption, Text } from '@app/components/typography';
 
-import { SubBalance } from '../components/sub-balance';
-
 interface CryptoCurrencyAssetItemLayoutProps extends StackProps {
   balance: Money;
   caption: string;
   icon: JSX.Element;
   copyIcon?: JSX.Element;
   isPressable?: boolean;
-  subBalance?: Money;
   title: string;
   usdBalance?: string;
   address?: string;
@@ -38,7 +35,6 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs(
       icon,
       copyIcon,
       isPressable,
-      subBalance,
       title,
       usdBalance,
       address = '',
@@ -55,7 +51,6 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs(
       balance.symbol.toLowerCase()
     );
     const formattedBalance = formatBalance(amount);
-    const isUnanchored = !!(subBalance && !balance.amount.isEqualTo(subBalance.amount));
 
     return (
       <Flex
@@ -81,7 +76,6 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs(
           <SpaceBetween height="1.25rem" width="100%">
             <Caption>{caption}</Caption>
             {balance.amount.toNumber() > 0 && address ? <Caption>{usdBalance}</Caption> : null}
-            {isUnanchored && subBalance ? <SubBalance balance={subBalance} /> : null}
           </SpaceBetween>
         </Flag>
         {component}

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx

@@ -13,7 +13,6 @@ import { CryptoCurrencyAssetItemLayout } from './crypto-currency-asset-item.layo
 
 interface CryptoCurrencyAssetItemProps extends StackProps {
   assetBalance: AllCryptoCurrencyAssetBalances;
-  assetSubBalance?: AllCryptoCurrencyAssetBalances;
   icon: JSX.Element;
   usdBalance?: string;
   address?: string;
@@ -22,16 +21,7 @@ interface CryptoCurrencyAssetItemProps extends StackProps {
 }
 export const CryptoCurrencyAssetItem = forwardRefWithAs(
   (props: CryptoCurrencyAssetItemProps, ref) => {
-    const {
-      assetBalance,
-      assetSubBalance,
-      icon,
-      isPressable,
-      address,
-      canCopy,
-      usdBalance,
-      ...rest
-    } = props;
+    const { assetBalance, icon, isPressable, address, canCopy, usdBalance, ...rest } = props;
     const { balance, asset } = assetBalance;
     const [isHovered, setIsHovered] = useState(false);
     const { onCopy, hasCopied } = useClipboard(address || '');
@@ -68,7 +58,6 @@ export const CryptoCurrencyAssetItem = forwardRefWithAs(
         copyIcon={canCopy ? <AssetItemCopyIcon hasCopied={hasCopied} /> : undefined}
         isPressable={isPressable}
         ref={ref}
-        subBalance={assetSubBalance?.balance}
         title={asset.name}
         isHovered={isHovered}
         address={address}

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

@@ -13,29 +13,24 @@ import { Tooltip } from '@app/components/tooltip';
 import { Text } from '@app/components/typography';
 
 import { AssetCaption } from '../../components/asset-caption';
-import { SubBalance } from '../../components/sub-balance';
 
 interface StacksFungibleTokenAssetItemLayoutProps extends BoxProps {
   avatar: string;
   balance: Money;
   caption: string;
   imageCanonicalUri?: string;
   isPressable?: boolean;
-  subBalance?: Money;
   title: string;
 }
 export const StacksFungibleTokenAssetItemLayout = forwardRefWithAs(
   (props: StacksFungibleTokenAssetItemLayoutProps, ref) => {
-    const { avatar, balance, caption, imageCanonicalUri, isPressable, subBalance, title, ...rest } =
-      props;
+    const { avatar, balance, caption, imageCanonicalUri, isPressable, title, ...rest } = props;
     const [component, bind] = usePressable(isPressable);
 
     const amount = balance.decimals
       ? ftDecimals(balance.amount, balance.decimals || 0)
       : balance.amount.toString();
     const formattedBalance = formatBalance(amount);
-    const isUnanchored =
-      subBalance?.amount.isGreaterThan(0) && !balance.amount.isEqualTo(subBalance.amount);
 
     return (
       <Flex as={isPressable ? 'button' : 'div'} outline={0} ref={ref} {...rest} {...bind}>
@@ -46,7 +41,6 @@ export const StacksFungibleTokenAssetItemLayout = forwardRefWithAs(
               color="white"
               gradientString={avatar}
               imageCanonicalUri={imageCanonicalUri}
-              isUnanchored={isUnanchored}
               size="36px"
             >
               {title[0]}
@@ -66,8 +60,7 @@ export const StacksFungibleTokenAssetItemLayout = forwardRefWithAs(
             </Tooltip>
           </SpaceBetween>
           <SpaceBetween height="1.25rem" width="100%">
-            <AssetCaption caption={caption} isUnanchored={isUnanchored} />
-            {isUnanchored && subBalance ? <SubBalance balance={subBalance} /> : null}
+            <AssetCaption caption={caption} />
           </SpaceBetween>
           {component}
         </Flag>

src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx

@@ -18,7 +18,7 @@ interface StacksFungibleTokenAssetItemProps extends BoxProps {
 }
 export const StacksFungibleTokenAssetItem = forwardRefWithAs(
   (props: StacksFungibleTokenAssetItemProps, ref) => {
-    const { assetBalance, unanchoredAssetBalance, ...rest } = props;
+    const { assetBalance, ...rest } = props;
     const { asset, balance } = assetBalance;
     const { contractAddress, contractAssetName, contractName, name, symbol } = asset;
 
@@ -39,7 +39,6 @@ export const StacksFungibleTokenAssetItem = forwardRefWithAs(
         data-testid={dataTestId}
         imageCanonicalUri={imageCanonicalUri}
         ref={ref}
-        subBalance={unanchoredAssetBalance}
         title={friendlyName}
         {...rest}
       />

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

@@ -10,10 +10,7 @@ import { BtcIcon } from '@app/components/icons/btc-icon';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { Brc20TokensLoader } from '@app/features/balances-list/components/brc-20-tokens-loader';
 import { useConfigBitcoinEnabled } from '@app/query/common/hiro-config/hiro-config.query';
-import {
-  useStacksFungibleTokenAssetBalancesAnchoredWithMetadata,
-  useStacksUnanchoredCryptoCurrencyAssetBalance,
-} from '@app/query/stacks/balance/stacks-ft-balances.hooks';
+import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 
 import { Collectibles } from '../collectibles/collectibles';
 import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list';
@@ -22,17 +19,16 @@ import { StacksFungibleTokenAssetList } from './components/stacks-fungible-token
 interface BalancesListProps extends StackProps {
   address: string;
 }
+
 export function BalancesList({ address, ...props }: BalancesListProps) {
-  const { data: stxUnanchoredAssetBalance } =
-    useStacksUnanchoredCryptoCurrencyAssetBalance(address);
   const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(address);
   const isBitcoinEnabled = useConfigBitcoinEnabled();
-  const { stxEffectiveBalance, stxEffectiveUsdBalance } = useStxBalance();
+  const { stxEffectiveBalance, stxEffectiveUsdBalance, isLoading } = useStxBalance();
   const { btcAddress, btcAssetBalance, btcUsdBalance } = useBtcAssetBalance();
   const { whenWallet } = useWalletType();
 
   // Better handle loading state
-  if (!stxEffectiveBalance || !stxUnanchoredAssetBalance) return <LoadingSpinner />;
+  if (isLoading) return <LoadingSpinner />;
 
   return (
     <Stack
@@ -52,7 +48,6 @@ export function BalancesList({ address, ...props }: BalancesListProps) {
       <CryptoCurrencyAssetItem
         assetBalance={stxEffectiveBalance}
         usdBalance={stxEffectiveUsdBalance}
-        assetSubBalance={stxUnanchoredAssetBalance}
         address={address}
         icon={<StxAvatar {...props} />}
       />

src/app/features/collectibles/collectibles.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useQueryClient } from '@tanstack/react-query';
@@ -21,6 +22,7 @@ export function Collectibles() {
   const isNftMetadataEnabled = useConfigNftMetadataEnabled();
   const queryClient = useQueryClient();
   const isFetching = useIsFetchingCollectiblesRelatedQuery();
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
 
   return (
     <CollectiblesLayout
@@ -34,14 +36,15 @@ export function Collectibles() {
         ledger: null,
       })}
       isLoading={isFetching}
+      isLoadingMore={isLoadingMore}
       onRefresh={() => void queryClient.refetchQueries({ type: 'active' })}
     >
       {whenWallet({
         software: (
           <>
             <AddCollectible />
-            <Ordinals />
             <Stamps />
+            <Ordinals setIsLoadingMore={setIsLoadingMore} />
           </>
         ),
         ledger: null,

src/app/features/collectibles/components/_collectible-types/collectible-image.tsx

@@ -1,9 +1,5 @@
 import { useState } from 'react';
 
-import { Spinner } from '@stacks/ui';
-
-import { figmaTheme } from '@app/common/utils/figma-theme';
-
 import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
 import { ImageUnavailable } from '../image-unavailable';
 
@@ -27,7 +23,6 @@ export function CollectibleImage(props: CollectibleImageProps) {
 
   return (
     <CollectibleItemLayout collectibleTypeIcon={icon} {...rest}>
-      {isLoading && <Spinner color={figmaTheme.icon} size="16px" />}
       <img
         alt={alt}
         onError={() => setIsError(true)}

src/app/features/collectibles/components/bitcoin/inscription-text.tsx

@@ -1,6 +1,3 @@
-import { Spinner } from '@stacks/ui';
-
-import { figmaTheme } from '@app/common/utils/figma-theme';
 import { OrdinalMinimalIcon } from '@app/components/icons/ordinal-minimal-icon';
 import { useTextInscriptionContentQuery } from '@app/query/bitcoin/ordinals/use-text-ordinal-content.query';
 
@@ -28,8 +25,7 @@ export function InscriptionText({
 }: InscriptionTextProps) {
   const query = useTextInscriptionContentQuery(contentSrc);
 
-  if (query.isLoading) return <Spinner color={figmaTheme.icon} size="16px" />;
-  if (query.isError) return null;
+  if (query.isLoading || query.isError) return null;
 
   return (
     <CollectibleText