diff --git a/apps/mobile/src/common/sheet-navigator/sheet-navigation-container.tsx b/apps/mobile/src/common/sheet-navigator/sheet-navigation-container.tsx
index d29dd7052..e36da98c9 100644
--- a/apps/mobile/src/common/sheet-navigator/sheet-navigation-container.tsx
+++ b/apps/mobile/src/common/sheet-navigator/sheet-navigation-container.tsx
@@ -1,5 +1,6 @@
import { useWindowDimensions } from 'react-native';
+import { ToastWrapper } from '@/components/toast/toast-context';
import { HasChildren } from '@/utils/types';
import { NavigationContainer } from '@react-navigation/native';
@@ -8,8 +9,10 @@ import { Box } from '@leather.io/ui/native';
export function SheetNavigationContainer({ children }: HasChildren) {
const { height } = useWindowDimensions();
return (
-
- {children}
-
+
+
+ {children}
+
+
);
}
diff --git a/apps/mobile/src/components/address-type-badge.tsx b/apps/mobile/src/components/address-type-badge.tsx
new file mode 100644
index 000000000..e8ad8083c
--- /dev/null
+++ b/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 (
+
+
+ {i18n._({
+ id: 'address_type_badge.label',
+ message: '{type}',
+ values: { type },
+ })}
+
+
+ );
+}
diff --git a/apps/mobile/src/components/toast/toast-context.tsx b/apps/mobile/src/components/toast/toast-context.tsx
index 7bb4d4750..312217c4f 100644
--- a/apps/mobile/src/components/toast/toast-context.tsx
+++ b/apps/mobile/src/components/toast/toast-context.tsx
@@ -12,9 +12,11 @@ export interface ToastContextType {
export const ToastContext = createContext({
displayToast: () => {},
});
+
export function useToastContext() {
return useContext(ToastContext);
}
+
export function ToastWrapper({ children }: HasChildren) {
const toastRef = useRef(null);
@@ -24,6 +26,7 @@ export function ToastWrapper({ children }: HasChildren) {
},
[toastRef.current]
);
+
return (
{children}
diff --git a/apps/mobile/src/features/account-list/account-list-item.tsx b/apps/mobile/src/features/account-list/account-list-item.tsx
index a4328b600..3910d6a9a 100644
--- a/apps/mobile/src/features/account-list/account-list-item.tsx
+++ b/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;
diff --git a/apps/mobile/src/features/account-list/account-list.tsx b/apps/mobile/src/features/account-list/account-list.tsx
index ed4cd18ad..c19fa6235 100644
--- a/apps/mobile/src/features/account-list/account-list.tsx
+++ b/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 => (
+ }
+ balance={
+
+ }
icon={}
iconTestID={defaultIconTestId(account.icon)}
onPress={() => onPress(account)}
testID={TestId.walletListAccountCard}
- walletName={showWalletInfo ? wallet.name : undefined}
+ walletName={showWalletInfo ? wallet.name : ' '}
/>
)}
diff --git a/apps/mobile/src/features/account-list/components/account-address.tsx b/apps/mobile/src/features/account-list/components/account-address.tsx
new file mode 100644
index 000000000..93866c80f
--- /dev/null
+++ b/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 (
+
+ {truncateMiddle(displayAddress)}
+
+ );
+}
diff --git a/apps/mobile/src/features/account-list/components/account-balance.tsx b/apps/mobile/src/features/account-list/components/account-balance.tsx
new file mode 100644
index 000000000..65c0608c6
--- /dev/null
+++ b/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 ;
+}
diff --git a/apps/mobile/src/features/balances/bitcoin/bitcoin-balance.tsx b/apps/mobile/src/features/balances/bitcoin/bitcoin-balance.tsx
index c051caca1..bb79bf6c7 100644
--- a/apps/mobile/src/features/balances/bitcoin/bitcoin-balance.tsx
+++ b/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 (
}
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 ;
}
-export function BitcoinBalanceByAccount(props: AccountId) {
- const { availableBalance, fiatBalance } = useBitcoinAccountTotalBitcoinBalance(props);
- return ;
+interface BitcoinBalanceByAccountProps {
+ accountIndex: number;
+ fingerprint: string;
+ onPress?(): void;
+}
+export function BitcoinBalanceByAccount({
+ accountIndex,
+ fingerprint,
+ onPress,
+}: BitcoinBalanceByAccountProps) {
+ const { availableBalance, fiatBalance } = useBitcoinAccountTotalBitcoinBalance({
+ accountIndex,
+ fingerprint,
+ });
+ return (
+
+ );
}
diff --git a/apps/mobile/src/features/balances/stacks/stacks-balance.tsx b/apps/mobile/src/features/balances/stacks/stacks-balance.tsx
index cb61098f4..05f5223f0 100644
--- a/apps/mobile/src/features/balances/stacks/stacks-balance.tsx
+++ b/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 (
}
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 ;
}
-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 ;
+ return (
+
+ );
}
diff --git a/apps/mobile/src/features/balances/token-balance.tsx b/apps/mobile/src/features/balances/token-balance.tsx
index 6359e213e..f51d8f198 100644
--- a/apps/mobile/src/features/balances/token-balance.tsx
+++ b/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 (
-
- }
- captionLeft={showChain ? chain : ''}
- captionRight={}
- />
-
+
+
+ }
+ captionLeft={chain}
+ captionRight={}
+ />
+
+
);
}
diff --git a/apps/mobile/src/features/receive/receive-sheets/receive-asset-item.tsx b/apps/mobile/src/features/receive/receive-sheets/receive-asset-item.tsx
new file mode 100644
index 000000000..e0ee35397
--- /dev/null
+++ b/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 (
+
+
+
+ {assetName}
+ {addressType && }
+
+ }
+ actionIcon={} onPress={onCopy} />}
+ captionLeft={address}
+ />
+
+
+ );
+}
diff --git a/apps/mobile/src/features/receive/receive-sheets/receive-asset-sheet.tsx b/apps/mobile/src/features/receive/receive-sheets/receive-asset-sheet.tsx
new file mode 100644
index 000000000..ebed648a6
--- /dev/null
+++ b/apps/mobile/src/features/receive/receive-sheets/receive-asset-sheet.tsx
@@ -0,0 +1,31 @@
+import { RefObject } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useSettings } from '@/store/settings/settings';
+import { t } from '@lingui/macro';
+import { useTheme } from '@shopify/restyle';
+
+import { Box, Sheet, SheetRef, Text, Theme } from '@leather.io/ui/native';
+
+interface ReceiveAssetSheetProps {
+ sheetRef: RefObject;
+}
+export function ReceiveAssetSheet({ sheetRef }: ReceiveAssetSheetProps) {
+ const { bottom } = useSafeAreaInsets();
+ const { themeDerivedFromThemePreference } = useSettings();
+ const theme = useTheme();
+
+ return (
+
+
+ {t`Receive`}
+
+
+ );
+}
diff --git a/apps/mobile/src/features/receive/receive-sheets/select-asset.tsx b/apps/mobile/src/features/receive/receive-sheets/select-asset.tsx
index 83ed252f3..ed1c91c81 100644
--- a/apps/mobile/src/features/receive/receive-sheets/select-asset.tsx
+++ b/apps/mobile/src/features/receive/receive-sheets/select-asset.tsx
@@ -1,39 +1,101 @@
+import { useRef } from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
+
import { FullHeightSheetHeader } from '@/components/full-height-sheet/full-height-sheet-header';
import { FullHeightSheetLayout } from '@/components/full-height-sheet/full-height-sheet.layout';
import { NetworkBadge } from '@/components/network-badge';
+import { useToastContext } from '@/components/toast/toast-context';
+import { useBitcoinPayerAddressFromAccountIndex } from '@/store/keychains/bitcoin/bitcoin-keychains.read';
+import { useStacksSignerAddressFromAccountIndex } from '@/store/keychains/stacks/stacks-keychains.read';
import { t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { RouteProp, useRoute } from '@react-navigation/native';
+import { useTheme } from '@shopify/restyle';
+import * as Clipboard from 'expo-clipboard';
-import { Text } from '@leather.io/ui/native';
+import { BtcAvatarIcon, SheetRef, StxAvatarIcon, Theme } from '@leather.io/ui/native';
+import { truncateMiddle } from '@leather.io/utils';
import { ReceiveSheetNavigatorParamList } from '../receive-sheet-navigator';
+import { ReceiveAssetItem } from './receive-asset-item';
+import { ReceiveAssetSheet } from './receive-asset-sheet';
type SelectAssetScreenRouteProp = RouteProp;
export function SelectAsset() {
const { i18n } = useLingui();
const route = useRoute();
- const subtitle = route.params?.account?.name;
+ const theme = useTheme();
+ const { displayToast } = useToastContext();
+ const receiveSheetRef = useRef(null);
+
+ const account = route.params.account;
+ const { name } = account;
+
+ const { nativeSegwitPayerAddress, taprootPayerAddress } =
+ useBitcoinPayerAddressFromAccountIndex(account.fingerprint, account.accountIndex) ?? '';
+ const stxAddress =
+ useStacksSignerAddressFromAccountIndex(account.fingerprint, account.accountIndex) ?? '';
+
+ async function onCopyAddress(address: string) {
+ await Clipboard.setStringAsync(address);
+ return displayToast({
+ type: 'success',
+ title: t({
+ id: 'receive.select_asset.toast_title',
+ message: 'Address copied',
+ }),
+ });
+ }
return (
- }
- />
- }
- >
- {t`Token list`}
-
+ <>
+ }
+ />
+ }
+ >
+
+ }
+ onCopy={() => onCopyAddress(nativeSegwitPayerAddress)}
+ onPress={() => receiveSheetRef.current?.present()}
+ />
+ }
+ onCopy={() => onCopyAddress(taprootPayerAddress)}
+ onPress={() => receiveSheetRef.current?.present()}
+ />
+ }
+ onCopy={() => onCopyAddress(stxAddress)}
+ onPress={() => receiveSheetRef.current?.present()}
+ />
+
+
+
+ >
);
}
diff --git a/apps/mobile/src/features/send/send-sheet-navigator.tsx b/apps/mobile/src/features/send/send-sheet-navigator.tsx
index 7461441c2..966804335 100644
--- a/apps/mobile/src/features/send/send-sheet-navigator.tsx
+++ b/apps/mobile/src/features/send/send-sheet-navigator.tsx
@@ -3,14 +3,17 @@ import { ParamListBase } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useTheme } from '@shopify/restyle';
+import { CryptoCurrency } from '@leather.io/models';
import { Theme } from '@leather.io/ui/native';
import { SelectAccount } from './send-sheets/select-account';
import { SelectAsset } from './send-sheets/select-asset';
+import { SendForm } from './send-sheets/send-form';
export interface SendSheetNavigatorParamList extends ParamListBase {
'send-select-account': undefined;
'send-select-asset': { account: Account };
+ 'send-form': { account: Account; asset: CryptoCurrency };
}
const Stack = createStackNavigator();
@@ -30,6 +33,7 @@ export function SendSheetNavigator() {
>
+
);
}
diff --git a/apps/mobile/src/features/send/send-sheets/select-asset.tsx b/apps/mobile/src/features/send/send-sheets/select-asset.tsx
index 4be4c9a7a..07d922f11 100644
--- a/apps/mobile/src/features/send/send-sheets/select-asset.tsx
+++ b/apps/mobile/src/features/send/send-sheets/select-asset.tsx
@@ -1,20 +1,35 @@
+import { ScrollView } from 'react-native-gesture-handler';
+
import { FullHeightSheetHeader } from '@/components/full-height-sheet/full-height-sheet-header';
import { FullHeightSheetLayout } from '@/components/full-height-sheet/full-height-sheet.layout';
import { NetworkBadge } from '@/components/network-badge';
+import { BitcoinBalanceByAccount } from '@/features/balances/bitcoin/bitcoin-balance';
+import { StacksBalanceByAccount } from '@/features/balances/stacks/stacks-balance';
+import { Account } from '@/store/accounts/accounts';
import { t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
-import { RouteProp, useRoute } from '@react-navigation/native';
+import { NavigationProp, RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { useTheme } from '@shopify/restyle';
-import { Text } from '@leather.io/ui/native';
+import { CryptoCurrency } from '@leather.io/models';
+import { Theme } from '@leather.io/ui/native';
import { SendSheetNavigatorParamList } from '../send-sheet-navigator';
-type SelectAssetScreenRouteProp = RouteProp;
+type SelectAssetRouteProp = RouteProp;
export function SelectAsset() {
const { i18n } = useLingui();
- const route = useRoute();
- const subtitle = route.params?.account?.name;
+ const route = useRoute();
+ const navigation = useNavigation>();
+ const theme = useTheme();
+
+ const account = route.params.account;
+ const { accountIndex, fingerprint, name } = account;
+
+ function onSelectAsset(account: Account, asset: CryptoCurrency) {
+ navigation.navigate('send-form', { account, asset });
+ }
return (
}
/>
}
>
- {t`Token list`}
+
+ onSelectAsset(account, 'BTC')}
+ />
+ onSelectAsset(account, 'STX')}
+ />
+
);
}
diff --git a/apps/mobile/src/features/send/send-sheets/send-form.tsx b/apps/mobile/src/features/send/send-sheets/send-form.tsx
index e8318dae5..d86d7d000 100644
--- a/apps/mobile/src/features/send/send-sheets/send-form.tsx
+++ b/apps/mobile/src/features/send/send-sheets/send-form.tsx
@@ -2,10 +2,22 @@ import { FullHeightSheetHeader } from '@/components/full-height-sheet/full-heigh
import { FullHeightSheetLayout } from '@/components/full-height-sheet/full-height-sheet.layout';
import { NetworkBadge } from '@/components/network-badge';
import { t } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { RouteProp, useRoute } from '@react-navigation/native';
import { Text } from '@leather.io/ui/native';
+import { SendSheetNavigatorParamList } from '../send-sheet-navigator';
+
+type SendFormRouteProp = RouteProp;
+
export function SendForm() {
+ const { i18n } = useLingui();
+ const route = useRoute();
+
+ const accountName = route.params.account.name;
+ const asset = route.params.asset;
+
return (
}
/>
}
>
- {t`Send form`}
+ {t`Send form ${asset}`}
);
}
diff --git a/apps/mobile/src/store/keychains/bitcoin/bitcoin-keychains.read.ts b/apps/mobile/src/store/keychains/bitcoin/bitcoin-keychains.read.ts
index 2e9401b75..e45dec1e1 100644
--- a/apps/mobile/src/store/keychains/bitcoin/bitcoin-keychains.read.ts
+++ b/apps/mobile/src/store/keychains/bitcoin/bitcoin-keychains.read.ts
@@ -93,3 +93,15 @@ export function useBitcoinAccounts() {
};
}, [list]);
}
+
+export function useBitcoinPayerAddressFromAccountIndex(fingerprint: string, accountIndex: number) {
+ const { nativeSegwit, taproot } = useBitcoinAccounts().accountIndexByPaymentType(
+ fingerprint,
+ accountIndex
+ );
+
+ const taprootPayerAddress = taproot.derivePayer({ addressIndex: 0 }).address;
+ const nativeSegwitPayerAddress = nativeSegwit.derivePayer({ addressIndex: 0 }).address;
+
+ return { taprootPayerAddress, nativeSegwitPayerAddress };
+}
diff --git a/apps/mobile/src/store/keychains/stacks/stacks-keychains.read.ts b/apps/mobile/src/store/keychains/stacks/stacks-keychains.read.ts
index 9593b8ade..101f7ff4d 100644
--- a/apps/mobile/src/store/keychains/stacks/stacks-keychains.read.ts
+++ b/apps/mobile/src/store/keychains/stacks/stacks-keychains.read.ts
@@ -45,3 +45,8 @@ export function useStacksSigners() {
[list]
);
}
+
+export function useStacksSignerAddressFromAccountIndex(fingerprint: string, accountIndex: number) {
+ const signers = useStacksSigners().fromAccountIndex(fingerprint, accountIndex);
+ return signers.map(signer => signer.address)[0];
+}
diff --git a/apps/mobile/src/store/settings/settings.read.ts b/apps/mobile/src/store/settings/settings.read.ts
index 46ed5be84..41787e769 100644
--- a/apps/mobile/src/store/settings/settings.read.ts
+++ b/apps/mobile/src/store/settings/settings.read.ts
@@ -1,5 +1,8 @@
import { useSelector } from 'react-redux';
+import { useBitcoinAccounts } from '@/store/keychains/bitcoin/bitcoin-keychains.read';
+import { useStacksSignerAddressFromAccountIndex } from '@/store/keychains/stacks/stacks-keychains.read';
+import { useSettings } from '@/store/settings/settings';
import { createSelector } from '@reduxjs/toolkit';
import {
@@ -60,3 +63,30 @@ export function usePrivacyMode() {
const privacyMode = useSelector(selectPrivacyModePreference);
return privacyMode === 'hidden';
}
+
+// TODO: Needs BNS name support
+export function useAccountDisplayAddress(fingerprint: string, accountIndex: number) {
+ const { accountDisplayPreference } = useSettings();
+
+ const { nativeSegwit, taproot } = useBitcoinAccounts().accountIndexByPaymentType(
+ fingerprint,
+ accountIndex
+ );
+
+ const taprootPayer = taproot.derivePayer({ addressIndex: 0 });
+ const nativeSegwitPayer = nativeSegwit.derivePayer({ addressIndex: 0 });
+
+ const stxAddress = useStacksSignerAddressFromAccountIndex(fingerprint, accountIndex) ?? '';
+
+ switch (accountDisplayPreference.type) {
+ case 'native-segwit':
+ return nativeSegwitPayer.address;
+ case 'taproot':
+ return taprootPayer.address;
+ case 'bns':
+ return '';
+ case 'stacks':
+ default:
+ return stxAddress;
+ }
+}
diff --git a/packages/ui/native.ts b/packages/ui/native.ts
index b98971bf2..446b6e23c 100644
--- a/packages/ui/native.ts
+++ b/packages/ui/native.ts
@@ -46,3 +46,4 @@ export * from './src/components/collectibles/index.native';
export * from './src/utils/use-on-mount.shared';
export { Pressable } from './src/components/button/pressable.native';
export { Numpad } from './src/components/numpad/numpad.native';
+export { IconButton } from './src/components/icon-button/icon-button.native';
diff --git a/packages/ui/src/components/avatar/btc-avatar-icon.native.tsx b/packages/ui/src/components/avatar/btc-avatar-icon.native.tsx
index a3c897b2d..110ee8966 100644
--- a/packages/ui/src/components/avatar/btc-avatar-icon.native.tsx
+++ b/packages/ui/src/components/avatar/btc-avatar-icon.native.tsx
@@ -4,7 +4,7 @@ import { Avatar } from './avatar.native';
export function BtcAvatarIcon() {
return (
-
+
diff --git a/packages/ui/src/components/avatar/stx-avatar-icon.native.tsx b/packages/ui/src/components/avatar/stx-avatar-icon.native.tsx
index 7651ddcc1..2a9c3b13f 100644
--- a/packages/ui/src/components/avatar/stx-avatar-icon.native.tsx
+++ b/packages/ui/src/components/avatar/stx-avatar-icon.native.tsx
@@ -4,7 +4,7 @@ import { Avatar } from './avatar.native';
export function StxAvatarIcon() {
return (
-
+
diff --git a/packages/ui/src/components/icon-button/icon-button.native.tsx b/packages/ui/src/components/icon-button/icon-button.native.tsx
new file mode 100644
index 000000000..b9b64d91e
--- /dev/null
+++ b/packages/ui/src/components/icon-button/icon-button.native.tsx
@@ -0,0 +1,9 @@
+import { TouchableOpacity } from 'react-native';
+
+interface IconButtonProps {
+ icon: React.ReactNode;
+ onPress(): void;
+}
+export function IconButton({ icon, onPress }: IconButtonProps) {
+ return {icon};
+}
diff --git a/packages/ui/src/components/item-layout/item-layout.native.tsx b/packages/ui/src/components/item-layout/item-layout.native.tsx
index 24bee4729..6f72c2cde 100644
--- a/packages/ui/src/components/item-layout/item-layout.native.tsx
+++ b/packages/ui/src/components/item-layout/item-layout.native.tsx
@@ -15,7 +15,7 @@ export interface ItemLayoutProps {
}
export function ItemLayout({
actionIcon,
- captionLeft = ' ',
+ captionLeft,
captionRight,
titleLeft,
titleRight,