feat: Enable Long Press Copy for Addresses, Asset IDs, and Transaction IDs [PERA-3357]

apps/mobile/package.json

@@ -29,6 +29,7 @@
     "@algorandfoundation/algokit-utils": "catalog:",
     "@algorandfoundation/xhd-wallet-api": "catalog:",
     "@craftzdog/react-native-buffer": "^6.1.1",
+    "@expo/config-plugins": "~55.0.7",
     "@gorhom/bottom-sheet": "^5.2.8",
     "@hookform/resolvers": "^5.2.2",
     "@legendapp/list": "^2.0.19",
@@ -78,14 +79,14 @@
     "@tanstack/react-query-persist-client": "catalog:",
     "bip39": "catalog:",
     "decimal.js": "^10.6.0",
-    "@expo/config-plugins": "~55.0.7",
     "expo": "^55.0.8",
     "expo-application": "^55.0.10",
     "expo-build-properties": "~55.0.10",
     "expo-clipboard": "^55.0.9",
     "expo-dev-client": "~55.0.18",
     "expo-device": "^55.0.10",
     "expo-font": "~55.0.4",
+    "expo-haptics": "^55.0.9",
     "expo-linear-gradient": "^55.0.9",
     "expo-localization": "^55.0.9",
     "expo-splash-screen": "~55.0.12",
@@ -131,15 +132,13 @@
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@babel/preset-env": "^7.28.5",
     "@babel/runtime": "catalog:",
-
     "@react-native/babel-preset": "0.83.0",
     "@react-native/codegen": "^0.83.0",
     "@react-native/typescript-config": "0.83.0",
     "@tanstack/query-core": "^5.90.16",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "catalog:",
     "@types/react": "catalog:",
-
     "@vitejs/plugin-react": "catalog:",
     "@welldone-software/why-did-you-render": "^10.0.1",
     "babel-plugin-module-resolver": "^5.0.2",

apps/mobile/src/components/AddressDisplay/AddressDisplay.tsx

@@ -14,10 +14,10 @@ import {
     PWIcon,
     PWText,
     PWTextProps,
-    PWTouchableOpacity,
     PWTouchableOpacityProps,
     PWView,
 } from '@components/core'
+import { CopyableText } from '@components/CopyableText'
 import { useStyles } from './styles'
 import { truncateAlgorandAddress } from '@perawallet/wallet-core-shared'
 import { useAllAccounts } from '@perawallet/wallet-core-accounts'
