Add header

src/components/AutoGasBanner.tsx

@@ -1,5 +1,4 @@
 import CloseCircle from '@assets/images/closeCircleFilled.svg'
-import Info from '@assets/images/info.svg'
 import Warning from '@assets/images/warning.svg'
 import {
   useMint,
@@ -38,6 +37,7 @@ import { ReAnimatedBox } from './AnimatedBox'
 import Box from './Box'
 import Text from './Text'
 import TouchableOpacityBox from './TouchableOpacityBox'
+import CircleLoader from './CircleLoader'
 
 const MIN_HEIGHT = 52
 
@@ -124,6 +124,7 @@ const Banner = ({ onLayout, ...rest }: BannerProps) => {
           url: '',
           additionalMessage: t('transactions.autoGasConvert', { symbol }),
           serializedTxs: [serializedTx],
+          header: t('transactions.autoGasConvertHeader'),
         })
         if (decision) {
           await sendAndConfirmRawTransaction(
@@ -185,7 +186,7 @@ const Banner = ({ onLayout, ...rest }: BannerProps) => {
           {error ? (
             <Warning width={24} height={24} />
           ) : (
-            <Info width={24} height={24} />
+            <CircleLoader loaderSize={24} />
           )}
         </Box>
         <Text

src/locales/en.ts

@@ -1099,5 +1099,6 @@ export default {
       'Recipient Account is empty, Double check the address before signing.',
     autoGasConvert:
       'Sign this transaction to convert {{ symbol }} into 0.02 SOL for gas.',
+    autoGasConvertHeader: 'Auto Gas Conversion: Low on SOL',
   },
 }

src/solana/WalletSignBottomSheet.tsx

@@ -61,6 +61,7 @@ const WalletSignBottomSheet = forwardRef(
       url: '',
       additionalMessage: '',
       serializedTxs: undefined,
+      header: undefined,
     })
 
     const itemsPerPage = 5
@@ -140,6 +141,7 @@ const WalletSignBottomSheet = forwardRef(
         warning,
         additionalMessage,
         serializedTxs,
+        header,
       }: WalletSignOpts) => {
         bottomSheetModalRef.current?.expand()
         setTotalSolFee(0)
@@ -150,6 +152,7 @@ const WalletSignBottomSheet = forwardRef(
           warning,
           additionalMessage,
           serializedTxs,
+          header,
         })
         const p = new Promise<boolean>((resolve) => {
           promiseResolve = resolve
@@ -249,6 +252,11 @@ const WalletSignBottomSheet = forwardRef(
               onLayout={handleContentLayout}
             >
               <Box marginBottom="l">
+                {walletSignOpts.header && (
+                  <Text variant="body1Medium" color="white" textAlign="center">
+                    {walletSignOpts.header}
+                  </Text>
+                )}
                 <Text
                   variant="body1Medium"
                   color="secondaryText"

src/solana/walletSignBottomSheetTypes.tsx

@@ -19,6 +19,7 @@ export type WalletSignOpts = {
   serializedTxs: Buffer[] | undefined
   warning?: string
   additionalMessage?: string
+  header?: string
 }
 
 export type WalletSignBottomSheetRef = {
@@ -27,6 +28,7 @@ export type WalletSignBottomSheetRef = {
     url,
     additionalMessage,
     serializedTxs,
+    header,
   }: WalletSignOpts) => Promise<boolean>
   hide: () => void
 }