feat: added wallet dislay UI, EVM/SVM connectors

frontend/src/App.tsx

@@ -15,7 +15,6 @@ import {
   CONTRACT_ID,
   FARM_COIN_ASSET,
   FARM_COIN_ASSET_ID,
-  FUEL_PROVIDER_URL,
   // VERCEL_ENV,
 } from "./constants.ts";
 import "./App.css";
@@ -74,10 +73,8 @@ function App() {
     async function getAssetId() {
       if (contract) {
         const { value } = await contract.functions.get_asset_id().get();
-        // console.log("VALUE:", value)
         setFarmCoinAssetId(value.bits);
         console.log("FARM COIN ASSET ID:", value.bits);
-        console.log("FARM COIN ASSET ID:");
       }
     }
     getAssetId();

frontend/src/components/NewPlayer.tsx

@@ -24,6 +24,7 @@ export default function NewPlayer({ contract, updatePageNum }: NewPlayerProps) {
 
   async function getBalance() {
     const thisWallet = wallet ?? contract?.account;
+    console.log(wallet, "wallet");
     const baseAssetId = thisWallet?.provider.getBaseAssetId();
     const balance = await thisWallet!.getBalance(baseAssetId);
     const balanceNum = balance?.toNumber();
@@ -58,46 +59,39 @@ export default function NewPlayer({ contract, updatePageNum }: NewPlayerProps) {
   return (
     <>
       <div className="new-player-modal">
-        {status === 'none' && hasFunds && (
+        {status === "none" && hasFunds && (
           <Button css={buttonStyle} onPress={handleNewPlayer}>
             Make A New Player
           </Button>
         )}
-        {status === 'none' && !hasFunds && (
+        {status === "none" && !hasFunds && (
           <BoxCentered css={styles.container}>
             You need some ETH to play:
-            <Link
-              isExternal
-              href={`${TESTNET_FAUCET_URL}${
-                contract && contract.account
-                  ? `?address=${contract.account.address.toAddress()}`
-                  : ''
-              }`}
-            >
+            <Link isExternal href={`https://app.fuel.network/bridge`}>
               <Button css={styles.link} variant="link">
-                Go to Faucet
+                Go to Bridge
               </Button>
             </Link>
             <Button css={buttonStyle} onPress={getBalance}>
               Recheck balance
             </Button>
           </BoxCentered>
         )}
-        {status === 'error' && (
+        {status === "error" && (
           <div>
             <p>Something went wrong!</p>
             <Button
               css={buttonStyle}
               onPress={() => {
-                setStatus('none');
+                setStatus("none");
                 updatePageNum();
               }}
             >
               Try Again
             </Button>
           </div>
         )}
-        {status === 'loading' && <Loading />}
+        {status === "loading" && <Loading />}
       </div>
     </>
   );

frontend/src/components/show/Info.tsx

@@ -10,6 +10,7 @@ import type {
 import GithubRepo from './GithubRepo';
 import Inventory from './Inventory';
 import ShowPlayerInfo from './ShowPlayerInfo';
+import WalletInfo from './WalletInfo';
 
 interface InfoProps {
   player: PlayerOutput | null;
@@ -39,7 +40,22 @@ export default function Info({
           farmCoinAssetID={farmCoinAssetID}
         />
       </Box>
-      <Inventory seeds={seeds} items={items} />
+      <Box css={styles.playeriInfo}>
+        {/* <GithubRepo />
+        <ShowPlayerInfo
+          player={player}
+          contract={contract}
+          updateNum={updateNum}
+          farmCoinAssetID={farmCoinAssetID}
+        /> */}
+        <Inventory seeds={seeds} items={items} />
+        <WalletInfo
+          player={player}
+          contract={contract}
+          updateNum={updateNum}
+          farmCoinAssetID={farmCoinAssetID}
+        />
+      </Box>
     </Box>
   );
 }
@@ -66,4 +82,17 @@ const styles = {
       width: '100%',
     },
   }),
+  playeriInfo: cssObj({
+    display: 'flex',
+    flexDirection: 'column-reverse',
+    position: 'fixed',
+    right: '0',
+    top: '0',
+    width: '270px',
+    '@sm': {
+      position: 'relative',
+      flexDirection: 'column',
+      width: '100%',
+    },
+  }),
 };

frontend/src/components/show/Inventory.tsx

@@ -42,7 +42,7 @@ const styles = {
     left: '0',
     '@sm': {
       position: 'relative',
-      top: '-108px',
+      top: '-214px',
       justifyContent: 'center',
       ml: '82.2%',
       width: '172px',

frontend/src/components/show/WalletInfo.tsx

@@ -0,0 +1,130 @@
+import { cssObj } from "@fuel-ui/css";
+import { Flex, Box } from "@fuel-ui/react";
+import type { BytesLike } from "fuels";
+import {
+  useWallet,
+  useIsConnected,
+  useNetwork,
+  useBalance,
+  useDisconnect,
+} from "@fuels/react";
+
+import type {
+  FarmContract,
+  PlayerOutput,
+} from "../../sway-api/contracts/FarmContract";
+
+interface PlayerProps {
+  player: PlayerOutput | null;
+  contract: FarmContract | null;
+  updateNum: number;
+  farmCoinAssetID: BytesLike;
+}
+
+export default function WalletInfo({
+  player,
+  contract,
+  updateNum,
+  farmCoinAssetID,
+}: PlayerProps) {
+  let valSold;
+  if (player !== null) {
+    valSold = parseFloat(player.total_value_sold.format().toLocaleString());
+  }
+  const { wallet, isLoading: isWalletLoading } = useWallet();
+  const getTruncatedAddress = (address: string) => {
+    return address.slice(0, 6) + "..." + address.slice(-4);
+  };
+  const { balance } = useBalance({
+    address: wallet?.address.toB256(),
+  });
+  const { disconnect } = useDisconnect();
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  return (
+    <Box css={styles.container}>
+      <Flex direction={"column"} justify="space-around">
+        <Box css={styles.box}>
+          Wallet: {getTruncatedAddress(wallet.address.toB256())}
+        </Box>
+        <Box css={styles.disconnect}>
+          <span
+            style={{width: "fit-content", cursor: "pointer"}}
+            onClick={() => {
+              disconnect();
+            }}
+          >
+            Disconnect
+          </span>
+        </Box>
+        <Box
+          onClick={() => copyToClipboard(wallet.address.toB256())}
+          css={styles.box}
+        >
+          Balance: {balance?.isZero() ? "0" : balance?.format({ precision: 6 })}{" "}
+          ETH
+        </Box>
+      </Flex>
+    </Box>
+  );
+}
+
+const styles = {
+  box: cssObj({
+    fontFamily: "pressStart2P",
+    fontSize: "$xs",
+    textAlign: "left",
+    lineHeight: "120%",
+    "@sm": {
+      maxWidth: "none",
+      fontSize: "$sm",
+    },
+  }),
+  disconnect: cssObj({
+    fontFamily: "pressStart2P",
+    fontSize: "12px",
+    textAlign: "right",
+    lineHeight: "120%",
+    textDecoration: "underline",
+    mb: "8px",
+    "@sm": {
+      maxWidth: "none",
+      fontSize: "12px",
+      mb: "8px",
+    },
+  }),
+  container: cssObj({
+    display: "flex",
+    border: "3px solid #754a1e",
+    borderRadius: "8px",
+    height: "100px",
+    width: "300px",
+    alignItems: "center",
+    background: "#ac7339",
+    position: "fixed",
+    bottom: "0",
+    left: "0",
+    "@sm": {
+      position: "relative",
+      top: "-214px",
+      justifyContent: "center",
+      ml: "68.2%",
+      width: "312px",
+    },
+  }),
+  playerInfo: cssObj({
+    background: "#ac7339",
+    height: "40px",
+    display: "flex",
+    py: "10px",
+    pl: "20px",
+    borderRadius: "8px",
+    border: "3px solid #754a1e",
+    "@sm": {
+      width: "280px",
+      height: "80px",
+    },
+  }),
+};

frontend/src/main.tsx

@@ -1,21 +1,93 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { defaultConnectors } from "@fuels/connectors";
-import { FuelProvider } from "@fuels/react";
+import {
+  BakoSafeConnector,
+  BurnerWalletConnector,
+  createConfig as createFuelConfig,
+  FueletWalletConnector,
+  FuelWalletConnector,
+  SolanaConnector,
+  WalletConnectConnector,
+  defaultConnectors
+} from "@fuels/connectors";import { FuelProvider } from "@fuels/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Provider, CHAIN_IDS } from "fuels";
+import { FUEL_PROVIDER_URL } from './constants.ts';
+import { createConfig, http, injected } from "@wagmi/core";
+import { mainnet } from "@wagmi/core/chains";
+import { walletConnect } from "@wagmi/connectors";
 
 import './index.css'
 import App from './App.tsx'
 
 const queryClient = new QueryClient();
+const networks = [
+  {
+    chainId: CHAIN_IDS.fuel.mainnet,
+    url: FUEL_PROVIDER_URL,
+  },
+];
+// Creates a protection for SRR
+const FUEL_CONFIG = createFuelConfig(() => {
+  const WalletConnectProjectId = "35b967d8f17700b2de24f0abee77e579";
+  const wagmiConfig = createConfig({
+    syncConnectedChain: false,
+    chains: [mainnet],
+    transports: {
+      [mainnet.id]: http(),
+    },
+    connectors: [
+      injected({ shimDisconnect: false }),
+      walletConnect({
+        projectId: WalletConnectProjectId,
+        metadata: {
+          name: "Sway Farm",
+          description: "Farm 🍅 on the Fuel network.",
+          url: "https://swayfarm.xyz/",
+          icons: ["https://connectors.fuel.network/logo_white.png"],
+        },
+      }),
+    ],
+  });
 
+  const fuelProvider = Provider.create(FUEL_PROVIDER_URL);
+
+  const externalConnectorConfig = {
+    chainId: CHAIN_IDS.fuel.mainnet,
+    fuelProvider,
+  };
+
+  const fueletWalletConnector = new FueletWalletConnector();
+  const fuelWalletConnector = new FuelWalletConnector();
+  const bakoSafeConnector = new BakoSafeConnector();
+  const walletConnectConnector = new WalletConnectConnector({
+    projectId: WalletConnectProjectId,
+    wagmiConfig: wagmiConfig as any,
+    ...externalConnectorConfig,
+  });
+  const solanaConnector = new SolanaConnector({
+    projectId: WalletConnectProjectId,
+    ...externalConnectorConfig,
+  });
+
+  return {
+    connectors: [
+      fueletWalletConnector,
+      walletConnectConnector,
+      solanaConnector,
+      fuelWalletConnector, 
+      bakoSafeConnector,
+    ],
+  };
+});
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <FuelProvider
-        fuelConfig={{
-          connectors: defaultConnectors(),
-        }}
+        networks={networks}
+        fuelConfig={FUEL_CONFIG}
+        uiConfig={{ suggestBridge: false }}
+        theme="dark"
       >
         <App />
       </FuelProvider>