update wallet lists to connect

fluidity-money · Dec 14, 2023 · 6e47c37 · 6e47c37
1 parent 6f0e6ca
commit 6e47c37
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 630 deletions.
diff --git a/...rboard/src/app/components/ConnectWallet/ConnectWalletModal/ConnectWalletModal.module.scss b/...rboard/src/app/components/ConnectWallet/ConnectWalletModal/ConnectWalletModal.module.scss
@@ -7,34 +7,11 @@
   width: 100%;
 }
 
-//.connected-wallet-modal-container {
-//    position: fixed;
-//    z-index: 100;
-//    width: 100%;
-//    height: 100%;
-//    top: 50%;
-//    left: 50%;
-//    transform: translate(-50%, -50%);
-//    background-color: transparent;
-//  }
-
-//  .connected-wallet-modal-container > div:last-child {
-//    width: 30%;
-//    min-width: 350px;
-//    background-color: rgb(29, 23, 23);
-//    padding: 30px;
-//    position: absolute;
-//    top: 50%;
-//    left: 50%;
-//    transform: translate(-50%, -50%);
-//  }
-
 .connect-wallet-modal-container {
   position: fixed;
   z-index: 100;
-  width: 30%;
   min-width: 300px;
-  max-width: 327px;
+  max-width: 431px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

diff --git a/web/leaderboard/src/app/components/ConnectWallet/ConnectWalletModal/ConnectWalletModal.tsx b/web/leaderboard/src/app/components/ConnectWallet/ConnectWalletModal/ConnectWalletModal.tsx
@@ -1,95 +1,81 @@
 import { Text } from "@fluidity-money/surfing";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState, useContext } from "react";
