feat: broadcast tx

mobile/app/(app)/tosign/broadcasting.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  BroadcastingFailedView,
+  BroadcastingSuccessView,
+  BroadcastingUndefinedView,
+  BroadcastingView,
+  Layout
+} from '@/components'
+import { selectBroadcastResponse, selectBroadcastStatus, useAppSelector } from '@/redux'
+import { useRouter } from 'expo-router'
+
+export default function Page() {
+  const broadcastStatus = useAppSelector(selectBroadcastStatus)
+  const txResponse = useAppSelector(selectBroadcastResponse)
+
+  const router = useRouter()
+
+  const goHome = () => router.push('/home')
+
+  return (
+    <Layout.Container>
+      <Layout.Body>
+        {!broadcastStatus || broadcastStatus === undefined ? <BroadcastingUndefinedView onCancel={goHome} /> : null}
+        {broadcastStatus === 'pending' ? <BroadcastingView /> : null}
+        {broadcastStatus === 'rejected' ? <BroadcastingFailedView txResponse={txResponse} onCancel={goHome} /> : null}
+        {broadcastStatus === 'fulfilled' ? <BroadcastingSuccessView txResponse={txResponse} onDone={goHome} /> : null}
+      </Layout.Body>
+    </Layout.Container>
+  )
+}

mobile/app/(app)/tosign/index.tsx

@@ -13,14 +13,16 @@ import {
   selectKeyInfo,
   clearLinking,
   selectChainId,
-  selectRemote
+  selectRemote,
+  selectBroadcast,
+  broadcastTx
 } from '@/redux'
 import { useGnoNativeContext } from '@gnolang/gnonative'
 import { router } from 'expo-router'
 import { useEffect, useState } from 'react'
 import * as Linking from 'expo-linking'
