Merge pull request #79 from FuelLabs/temp/mainnet

feat: added mobile responsiveness
FuelLabs · Oct 31, 2024 · 3f3e408 · 3f3e408
2 parents bb86d7a + c8bb62d
commit 3f3e408
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/frontend/src/components/home/Home.tsx b/frontend/src/components/home/Home.tsx
@@ -55,9 +55,5 @@ const styles = {
     color: "#aaa",
     fontFamily: "pressStart2P",
     lineHeight: "24px",
-    display: "none",
-    "@sm": {
-      display: "block",
-    },
   }),
 };
diff --git a/frontend/src/components/show/WalletInfo.tsx b/frontend/src/components/show/WalletInfo.tsx
@@ -14,15 +14,17 @@ export default function WalletInfo() {
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
   };
-
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isMobile = /(iphone|android|windows phone)/.test(userAgent);
   return (
     <Box css={styles.container}>
       <Flex direction={"column"} justify="space-around">
         <Box
           onClick={() => copyToClipboard(wallet ? wallet.address.toB256() : "")}
           css={styles.box}
         >
-          Wallet: {wallet && getTruncatedAddress(wallet.address.toB256())}
+          {`${isMobile ? "W:" : "Wallet:"}`}{" "}
+          {wallet && getTruncatedAddress(wallet.address.toB256())}
         </Box>
         <Box css={styles.disconnect}>
           <span
@@ -35,8 +37,8 @@ export default function WalletInfo() {
           </span>
         </Box>
         <Box css={styles.box}>
-          Balance: {balance?.isZero() ? "0" : balance?.format({ precision: 6 })}{" "}
-          ETH
+          {`${isMobile ? "B:" : "Balance:"}`}{" "}
+          {balance?.isZero() ? "0" : balance?.format({ precision: 6 })} ETH
         </Box>
       </Flex>
     </Box>
@@ -56,7 +58,7 @@ const styles = {
   }),
   disconnect: cssObj({
     fontFamily: "pressStart2P",
-    fontSize: "12px",
+    fontSize: "10px",
     textAlign: "right",
     lineHeight: "120%",
     textDecoration: "underline",
@@ -71,19 +73,23 @@ const styles = {
     display: "flex",
     border: "3px solid #754a1e",
     borderRadius: "8px",
-    height: "100px",
-    width: "300px",
+    height: "80px",
+    width: "fit-content",
     alignItems: "center",
     background: "#ac7339",
     position: "fixed",
-    bottom: "0",
+    bottom: "105px",
     left: "0",
+    px: "8px",
     "@sm": {
       position: "relative",
       top: "-214px",
+      bottom: "0",
       justifyContent: "center",
       ml: "68.2%",
       width: "312px",
+      px: "0px",
+      height: "100px",
     },
   }),
   playerInfo: cssObj({

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -67,14 +67,15 @@ const FUEL_CONFIG = createFuelConfig(() => {
     projectId: WalletConnectProjectId,
     ...externalConnectorConfig,
   });
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isMobile = /(iphone|android|windows phone)/.test(userAgent);
 
   return {
     connectors: [
       fueletWalletConnector,
       walletConnectConnector,
       solanaConnector,
-      fuelWalletConnector,
-      bakoSafeConnector,
+      ...(isMobile ? [] : [fuelWalletConnector, bakoSafeConnector]),
     ],
   };
 });