-import FluidityFacadeContext from "../../../context";
+import { useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-//import { chainType } from "~/util/chainUtils/chains";
+import { useConnect, useAccount } from "wagmi";
 
 import styles from "./ConnectWalletModal.module.scss";
-import { Options } from "../../../../pages/api/config";
-
-export type ChainType = "evm" | "solana";
-
-const chainType = (network: string): ChainType | undefined => {
-  switch (network) {
-    case "ethereum":
-    case "arbitrum":
-    case "polygon_zk":
-      return "evm";
-    case "solana":
-      return "solana";
-    default:
-      return undefined;
-  }
-};
 
 interface IConnectWalletModal {
   visible: boolean;
   close: () => void;
-  options: any;
 }
 
-type Wallet = {
-  name: string;
-  id: string;
-  description: string;
-  logo: string;
-};
-
-type LoaderData = {
-  network: string;
-  ethereumWallets: Wallet[];
-};
-
 const ConnectWalletModal = ({ visible, close }: IConnectWalletModal) => {
-  //  const { network } = useLoaderData<LoaderData>();
-  const router = useRouter();
-  //  const { network } = router.query;
-
   const [modal, setModal] = useState<React.ReactPortal | null>(null);
 
   const [configData, setConfigData] = useState<any>(null);
+  const { connect, connectors } = useConnect();
+  const { isConnected } = useAccount();
 
-  const EthWalletsMap = () => {
-    const { useConnectorType } = useContext(FluidityFacadeContext);
-    //const { ethereumWallets } = useLoaderData<LoaderData>();
-
-    // Checks if "metamask" option should be made available
-    // Extra utility specific to Ethereum
-    const hasEthereumContext = !!window.ethereum;
-
-    configData && console.log(configData["ethereum"].wallets);
+  useEffect(() => {
+    isConnected && close();
+  }, [isConnected]);
 
+  const EthWalletsMap = () => {
     return (
       <>
-        {configData &&
-          configData["ethereum"].wallets
-            .filter((wallet) => wallet.id !== "metamask" || hasEthereumContext)
-            .map((wallet) => (
-              <li
-                key={`wallet-${wallet.name}`}
-                onClick={() => {
-                  console.log(wallet.id);
-                  useConnectorType?.(wallet.id);
-                }}
-              >
-                <span>
-                  <img src={wallet.logo} />
-                  <Text
-                    size="sm"
-                    className={styles["connect-wallet-modal-names"]}
-                  >
-                    {wallet.name}
-                  </Text>
-                </span>
+        {connectors &&
+          connectors.map((connector) => (
+            <li
+              key={`wallet-${connector.name}`}
+              onClick={() => connect({ connector })}
+            >
+              <span>
+                {connector.name === "MetaMask" ? (
+                  <img src="/assets/wallets/eth_browser.svg" />
+                ) : (
+                  <img src="/assets/wallets/walletconnect.svg" />
+                )}
                 <Text
-                  size="xs"
-                  className={styles["connect-wallet-modal-status"]}
+                  size="sm"
+                  className={styles["connect-wallet-modal-names"]}
                 >
-                  <i></i>
+                  {connector.name}
                 </Text>
-              </li>
-            ))}
+              </span>
+              <Text size="xs" className={styles["connect-wallet-modal-status"]}>
+                <i></i>
+              </Text>
+            </li>
+          ))}
+        <li
+          key={`wallet-OKX-Wallet`}
+          onClick={() => window?.open("https://www.okx.com/web3", "_blank")}
+        >
+          <span>
+            <img src="/assets/wallets/okx.svg" />
+            <Text size="sm" className={styles["connect-wallet-modal-names"]}>
+              OKX Wallet
+            </Text>
+          </span>
+          <Text size="xs" className={styles["connect-wallet-modal-status"]}>
+            <i></i>
+          </Text>
+        </li>
+        <li
+          key={`wallet-Coin98`}
+          onClick={() => window?.open("https://wallet.coin98.com/", "_blank")}
+        >
+          <span>
+            <img src="/assets/wallets/coin98.svg" />
+            <Text size="sm" className={styles["connect-wallet-modal-names"]}>
+              Coin98
+            </Text>
+          </span>
+          <Text size="xs" className={styles["connect-wallet-modal-status"]}>
+            <i></i>
+          </Text>
+        </li>
       </>
     );
   };
@@ -101,7 +87,7 @@ const ConnectWalletModal = ({ visible, close }: IConnectWalletModal) => {
     [visible]
   );
 
-  //trying receive data from config.toml
+  //receive data from config.toml
 
   useEffect(() => {
     async function fetchConfig() {

diff --git a/web/leaderboard/src/app/components/Profile/index.tsx b/web/leaderboard/src/app/components/Profile/index.tsx
@@ -1,7 +1,6 @@
-import { useEffect, useState, useContext } from "react";
+import { useState } from "react";
 import { GeneralButton, Modal } from "@fluidity-money/surfing";
-import { useAccount, useConnect, useDisconnect } from "wagmi";
-import { InjectedConnector } from "wagmi/connectors/injected";
+import { useAccount, useDisconnect } from "wagmi";
 
 import styles from "./Profile.module.scss";
 import {
@@ -12,9 +11,6 @@ import {
 
 export function Profile() {
   const { address, isConnected, isConnecting } = useAccount();
-  const { connect } = useConnect({
-    connector: new InjectedConnector(),
-  });
   const { disconnect } = useDisconnect();
 
   const [connectedWalletModalVisibility, setConnectedWalletModalVisibility] =
@@ -36,44 +32,25 @@ export function Profile() {
             className="connect-wallet-btn connected"
           />
         )}
-        {/*Connected to {address}
-        {/*{address && (
-          <ConnectedWallet
-            address={address}
-            callback={() => {
-              setWalletModalVisibility(true);
-            }}
-          />
-        )}*/}
-        {/*<ConnectedWallet
-          address={address}
-          callback={() => setWalletModalVisibility(true)}
-        />*/}
 
-        {/* Connect Wallet Modal */}
+        {/* Connected Wallet Modal */}
         <Modal id="connect-wallet" visible={connectedWalletModalVisibility}>
           <div className="cover">
             <ConnectedWalletModal
               visible={connectedWalletModalVisibility}
               close={() => setConnectedWalletModalVisibility(false)}
-              address={address}
-              disconnect={() => disconnect()}
+              address={`0x${address}`}
+              disconnect={() => {
+                disconnect();
+                setWalletModalVisibility(false);
+              }}
             />
           </div>
         </Modal>
       </div>
     );
   return (
     <div>
-      {/*<GeneralButton
-        type={isConnected ? "transparent" : "primary"}
-        size={"medium"}
-        onClick={() => connect()}
-        //  handleClick={() => setWalletModalVisibility(true)}
-        className={styles.connected_wallet}
-      >
-        Connect Wallet
-      </GeneralButton>*/}
       <GeneralButton
         type={isConnected || isConnecting ? "transparent" : "primary"}
         size={"medium"}
@@ -90,8 +67,6 @@ export function Profile() {
           <ConnectWalletModal
             visible={walletModalVisibility}
             close={() => setWalletModalVisibility(false)}
-            //onClick={() => connect()}
-            //connect={connect}
           />
         </div>
       </Modal>

diff --git a/web/leaderboard/src/app/layout.tsx b/web/leaderboard/src/app/layout.tsx
@@ -1,8 +1,6 @@
 import type { Metadata } from "next";
 import { inter, spline, aeonik } from "./config";
 import { Providers } from "./providers";
-import { ApolloProvider } from "@apollo/client";
-import { client } from "./utils/client";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -17,12 +15,7 @@ function RootLayout({ children }: { children: React.ReactNode }) {
       className={`${inter.className} ${spline.className} ${aeonik.className}`}
     >
       <body>
-        <Providers>
-          {" "}
-          {/*<OptionsContext.Provider value={options.config}>*/}
-          {children}
-          {/*</OptionsContext.Provider>*/}
-        </Providers>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );

diff --git a/web/leaderboard/src/app/providers.tsx b/web/leaderboard/src/app/providers.tsx
@@ -7,33 +7,54 @@ import { publicProvider } from "wagmi/providers/public";
 import { ApolloProvider } from "@apollo/client";
 import { client } from "./utils/client";
 import { ChainContextProvider } from "./queries/ChainContext";
-import { WalletProvider } from "@solana/wallet-adapter-react";
-import { PhantomWalletAdapter } from "@solana/wallet-adapter-wallets";
+
+import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
+import { InjectedConnector } from "wagmi/connectors/injected";
+import { MetaMaskConnector } from "wagmi/connectors/metaMask";
+import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 
 const { chains, publicClient, webSocketPublicClient } = configureChains(
   [mainnet],
   [publicProvider()]
 );
 
+const walletconnectId = process.env.FLU_WALLETCONNECT_ID;
+
 const config = createConfig({
   autoConnect: true,
+  connectors: [
+    new MetaMaskConnector({ chains }),
+    //new CoinbaseWalletConnector({
+    //  chains,
+    //  options: {
+    //    appName: "wagmi",
+    //  },
+    //}),
+    new WalletConnectConnector({
+      chains,
+      options: {
+        projectId: walletconnectId,
+      },
+    }),
+    //new InjectedConnector({
+    //  chains,
+    //  options: {
+    //    name: "Injected",
+    //    shimDisconnect: true,
+    //  },
+    //}),
+  ],
   publicClient,
   webSocketPublicClient,
 });
 
-const wallets = [new PhantomWalletAdapter()];
-
 export function Providers({ children }: { children: React.ReactNode }) {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
   return (
     <ApolloProvider client={client}>
       <ChainContextProvider>
-        <WagmiConfig config={config}>
-          <WalletProvider wallets={wallets}>
-            {mounted && children}
-          </WalletProvider>
-        </WagmiConfig>
+        <WagmiConfig config={config}>{mounted && children}</WagmiConfig>
       </ChainContextProvider>
     </ApolloProvider>
   );

diff --git a/web/leaderboard/src/app/queries/ChainContext.tsx b/web/leaderboard/src/app/queries/ChainContext.tsx
@@ -4,7 +4,6 @@ import {
   LeaderboardRanking,
   LeaderboardRankingRes,
 } from "./useLeaderboardRanking";
-import EthereumProvider from "../../contexts/EthereumProvider";
 
 export type Network = "arbitrum" | "etheruim" | "solana";
 
@@ -34,7 +33,6 @@ const ChainContextProvider = ({
   children: JSX.Element | JSX.Element[];
 }) => {
   const network: Network = "arbitrum";
-  const ProviderComponent = EthereumProvider(network, "arbitrum");
 
   const [leaderboardRanking, setLeaderboardRanking] = useState<
     LeaderboardRanking[]
@@ -61,7 +59,7 @@ const ChainContextProvider = ({
 
   return (
     <ChainContext.Provider value={{ network, apiState }}>
-      <ProviderComponent>{children}</ProviderComponent>
+      {children}
     </ChainContext.Provider>
   );
 };