-import { ScrollView, View, TouchableOpacity } from 'react-native'
-import { Button, ButtonText, FormItem, FormItemInline, Spacer, Text } from '@/modules/ui-components'
+import { ScrollView, View, TouchableOpacity, Alert } from 'react-native'
+import { Button, ButtonText, FormItem, FormItemInline, PrettyJSON, Spacer, Text } from '@/modules/ui-components'
 import styled from 'styled-components/native'
 
 export default function Page() {
@@ -37,15 +39,15 @@ export default function Page() {
   const keyInfo = useAppSelector(selectKeyInfo)
   const chainId = useAppSelector(selectChainId)
   const remote = useAppSelector(selectRemote)
+  const broadcast = useAppSelector(selectBroadcast)
   const [signedTx, setSignedTx] = useState<string | undefined>(undefined)
   const [gasWanted, setGasWanted] = useState<bigint>(BigInt(0))
   // const session = useAppSelector(selectSession);
   // const sessionWanted = useAppSelector(selectSessionWanted);
 
-  console.log('txInput', txInput)
-  console.log('bech32Address', bech32Address)
-  console.log('clientName', clientName)
-  console.log('reason', reason)
+  console.log(
+    `tosign screen -> broadcast: ${broadcast}, bech32Address: ${bech32Address}, clientName: ${clientName}, reason: ${reason}, txInput: ${txInput}`
+  )
   // console.log('session', session);
   // console.log('sessionWanted', sessionWanted);
 
@@ -96,6 +98,16 @@ export default function Page() {
 
     if (!txInput || !keyInfo) throw new Error('No transaction input or keyInfo found.')
 
+    if (broadcast) {
+      if (!signedTx) {
+        Alert.alert('No signedTx')
+        return
+      }
+      dispatch(broadcastTx({ signedTx }))
+      router.push('/tosign/broadcasting')
+      return
+    }
+
     if (!callback) throw new Error('No callback found.')
 
     setLoading(true)
@@ -160,6 +172,13 @@ export default function Page() {
           <Spacer space={32} />
 
           <ScrollView contentContainerStyle={{}}>
+            <Ruller />
+            <FormItemInline label="Signature Verification">
+              <View style={{ backgroundColor: 'white', width: 100, borderRadius: 20, alignContent: 'center', padding: 2 }}>
+                <Text.Body style={{ color: 'red', textAlign: 'center' }}>Unverified</Text.Body>
+              </View>
+            </FormItemInline>
+
             <Ruller />
 
             <FormItem label="Client name">
@@ -172,6 +191,12 @@ export default function Page() {
               <TextBodyWhite>{gasWanted?.toString()}</TextBodyWhite>
             </FormItemInline>
 
+            <Ruller />
+
+            <FormItemInline label="Broadcast">
+              <TextBodyWhite>{JSON.stringify(broadcast)}</TextBodyWhite>
+            </FormItemInline>
+
             {/* {sessionWanted &&
               <>
                 <FormItemInline label="Remember this permission" >
@@ -254,15 +279,13 @@ export default function Page() {
 
               <Ruller />
 
-              <FormItem label="Raw Transaction Data">
-                <TextBodyWhite>{txInput}</TextBodyWhite>
-              </FormItem>
+              <FormItem label="Raw Transaction Data">{txInput && <PrettyJSON data={JSON.parse(txInput || '')} />}</FormItem>
 
-              <Ruller />
+              {/* <Ruller /> */}
 
-              <FormItem label="Raw Signed Data">
-                <TextBodyWhite>{signedTx}</TextBodyWhite>
-              </FormItem>
+              {/* <FormItem label="Raw Signed Data">
+                <TextBodyWhite>{signedTx && <PrettyJSON data={JSON.parse(signedTx)} />}</TextBodyWhite>
+              </FormItem> */}
             </HiddenGroup>
           </ScrollView>
 

mobile/components/index.ts

@@ -8,6 +8,7 @@ export const Layout = { Container, Header, Body, BodyAlignedBotton, Footer }
 export * from './controls/toggle/Toggle'
 export * from './items'
 export * from './shared-components/UnifiedText'
+export * from './view'
 
 export { default as TextCopy } from './text/text-copy'
 export { default as ModalHeader } from './modal/ModalHeader'

mobile/components/view/index.tsx

@@ -0,0 +1,4 @@
+export { BroadcastingView } from './tx/broadcastingView'
+export { BroadcastingFailedView } from './tx/broadcastingFailedView'
+export { BroadcastingSuccessView } from './tx/broadcastingSuccessView'
+export { BroadcastingUndefinedView } from './tx/broadcastingUndefinedView'

mobile/components/view/tx/broadcastingFailedView.tsx

@@ -0,0 +1,147 @@
+import { Button, PrettyJSON, Spacer, Text } from '@/modules/ui-components'
+import React, { useEffect, useRef, useState } from 'react'
+import { View, Animated, Easing, StyleSheet, Vibration } from 'react-native'
+
+interface Prop {
+  onCancel: () => void
+  txResponse?: string
+}
+
+export function BroadcastingFailedView({ onCancel = () => {}, txResponse = '' }: Prop) {
+  const shakeAnim = useRef(new Animated.Value(0)).current
+  const fadeAnim = useRef(new Animated.Value(1)).current
+  const scaleAnim = useRef(new Animated.Value(1)).current
+
+  const [details, showDetails] = useState(false)
+
+  useEffect(() => {
+    Vibration.vibrate(500)
+
+    Animated.sequence([
+      Animated.parallel([
+        Animated.sequence([
+          Animated.timing(shakeAnim, {
+            toValue: 10,
+            duration: 100,
+            useNativeDriver: true
+          }),
+          Animated.timing(shakeAnim, {
+            toValue: -10,
+            duration: 100,
+            useNativeDriver: true
+          }),
+          Animated.timing(shakeAnim, {
+            toValue: 6,
+            duration: 100,
+            useNativeDriver: true
+          }),
+          Animated.timing(shakeAnim, {
+            toValue: -6,
+            duration: 100,
+            useNativeDriver: true
+          }),
+          Animated.timing(shakeAnim, {
+            toValue: 0,
+            duration: 100,
+            useNativeDriver: true
+          })
+        ]),
+        Animated.sequence([
+          Animated.timing(scaleAnim, {
+            toValue: 1.2,
+            duration: 300,
+            useNativeDriver: true
+          }),
+          Animated.timing(scaleAnim, {
+            toValue: 1,
+            duration: 300,
+            useNativeDriver: true
+          })
+        ])
+      ]),
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 500,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true
+      })
+    ]).start()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.center}>
+        <Animated.View
+          style={[
+            styles.xCircle,
+            {
+              transform: [{ translateX: shakeAnim }, { scale: scaleAnim }],
+              opacity: fadeAnim
+            }
+          ]}
+        >
+          <Text.Body style={styles.statusText}>✕</Text.Body>
+        </Animated.View>
+      </View>
+      <Text.Body style={styles.statusText}>Transaction Failed</Text.Body>
+      <Spacer space={56} />
+      <Button color="tertirary" onPress={() => showDetails(!details)}>
+        Show details...
+      </Button>
+
+      {details && <PrettyJSON data={JSON.parse(txResponse)} />}
+
+      <View style={styles.middleScreen}>
+        <View style={styles.botton}>
+          <Button color="primary" onPress={onCancel}>
+            Try Again
+          </Button>
+        </View>
+      </View>
+    </View>
+  )
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 120
+  },
+  middleScreen: {
+    flex: 1,
+    alignContent: 'flex-end',
+    marginTop: 42
+  },
+  center: {
+    alignItems: 'center',
+    textAlign: 'center'
+  },
+  failedText: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginTop: 10
+  },
+  xCircle: {
+    width: 80,
+    height: 80,
+    backgroundColor: '#e74c3c',
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#e74c3c',
+    shadowOpacity: 0.4,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    marginBottom: 20
+  },
+  statusText: {
+    color: '#fff',
+    fontWeight: 'bold',
+    textAlign: 'center'
+  },
+  botton: {
+    flex: 1,
+    alignContent: 'center',
+    justifyContent: 'flex-end'
+  }
+})

mobile/components/view/tx/broadcastingLayout.tsx

@@ -0,0 +1,46 @@
+import { Text } from '@/modules/ui-components'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+type Props = {
+  title: string
+  iconView: React.ReactNode
+  actions?: React.ReactNode
+  details?: React.ReactNode
+}
+
+export const BroadcastingLayout = ({ title = 'Title', iconView = null, actions = null, details = null }: Props) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.centerView}>
+        <View style={styles.title}>
+          <Text.H3>{title}</Text.H3>
+        </View>
+        <View style={styles.iconView}>{iconView}</View>
+      </View>
+
+      <View style={styles.details}>{details}</View>
+
+      <View style={styles.actions}>{actions}</View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignContent: 'center',
+    paddingTop: 80
+  },
+  centerView: {
+    alignItems: 'center'
+  },
+  title: {},
+  iconView: {
+    marginTop: 40
+  },
+  details: {
+    flex: 1
+  },
+  actions: {}
+})