fix: All fixes and changes made

.vscode/settings.json

@@ -15,4 +15,7 @@
   "typescript.suggest.paths": true,
   "typescript.suggest.enabled": true,
   "typescript.suggest.completeFunctionCalls": true,
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
 }

packages/app/src/systems/Send/components/NetworkStatus/NetworkStatus.tsx

@@ -0,0 +1,56 @@
+import { cssObj } from '@fuel-ui/css';
+import { Box, Text } from '@fuel-ui/react';
+import { useState } from 'react';
+import { MotionStack, animations } from '~/systems/Core';
+
+type NetworkStatusProps = {
+  isVisible?: boolean;
+};
+
+type NetworkStatus = 'busy' | 'normal';
+
+export const NetworkStatus = ({ isVisible = false }: NetworkStatusProps) => {
+  const [status, _setStatus] = useState<NetworkStatus>('normal');
+  return (
+    <MotionStack
+      {...animations.slideInRight()}
+      style={{ visibility: isVisible ? 'visible' : 'hidden' }}
+    >
+      <Box css={styles.bar}>
+        <Text css={styles.title}>Status:</Text>
+        <Box>
+          <Box css={status === 'normal' ? styles.normal : styles.busy} />
+        </Box>
+      </Box>
+    </MotionStack>
+  );
+};
+
+const styles = {
+  title: cssObj({
+    pt: '$2',
+    color: '$intentsBase12',
+    lineHeight: '$none',
+  }),
+  busy: cssObj({
+    width: '$3',
+    height: '$3',
+    backgroundColor: '$scalesRed9',
+    borderRadius: '$full',
+    alignItems: 'center',
+  }),
+  normal: cssObj({
+    width: '$3',
+    height: '$3',
+    backgroundColor: '$scalesGreen9',
+    borderRadius: '$full',
+    alignItems: 'center',
+  }),
+  bar: cssObj({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: '$2',
+  }),
+};

packages/app/src/systems/Send/components/NetworkStatus/index.tsx

@@ -0,0 +1 @@
+export * from './NetworkStatus';

packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx

@@ -1,9 +1,10 @@
 import { cssObj } from '@fuel-ui/css';
-import { Alert, Box, Form, Input, Text } from '@fuel-ui/react';
+import { Alert, Box, Form, HStack, Input, Text } from '@fuel-ui/react';
 import { motion } from 'framer-motion';
 import { type BN, bn } from 'fuels';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { AssetSelect } from '~/systems/Asset';
+
 import {
   ControlledField,
   Layout,
@@ -16,6 +17,7 @@ import { useController, useWatch } from 'react-hook-form';
 import { InputAmount } from '~/systems/Core/components/InputAmount/InputAmount';
 import { TxFeeOptions } from '~/systems/Transaction/components/TxFeeOptions/TxFeeOptions';
 import type { UseSendReturn } from '../../hooks';
+import { NetworkStatus } from '../NetworkStatus';
 
 const MotionContent = motion(Layout.Content);
 
@@ -198,9 +200,12 @@ export function SendSelect({
           regularTip &&
           fastTip && (
             <MotionStack {...animations.slideInTop()} gap="$3">
-              <Text as="span" css={styles.title}>
-                Fee (network)
-              </Text>
+              <HStack gap="$3" style={styles.feeBar}>
+                <Text as="span" css={styles.title}>
+                  Fee (network)
+                </Text>
+                <NetworkStatus />
+              </HStack>
               <TxFeeOptions
                 initialAdvanced={false}
                 baseFee={baseFee}
@@ -255,4 +260,9 @@ const styles = {
     color: '$intentsWarning8',
     marginTop: '$2',
   }),
+  feeBar: cssObj({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  }),
 };