Merge branch 'dev' into feat/approver-ux-ui

.release-please-manifest.json

@@ -1,17 +1,17 @@
 {
-  "apps/mobile": "1.48.0",
-  "packages/analytics": "1.0.0",
+  "apps/mobile": "1.48.1",
+  "packages/analytics": "2.0.0",
   "packages/bitcoin": "0.16.1",
   "packages/constants": "0.13.1",
   "packages/eslint-config": "0.7.0",
   "packages/models": "0.19.0",
   "packages/prettier-config": "0.6.0",
-  "packages/panda-preset": "0.4.2",
+  "packages/panda-preset": "0.4.3",
   "packages/query": "2.20.0",
-  "packages/tokens": "0.9.2",
+  "packages/tokens": "0.10.0",
   "packages/tsconfig-config": "0.6.0",
   "packages/rpc": "2.1.15",
-  "packages/ui": "1.32.1",
+  "packages/ui": "1.32.2",
   "packages/utils": "0.17.0",
   "packages/crypto": "1.6.8",
   "packages/stacks": "1.3.1"

apps/mobile/CHANGELOG.md

@@ -202,6 +202,14 @@
   * dependencies
     * @leather.io/ui bumped to 1.27.1
 
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @leather.io/analytics bumped to 2.0.0
+    * @leather.io/tokens bumped to 0.10.0
+    * @leather.io/ui bumped to 1.32.2
+
 ## [1.48.0](https://github.com/leather-io/mono/compare/@leather.io/[email protected]/mobile-v1.48.0) (2024-11-06)
 
 

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leather.io/mobile",
-  "version": "1.48.0",
+  "version": "1.48.1",
   "type": "module",
   "scripts": {
     "android": "expo run:android",

apps/mobile/src/common/sheet-navigator/sheet-navigation-container.tsx

@@ -1,6 +1,11 @@
+import { ToastWrapper } from '@/components/toast/toast-context';
 import { HasChildren } from '@/utils/types';
 import { NavigationContainer } from '@react-navigation/native';
 
 export function SheetNavigationContainer({ children }: HasChildren) {
-  return <NavigationContainer independent>{children}</NavigationContainer>;
+  return (
+    <ToastWrapper>
+      <NavigationContainer independent>{children}</NavigationContainer>
+    </ToastWrapper>
+  );
 }

apps/mobile/src/components/address-type-badge.tsx

@@ -0,0 +1,28 @@
+import { useLingui } from '@lingui/react';
+
+import { Box, Text } from '@leather.io/ui/native';
+
+interface AddressTypeBadgeProps {
+  type: string;
+}
+export function AddressTypeBadge({ type }: AddressTypeBadgeProps) {
+  const { i18n } = useLingui();
+
+  return (
+    <Box
+      bg="ink.background-secondary"
+      borderColor="ink.border-transparent"
+      borderRadius="xs"
+      borderWidth={1}
+      px="1"
+    >
+      <Text color="ink.text-subdued" fontSize={11} fontWeight={500} lineHeight={12}>
+        {i18n._({
+          id: 'address_type_badge.label',
+          message: '{type}',
+          values: { type },
+        })}
+      </Text>
+    </Box>
+  );
+}

apps/mobile/src/components/toast/toast-context.tsx

@@ -12,9 +12,11 @@ export interface ToastContextType {
 export const ToastContext = createContext<ToastContextType>({
   displayToast: () => {},
 });
+
 export function useToastContext() {
   return useContext(ToastContext);
 }
+
 export function ToastWrapper({ children }: HasChildren) {
   const toastRef = useRef<ToastMethods>(null);
 
@@ -24,6 +26,7 @@ export function ToastWrapper({ children }: HasChildren) {
     },
     [toastRef.current]
   );
+
   return (
     <ToastContext.Provider value={{ displayToast }}>
       {children}

apps/mobile/src/features/account-list/account-list-item.tsx

@@ -2,8 +2,8 @@ import { Avatar, Flag, ItemLayout, Pressable } from '@leather.io/ui/native';
 
 interface AccountListItemProps {
   accountName: string;
-  address: string;
-  balance: string;
+  address: React.ReactNode;
+  balance: React.ReactNode;
   icon: React.ReactNode;
   iconTestID?: string;
   onPress?(): void;

apps/mobile/src/features/account-list/account-list.tsx

@@ -3,12 +3,13 @@ import { TestId } from '@/shared/test-id';
 import { Account } from '@/store/accounts/accounts';
 import { WalletLoader } from '@/store/wallets/wallets.read';
 import { defaultIconTestId } from '@/utils/testing-utils';
-import { t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
 
 import { Theme } from '@leather.io/ui/native';
 
 import { AccountListItem } from './account-list-item';
+import { AccountAddress } from './components/account-address';
+import { AccountBalance } from './components/account-balance';
 
 interface AccountListProps {
   accounts: Account[];
@@ -23,13 +24,17 @@ export function AccountList({ accounts, onPress, showWalletInfo }: AccountListPr
       {wallet => (
         <AccountListItem
           accountName={account.name}
-          address={t`Address`}
-          balance={t`$1234`}
+          address={
+            <AccountAddress accountIndex={account.accountIndex} fingerprint={account.fingerprint} />
+          }
+          balance={
+            <AccountBalance accountIndex={account.accountIndex} fingerprint={account.fingerprint} />
+          }
           icon={<AvatarIcon color={theme.colors['ink.background-primary']} icon={account.icon} />}
           iconTestID={defaultIconTestId(account.icon)}
           onPress={() => onPress(account)}
           testID={TestId.walletListAccountCard}
-          walletName={showWalletInfo ? wallet.name : undefined}
+          walletName={showWalletInfo ? wallet.name : ' '}
         />
       )}
     </WalletLoader>

apps/mobile/src/features/account-list/components/account-address.tsx

@@ -0,0 +1,16 @@
+import { AccountId } from '@/models/domain.model';
+import { useAccountDisplayAddress } from '@/store/settings/settings.read';
+
+import { Text } from '@leather.io/ui/native';
+import { truncateMiddle } from '@leather.io/utils';
+
+type AccountAddressProps = AccountId;
+
+export function AccountAddress({ accountIndex, fingerprint }: AccountAddressProps) {
+  const displayAddress = useAccountDisplayAddress(fingerprint, accountIndex);
+  return (
+    <Text variant="caption01" color="ink.text-subdued">
+      {truncateMiddle(displayAddress)}
+    </Text>
+  );
+}

apps/mobile/src/features/account-list/components/account-balance.tsx

@@ -0,0 +1,10 @@
+import { Balance } from '@/components/balance/balance';
+import { AccountId } from '@/models/domain.model';
+import { useAccountTotalBalance } from '@/queries/balance/total-balance.query';
+
+type AccountBalanceProps = AccountId;
+
+export function AccountBalance({ accountIndex, fingerprint }: AccountBalanceProps) {
+  const { totalBalance } = useAccountTotalBalance({ fingerprint, accountIndex });
+  return <Balance balance={totalBalance} variant="label02" />;
+}

apps/mobile/src/features/balances/bitcoin/bitcoin-balance.tsx

@@ -1,4 +1,3 @@
-import { AccountId } from '@/models/domain.model';
 import {
   useBitcoinAccountTotalBitcoinBalance,
   useWalletTotalBitcoinBalance,
@@ -13,17 +12,22 @@ import { TokenBalance } from '../token-balance';
 interface BitcoinTokenBalanceProps {
   availableBalance: Money;
   fiatBalance: Money;
+  onPress?(): void;
 }
-export function BitcoinTokenBalance({ availableBalance, fiatBalance }: BitcoinTokenBalanceProps) {
+export function BitcoinTokenBalance({
+  availableBalance,
+  fiatBalance,
+  onPress,
+}: BitcoinTokenBalanceProps) {
   return (
     <TokenBalance
       ticker="BTC"
       icon={<BtcAvatarIcon />}
       tokenName={t`Bitcoin`}
-      chain={t`Bitcoin blockchain`}
+      chain={t`Layer 1`}
       fiatBalance={fiatBalance}
-      showChain={false}
       availableBalance={availableBalance}
+      onPress={onPress}
     />
   );
 }
@@ -33,7 +37,25 @@ export function BitcoinBalance() {
   return <BitcoinTokenBalance availableBalance={availableBalance} fiatBalance={fiatBalance} />;
 }
 
-export function BitcoinBalanceByAccount(props: AccountId) {
-  const { availableBalance, fiatBalance } = useBitcoinAccountTotalBitcoinBalance(props);
-  return <BitcoinTokenBalance availableBalance={availableBalance} fiatBalance={fiatBalance} />;
+interface BitcoinBalanceByAccountProps {
+  accountIndex: number;
+  fingerprint: string;
+  onPress?(): void;
+}
+export function BitcoinBalanceByAccount({
+  accountIndex,
+  fingerprint,
+  onPress,
+}: BitcoinBalanceByAccountProps) {
+  const { availableBalance, fiatBalance } = useBitcoinAccountTotalBitcoinBalance({
+    accountIndex,
+    fingerprint,
+  });
+  return (
+    <BitcoinTokenBalance
+      availableBalance={availableBalance}
+      fiatBalance={fiatBalance}
+      onPress={onPress}
+    />
+  );
 }

apps/mobile/src/features/balances/stacks/stacks-balance.tsx

@@ -1,5 +1,4 @@
 import { TokenIcon } from '@/components/widgets/tokens/token-icon';
-import { AccountId } from '@/models/domain.model';
 import { useStxBalance } from '@/queries/balance/stacks-balance.query';
 import { t } from '@lingui/macro';
 
@@ -11,17 +10,22 @@ import { useGetStacksAddresses } from './use-get-stacks-addresses';
 interface StacksTokenBalanceProps {
   availableBalance: Money;
   fiatBalance: Money;
+  onPress?(): void;
 }
-export function StacksTokenBalance({ availableBalance, fiatBalance }: StacksTokenBalanceProps) {
+export function StacksTokenBalance({
+  availableBalance,
+  fiatBalance,
+  onPress,
+}: StacksTokenBalanceProps) {
   return (
     <TokenBalance
       ticker="STX"
       icon={<TokenIcon ticker="STX" />}
       tokenName={t`Stacks`}
-      chain={t`Stacks blockchain`}
+      chain={t`Layer 1`}
       fiatBalance={fiatBalance}
-      showChain={false}
       availableBalance={availableBalance}
+      onPress={onPress}
     />
   );
 }
@@ -32,8 +36,23 @@ export function StacksBalance() {
   return <StacksTokenBalance availableBalance={availableBalance} fiatBalance={fiatBalance} />;
 }
 
-export function StacksBalanceByAccount(props: AccountId) {
-  const addresses = useGetStacksAddresses(props);
+interface StacksBalanceByAccountProps {
+  accountIndex: number;
+  fingerprint: string;
+  onPress?(): void;
+}
+export function StacksBalanceByAccount({
+  accountIndex,
+  fingerprint,
+  onPress,
+}: StacksBalanceByAccountProps) {
+  const addresses = useGetStacksAddresses({ accountIndex, fingerprint });
   const { availableBalance, fiatBalance } = useStxBalance(addresses);
-  return <StacksTokenBalance availableBalance={availableBalance} fiatBalance={fiatBalance} />;
+  return (
+    <StacksTokenBalance
+      availableBalance={availableBalance}
+      fiatBalance={fiatBalance}
+      onPress={onPress}
+    />
+  );
 }

apps/mobile/src/features/balances/token-balance.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { Balance } from '@/components/balance/balance';
 
 import { Money } from '@leather.io/models';
-import { Flag, ItemLayout } from '@leather.io/ui/native';
+import { Flag, ItemLayout, Pressable } from '@leather.io/ui/native';
 
 interface TokenBalanceProps {
   ticker: string;
@@ -12,7 +12,7 @@ interface TokenBalanceProps {
   availableBalance?: Money;
   chain: string;
   fiatBalance: Money;
-  showChain: boolean; // true except for BTC and STX
+  onPress?(): void;
 }
 export function TokenBalance({
   ticker,
@@ -21,16 +21,18 @@ export function TokenBalance({
   availableBalance,
   chain,
   fiatBalance,
-  showChain,
+  onPress,
 }: TokenBalanceProps) {
   return (
-    <Flag key={ticker} img={icon} align="middle" spacing="1" reverse={false}>
-      <ItemLayout
-        titleLeft={tokenName}
-        titleRight={availableBalance && <Balance balance={availableBalance} />}
-        captionLeft={showChain ? chain : ''}
-        captionRight={<Balance balance={fiatBalance} color="ink.text-subdued" />}
-      />
-    </Flag>
+    <Pressable flexDirection="row" disabled={!onPress} onPress={onPress}>
+      <Flag key={ticker} img={icon}>
+        <ItemLayout
+          titleLeft={tokenName}
+          titleRight={availableBalance && <Balance balance={availableBalance} />}
+          captionLeft={chain}
+          captionRight={<Balance balance={fiatBalance} color="ink.text-subdued" />}
+        />
+      </Flag>
+    </Pressable>
   );
 }

apps/mobile/src/features/receive/receive-sheets/receive-asset-item.tsx

@@ -0,0 +1,47 @@
+import { AddressTypeBadge } from '@/components/address-type-badge';
+
+import {
+  Box,
+  CopyIcon,
+  Flag,
+  IconButton,
+  ItemLayout,
+  Pressable,
+  Text,
+} from '@leather.io/ui/native';
+
+interface ReceiveAssetItemProps {
+  address: string;
+  addressType?: string;
+  assetName: string;
+  assetSymbol: string;
+  icon: React.ReactNode;
+  onCopy: () => void;
+  onPress: () => void;
+}
+export function ReceiveAssetItem({
+  address,
+  addressType,
+  assetName,
+  assetSymbol,
+  icon,
+  onCopy,
+  onPress,
+}: ReceiveAssetItemProps) {
+  return (
+    <Pressable flexDirection="row" onPress={onPress}>
+      <Flag key={assetSymbol} img={icon}>
+        <ItemLayout
+          titleLeft={
+            <Box alignItems="center" flexDirection="row" gap="1">
+              <Text variant="label02">{assetName}</Text>
+              {addressType && <AddressTypeBadge type={addressType} />}
+            </Box>
+          }
+          actionIcon={<IconButton icon={<CopyIcon />} onPress={onCopy} />}
+          captionLeft={address}
+        />
+      </Flag>
+    </Pressable>
+  );
+}