Merge pull request #9 from srdarkseer/dev

Dev
srdarkseer · Apr 17, 2024 · ff9bbc8 · ff9bbc8
2 parents a46293f + 959cd32
commit ff9bbc8
Show file tree

Hide file tree

Showing 8 changed files with 1,680 additions and 302 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -3,6 +3,9 @@ const nextConfig = {
   reactStrictMode: true,
   env: {
     BASE_URL: process.env.BASE_URL,
+    NEXT_PUBLIC_APP_ID: process.env.NEXT_PUBLIC_APP_ID,
+    NEXT_PUBLIC_SERVER_URL: process.env.NEXT_PUBLIC_SERVER_URL,
+    MORALIS_API_KEY: process.env.MORALIS_API_KEY,
   },
   // images: {
   //   loader: process.env.NODE_ENV === "production" ? "custom" : "default",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,12 +15,13 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@web3-onboard/coinbase": "^2.2.7",
+    "@web3-onboard/core": "^2.21.6",
     "@web3-onboard/dcent": "^2.2.8",
     "@web3-onboard/fortmatic": "^2.0.19",
     "@web3-onboard/frontier": "^2.0.4",
     "@web3-onboard/gnosis": "^2.2.1",
     "@web3-onboard/infinity-wallet": "^2.0.4",
-    "@web3-onboard/injected-wallets": "^2.10.14",
+    "@web3-onboard/injected-wallets": "^2.10.16",
     "@web3-onboard/keepkey": "^2.3.8",
     "@web3-onboard/keystone": "^2.3.8",
     "@web3-onboard/ledger": "^2.6.0",
@@ -35,13 +36,15 @@
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "ethers": "^5.7.2",
     "lucide-react": "^0.365.0",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
     "tailwind-merge": "^2.2.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "web3": "^4.7.0"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/src/layouts/MainLayout/components/Topbar.tsx b/src/layouts/MainLayout/components/Topbar.tsx
@@ -89,7 +89,6 @@ const TopBar: FC = () => {
             onClick={toggleThemeHandler}
           />
         </div>
-
       </div>
     </header>
   );

diff --git a/src/lib/setupWallets.ts b/src/lib/setupWallets.ts
@@ -0,0 +1,47 @@
+// lib/setupWallets.ts
+import injectedModule from "@web3-onboard/injected-wallets";
+import coinbaseModule from "@web3-onboard/coinbase";
+import dcentModule from "@web3-onboard/dcent";
+import infinityWalletModule from "@web3-onboard/infinity-wallet";
+import keystoneModule from "@web3-onboard/keystone";
+import keepkeyModule from "@web3-onboard/keepkey";
+import safeModule from "@web3-onboard/gnosis";
+import sequenceModule from "@web3-onboard/sequence";
+import tahoModule from "@web3-onboard/taho";
+import trustModule from "@web3-onboard/trust";
+import frontierModule from "@web3-onboard/frontier";
+import trezorModule from "@web3-onboard/trezor";
+import portisModule from "@web3-onboard/portis";
+import fortmaticModule from "@web3-onboard/fortmatic";
+import magicModule from "@web3-onboard/magic";
+
+export default function setupWallets() {
+  const wallets = [
+    injectedModule(),
+    coinbaseModule(),
+    dcentModule(),
+    infinityWalletModule(),
+    keystoneModule(),
+    keepkeyModule(),
+    safeModule(),
+    sequenceModule(),
+    tahoModule(),
+    trustModule(),
+    frontierModule(),
+    trezorModule({
+      email: "test@test.com",
+      appUrl: "https://www.blocknative.com",
+    }),
+    portisModule({
+      apiKey: "apiKey",
+    }),
+    fortmaticModule({
+      apiKey: "apiKey",
+    }),
+    magicModule({
+      apiKey: "apiKey",
+    }),
+  ];
+
+  return wallets;
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,93 +2,30 @@ import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 
 import { MyThemeContextProvider } from "../store/myThemeContext";
+import setupWallets from "@/lib/setupWallets";
 
 import { Web3OnboardProvider, init } from "@web3-onboard/react";
-import injectedModule from "@web3-onboard/injected-wallets";
-import infinityWalletModule from "@web3-onboard/infinity-wallet";
-import fortmaticModule from "@web3-onboard/fortmatic";
-import safeModule from "@web3-onboard/gnosis";
-import keepkeyModule from "@web3-onboard/keepkey";
-import keystoneModule from "@web3-onboard/keystone";
-import portisModule from "@web3-onboard/portis";
-import trezorModule from "@web3-onboard/trezor";
-import coinbaseModule from "@web3-onboard/coinbase";
-import magicModule from "@web3-onboard/magic";
-import dcentModule from "@web3-onboard/dcent";
-import sequenceModule from "@web3-onboard/sequence";
-import tahoModule from "@web3-onboard/taho";
-import trustModule from "@web3-onboard/trust";
-import frontierModule from "@web3-onboard/frontier";
-
-const INFURA_KEY = "";
-
-const ethereumRopsten = {
-  id: "0x3",
-  token: "rETH",
-  label: "Ethereum Ropsten",
-  rpcUrl: `https://ropsten.infura.io/v3/${INFURA_KEY}`,
-};
-
-const polygonMainnet = {
-  id: "0x89",
-  token: "MATIC",
-  label: "Polygon",
-  rpcUrl: "https://matic-mainnet.chainstacklabs.com",
-};
-
-const chains = [ethereumRopsten, polygonMainnet];
-
-//defined function for wallets
-const injected = injectedModule();
-const coinbase = coinbaseModule();
-const dcent = dcentModule();
-const infinityWallet = infinityWalletModule();
-const keystone = keystoneModule();
-const keepkey = keepkeyModule();
-const safe = safeModule();
-const sequence = sequenceModule();
-const taho = tahoModule();
-const trust = trustModule();
-const frontier = frontierModule();
-const trezor = trezorModule({
-  email: "test@test.com",
-  appUrl: "https://www.blocknative.com",
-});
-const portis = portisModule({
-  apiKey: "apiKey",
-});
-const fortmatic = fortmaticModule({
-  apiKey: "apiKey",
-});
-const magic = magicModule({
-  apiKey: "apiKey",
-});
-
-const wallets = [
-  infinityWallet,
-  keepkey,
-  sequence,
-  injected,
-  trust,
-  frontier,
-  taho,
-  coinbase,
-  dcent,
-  trezor,
-  safe,
-  magic,
-  fortmatic,
-  keystone,
-  portis,
-];
 
 const web3Onboard = init({
-  wallets,
-  chains,
+  wallets: setupWallets(),
+  chains: [
+    {
+      id: "0x3",
+      token: "rETH",
+      label: "Ethereum Ropsten",
+      rpcUrl: `https://ropsten.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
+    },
+    {
+      id: "0x89",
+      token: "MATIC",
+      label: "Polygon",
+      rpcUrl: "https://matic-mainnet.chainstacklabs.com",
+    },
+  ],
   appMetadata: {
-    name: "Web3-Onboard Demo",
-    icon: "<svg>My App Icon</svg>",
-    description: "A demo of Web3-Onboard.",
+    name: "Your App Name",
+    icon: "<svg>Your App Icon</svg>",
+    description: "Your App Description",
   },
 });
 

diff --git a/src/views/Landing/Landing.tsx b/src/views/Landing/Landing.tsx
@@ -2,23 +2,17 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 
 import { Button } from "@/components/ui/button";
+import PopUpModal from "./components/PopUpModal";
 
 import { useConnectWallet } from "@web3-onboard/react";
-import { ethers } from "ethers";
-import PopUpModal from "./components/PopUpModal";
 
 const Landing = () => {
   const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [attemptedConnectionFromSection, setAttemptedConnectionFromSection] =
     useState(false);
 
-  // create an ethers provider
-  let ethersProvider;
-
-  if (wallet) {
-    ethersProvider = new ethers.providers.Web3Provider(wallet.provider, "any");
-  }
+
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
@@ -34,6 +28,8 @@ const Landing = () => {
     };
   }, [wallet, attemptedConnectionFromSection]);
 
+
+
   return (
     <div className="h-[90vh] container flex items-center justify-center">
       <div className="grid grid-cols-12 sm:h-[526px] gap-8 sm:gap-4">
@@ -47,6 +43,14 @@ const Landing = () => {
             {wallet ? (
               <div className="w-full">
                 <PopUpModal isOpen={isModalOpen} />
+                {/* <Button
+                  variant="default"
+                  size="lg"
+                  className="w-full"
+                  onClick={sendTransaction}
+                >
+                  Send Transaction
+                </Button> */}
               </div>
             ) : (
               <Button
-Original file line number
+Diff line change
@@ Expand Up / @@ -89,7 +89,6 @@ const TopBar: FC = () => { @@
                 onClick={toggleThemeHandler}
               />
             </div>
           </div>
         </header>
       );
@@ Expand Down @@