Clarify WalletConnect connection and request risks

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased (develop)
 
+- changed: WalletConnect Smart Contract Call warning restated in the solid UI4 card
+- changed: WalletConnect Connect button pinned to the bottom of Confirm Connection
+
 ## 4.51.0 (staging)
 
 - added: Push info-server attestation tokens into edge-core-js via `setAttestationToken` so the login server can skip CAPTCHA for attested devices, and allow `LOGIN_SERVER` / `INFO_SERVER` env overrides for local E2E stacks.

eslint.config.mjs

@@ -225,7 +225,6 @@ export default [
       'src/components/modals/TransferModal.tsx',
 
       'src/components/modals/WalletListSortModal.tsx',
-      'src/components/modals/WcSmartContractModal.tsx',
 
       'src/components/navigation/BackButton.tsx',
       'src/components/navigation/CurrencySettingsTitle.tsx',
@@ -310,7 +309,7 @@ export default [
 
       'src/components/scenes/WalletRestoreScene.tsx',
       'src/components/scenes/WcConnectionsScene.tsx',
-      'src/components/scenes/WcConnectScene.tsx',
+
       'src/components/scenes/WcDisconnectScene.tsx',
       'src/components/scenes/WebViewScene.tsx',
       'src/components/services/AccountCallbackManager.tsx',

src/components/modals/WcSmartContractModal.tsx

@@ -30,11 +30,11 @@ import { asEdgeTokenId } from '../../types/types'
 import { getCurrencyIconUris } from '../../util/CdnUris'
 import { getWalletName } from '../../util/CurrencyWalletHelpers'
 import { zeroString } from '../../util/utils'
+import { AlertCardUi4 } from '../cards/AlertCard'
 import { EdgeCard } from '../cards/EdgeCard'
 import { EdgeRow } from '../rows/EdgeRow'
 import { Airship, showError } from '../services/AirshipInstance'
 import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
-import { Alert } from '../themed/Alert'
 import { ModalFooter, ModalTitle } from '../themed/ModalParts'
 import { SafeSlider } from '../themed/SafeSlider'
 import { CryptoFiatAmountTile } from '../tiles/CryptoFiatAmountTile'
@@ -46,7 +46,7 @@ interface Props extends WcSmartContractModalProps {
   wallet: EdgeCurrencyWallet
 }
 
-export const WcSmartContractModal = (props: Props) => {
+export const WcSmartContractModal: React.FC<Props> = (props: Props) => {
   const {
     bridge,
     dApp,
@@ -97,7 +97,7 @@ export const WcSmartContractModal = (props: Props) => {
       ? gt(abs(totalNativeCrypto), feeCurrencyBalance)
       : gt(networkFee, feeCurrencyBalance)
 
-  const handleSubmit = () => {
+  const handleSubmit = (): void => {
     wcRequestResponse(true)
       .then(() => {
         Airship.show(bridge => (
@@ -107,36 +107,40 @@ export const WcSmartContractModal = (props: Props) => {
           />
         )).catch(() => {})
       })
-      .catch(error => {
+      .catch((error: unknown) => {
         showError(error)
       })
       .finally(props.bridge.resolve)
   }
 
-  const handleClose = () => {
+  const handleClose = (): void => {
     wcRequestResponse(false)
-      .catch(error => {
+      .catch((error: unknown) => {
         showError(error)
       })
       .finally(props.bridge.resolve)
   }
 
-  const renderWarning = () => {
+  const renderWarning = (): React.ReactElement => {
     return isInsufficientBal ? (
-      <Alert
+      <AlertCardUi4
         title={lstrings.wc_smartcontract_warning_title}
-        message={sprintf(
+        body={sprintf(
           lstrings.wc_smartcontract_insufficient_text,
           feeCurrencyStr
         )}
         type="warning"
+        marginRem={0.5}
       />
     ) : (
-      <Alert
-        numberOfLines={0}
+      <AlertCardUi4
         title={lstrings.wc_smartcontract_warning_title}
-        message={lstrings.wc_smartcontract_warning_text}
+        body={[
+          lstrings.wc_smartcontract_warning_point_funds,
+          lstrings.wc_smartcontract_warning_point_trust
+        ]}
         type="warning"
+        marginRem={0.5}
       />
     )
   }

src/components/scenes/WcConnectScene.tsx

@@ -16,7 +16,7 @@ import { lstrings } from '../../locales/strings'
 import type { EdgeAppSceneProps, NavigationBase } from '../../types/routerTypes'
 import type { EdgeAsset } from '../../types/types'
 import { truncateString } from '../../util/utils'
-import { ButtonsView } from '../buttons/ButtonsView'
+import { SCENE_BUTTONS_MARGIN_REM, SceneButtons } from '../buttons/SceneButtons'
 import { SceneWrapper } from '../common/SceneWrapper'
 import { withWallet } from '../hoc/withWallet'
 import { CryptoIcon } from '../icons/CryptoIcon'
@@ -70,14 +70,14 @@ export const WcConnectScene = withWallet((props: Props) => {
 
   useAsyncEffect(
     async () => {
-      const r = await wallet.getReceiveAddress({ tokenId: null })
-      setWalletAddress(r.publicAddress)
+      const [receiveAddress] = await wallet.getAddresses({ tokenId: null })
+      setWalletAddress(receiveAddress.publicAddress)
     },
     [wallet],
     'WcConnectScene'
   )
 
-  const handleConnect = async () => {
+  const handleConnect = async (): Promise<void> => {
     try {
       await walletConnect.approveSession(proposal, wallet.id)
       connected.current = true
@@ -87,7 +87,7 @@ export const WcConnectScene = withWallet((props: Props) => {
           message={lstrings.wc_confirm_return_to_browser}
           onPress={() => {}}
         />
-      )).catch(e => {
+      )).catch((e: unknown) => {
         showError(e)
       })
       navigation.navigate('wcConnections', {})
@@ -121,7 +121,7 @@ export const WcConnectScene = withWallet((props: Props) => {
     }
   })
 
-  const renderWalletSelect = () => {
+  const renderWalletSelect = (): React.ReactElement => {
     const walletNameStr = truncateString(walletName, MAX_ADDRESS_CHARACTERS)
     const walletImage = (
       <CryptoIcon pluginId={wallet.currencyInfo.pluginId} tokenId={null} />
@@ -145,6 +145,7 @@ export const WcConnectScene = withWallet((props: Props) => {
     <SceneWrapper>
       <SceneHeader title={lstrings.wc_confirm_title} underline />
       <ScrollView
+        style={styles.scroll}
         contentContainerStyle={styles.container}
         scrollIndicatorInsets={SCROLL_INDICATOR_INSET_FIX}
       >
@@ -162,16 +163,16 @@ export const WcConnectScene = withWallet((props: Props) => {
         <EdgeText style={styles.bodyTitle}>{bodyTitleText}</EdgeText>
         <EdgeText style={styles.body}>{lstrings.wc_confirm_body}</EdgeText>
         {renderWalletSelect()}
-        {subTitleText === '' ? null : (
-          <ButtonsView
-            parentType="scene"
-            primary={{
-              label: lstrings.wc_confirm_connect_button,
-              onPress: handleConnect
-            }}
-          />
-        )}
       </ScrollView>
+      {subTitleText === '' ? null : (
+        <SceneButtons
+          absolute
+          primary={{
+            label: lstrings.wc_confirm_connect_button,
+            onPress: handleConnect
+          }}
+        />
+      )}
     </SceneWrapper>
   )
 })
@@ -182,9 +183,14 @@ const getStyles = cacheStyles((theme: Theme) => ({
     width: theme.rem(2),
     marginLeft: theme.rem(0.5)
   },
+  scroll: {
+    flex: 1
+  },
   container: {
     padding: theme.rem(0.5),
-    paddingTop: theme.rem(1)
+    paddingTop: theme.rem(1),
+    // Keep the last row clear of the absolutely-positioned SceneButtons:
+    paddingBottom: theme.rem(SCENE_BUTTONS_MARGIN_REM)
   },
   listRow: {
     marginTop: theme.rem(1),

src/locales/en_US.ts

@@ -1700,13 +1700,15 @@ const strings = {
   wc_confirm_subtitle: '%s wants to connect your wallet.',
   wc_confirm_body_title: 'Allow %s to:',
   wc_confirm_body:
-    'Request approval for transactions\nView your wallet and balance activity',
+    'View your wallet address\nRequest approval for transactions',
   wc_confirm_select_wallet: 'Select wallet to connect with',
   wc_confirm_return_to_browser: 'You may now return to browser',
   wc_smartcontract_title: 'Smart Contract Call',
   wc_smartcontract_warning_title: 'Warning',
-  wc_smartcontract_warning_text:
-    'Make sure this is an application you can trust. Executing this transaction gives the application access to your funds.',
+  wc_smartcontract_warning_point_funds:
+    'Approving this request may move funds or grant permissions',
+  wc_smartcontract_warning_point_trust:
+    'Only continue if you trust this application and expected this request',
   wc_smartcontract_insufficient_text:
     "You don't have enough %s to cover network fees.",
   wc_smartcontract_wallet: 'Wallet',

src/locales/strings/enUS.json

@@ -1331,12 +1331,13 @@
   "wc_confirm_title": "Confirm Connection",
   "wc_confirm_subtitle": "%s wants to connect your wallet.",
   "wc_confirm_body_title": "Allow %s to:",
-  "wc_confirm_body": "Request approval for transactions\nView your wallet and balance activity",
+  "wc_confirm_body": "View your wallet address\nRequest approval for transactions",
   "wc_confirm_select_wallet": "Select wallet to connect with",
   "wc_confirm_return_to_browser": "You may now return to browser",
   "wc_smartcontract_title": "Smart Contract Call",
   "wc_smartcontract_warning_title": "Warning",
-  "wc_smartcontract_warning_text": "Make sure this is an application you can trust. Executing this transaction gives the application access to your funds.",
+  "wc_smartcontract_warning_point_funds": "Approving this request may move funds or grant permissions",
+  "wc_smartcontract_warning_point_trust": "Only continue if you trust this application and expected this request",
   "wc_smartcontract_insufficient_text": "You don't have enough %s to cover network fees.",
   "wc_smartcontract_wallet": "Wallet",
   "wc_smartcontract_dapp": "DApp",