From b71cf869c21597466f4cb3d4a218b1a2fbe5d33b Mon Sep 17 00:00:00 2001
From: Chewing Glass <chewinglass123@gmail.com>
Date: Tue, 24 Oct 2023 15:08:06 -0400
Subject: [PATCH] Add header

---
 src/components/AutoGasBanner.tsx          | 5 +++--
 src/locales/en.ts                         | 1 +
 src/solana/WalletSignBottomSheet.tsx      | 8 ++++++++
 src/solana/walletSignBottomSheetTypes.tsx | 2 ++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/AutoGasBanner.tsx b/src/components/AutoGasBanner.tsx
index 815e41df6..4c36dcb29 100644
--- a/src/components/AutoGasBanner.tsx
+++ b/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
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 05367f935..cb390fc7d 100644
--- a/src/locales/en.ts
+++ b/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',
   },
 }
diff --git a/src/solana/WalletSignBottomSheet.tsx b/src/solana/WalletSignBottomSheet.tsx
index bed2d673e..f3ca57621 100644
--- a/src/solana/WalletSignBottomSheet.tsx
+++ b/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"
diff --git a/src/solana/walletSignBottomSheetTypes.tsx b/src/solana/walletSignBottomSheetTypes.tsx
index cd538500a..ec3b6ff8f 100644
--- a/src/solana/walletSignBottomSheetTypes.tsx
+++ b/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
 }