mirror of
https://github.com/FlipsideCrypto/badger.git
synced 2026-02-06 10:57:46 +00:00
Base wallet connection
Have not cracked into automatically opening the connect modal on a certain page mounting, but there is a button where the account info is if not connected. We can phase the button out when I get a solid idea to implement the rainbow kit modal opening
This commit is contained in:
masonchain
parent
0758b02da8
commit
63bb8cc07e
1
frontend/.gitignore
vendored
1
frontend/.gitignore
vendored
@ -14,6 +14,7 @@
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
.envrc
|
||||
.env.local
|
||||
.env.development.local
|
||||
|
||||
10806
frontend/package-lock.json
generated
10806
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -15,14 +15,17 @@
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@mui/icons-material": "^5.8.4",
|
||||
"@mui/material": "^5.8.7",
|
||||
"@rainbow-me/rainbowkit": "^0.6.0",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"ethers": "^5.7.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet-async": "^1.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"wagmi": "^0.6.6",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@ -23,6 +23,9 @@ button {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.internal-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 3000px) {
|
||||
.page-margins{
|
||||
|
||||
@ -26,6 +26,7 @@ function App() {
|
||||
<meta name="twitter:description" content="Badge-ify the roles that control the gates of your on-chain organization." />
|
||||
</Helmet>
|
||||
|
||||
|
||||
<Routes>
|
||||
<Route exact path="/" element={<Landing />} />
|
||||
|
||||
|
||||
102
frontend/src/components/Button/ConnectWalletButton.js
Normal file
102
frontend/src/components/Button/ConnectWalletButton.js
Normal file
@ -0,0 +1,102 @@
|
||||
import { ConnectButton } from '@rainbow-me/rainbowkit';
|
||||
|
||||
import "../../style/Button/IconButton.css"
|
||||
import '@rainbow-me/rainbowkit/dist/index.css';
|
||||
|
||||
const ConnectWalletButton = () => {
|
||||
return (
|
||||
<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} style={{width: "max-content"}} type="button">
|
||||
Connect Wallet
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (chain.unsupported) {
|
||||
return (
|
||||
<button onClick={openChainModal} type="button">
|
||||
Wrong network
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<button
|
||||
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">
|
||||
{account.displayName}
|
||||
{account.displayBalance
|
||||
? ` (${account.displayBalance})`
|
||||
: ''}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ConnectButton.Custom>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConnectWalletButton;
|
||||
@ -2,6 +2,7 @@ import OrgSidebar from "./Sidebar/OrgSidebar";
|
||||
import HelpSidebar from "./Sidebar/HelpSidebar";
|
||||
|
||||
import DashboardContent from "./Content/DashboardContent";
|
||||
import WalletWrapper from "../Wallet/WalletWrapper";
|
||||
|
||||
import "../../style/Dashboard/Dashboard.css";
|
||||
|
||||
@ -15,11 +16,13 @@ const Dashboard = ({ children }) => {
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="dashboard">
|
||||
<OrgSidebar organizations={organizations} />
|
||||
<DashboardContent children={children} />
|
||||
<HelpSidebar />
|
||||
</div>
|
||||
<WalletWrapper>
|
||||
<div className="dashboard">
|
||||
<OrgSidebar organizations={organizations} />
|
||||
<DashboardContent children={children} />
|
||||
<HelpSidebar />
|
||||
</div>
|
||||
</WalletWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,22 @@
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useAccount, useEnsName, useEnsAvatar } from "wagmi";
|
||||
|
||||
import ConnectWalletButton from "../../Button/ConnectWalletButton";
|
||||
import Logout from "./Logout/Logout";
|
||||
|
||||
import "../../../style/Dashboard/Sidebar/Sidebar.css";
|
||||
import "../../../style/Dashboard/Sidebar/OrgSidebar.css";
|
||||
|
||||
const OrgSidebar = ({ organizations }) => {
|
||||
const { address } = useAccount();
|
||||
const { data: ensName } = useEnsName({
|
||||
address: address,
|
||||
})
|
||||
const { data: ensAvatar } = useEnsAvatar({
|
||||
address: address,
|
||||
})
|
||||
|
||||
console.log(ensAvatar)
|
||||
|
||||
const account = {
|
||||
monocre: "nftchance.eth",
|
||||
@ -16,8 +27,14 @@ const OrgSidebar = ({ organizations }) => {
|
||||
<div className="sidebar left">
|
||||
{/* Logged in user header */}
|
||||
<div className="sidebar__header">
|
||||
<img src={account.avatar} alt="avatar" />
|
||||
<a href="#">{account.monocre}</a>
|
||||
{address ?
|
||||
<>
|
||||
<img src={ensAvatar || account.avatar} alt="avatar" />
|
||||
<a href="#">{ensName}</a>
|
||||
</>
|
||||
:
|
||||
<ConnectWalletButton />
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
import IconButton from './Button/IconButton';
|
||||
@ -44,7 +45,7 @@ const Landing = () => {
|
||||
</div>
|
||||
|
||||
<div className="navbar__links__right">
|
||||
<a href="http://localhost">Enter App</a>
|
||||
<Link className="internal-link" to="/dashboard/">Enter App</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -55,7 +56,9 @@ const Landing = () => {
|
||||
<h1>Give your organization their keys to Web3.</h1>
|
||||
<p className="lead">Deploy and manage flexible group policies for your team’s decentralized tool stack. </p>
|
||||
|
||||
<IconButton icon={['fal', 'arrow-right']} text="Issue Keys" />
|
||||
<Link className="internal-link" to="/dashboard/">
|
||||
<IconButton icon={['fal', 'arrow-right']} text="Issue Keys" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -82,9 +85,11 @@ const Landing = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<IconButton icon={['fal', 'arrow-right']} text="Create Org Now" style={{
|
||||
marginLeft: "auto"
|
||||
}} />
|
||||
<Link className="internal-link" to="/dashboard/">
|
||||
<IconButton icon={['fal', 'arrow-right']} text="Create Org Now" style={{
|
||||
marginLeft: "auto"
|
||||
}} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
35
frontend/src/components/Wallet/WalletWrapper.js
Normal file
35
frontend/src/components/Wallet/WalletWrapper.js
Normal file
@ -0,0 +1,35 @@
|
||||
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
|
||||
import { alchemyProvider } from 'wagmi/providers/alchemy';
|
||||
import { publicProvider } from 'wagmi/providers/public';
|
||||
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
|
||||
|
||||
const WalletWrapper = ({ children }) => {
|
||||
const { chains, provider } = configureChains(
|
||||
[ chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum ],
|
||||
[
|
||||
alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
|
||||
publicProvider()
|
||||
]
|
||||
);
|
||||
|
||||
const { connectors } = getDefaultWallets({
|
||||
appName: 'My RainbowKit App',
|
||||
chains
|
||||
});
|
||||
|
||||
const wagmiClient = createClient({
|
||||
autoConnect: true,
|
||||
connectors,
|
||||
provider
|
||||
})
|
||||
|
||||
return (
|
||||
<WagmiConfig client={wagmiClient}>
|
||||
<RainbowKitProvider chains={chains}>
|
||||
{ children }
|
||||
</RainbowKitProvider>
|
||||
</WagmiConfig>
|
||||
)
|
||||
}
|
||||
|
||||
export default WalletWrapper;
|
||||
Loading…
Reference in New Issue
Block a user