fix: toggle testnet/mainnet mode

src/components/MarketSwitcher.tsx

@@ -59,7 +59,7 @@ type MarketLogoProps = {
 export const MarketLogo = ({ size, logo, testChainName }: MarketLogoProps) => {
   return (
     <Box sx={{ mr: 2, width: size, height: size, position: 'relative' }}>
-      <Box sx={{filter: 'brightness(0.7)'}}><img src={logo} alt="" width="100%" height="100%" /></Box>
+      <Box sx={{ filter: 'brightness(0.7)' }}><img src={logo} alt="" width="100%" height="100%" /></Box>
 
       {testChainName && (
         <Tooltip title={testChainName} arrow>
@@ -173,35 +173,36 @@ export const MarketSwitcher = () => {
         </Typography>
       </Box>
 
-      {availableMarkets.map((marketId: CustomMarket) => {
-        const { market, network } = getMarketInfoById(marketId);
-        const marketNaming = getMarketHelpData(market.marketTitle);
-        return (
-          <MenuItem
-            key={marketId}
-            data-cy={`marketSelector_${marketId}`}
-            value={marketId}
-            sx={{
-              '.MuiListItemIcon-root': { minWidth: 'unset' },
-              display: market.v3 ? 'flex' : 'none',
-            }}
-          >
-            <MarketLogo
-              size={32}
-              logo={network.networkLogoPath}
-              testChainName={marketNaming.testChainName}
-            />
-            <ListItemText sx={{ mr: 0 }}>
-              {marketNaming.name} {market.isFork ? 'Fork' : ''}
-            </ListItemText>
-            <ListItemText sx={{ textAlign: 'right' }}>
-              <Typography color="text.secondary" variant="description">
-                {marketNaming.testChainName}
-              </Typography>
-            </ListItemText>
-          </MenuItem>
-        );
-      })}
+      {availableMarkets
+        .map((marketId: CustomMarket) => {
+          const { market, network } = getMarketInfoById(marketId);
+          const marketNaming = getMarketHelpData(market.marketTitle);
+          return (
+            <MenuItem
+              key={marketId}
+              data-cy={`marketSelector_${marketId}`}
+              value={marketId}
+              sx={{
+                '.MuiListItemIcon-root': { minWidth: 'unset' },
+                display: market.v3 ? 'flex' : 'none',
+              }}
+            >
+              <MarketLogo
+                size={32}
+                logo={network.networkLogoPath}
+                testChainName={marketNaming.testChainName}
+              />
+              <ListItemText sx={{ mr: 0 }}>
+                {marketNaming.name} {market.isFork ? 'Fork' : ''}
+              </ListItemText>
+              <ListItemText sx={{ textAlign: 'right' }}>
+                <Typography color="text.secondary" variant="description">
+                  {marketNaming.testChainName}
+                </Typography>
+              </ListItemText>
+            </MenuItem>
+          );
+        })}
     </TextField>
   );
 };

src/components/TextWithTooltip.tsx

@@ -27,7 +27,12 @@ export const TextWithTooltip = ({
   const [open, setOpen] = useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box sx={{
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: "wrap",
+      gap: "3px"
+    }}>
       {text && <Typography {...rest}>{text}</Typography>}
 
       <ContentWithTooltip tooltipContent={<>{children}</>} open={open} setOpen={setOpen}>

src/components/primitives/WarningSnackbar.tsx

@@ -0,0 +1,32 @@
+import { Alert, Snackbar } from '@mui/material'
+import React from 'react'
+
+type TSnackbar = {
+    open: boolean;
+    message: string;
+}
+
+type TProps = {
+    snackbar: TSnackbar;
+    handleCloseSnackbar: () => void;
+}
+
+export default function WarningSnackbar({ snackbar, handleCloseSnackbar }: TProps) {
+    return (
+        <Snackbar
+            open={snackbar.open}
+            autoHideDuration={6000}
+            onClose={handleCloseSnackbar}
+            anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        >
+            <Alert
+                onClose={handleCloseSnackbar}
+                severity="warning"
+                variant="filled"
+                sx={{ width: '100%', alignItems: "center" }}
+            >
+                {snackbar.message}
+            </Alert>
+        </Snackbar>
+    )
+}

src/components/transactions/FlowCommons/TxModalDetails.tsx

@@ -144,8 +144,8 @@ export const DetailsNumberLineWithSub = ({
   loading = false,
 }: DetailsNumberLineWithSubProps) => {
   return (
-    <Row caption={description} captionVariant="description" mb={4} align="flex-start">
-      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+    <Row caption={description} captionVariant="description" mb={4} align="flex-start" flexWrap={'wrap'} gap={'5px'}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', marginLeft: 'auto' }}>
         {loading ? (
           <>
             <Skeleton variant="rectangular" height={20} width={100} sx={{ borderRadius: '4px' }} />

src/helpers/toggle-mode.tsx

@@ -0,0 +1,10 @@
+export const toggleMode = () => {
+    const isTestnetEnabled = localStorage.getItem('testnetsEnabled') === 'true';
+    const toggledTestnet = isTestnetEnabled ? "false" : "true";
+    localStorage.setItem('testnetsEnabled', toggledTestnet);
+
+    // Set window.location to trigger a page reload when navigating to the the dashboard
+    window.location.href = '/';
+
+    return toggledTestnet;
+};

src/hooks/useSnackbar.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+const snackbarInit = {
+    open: false,
+    message: ""
+}
+
+export default function useSnackbar() {
+    const [snackbar, setSnackbar] = useState(snackbarInit);
+
+    function handleCloseSnackbar() {
+        setSnackbar(state => ({ ...state, open: false }));
+    }
+
+    function handleOpenSnackbar({ message = "" }: { message: string }) {
+        setSnackbar({ open: true, message });
+    }
+
+    return {
+        snackbar,
+        setSnackbar,
+        handleCloseSnackbar,
+        handleOpenSnackbar
+    }
+}