diff --git a/app/components/ethereumConnect.tsx b/app/components/ethereumConnect.tsx new file mode 100644 index 0000000..c2217dc --- /dev/null +++ b/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 = ({ + title, + updateEthStatus, +}) => { + return ( + + {({ + 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 ( +
+ {(() => { + if (!connected) { + return ( + + ); + } else if (connected) { + updateEthStatus(account.address); + } + + if (chain.unsupported) { + return ( + + ); + } + + return ( +
+ + + +
+ ); + })()} +
+ ); + }} +
+ ); +}; + +export default EthereumConnect; diff --git a/app/page.tsx b/app/page.tsx index ac89027..f9014e0 100644 --- a/app/page.tsx +++ b/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 + console.log("update status")} + />