Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@uok825
uok825 committed Nov 19, 2023
1 parent ed58daa commit d4bea74
Show file tree
Hide file tree
Showing 8 changed files with 515 additions and 322 deletions.
105 changes: 1 addition & 104 deletions packages/nextjs/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,110 +62,7 @@ export default function Navbar({
</div>

<div>
<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
{...(!ready && {
"aria-hidden": true,
style: {
opacity: 0,
pointerEvents: "none",
userSelect: "none",
},
})}
>
{(() => {
if (!connected) {
return (
<button
onClick={openConnectModal}
type="button"
className="w-32 h-12 bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-md text-white text-md"
>
Connect Wallet
</button>
)
}

if (chain.unsupported) {
return (
<button
onClick={openChainModal}
type="button"
className="w-32 h-12 bg-[#3DB9CF] rounded-md text-white text-md"
>
Wrong network
</button>
)
}

return (
<div style={{ display: "flex", gap: 4 }}>
<button
className="w-32 h-12 bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-md text-white text-md flex justify-center items-center"
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"
className="w-48 h-12 bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-md text-white text-sm"
>
{account.displayName}
{account.displayBalance
? ` (${account.displayBalance})`
: ""}
</button>
</div>
)
})()}
</div>
)
}}
</ConnectButton.Custom>
<w3m-button />
</div>
</div>
</div>
Expand Down
27 changes: 27 additions & 0 deletions packages/nextjs/context/Web3Modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
"use client";

import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'

import { WagmiConfig } from 'wagmi'
import { arbitrum, mainnet, hardhat } from 'viem/chains'

// 1. Get projectId
const projectId = '87b19285bd7e81f2a2dc76728f6eb331'

// 2. Create wagmiConfig
const metadata = {
name: 'Web3Modal',
description: 'Web3Modal Example',
url: 'https://web3modal.com',
icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const chains = [mainnet, arbitrum, hardhat]
const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

// 3. Create modal
createWeb3Modal({ wagmiConfig, projectId, chains })

export function Web3Modal({ children }) {
return <WagmiConfig config={wagmiConfig}>{children}</WagmiConfig>;
}
3 changes: 3 additions & 0 deletions packages/nextjs/contracts/deployedContracts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1207,6 +1207,7 @@ export const deployedContracts = {
},
PublicResolver: {
address: "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
<<<<<<< Updated upstream
abi: [
{
inputs: [
Expand Down Expand Up @@ -2751,6 +2752,8 @@ export const deployedContracts = {
},
PublicResolver: {
address: "0x747BccC32a03230b62C07A8375f418Ca2a358d21",
=======
>>>>>>> Stashed changes
abi: [
{
inputs: [
Expand Down
1 change: 1 addition & 0 deletions packages/nextjs/next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const nextConfig = {
reactStrictMode: true,
webpack: config => {
config.resolve.fallback = { fs: false, net: false, tls: false };
config.externals.push('pino-pretty', 'lokijs', 'encoding')
return config;
},
};
Expand Down
5 changes: 3 additions & 2 deletions packages/nextjs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"@rainbow-me/rainbowkit": "^1.2.0",
"@web3modal/wagmi": "3.3.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"cmdk": "^0.2.0",
Expand All @@ -27,8 +28,8 @@
"styled-components": "^6.1.1",
"tailwind-merge": "^2.0.0",
"tailwindcss-animate": "^1.0.7",
"viem": "~1.16.3",
"wagmi": "~1.4.3"
"viem": "1.13.1",
"wagmi": "1.4.2"
},
"devDependencies": {
"@types/node": "^18.16.12",
Expand Down
58 changes: 7 additions & 51 deletions packages/nextjs/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,18 @@
import "../globals.css"
import "@rainbow-me/rainbowkit/styles.css"
import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit"
import type { AppProps } from "next/app"
import { configureChains, createConfig, WagmiConfig } from "wagmi"
import {
arbitrum,
goerli,
mainnet,
optimism,
polygon,
base,
zora,
hardhat,
} from "wagmi/chains"
import { publicProvider } from "wagmi/providers/public"
import { Lexend } from "next/font/google"
import Navbar from "@/components/Navbar"

import { Lexend } from "next/font/google"
const lexend = Lexend({ subsets: ["latin"] })
const { chains, publicClient, webSocketPublicClient } = configureChains(
[
hardhat /*localhost is not the same with hardhat */,
mainnet,
polygon,
optimism,
arbitrum,
base,
zora,
...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === "true" ? [goerli] : []),
],
[publicProvider()]
)

const { connectors } = getDefaultWallets({
appName: "RainbowKit App",
projectId: "ca4386934bfc22480a359d69740ba7df",
chains,
})

const wagmiConfig = createConfig({
autoConnect: true,
connectors,
publicClient,
webSocketPublicClient,
})
import { Web3Modal } from "../context/Web3Modal";

function MyApp({ Component, pageProps }: AppProps) {
return (
<div className={lexend.className}>
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider chains={chains}>
<div className="flex flex-col min-h-screen w-screen item-center justify-start px-4 bg-white min-w-[375px]">
<Navbar />
<Component {...pageProps} />
</div>
</RainbowKitProvider>
</WagmiConfig>
</div>
<Web3Modal>
<div className={lexend.className}>
<w3m-button />
</div>
</Web3Modal>
)
}

Expand Down
95 changes: 1 addition & 94 deletions packages/nextjs/pages/me/connect/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ConnectButton } from "@rainbow-me/rainbowkit";
import Image from "next/image";
import logo from "../../public/logo.png";

Expand All @@ -8,99 +7,7 @@ export default function Connect() {
return <>
<div className="w-full h-screen flex flex-col justify-center items-center gap-16">
<Image src={logo} alt="logo" />
<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
{...(!ready && {
'aria-hidden': true,
'style': {
opacity: 0,
pointerEvents: 'none',
userSelect: 'none',
},
})}
>
{(() => {
if (!connected) {
return (
<button onClick={openConnectModal} type="button" className="w-[490px] h-[93px] bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-[25px] text-white text-[35px]">
Connect Wallet
</button>
);
}

if (chain.unsupported) {
return (
<button onClick={openChainModal} type="button" className="bg-[#3DB9CF] rounded-[25px] text-white text-[35px]">
Wrong network
</button>
);
}

return (
<div style={{ display: 'flex', gap: 12 }}>
<button
className="w-[490px] h-[93px] bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-[25px] text-white text-[35px] flex justify-center items-center"
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" className="w-[490px] h-[93px] bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-[25px] text-white text-[35px]">
{account.displayName}
{account.displayBalance
? ` (${account.displayBalance})`
: ''}
</button>
</div>
);
})()}
</div>
);
}}
</ConnectButton.Custom>

<w3m-button />
</div>
</>
}
Loading

0 comments on commit d4bea74

Please sign in to comment.