feat: add evm connection

app/components/ethereumConnect.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import React, { FunctionComponent } from "react";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import styles from "../styles/components/ethereumConnect.module.css";
+import Button from "./button";
+
+type EthereumConnectProps = {
+  title: string;
+  onClick?: () => void;
+  updateEthStatus: (_: string) => void;
+};
+
+const EthereumConnect: FunctionComponent<EthereumConnectProps> = ({
+  title,
+  updateEthStatus,
+}) => {
+  return (
+    <ConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        authenticationStatus,
+        mounted,
+      }) => {
+        // Note: If your app doesn't use authentication, you
+        // can remove all 'authenticationStatus' checks
+        const ready = mounted && authenticationStatus !== "loading";
+        const connected =
+          ready &&
+          account &&
+          chain &&
+          (!authenticationStatus || authenticationStatus === "authenticated");
+
+        return (
+          <div
+            className={styles.connectButton}
+            {...(!ready && {
+              "aria-hidden": true,
+              style: {
+                opacity: 0,
+                pointerEvents: "none",
+                userSelect: "none",
+              },
+            })}
+          >
+            {(() => {
+              if (!connected) {
+                return (
+                  <Button onClick={openConnectModal}>
+                    {title ? title : "Connect Wallet"}
+                  </Button>
+                );
+              } else if (connected) {
+                updateEthStatus(account.address);
+              }
+
+              if (chain.unsupported) {
+                return (
+                  <button onClick={openChainModal} type="button">
+                    Wrong network
+                  </button>
+                );
+              }
+
+              return (
+                <div style={{ display: "flex", gap: 12 }}>
+                  <button
+                    onClick={openChainModal}
+                    style={{ display: "flex", alignItems: "center" }}
+                    type="button"
+                  >
+                    {chain.hasIcon && (
+                      <div
+                        style={{
+                          background: chain.iconBackground,
+                          width: 12,
+                          height: 12,
+                          borderRadius: 999,
+                          overflow: "hidden",
+                          marginRight: 4,
+                        }}
+                      >
+                        {chain.iconUrl && (
+                          <img
+                            alt={chain.name ?? "Chain icon"}
+                            src={chain.iconUrl}
+                            style={{ width: 12, height: 12 }}
+                          />
+                        )}
+                      </div>
+                    )}
+                    {chain.name}
+                  </button>
+
+                  <button onClick={openAccountModal} type="button">
+                    {account.displayName}
+                    {account.displayBalance
+                      ? ` (${account.displayBalance})`
+                      : ""}
+                  </button>
+                </div>
+              );
+            })()}
+          </div>
+        );
+      }}
+    </ConnectButton.Custom>
+  );
+};
+
+export default EthereumConnect;

app/page.tsx

@@ -6,6 +6,7 @@ import Button from "./components/button";
 import EthButton from "./components/ethButton";
 import Stats from "./components/stats";
 import Countdown from "./components/countdown";
+import EthereumConnect from "./components/ethereumConnect";
 
 export default function Home() {
   return (
@@ -18,6 +19,10 @@ export default function Home() {
           >
             Connect wallet
           </Button>
+          <EthereumConnect
+            title="Connect with Ethereum"
+            updateEthStatus={() => console.log("update status")}
+          />
           <Button
             onClick={() => console.log("clicked")}
             icon={<img src="/visuals/eth.svg" width={14} />}

app/provider.tsx

@@ -8,6 +8,26 @@ import {
   jsonRpcProvider,
 } from "@starknet-react/core";
 import { getConnectors } from "@/utils/starknetConnectorsWrapper";
+import "@rainbow-me/rainbowkit/styles.css";
+import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { WagmiProvider, createConfig, http } from "wagmi";
+import {
+  mainnet as EthMainnet,
+  sepolia as EthSepolia,
+  arbitrum,
+  base,
+  blast,
+  linea,
+  manta,
+  mantle,
+  metis,
+  mode,
+  optimism,
+  polygon,
+  zkSync,
+  scroll,
+} from "wagmi/chains";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function Providers({ children }: any) {
@@ -19,13 +39,43 @@ export function Providers({ children }: any) {
       nodeUrl: process.env.NEXT_PUBLIC_RPC_URL as string,
     }),
   });
+
+  // ethereum connection
+  const config = getDefaultConfig({
+    appName: "Eth Button",
+    projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_APP_ID as string,
+    chains: [
+      EthMainnet,
+      EthSepolia,
+      arbitrum,
+      optimism,
+      polygon,
+      base,
+      blast,
+      mantle,
+      linea,
+      zkSync,
+      manta,
+      mode,
+      metis,
+      scroll,
+    ],
+  });
+  const queryClient = new QueryClient();
+
   return (
-    <StarknetConfig
-      chains={chains}
-      provider={provider}
-      connectors={getConnectors() as Connector[]}
-    >
-      {children}
-    </StarknetConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider>
+          <StarknetConfig
+            chains={chains}
+            provider={provider}
+            connectors={getConnectors() as Connector[]}
+          >
+            {children}
+          </StarknetConfig>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }

app/styles/components/ethereumConnect.module.css

@@ -0,0 +1,161 @@
+.screen {
+  height: 88vh;
+  position: relative;
+  margin-top: 12vh;
+}
+
+.wrapperScreen {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: calc(100% - 12vh);
+  padding: 0rem 0rem 2rem;
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.button_text {
+  display: flex;
+  gap: 1rem;
+}
+
+.chain_container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  width: 100%;
+  border-radius: 20px;
+}
+
+.domain_list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 2rem;
+  width: 100%;
+  overflow-y: auto;
+  height: 100%;
+  padding: 2rem 1rem 3rem;
+}
+
+.domain_box {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  min-height: 120px;
+  padding: 1rem;
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+}
+
+.each_chain_container {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.each_chain_content {
+  padding: 2rem;
+  width: 100%;
+}
+
+.banner {
+  display: flex;
+  width: 80%;
+  gap: 3rem;
+  border-radius: 20px;
+  background-color: #fffcf8;
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+  max-height: 430px;
+}
+
+.image {
+  border-radius: 20px;
+  width: 50%;
+  aspect-ratio: 1;
+}
+
+.button_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.progress_bar_container {
+  width: 70%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+.connectButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+}
+
+.connectEthLayout {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.banner_content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 3rem;
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  .title {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .banner {
+    flex-direction: column;
+    height: auto;
+    gap: 1rem;
+    max-height: none;
+  }
+
+  .image {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+  }
+
+  .wrapperScreen {
+    height: auto;
+  }
+
+  .domain_list {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}