CP-9422 Add screens to mobile for gasless flow (#2314)

ava-labs · Feb 28, 2025 · b3f8216 · b3f8216
1 parent 9e3459d
commit b3f8216
Show file tree

Hide file tree

Showing 14 changed files with 718 additions and 395 deletions.
diff --git a/packages/core-mobile/.env.example b/packages/core-mobile/.env.example
@@ -49,4 +49,7 @@ DD_SITE=
 
 # public key and key id for analytics data encryption
 ANALYTICS_ENCRYPTION_KEY=
-ANALYTICS_ENCRYPTION_KEY_ID=
+ANALYTICS_ENCRYPTION_KEY_ID=
+
+# required for gasless
+GAS_STATION_URL=
diff --git a/packages/core-mobile/__mocks__/react-native-config.js b/packages/core-mobile/__mocks__/react-native-config.js
@@ -17,5 +17,6 @@ export default {
   ANALYTICS_ENCRYPTION_KEY: 'MOCK_ANALYTICS_ENCRYPTION_KEY',
   ANALYTICS_ENCRYPTION_KEY_ID: 'MOCK_ANALYTICS_ENCRYPTION_KEY_ID',
   GOOGLE_OAUTH_CLIENT_WEB_ID: 'MOCK_GOOGLE_OAUTH_CLIENT_WEB_ID',
-  GOOGLE_OAUTH_CLIENT_IOS_ID: 'MOCK_GOOGLE_OAUTH_CLIENT_IOS_ID'
+  GOOGLE_OAUTH_CLIENT_IOS_ID: 'MOCK_GOOGLE_OAUTH_CLIENT_IOS_ID',
+  GAS_STATION_URL: 'MOCK_GAS_STATION_URL'
 }
diff --git a/packages/core-mobile/app/screens/rpc/components/v2/AlertBanner.tsx b/packages/core-mobile/app/screens/rpc/components/v2/AlertBanner.tsx
@@ -3,34 +3,54 @@ import { Alert, AlertType } from '@avalabs/vm-module-types'
 import InfoSVG from 'components/svg/InfoSVG'
 import React, { useMemo } from 'react'
 
-const AlertBanner = ({ alert }: { alert: Alert }): JSX.Element | null => {
+interface AlertBannerProps {
+  alert: Alert
+  customStyle?: {
+    borderColor?: string
+    backgroundColor?: string
+    iconColor?: string
+  }
+}
+
+const AlertBanner = ({
+  alert,
+  customStyle
+}: AlertBannerProps): JSX.Element | null => {
   const {
     theme: { colors }
   } = useTheme()
 
   const textStyle = { color: '$black', fontSize: 13, lineHeight: 16 }
   const icon = useMemo(() => {
+    const iconColor = customStyle?.iconColor || colors.$black
+
     if (alert.type === AlertType.DANGER) {
-      return <Icons.Social.RemoveModerator color={colors.$black} />
+      return <Icons.Social.RemoveModerator color={iconColor} />
     }
 
     if (alert.type === AlertType.WARNING) {
-      return <Icons.Device.IconGPPMaybe color={colors.$black} />
+      return <Icons.Device.IconGPPMaybe color={iconColor} />
     }
 
-    return <InfoSVG color={colors.$warningLight} size={24} />
-  }, [alert, colors])
+    return (
+      <InfoSVG
+        color={customStyle?.iconColor || colors.$warningLight}
+        size={24}
+      />
+    )
+  }, [alert, colors, customStyle?.iconColor])
 
   if (alert.type === AlertType.INFO) {
     return (
       <View
         sx={{
           flexDirection: 'row',
-          borderColor: '$warningLight',
+          borderColor: customStyle?.borderColor || '$warningLight',
           borderRadius: 8,
           borderWidth: 1,
           padding: 16,
-          backgroundColor: alpha(colors.$warningDark, 0.1),
+          backgroundColor:
+            customStyle?.backgroundColor || alpha(colors.$warningDark, 0.1),
           alignItems: 'center',
           gap: 12
         }}>
@@ -49,7 +69,8 @@ const AlertBanner = ({ alert }: { alert: Alert }): JSX.Element | null => {
         padding: 16,
         borderRadius: 8,
         backgroundColor:
-          alert.type === AlertType.DANGER ? '$dangerLight' : '$warningLight',
+          customStyle?.backgroundColor ||
+          (alert.type === AlertType.DANGER ? '$dangerLight' : '$warningLight'),
         flexDirection: 'row',
         alignItems: 'center',
         gap: 12