diff --git a/app/components/WalletConnector.tsx b/app/components/WalletConnector.tsx new file mode 100644 index 0000000..7728d4a --- /dev/null +++ b/app/components/WalletConnector.tsx @@ -0,0 +1,54 @@ +"use client"; + +import { + Connector, + useAccount, + useConnect, + useDisconnect, +} from "@starknet-react/core"; +import { StarknetkitConnector, useStarknetkitConnectModal } from "starknetkit"; + +export function WalletConnectorModal() { + const { disconnect } = useDisconnect(); + + const { connect, connectors } = useConnect(); + const { starknetkitConnectModal } = useStarknetkitConnectModal({ + connectors: connectors as StarknetkitConnector[], + }); + + async function connectWallet() { + const { connector } = await starknetkitConnectModal(); + if (!connector) { + return; + } + await connect({ connector: connector as Connector }); + } + + const { address } = useAccount(); + + if (!address) { + return ( + + ); + } + return ( +
disconnect()} + className="flex items-center gap-2 relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]" + > +
+ Connected: {address?.slice(0, 6)}...{address?.slice(-4)} +
+ +
+ ); +} diff --git a/app/components/starknet-provider.tsx b/app/components/starknet-provider.tsx new file mode 100644 index 0000000..b772f3e --- /dev/null +++ b/app/components/starknet-provider.tsx @@ -0,0 +1,55 @@ +"use client"; + +import React from "react"; +import { InjectedConnector } from "starknetkit/injected"; +import { WebWalletConnector } from "starknetkit/webwallet"; +import { StarknetConfig } from "@starknet-react/core"; +import { publicProvider } from "@starknet-react/core"; +import { Connector, voyager } from "@starknet-react/core"; +import { mainnet, sepolia } from "@starknet-react/chains"; +import { ArgentMobileConnector } from "starknetkit/argentMobile"; + +interface StarknetProviderProps { + children: React.ReactNode; +} + +const StarknetProvider: React.FC = ({ children }) => { + const connectors = [ + new InjectedConnector({ + options: { id: "argentX", name: "Argent X" }, + }), + new InjectedConnector({ + options: { id: "braavos", name: "Braavos" }, + }), + new InjectedConnector({ + options: { id: "metamask", name: "MetaMask" }, + }), + new InjectedConnector({ + options: { id: "keplr", name: "Keplr" }, + }), + new InjectedConnector({ + options: { id: "okxwallet", name: "OKX" }, + }), + new WebWalletConnector({ url: "https://web.argent.xyz" }), + ArgentMobileConnector.init({ + options: { + dappName: "Snooknet", + url: "https://web.argent.xyz", + }, + }), + ]; + + return ( + + {children} + + ); +}; + +export default StarknetProvider; diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..40a17b1 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import StarknetProvider from "./components/starknet-provider"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -27,7 +28,7 @@ export default function RootLayout({ - {children} + {children} ); diff --git a/app/page.tsx b/app/page.tsx index 05f1f1c..8cdad61 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,20 +1,15 @@ +"use client"; import Image from "next/image"; import Link from "next/link"; - -// import WalletConnectButton from './components/WalletConnectButton'; - +import { WalletConnectorModal } from "./components/WalletConnector"; export default function Home() { return (
- +
@@ -94,10 +89,7 @@ export default function Home() { PLAY GAMES

- - - Choose variety of ways SnookNet - + Choose variety of ways SnookNet

diff --git a/app/profile/page.tsx b/app/profile/page.tsx index 251cb15..a52bdb4 100644 --- a/app/profile/page.tsx +++ b/app/profile/page.tsx @@ -1,15 +1,16 @@ -import { Bowlby_One_SC } from 'next/font/google'; +import { Bowlby_One_SC } from "next/font/google"; const bowlby = Bowlby_One_SC({ - weight: '400', - subsets: ['latin'], - variable: '--font-bowlby-one-sc', + weight: "400", + subsets: ["latin"], + variable: "--font-bowlby-one-sc", }); export default function Profile() { return ( -
- +
- +
-

PROFILE

- +
LEVELS
- +
NFTS
- +
STATS @@ -42,7 +42,6 @@ export default function Profile() {
-
); }