Skip to content

feat: implementing rekeyed account info bottom sheet [PERA-3811] #234

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fmsouza merged 1 commit into from
Mar 23, 2026
Merged

feat: implementing rekeyed account info bottom sheet [PERA-3811] #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion apps/mobile/src/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,7 +599,12 @@
"skip": "Skip for now",
"fetching": "Fetching rekeyed accounts...",
"rekeyed_account_subtitle": "Rekeyed account",
"importing_accounts": "Importing accounts..."
"importing_accounts": "Importing accounts...",
"info_sheet": {
"account_details": "Account details",
"assets": "Assets",
"can_be_signed_by": "Can be signed by"
}
},
"add_account": {
"title": "Add an\naccount",
Expand Down
19 changes: 11 additions & 8 deletions ...rc/modules/onboarding/screens/ImportRekeyedAddressesScreen/ImportRekeyedAddressesItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@ import {
} from '@components/core'
import { WalletAccount } from '@perawallet/wallet-core-accounts'
import { useLanguage } from '@hooks/useLanguage'
import { useToast } from '@hooks/useToast'
import { useModalState } from '@hooks/useModalState'
import { useStyles } from './styles'
import { RekeyedAccountInfoBottomSheet } from './RekeyedAccountInfoBottomSheet'

type ImportRekeyedAddressesItemProps = {
account: WalletAccount
Expand All @@ -40,7 +41,7 @@ export const ImportRekeyedAddressesItem = ({
}: ImportRekeyedAddressesItemProps) => {
const styles = useStyles()
const { t } = useLanguage()
const { infoToast } = useToast()
const bottomSheetState = useModalState()

return (
<PWView
Expand Down Expand Up @@ -93,12 +94,8 @@ export const ImportRekeyedAddressesItem = ({

<PWTouchableOpacity
style={styles.infoIconContainer}
onPress={() =>
infoToast(
t('common.not_implemented.title'),
t('common.not_implemented.body'),
)
}
onPress={bottomSheetState.open}
testID={`import_rekeyed_addresses_item_info_${account.address}`}
>
<PWIcon
name='info'
Expand All @@ -107,6 +104,12 @@ export const ImportRekeyedAddressesItem = ({
/>
</PWTouchableOpacity>

<RekeyedAccountInfoBottomSheet
isVisible={bottomSheetState.isOpen}
onClose={bottomSheetState.close}
account={account}
/>

{isImported && (
<PWChip
title={t(
Expand Down
212 changes: 212 additions & 0 deletions ...ortRekeyedAddressesScreen/RekeyedAccountInfoBottomSheet/RekeyedAccountInfoBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
/*
Copyright 2022-2025 Pera Wallet, LDA
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
*/

import React from 'react'
import {
PWBottomSheet,
PWButton,
PWIcon,
PWRoundIcon,
PWText,
PWToolbar,
PWView,
} from '@components/core'
import { BottomSheetScrollView } from '@gorhom/bottom-sheet'
import { WalletAccount } from '@perawallet/wallet-core-accounts'
import { ALGO_ASSET_ID } from '@perawallet/wallet-core-assets'
import { truncateAlgorandAddress } from '@perawallet/wallet-core-shared'
import { useLanguage } from '@hooks/useLanguage'
import { AccountAssetItemView } from '@modules/assets/components/AssetItem'
import { CurrencyDisplay } from '@components/CurrencyDisplay'
import { PreferredCurrencyDisplay } from '@components/PreferredCurrencyDisplay'
import { useRekeyedAccountInfoBottomSheet } from './useRekeyedAccountInfoBottomSheet'
import { useStyles } from './styles'

export type RekeyedAccountInfoBottomSheetProps = {
isVisible: boolean
onClose: () => void
account: WalletAccount
}

export const RekeyedAccountInfoBottomSheet = ({
isVisible,
onClose,
account,
}: RekeyedAccountInfoBottomSheetProps) => {
const styles = useStyles()
const { t } = useLanguage()
const {
rekeyedAccountBalances,
rekeyedAccountAlgoValue,
authAddress,
authAccountAlgoValue,
} = useRekeyedAccountInfoBottomSheet({ account, isVisible })

return (
<PWBottomSheet
isVisible={isVisible}
onBackdropPress={onClose}
innerContainerStyle={styles.container}
enablePanDownToClose
size='lg'
>
<PWToolbar
left={
<PWIcon
name='cross'
variant='secondary'
onPress={onClose}
/>
}
center={
<PWText variant='h4'>
{truncateAlgorandAddress(account.address)}
</PWText>
}
paddingStyle='dense'
/>

<BottomSheetScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}
>
<PWText
variant='body'
style={styles.sectionTitle}
testID='section-account-details'
>
{t(
'onboarding.import_rekeyed_addresses.info_sheet.account_details',
)}
</PWText>

<PWView style={styles.accountRow}>
<PWRoundIcon
icon='account-rekeyed'
variant='helper'
size='md'
/>
<PWView style={styles.accountTextContainer}>
<PWText
variant='body'
numberOfLines={1}
ellipsizeMode='middle'
>
{account.address}
</PWText>
<PWText
variant='caption'
style={styles.accountSubtitle}
>
{t(
'onboarding.import_rekeyed_addresses.rekeyed_account_subtitle',
)}
</PWText>
</PWView>
<PWView style={styles.balanceContainer}>
<CurrencyDisplay
currency='ALGO'
value={rekeyedAccountAlgoValue}
precision={6}
minPrecision={2}
showSymbol
/>
<PreferredCurrencyDisplay
sourceAmount={rekeyedAccountAlgoValue}
sourceAssetId={ALGO_ASSET_ID}
precision={2}
minPrecision={2}
showSymbol
style={styles.secondaryBalance}
/>
</PWView>
</PWView>

<PWView style={styles.divider} />

<PWText
variant='body'
style={styles.sectionTitle}
testID='section-assets'
>
{t('onboarding.import_rekeyed_addresses.info_sheet.assets')}
</PWText>

{rekeyedAccountBalances.map(balance => (
<AccountAssetItemView
key={balance.assetId}
accountBalance={balance}
style={styles.assetItem}
/>
))}

{!!authAddress && (
<>
<PWView style={styles.divider} />

<PWText
variant='body'
style={styles.sectionTitle}
testID='section-can-be-signed-by'
>
{t(
'onboarding.import_rekeyed_addresses.info_sheet.can_be_signed_by',
)}
</PWText>

<PWView style={styles.accountRow}>
<PWRoundIcon
icon='wallet'
variant='helper'
size='md'
/>
<PWView style={styles.accountTextContainer}>
<PWText
variant='body'
numberOfLines={1}
ellipsizeMode='middle'
>
{authAddress}
</PWText>
</PWView>
<PWView style={styles.balanceContainer}>
<CurrencyDisplay
currency='ALGO'
value={authAccountAlgoValue}
precision={6}
minPrecision={2}
showSymbol
/>
<PreferredCurrencyDisplay
sourceAmount={authAccountAlgoValue}
sourceAssetId={ALGO_ASSET_ID}
precision={2}
minPrecision={2}
showSymbol
style={styles.secondaryBalance}
/>
</PWView>
</PWView>
</>
)}

<PWButton
variant='secondary'
title={t('common.close.label')}
onPress={onClose}
style={styles.closeButton}
testID='close-button'
/>
</BottomSheetScrollView>
</PWBottomSheet>
)
}
Loading
Loading