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,