@@ -92,10 +92,9 @@ export const AddressDisplay = ({
               : truncateAlgorandAddress(address)
 
     return (
-        <PWTouchableOpacity
+        <CopyableText
             {...rest}
-            activeOpacity={1}
-            onLongPress={copyAddress}
+            copyValue={address}
             style={[styles.addressValueContainer, rest.style]}
         >
             {!!account && (
@@ -137,6 +136,6 @@ export const AddressDisplay = ({
                     onPress={copyAddress}
                 />
             )}
-        </PWTouchableOpacity>
+        </CopyableText>
     )
 }

apps/mobile/src/components/CopyableText/CopyableText.tsx

@@ -0,0 +1,51 @@
+/*
+ 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 { useCallback } from 'react'
+import { GestureResponderEvent } from 'react-native'
+import { PWTouchableOpacity, PWTouchableOpacityProps } from '@components/core'
+import { useClipboard } from '@hooks/useClipboard'
+
+export type CopyableTextProps = {
+    copyValue: string
+    children: React.ReactNode
+} & Omit<PWTouchableOpacityProps, 'children'>
+
+export const CopyableText = ({
+    copyValue,
+    children,
+    onLongPress,
+    activeOpacity = 1,
+    accessibilityHint = 'Long press to copy',
+    ...rest
+}: CopyableTextProps) => {
+    const { copyToClipboard } = useClipboard()
+
+    const handleLongPress = useCallback(
+        (event: GestureResponderEvent) => {
+            copyToClipboard(copyValue)
+            onLongPress?.(event)
+        },
+        [copyValue, copyToClipboard, onLongPress],
+    )
+
+    return (
+        <PWTouchableOpacity
+            {...rest}
+            activeOpacity={activeOpacity}
+            onLongPress={handleLongPress}
+            accessibilityHint={accessibilityHint}
+        >
+            {children}
+        </PWTouchableOpacity>
+    )
+}

apps/mobile/src/components/CopyableText/__tests__/CopyableText.spec.tsx

@@ -0,0 +1,52 @@
+/*
+ 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 { render, screen } from '@test-utils/render'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { PWText } from '@components/core'
+import { CopyableText } from '../CopyableText'
+
+const mockCopyToClipboard = vi.fn()
+
+vi.mock('@hooks/useClipboard', () => ({
+    useClipboard: () => ({ copyToClipboard: mockCopyToClipboard }),
+}))
+
+describe('CopyableText', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    it('renders children', () => {
+        render(
+            <CopyableText copyValue='12345'>
+                <PWText testID='child-text'>Asset 12345</PWText>
+            </CopyableText>,
+        )
+
+        expect(screen.getByTestId('child-text')).toBeTruthy()
+        expect(screen.getByText('Asset 12345')).toBeTruthy()
+    })
+
+    it('renders with testID for accessibility', () => {
+        render(
+            <CopyableText
+                copyValue='67890'
+                testID='copyable'
+            >
+                <PWText>67890</PWText>
+            </CopyableText>,
+        )
+
+        expect(screen.getByTestId('copyable')).toBeTruthy()
+    })
+})

apps/mobile/src/components/CopyableText/index.ts

@@ -0,0 +1,14 @@
+/*
+ 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
+ */
+
+export { CopyableText } from './CopyableText'
+export type { CopyableTextProps } from './CopyableText'

apps/mobile/src/components/CopyableText/styles.ts

@@ -0,0 +1,15 @@
+/*
+ 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 { makeStyles } from '@rneui/themed'
+
+export const useStyles = makeStyles(() => ({}))

apps/mobile/src/hooks/__tests__/useClipboard.test.ts

@@ -14,12 +14,18 @@ import { describe, it, expect, beforeEach, vi, type Mock } from 'vitest'
 import { renderHook, act } from '@testing-library/react'
 import { useClipboard } from '../useClipboard'
 import * as Clipboard from 'expo-clipboard'
+import * as Haptics from 'expo-haptics'
 import { useToast } from '../useToast'
 
 vi.mock('expo-clipboard', () => ({
     setStringAsync: vi.fn(),
 }))
 
+vi.mock('expo-haptics', () => ({
+    notificationAsync: vi.fn(),
+    NotificationFeedbackType: { Success: 'success' },
+}))
+
 vi.mock('../useToast', () => ({
     useToast: vi.fn(() => ({ showToast: vi.fn() })),
 }))
@@ -48,6 +54,9 @@ describe('useClipboard', () => {
         })
 
         expect(Clipboard.setStringAsync).toHaveBeenCalledWith('test text')
+        expect(Haptics.notificationAsync).toHaveBeenCalledWith(
+            Haptics.NotificationFeedbackType.Success,
+        )
         expect(mockShowToast).toHaveBeenCalledWith(
             {
                 title: 'common.copied_to_clipboard.title',

apps/mobile/src/hooks/useClipboard.ts

@@ -13,6 +13,7 @@
 import { useToast } from './useToast'
 import { useLanguage } from '@hooks/useLanguage'
 import * as Clipboard from 'expo-clipboard'
+import * as Haptics from 'expo-haptics'
 import { useCallback } from 'react'
 import type { NotifierRoot } from 'react-native-notifier'
 
@@ -23,6 +24,7 @@ export const useClipboard = () => {
     const copyToClipboard = useCallback(
         async (text: string, notifier?: NotifierRoot) => {
             await Clipboard.setStringAsync(text)
+            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
             showToast(
                 {
                     title: t('common.copied_to_clipboard.title'),

apps/mobile/src/modules/accounts/components/AccountInfoCard/WalletStructureTree.tsx

@@ -17,6 +17,7 @@ import {
     PWTouchableOpacity,
     PWView,
 } from '@components/core'
+import { CopyableText } from '@components/CopyableText'
 import { HDWalletAccount } from '@perawallet/wallet-core-accounts'
 import { truncateAlgorandAddress } from '@perawallet/wallet-core-shared'
 import { useLanguage } from '@hooks/useLanguage'
@@ -65,12 +66,14 @@ export const WalletStructureTree = ({
                             <PWText variant='body'>
                                 {account.name ?? t('account_info.main_address')}
                             </PWText>
-                            <PWText
-                                variant='body'
-                                style={styles.addressText}
-                            >
-                                {truncateAlgorandAddress(account.address)}
-                            </PWText>
+                            <CopyableText copyValue={account.address}>
+                                <PWText
+                                    variant='body'
+                                    style={styles.addressText}
+                                >
+                                    {truncateAlgorandAddress(account.address)}
+                                </PWText>
+                            </CopyableText>
                         </PWView>
                     </PWView>
                 </PWView>

apps/mobile/src/modules/assets/components/AssetItem/AccountAssetItemView.tsx

@@ -22,6 +22,7 @@ import {
     PWView,
     PWViewProps,
 } from '@components/core'
+import { CopyableText } from '@components/CopyableText'
 import { ALGO_ASSET_ID, useAssetsQuery } from '@perawallet/wallet-core-assets'
 import { AssetWithAccountBalance } from '@perawallet/wallet-core-accounts'
 import { useStyles } from './styles'
@@ -123,14 +124,16 @@ export const AccountAssetItemView = ({
                         </PWText>
                         {verificationIcon}
                     </PWView>
-                    <PWText
-                        style={styles.secondaryUnit}
-                        numberOfLines={1}
-                    >
-                        {asset.unitName}
-                        {asset.assetId !== ALGO_ASSET_ID &&
-                            ` - ${asset.assetId}`}
-                    </PWText>
+                    <CopyableText copyValue={String(asset.assetId)}>
+                        <PWText
+                            style={styles.secondaryUnit}
+                            numberOfLines={1}
+                        >
+                            {asset.unitName}
+                            {asset.assetId !== ALGO_ASSET_ID &&
+                                ` - ${asset.assetId}`}
+                        </PWText>
+                    </CopyableText>
                 </PWView>
                 <PWView style={styles.amountContainer}>
                     <CurrencyDisplay

apps/mobile/src/modules/assets/components/AssetTitle/AssetTitle.tsx

@@ -12,6 +12,7 @@
 
 import { ALGO_ASSET_ID, PeraAsset } from '@perawallet/wallet-core-assets'
 import { PWIcon, PWText, PWView } from '@components/core'
+import { CopyableText } from '@components/CopyableText'
 import { useStyles } from './styles'
 import { AssetIcon } from '../AssetIcon'
 import { useMemo } from 'react'
@@ -73,12 +74,14 @@ export const AssetTitle = ({
                         )}
                 </PWView>
                 {showId && (
-                    <PWText
-                        variant='caption'
-                        style={styles.id}
-                    >
-                        {asset.assetId}
-                    </PWText>
+                    <CopyableText copyValue={String(asset.assetId)}>
+                        <PWText
+                            variant='caption'
+                            style={styles.id}
+                        >
+                            {asset.assetId}
+                        </PWText>
+                    </CopyableText>
                 )}
             </PWView>
         </PWView>

apps/mobile/src/modules/onboarding/screens/ImportRekeyedAddressesScreen/ImportRekeyedAddressesItem.tsx

@@ -20,6 +20,7 @@ import {
     PWChip,
     PWRoundIcon,
 } from '@components/core'
+import { CopyableText } from '@components/CopyableText'
 import { WalletAccount } from '@perawallet/wallet-core-accounts'
 import { useLanguage } from '@hooks/useLanguage'
 import { useModalState } from '@hooks/useModalState'
@@ -73,14 +74,16 @@ export const ImportRekeyedAddressesItem = ({
                 </PWView>
 
                 <PWView style={styles.itemTextContainer}>
-                    <PWText
-                        variant='body'
-                        style={styles.itemTitle}
-                        numberOfLines={1}
-                        ellipsizeMode='middle'
-                    >
-                        {account.address}
-                    </PWText>
+                    <CopyableText copyValue={account.address}>
+                        <PWText
+                            variant='body'
+                            style={styles.itemTitle}
+                            numberOfLines={1}
+                            ellipsizeMode='middle'
+                        >
+                            {account.address}
+                        </PWText>
+                    </CopyableText>
                     <PWText
                         variant='caption'
                         style={styles.itemSubtitle}