Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

rainbowkit auth added #30

Merged
merged 1 commit into from
Feb 4, 2023
Merged

rainbowkit auth added #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,19 @@
"@nomiclabs/hardhat-ethers": "^2.2.2",
"@nomiclabs/hardhat-waffle": "^2.0.3",
"@openzeppelin/contracts": "^4.8.1",
"@rainbow-me/rainbowkit": "^0.8.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@web3auth/modal": "^4.3.2",
"@web3auth/torus-wallet-connector-plugin": "^4.3.2",
"chai": "^4.3.7",
"ethereum-waffle": "^4.0.9",
"ethers": "^6.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0",
"react-scripts": "5.0.1",
"wagmi": "^0.11.4",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down Expand Up @@ -48,6 +49,7 @@
"assert": "^2.0.0",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.0",
"ethers": "5.6.9",
"hardhat": "^2.12.6",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
Expand All @@ -58,4 +60,4 @@
"tailwindcss": "^3.2.4",
"url": "^0.11.0"
}
}
}
27 changes: 27 additions & 0 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,35 @@ import Admin from "./pages/Admin/Admin";
import Events from "./pages/Events/Events";
import Home from "./pages/Home/Home";
import Profile from "./pages/Profile/Profile";
import "@rainbow-me/rainbowkit/styles.css"

import { getDefaultWallets, RainbowKitProvider,darkTheme } from "@rainbow-me/rainbowkit"
import { configureChains, createClient, WagmiConfig } from "wagmi"
import { goerli } from "wagmi/chains"
import { alchemyProvider } from "wagmi/providers/alchemy"
import { publicProvider } from "wagmi/providers/public"

const { chains, provider } = configureChains(
[goerli],
[alchemyProvider({ apiKey: process.env.REACT_APP_ALCHEMY_ID }), publicProvider()]
)

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

const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
})

function App() {
return (
<div className="bg-primary w-full overflow-hidden">
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains} theme={darkTheme({accentColor: '#7b3fe4'})}>
<Router>
<Navbar />
<Routes>
Expand All @@ -23,6 +48,8 @@ function App() {
</Routes>
<Footer />
</Router>
</RainbowKitProvider>
</WagmiConfig>
</div>
);
}
Expand Down
165 changes: 9 additions & 156 deletions src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,165 +3,18 @@ import { Link } from "react-router-dom";

import { close, menu } from "../assets";
import styles from "../style";
import { Web3Auth } from "@web3auth/modal"
import { CHAIN_NAMESPACES } from "@web3auth/base"
import { OpenloginAdapter } from "@web3auth/openlogin-adapter"
import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin"
import { WalletConnectV1Adapter } from "@web3auth/wallet-connect-v1-adapter"
import { MetamaskAdapter } from "@web3auth/metamask-adapter"
import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter"
import { ConnectButton } from '@rainbow-me/rainbowkit';



const clientId = process.env.REACT_APP_CLIENT_ID

const Navbar = () => {
const [toggle, setToggle] = useState(false);
const [show, setShow] = useState(false)
const [web3auth, setWeb3auth] = useState(null)
const [provider, setProvider] = useState(null)

useEffect(() => {
const init = async () => {
try {
const web3auth = new Web3Auth({
clientId:process.env.REACT_APP_CLIENT_ID,
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x5",
rpcTarget: "https://rpc.ankr.com/eth_goerli", // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
uiConfig: {
theme: "dark",
loginMethodsOrder: [
"google",
"twitter",
"linkedin",
"github",
],
defaultLanguage: "en",
appLogo: 'https://web3auth.io/images/w3a-L-Favicon-1.svg', // Your App Logo Here
},
web3AuthNetwork: "cyan",
})

const torusPlugin = new TorusWalletConnectorPlugin({
torusWalletOpts: {
buttonPosition: "bottom-left",
showTorrusButton: provider == null ? false : true,
},
walletInitOptions: {
whiteLabel: {
theme: {
isDark: true,
colors: { primary: "#00a8ff" },
},
logoDark:
"https://web3auth.io/images/w3a-L-Favicon-1.svg",
logoLight:
"https://web3auth.io/images/w3a-D-Favicon-1.svg",
},
useWalletConnect: true,
enableLogging: true,
},
})
await web3auth.addPlugin(torusPlugin)
const openloginAdapter = new OpenloginAdapter({
loginSettings: {
mfaLevel: "optional",
},
adapterSettings: {
whiteLabel: {
name: "Fundraiuser DAPP",
logoLight:
"https://www.svgrepo.com/show/120969/wallet.svg",
logoDark:
"https://www.svgrepo.com/show/120969/wallet.svg",
defaultLanguage: "en",
dark: true, // whether to enable dark mode. defaultValue: false
},
},
})
web3auth.configureAdapter(openloginAdapter)

// plugins and adapters are optional and can be added as per your requirement
// read more about plugins here: https://web3auth.io/docs/sdk/web/plugins/

// adding torus wallet connector plugin

// read more about adapters here: https://web3auth.io/docs/sdk/web/adapters/

// adding wallet connect v1 adapter
const walletConnectV1Adapter = new WalletConnectV1Adapter({
adapterSettings: {
bridge: "https://bridge.walletconnect.org",
},
clientId,
})

web3auth.configureAdapter(walletConnectV1Adapter)

// adding metamask adapter
const metamaskAdapter = new MetamaskAdapter({
clientId,
sessionTime: 3600, // 1 hour in seconds
web3AuthNetwork: "cyan",
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth_goerli", // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
})
// we can change the above settings using this function
metamaskAdapter.setAdapterSettings({
sessionTime: 86400, // 1 day in seconds
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth_goerli", // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
web3AuthNetwork: "cyan",
})


// it will add/update the metamask adapter in to web3auth class
web3auth.configureAdapter(metamaskAdapter)

const torusWalletAdapter = new TorusWalletAdapter({
clientId,
})

// it will add/update the torus-evm adapter in to web3auth class
web3auth.configureAdapter(torusWalletAdapter)

setWeb3auth(web3auth)

await web3auth.initModal()
if (web3auth.provider) {
setProvider(web3auth.provider)
}
} catch (error) {
console.error(error)
}
}

init()
}, [])

const login = async () => {
if (!web3auth) {
console.log("web3auth not initialized yet")
return
}
const web3authProvider = await web3auth.connect()
setProvider(web3authProvider)
console.log("Logged in Successfully!")
}

const logout = async () => {
if (!web3auth) {
return
}
await web3auth.logout()
setProvider(null)
}


return (
<div className={`${styles.paddingX} ${styles.flexCenter}`}>
Expand Down Expand Up @@ -191,9 +44,9 @@ const logout = async () => {
</Link>
</li>
<li>
<button className="border-2 border-purple-600 rounded-lg px-6 py-2 text-purple-400 cursor-pointer hover:bg-purple-600 hover:text-purple-200" onClick={login}>
Login
</button>

<ConnectButton />

</li>
</ul>
<div className="sm:hidden flex flex-1 justify-end items-center">
Expand Down Expand Up @@ -224,7 +77,7 @@ const logout = async () => {
</Link>
</li>
<li>
<button className="border-2 border-purple-600 rounded-lg px-3 py-2 text-purple-400 cursor-pointer hover:bg-purple-600 hover:text-purple-200" onClick={login}>
<button className="border-2 border-purple-600 rounded-lg px-3 py-2 text-purple-400 cursor-pointer hover:bg-purple-600 hover:text-purple-200">
Login
</button>
</li>
Expand Down
Loading