feat: support ARC60 signing [PERA-3638]

apps/mobile/src/i18n/locales/en.json

@@ -1059,6 +1059,28 @@
             "title": "Transaction Request FAQ",
             "body": "External applications, also called dApps, can initiate transaction requests independently from Pera Wallet. Please ensure you review these transactions carefully before approving and signing them.",
             "warning": "All transactions are irreversible. As these requests are outside Pera Wallet's control, never approve transactions from a dApp you don't know."
+        },
+        "arc60_view": {
+            "title": "Sign-in Request",
+            "description": "Sign in to {{domain}} using your wallet. The signature proves you control this account but does not authorise any on-chain action.",
+            "domain": "Domain",
+            "scope": "Scope",
+            "scope_auth": "Authentication",
+            "request_id": "Request ID",
+            "on_behalf_of": "Signing With",
+            "siwa_statement": "Statement",
+            "siwa_uri": "URI",
+            "siwa_version": "Version",
+            "siwa_chain_id": "Chain ID",
+            "siwa_nonce": "Nonce",
+            "siwa_issued_at": "Issued At",
+            "siwa_expiration": "Expires",
+            "siwa_not_before": "Not Before",
+            "siwa_resources": "Resources",
+            "siwa_invalid": "This sign-in request is malformed and cannot be signed.",
+            "show_details": "Show Details",
+            "details_title": "Sign-in Request Details",
+            "details_description": "Review the full metadata of this sign-in request before approving."
         }
     },
     "transactions": {

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

@@ -11,12 +11,12 @@
  */
 
 import { useCallback } from 'react'
-import { ScrollView } from 'react-native'
 import {
     PWBottomSheet,
     PWButton,
     PWIcon,
     PWImage,
+    PWScrollView,
     PWText,
     PWTouchableOpacity,
     PWView,
@@ -71,7 +71,7 @@ export const AsaVerificationInfoBottomSheet = ({
                     />
                 </PWTouchableOpacity>
 
-                <ScrollView style={styles.scrollContent}>
+                <PWScrollView style={styles.scrollContent}>
                     <PWImage
                         source={heroImage}
                         style={styles.heroImage}
@@ -96,7 +96,7 @@ export const AsaVerificationInfoBottomSheet = ({
                             {t('asa_verification_info.body_3')}
                         </PWText>
                     </PWView>
-                </ScrollView>
+                </PWScrollView>
 
                 <PWView style={styles.footer}>
                     <PWButton

apps/mobile/src/modules/assets/components/market/AssetMarkets/AssetMarkets.tsx

@@ -11,7 +11,6 @@
  */
 
 import { useEffect } from 'react'
-import { ScrollView } from 'react-native'
 import { formatDatetime } from '@perawallet/wallet-core-shared'
 import { useStyles } from './styles'
 import {
@@ -27,6 +26,7 @@ import { Decimal } from 'decimal.js'
 import {
     PWButton,
     PWIcon,
+    PWScrollView,
     PWSkeleton,
     PWText,
     PWTouchableOpacity,
@@ -125,7 +125,7 @@ export const AssetMarkets = ({
     }
 
     return (
-        <ScrollView
+        <PWScrollView
             style={styles.container}
             contentContainerStyle={styles.contentContainer}
             showsVerticalScrollIndicator={false}
@@ -258,6 +258,6 @@ export const AssetMarkets = ({
                     <Text style={styles.tagText}>{t('asset_details.markets.no_clawback')}</Text>
                 </PWView>}
             </PWView> */}
-        </ScrollView>
+        </PWScrollView>
     )
 }

apps/mobile/src/modules/onboarding/screens/ImportAccountScreen/ImportAccountScreen.tsx

@@ -20,11 +20,12 @@ import {
     PWIcon,
     PWInput,
     PWLoadingOverlay,
+    PWScrollView,
     PWText,
     PWView,
 } from '@components/core'
 
-import { KeyboardAvoidingView, ScrollView } from 'react-native'
+import { KeyboardAvoidingView } from 'react-native'
 import { useStyles } from './styles'
 import { useImportAccountScreen } from './useImportAccountScreen'
 import { useNavigationHeader } from '@hooks/useNavigationHeader'
@@ -76,7 +77,7 @@ export const ImportAccountScreen = () => {
     return (
         <PWView style={styles.mainContainer}>
             <KeyboardAvoidingView style={styles.mainContainer}>
-                <ScrollView
+                <PWScrollView
                     style={styles.scrollContainer}
                     contentContainerStyle={styles.scrollView}
                     keyboardShouldPersistTaps='handled'
@@ -195,7 +196,7 @@ export const ImportAccountScreen = () => {
                             )
                         })}
                     </PWView>
-                </ScrollView>
+                </PWScrollView>
 
                 <PWView style={styles.footer}>
                     <PWButton

apps/mobile/src/modules/signing/components/ArbitraryDataSigningView/ArbitraryDataSigningDetailsView.tsx

@@ -10,7 +10,7 @@
  limitations under the License
  */
 
-import { PWIcon, PWImage, PWText, PWView } from '@components/core'
+import { PWScrollView, PWText, PWView } from '@components/core'
 import {
     ArbitraryDataSignRequest,
     PeraArbitraryDataMessage,
@@ -22,7 +22,6 @@ import { AccountDisplay } from '@modules/accounts/components/AccountDisplay'
 import { useStyles } from './ArbitraryDataSigningDetailsView.style'
 import { CurrencyDisplay } from '@components/CurrencyDisplay'
 import { Decimal } from 'decimal.js'
-import { ScrollView } from 'react-native-gesture-handler'
 
 export type ArbitraryDataSigningDetailsViewProps = {
     request: ArbitraryDataSignRequest
@@ -39,45 +38,15 @@ export const ArbitraryDataSigningDetailsView = ({
         account => account.address === dataMessage.signer,
     )
     const styles = useStyles()
-    const preferredIcon =
-        request.sourceMetadata?.icons?.find(
-            icon =>
-                icon.endsWith('.png') ||
-                icon.endsWith('.jpg') ||
-                icon.endsWith('.jpeg'),
-        ) ?? request.sourceMetadata?.icons?.at(0)
-    const unnamedSource = t('signing.arbitrary_data_details.unnamed')
 
     return (
         <PWView style={styles.container}>
             <PWView style={[styles.section, styles.titleSection]}>
-                {preferredIcon ? (
-                    <PWImage
-                        source={{ uri: preferredIcon }}
-                        style={styles.metadataIcon}
-                    />
-                ) : (
-                    <PWView style={styles.metadataIconContainer}>
-                        <PWIcon
-                            name='wallet-connect'
-                            variant='secondary'
-                            size='xl'
-                        />
-                    </PWView>
-                )}
-                <PWText
-                    variant='h3'
-                    style={styles.title}
-                >
-                    {t('signing.arbitrary_data_details.title', {
-                        name: request?.sourceMetadata?.name ?? unnamedSource,
-                    })}
-                </PWText>
                 <PWText style={styles.description}>
                     {t('signing.arbitrary_data_details.description')}
                 </PWText>
             </PWView>
-            <ScrollView
+            <PWScrollView
                 showsVerticalScrollIndicator={false}
                 contentContainerStyle={styles.scrollContainer}
             >
@@ -137,7 +106,7 @@ export const ArbitraryDataSigningDetailsView = ({
                         </PWText>
                     </KeyValueRow>
                 </PWView>
-            </ScrollView>
+            </PWScrollView>
         </PWView>
     )
 }

apps/mobile/src/modules/signing/components/ArbitraryDataSigningView/__tests__/ArbitraryDataSigningView.spec.tsx

@@ -30,6 +30,10 @@ vi.mock('@components/core', () => ({
     PWIcon: () => null,
 
     PWImage: () => null,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    PWScrollView: ({ children, style }: any) => (
+        <div style={style}>{children}</div>
+    ),
     PWTabView: {
         createNavigator: () => ({
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

apps/mobile/src/modules/signing/components/Arc60DataSigningView/Arc60DataSigningDetailsView.style.ts

@@ -0,0 +1,44 @@
+/*
+ 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(theme => ({
+    container: {
+        flex: 1,
+    },
+    title: {
+        textAlign: 'center',
+    },
+    titleSection: {
+        alignItems: 'center',
+        gap: theme.spacing.md,
+    },
+    description: {
+        textAlign: 'center',
+    },
+    section: {
+        borderBottomWidth: theme.borders.sm,
+        borderBottomColor: theme.colors.layerGrayLightest,
+        paddingVertical: theme.spacing.lg,
+        gap: theme.spacing.md,
+    },
+    scrollContainer: {
+        flexGrow: 1,
+    },
+    resources: {
+        gap: theme.spacing.xs,
+    },
+    errorText: {
+        color: theme.colors.negative,
+    },
+}))