Compact tx UI (#782)

ios/Podfile.lock

@@ -59,7 +59,7 @@ PODS:
     - ReactCommon/turbomodule/core (= 0.71.5)
   - fmt (6.2.1)
   - glog (0.3.5)
-  - helium-react-native-sdk (3.0.4):
+  - helium-react-native-sdk (3.0.5):
     - React-Core
   - hermes-engine (0.71.5):
     - hermes-engine/Pre-built (= 0.71.5)
@@ -858,7 +858,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 627fd07f1b9d498c9fa572e76d7f1a6b1ee9a444
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
-  helium-react-native-sdk: bd924fa4ff053a6afb2b2febf03c3dfacd7dd671
+  helium-react-native-sdk: 54928dcd95ea131437ac6e269cf5bb2d473bf57f
   hermes-engine: 0784cadad14b011580615c496f77e0ae112eed75
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   lottie-ios: e047b1d2e6239b787cc5e9755b988869cf190494

src/components/AutoGasBanner.tsx

@@ -120,7 +120,7 @@ const Banner = ({ onLayout, ...rest }: BannerProps) => {
         const decision = await walletSignBottomSheetRef.show({
           type: WalletStandardMessageTypes.signTransaction,
           url: '',
-          additionalMessage: t('transactions.autoGasConvert', { symbol }),
+          message: t('transactions.autoGasConvert', { symbol }),
           serializedTxs: [serializedTx],
           header: t('transactions.autoGasConvertHeader'),
         })

src/features/governance/PositionCard.tsx

@@ -43,6 +43,7 @@ import { useCreateOpacity } from '@theme/themeHooks'
 import { MAX_TRANSACTIONS_PER_SIGNATURE_BATCH } from '@utils/constants'
 import {
   daysToSecs,
+  getFormattedStringFromDays,
   getMinDurationFmt,
   getTimeLeftFromNowFmt,
   secsToDays,
@@ -53,6 +54,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useAsync } from 'react-async-hook'
 import { useTranslation } from 'react-i18next'
 import { FadeIn, FadeOut } from 'react-native-reanimated'
+import { MessagePreview } from '../../solana/MessagePreview'
 import { useSolana } from '../../solana/SolanaProvider'
 import { useWalletSign } from '../../solana/WalletSignProvider'
 import { WalletStandardMessageTypes } from '../../solana/walletSignBottomSheetTypes'
@@ -147,11 +149,17 @@ export const PositionCard = ({
 
   const { anchorProvider } = useSolana()
 
-  const decideAndExecute = async (
-    header: string,
-    instructions: TransactionInstruction[],
-    sigs: Keypair[] = [],
-  ) => {
+  const decideAndExecute = async ({
+    header,
+    message,
+    instructions,
+    sigs = [],
+  }: {
+    header: string
+    message: string
+    instructions: TransactionInstruction[]
+    sigs?: Keypair[]
+  }) => {
     if (!anchorProvider || !walletSignBottomSheetRef) return
 
     const transactions = await batchInstructionsToTxsWithPriorityFee(
@@ -172,6 +180,7 @@ export const PositionCard = ({
       type: WalletStandardMessageTypes.signTransaction,
       url: '',
       header,
+      renderer: () => <MessagePreview message={message} />,
       serializedTxs: txs.map((t) => Buffer.from(t.serialize())),
     })
 
@@ -348,7 +357,11 @@ export const PositionCard = ({
     await closePosition({
       position,
       onInstructions: async (ixs) => {
-        await decideAndExecute(t('gov.transactions.closePosition'), ixs)
+        await decideAndExecute({
+          header: t('gov.transactions.closePosition'),
+          message: t('gov.positions.closeMessage'),
+          instructions: ixs,
+        })
         if (!closingError) {
           refetchState()
         }
@@ -360,12 +373,18 @@ export const PositionCard = ({
     await flipPositionLockupKind({
       position,
       onInstructions: async (ixs) => {
-        await decideAndExecute(
-          isConstant
+        await decideAndExecute({
+          header: isConstant
             ? t('gov.transactions.unpauseLockup')
             : t('gov.transactions.pauseLockup'),
-          ixs,
-        )
+          message: t('gov.positions.flipLockupMessage', {
+            amount: lockedTokens,
+            symbol,
+            status: isConstant ? 'paused' : 'decaying',
+            action: isConstant ? 'let it decay' : 'pause it',
+          }),
+          instructions: ixs,
+        })
 
         if (!flippingError) {
           refetchState()
@@ -379,7 +398,19 @@ export const PositionCard = ({
       position,
       lockupPeriodsInDays: values.lockupPeriodInDays,
       onInstructions: async (ixs) => {
-        await decideAndExecute(t('gov.transactions.extendPosition'), ixs)
+        await decideAndExecute({
+          header: t('gov.transactions.extendPosition'),
+          message: t('gov.positions.extendMessage', {
+            existing: isConstant
+              ? getMinDurationFmt(
+                  position.lockup.startTs,
+                  position.lockup.endTs,
+                )
+              : getTimeLeftFromNowFmt(position.lockup.endTs),
+            new: getFormattedStringFromDays(values.lockupPeriodInDays),
+          }),
+          instructions: ixs,
+        })
         if (!extendingError) {
           refetchState()
         }
@@ -394,7 +425,18 @@ export const PositionCard = ({
       lockupKind: values.lockupKind.value,
       lockupPeriodsInDays: values.lockupPeriodInDays,
       onInstructions: async (ixs, sigs) => {
-        await decideAndExecute(t('gov.transactions.splitPosition'), ixs, sigs)
+        await decideAndExecute({
+          header: t('gov.transactions.splitPosition'),
+          message: t('gov.positions.splitMessage', {
+            amount: values.amount,
+            symbol,
+            lockupKind: values.lockupKind.display.toLocaleLowerCase(),
+            duration: getFormattedStringFromDays(values.lockupPeriodInDays),
+          }),
+          instructions: ixs,
+          sigs,
+        })
+
         if (!splitingError) {
           refetchState()
         }
@@ -411,7 +453,20 @@ export const PositionCard = ({
       amount,
       targetPosition,
       onInstructions: async (ixs) => {
-        await decideAndExecute(t('gov.transactions.transferPosition'), ixs)
+        await decideAndExecute({
+          header: t('gov.transactions.transferPosition'),
+          message: t('gov.positions.transferMessage', {
+            amount,
+            symbol,
+            targetAmount: humanReadable(
+              targetPosition.amountDepositedNative,
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              mintAcc!.decimals,
+            ),
+          }),
+          instructions: ixs,
+        })
+
         if (!transferingError) {
           refetchState()
         }
@@ -424,7 +479,16 @@ export const PositionCard = ({
       position,
       subDao,
       onInstructions: async (ixs) => {
-        await decideAndExecute(t('gov.transactions.delegatePosition'), ixs)
+        await decideAndExecute({
+          header: t('gov.transactions.delegatePosition'),
+          message: t('gov.positions.delegateMessage', {
+            amount: lockedTokens,
+            symbol,
+            subDao: subDao.dntMetadata.name,
+          }),
+          instructions: ixs,
+        })
+
         if (!delegatingError) {
           refetchState()
         }
@@ -439,11 +503,22 @@ export const PositionCard = ({
         const undelegate = ixs[ixs.length - 1]
         const claims = ixs.slice(0, ixs.length - 1)
         if (claims.length > 0) {
-          await decideAndExecute(t('gov.transactions.claimRewards'), claims)
+          await decideAndExecute({
+            header: t('gov.transactions.claimRewards'),
+            message: t('gov.transactions.claimRewards'),
+            instructions: claims,
+          })
         }
-        await decideAndExecute(t('gov.transactions.undelegatePosition'), [
-          undelegate,
-        ])
+
+        await decideAndExecute({
+          header: t('gov.transactions.undelegatePosition'),
+          message: t('gov.positions.undelegateMessage', {
+            amount: lockedTokens,
+            symbol,
+          }),
+          instructions: [undelegate],
+        })
+
         if (!undelegatingError) {
           refetchState()
         }
@@ -456,7 +531,12 @@ export const PositionCard = ({
       position,
       organization,
       onInstructions: async (ixs) => {
-        await decideAndExecute(t('gov.transactions.relinquishPosition'), ixs)
+        await decideAndExecute({
+          header: t('gov.transactions.relinquishPosition'),
+          message: t('gov.positions.relinquishVotesMessage'),
+          instructions: ixs,
+        })
+
         if (!relinquishingError) {
           refetchState()
         }
@@ -502,7 +582,7 @@ export const PositionCard = ({
               <>
                 <ListItem
                   key="split"
-                  title="Split"
+                  title={t('gov.positions.split')}
                   onPress={() => {
                     setActionsOpen(false)
                     if (hasActiveVotes) {
@@ -519,7 +599,7 @@ export const PositionCard = ({
                 />
                 <ListItem
                   key="transfer"
-                  title="Transfer"
+                  title={t('gov.positions.transfer')}
                   onPress={() => {
                     setActionsOpen(false)
                     if (hasActiveVotes) {
@@ -548,8 +628,8 @@ export const PositionCard = ({
                   key="pause"
                   title={
                     isConstant
-                      ? t('gov.transactions.unpauseLockup')
-                      : t('gov.transactions.pauseLockup')
+                      ? t('gov.positions.unpause')
+                      : t('gov.positions.pause')
                   }
                   onPress={async () => {
                     setActionsOpen(false)

src/features/governance/ProposalScreen.tsx

@@ -42,6 +42,7 @@ import { useTranslation } from 'react-i18next'
 import { ScrollView } from 'react-native'
 import Markdown from 'react-native-markdown-display'
 import { Edge } from 'react-native-safe-area-context'
+import { MessagePreview } from '../../solana/MessagePreview'
 import { useSolana } from '../../solana/SolanaProvider'
 import { useWalletSign } from '../../solana/WalletSignProvider'
 import { WalletStandardMessageTypes } from '../../solana/walletSignBottomSheetTypes'
@@ -183,10 +184,15 @@ export const ProposalScreen = () => {
     [proposal],
   )
 
-  const decideAndExecute = async (
-    header: string,
-    instructions: TransactionInstruction[],
-  ) => {
+  const decideAndExecute = async ({
+    header,
+    message,
+    instructions,
+  }: {
+    header: string
+    message: string
+    instructions: TransactionInstruction[]
+  }) => {
     if (!anchorProvider || !walletSignBottomSheetRef) return
 
     const transactions = await batchInstructionsToTxsWithPriorityFee(
@@ -207,6 +213,7 @@ export const ProposalScreen = () => {
       type: WalletStandardMessageTypes.signTransaction,
       url: '',
       header,
+      renderer: () => <MessagePreview message={message} />,
       serializedTxs: txs.map((transaction) =>
         Buffer.from(transaction.serialize()),
       ),
@@ -232,7 +239,11 @@ export const ProposalScreen = () => {
       await vote({
         choice: choice.index,
         onInstructions: (ixs) =>
-          decideAndExecute(t('gov.transactions.castVote'), ixs),
+          decideAndExecute({
+            header: t('gov.transactions.castVote'),
+            message: t('gov.proposals.castVoteFor', { choice: choice.name }),
+            instructions: ixs,
+          }),
       })
     }
   }
@@ -243,7 +254,13 @@ export const ProposalScreen = () => {
       relinquishVote({
         choice: choice.index,
         onInstructions: async (instructions) =>
-          decideAndExecute(t('gov.transactions.relinquishVote'), instructions),
+          decideAndExecute({
+            header: t('gov.transactions.relinquishVote'),
+            message: t('gov.proposals.relinquishVoteFor', {
+              choice: choice.name,
+            }),
+            instructions,
+          }),
       })
     }
   }