adding some dope shit
parent
a371c38edf
commit
19fe7efa2a
@ -1,157 +1,129 @@
|
||||
import '@rainbow-me/rainbowkit/styles.css';
|
||||
|
||||
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
|
||||
import { ConnectButton } from '@rainbow-me/rainbowkit';
|
||||
import { configureChains, createClient, WagmiConfig } from 'wagmi';
|
||||
import { mainnet, goerli, localhost } from 'wagmi/chains';
|
||||
import { publicProvider } from 'wagmi/providers/public';
|
||||
import { AwesomeButton, AwesomeButtonProgress, AwesomeButtonSocial } from 'react-awesome-button';
|
||||
|
||||
|
||||
const { chains, provider } = configureChains(
|
||||
[mainnet, goerli, localhost],
|
||||
[publicProvider()]
|
||||
);
|
||||
import { AwesomeButton } from 'react-awesome-button';
|
||||
|
||||
const { connectors } = getDefaultWallets({
|
||||
appName: 'My RainbowKit App',
|
||||
chains
|
||||
});
|
||||
|
||||
const wagmiClient = createClient({
|
||||
autoConnect: true,
|
||||
connectors,
|
||||
provider
|
||||
});
|
||||
|
||||
function Wallet() {
|
||||
export function Wallet() {
|
||||
return (
|
||||
<WagmiConfig client={wagmiClient}>
|
||||
<RainbowKitProvider chains={chains}>
|
||||
<ConnectButton.Custom>
|
||||
{({
|
||||
account,
|
||||
chain,
|
||||
openAccountModal,
|
||||
openChainModal,
|
||||
openConnectModal,
|
||||
mounted,
|
||||
}) => {
|
||||
const ready = mounted;
|
||||
const connected =
|
||||
ready &&
|
||||
account &&
|
||||
chain;
|
||||
<ConnectButton.Custom>
|
||||
{({
|
||||
account,
|
||||
chain,
|
||||
openAccountModal,
|
||||
openChainModal,
|
||||
openConnectModal,
|
||||
mounted,
|
||||
}) => {
|
||||
const ready = mounted;
|
||||
const connected =
|
||||
ready &&
|
||||
account &&
|
||||
chain;
|
||||
|
||||
return (
|
||||
<div
|
||||
className='buttons'
|
||||
{...(!ready && {
|
||||
'aria-hidden': true,
|
||||
'style': {
|
||||
opacity: 0,
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
},
|
||||
})}
|
||||
>
|
||||
{(() => {
|
||||
if (!connected) {
|
||||
return (
|
||||
<div
|
||||
className='buttons'
|
||||
{...(!ready && {
|
||||
'aria-hidden': true,
|
||||
'style': {
|
||||
opacity: 0,
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
},
|
||||
})}
|
||||
>
|
||||
{(() => {
|
||||
if (!connected) {
|
||||
return (
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openConnectModal();
|
||||
release();
|
||||
}}>
|
||||
Connect Wallet
|
||||
</AwesomeButton>
|
||||
);
|
||||
}
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openConnectModal();
|
||||
release();
|
||||
}}>
|
||||
Connect Wallet
|
||||
</AwesomeButton>
|
||||
);
|
||||
}
|
||||
|
||||
if (chain.unsupported) {
|
||||
return (
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openChainModal();
|
||||
release();
|
||||
}}>
|
||||
Wrong network
|
||||
</AwesomeButton>
|
||||
);
|
||||
}
|
||||
if (chain.unsupported) {
|
||||
return (
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openChainModal();
|
||||
release();
|
||||
}}>
|
||||
Wrong network
|
||||
</AwesomeButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openChainModal();
|
||||
release();
|
||||
}}>
|
||||
{chain.hasIcon && (
|
||||
<div
|
||||
style={{
|
||||
background: chain.iconBackground,
|
||||
width: 24,
|
||||
height: 24,
|
||||
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}
|
||||
</AwesomeButton>
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<AwesomeButton
|
||||
type="secondary"
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openChainModal();
|
||||
release();
|
||||
}}>
|
||||
{chain.hasIcon && (
|
||||
<div
|
||||
style={{
|
||||
background: chain.iconBackground,
|
||||
width: 24,
|
||||
height: 24,
|
||||
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}
|
||||
</AwesomeButton>
|
||||
|
||||
<AwesomeButton
|
||||
type="primary"
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openAccountModal();
|
||||
release();
|
||||
}}>
|
||||
{account.displayName}
|
||||
{account.displayBalance
|
||||
? ` (${account.displayBalance})`
|
||||
: ''}
|
||||
</AwesomeButton>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
<AwesomeButton
|
||||
type="primary"
|
||||
style={{ display: 'flex', alignItems: 'center' }}
|
||||
ripple={true}
|
||||
loadingLabel=""
|
||||
resultLabel=""
|
||||
releaseDelay={1500}
|
||||
onReleased={(event, release) => {
|
||||
openAccountModal();
|
||||
release();
|
||||
}}>
|
||||
{account.displayName}
|
||||
{account.displayBalance
|
||||
? ` (${account.displayBalance})`
|
||||
: ''}
|
||||
</AwesomeButton>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ConnectButton.Custom>
|
||||
</RainbowKitProvider>
|
||||
</WagmiConfig>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ConnectButton.Custom>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wallet;
|
||||
@ -1,29 +1,50 @@
|
||||
import '@blueprintjs/core/lib/css/blueprint.css';
|
||||
import '@rainbow-me/rainbowkit/styles.css';
|
||||
import 'react-awesome-button/dist/styles.css';
|
||||
import "./styles.css";
|
||||
import { render } from "react-dom";
|
||||
import React, { Component } from "react";
|
||||
|
||||
import ReactDOM from "react-dom/client";
|
||||
import React from "react";
|
||||
|
||||
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
|
||||
import { configureChains, createClient, WagmiConfig } from 'wagmi';
|
||||
import { mainnet, goerli, localhost } from 'wagmi/chains';
|
||||
import { publicProvider } from 'wagmi/providers/public';
|
||||
|
||||
import ParticlesBg from "particles-bg";
|
||||
import { Footer } from "./template/Footer";
|
||||
import Wallet from "./Wallet";
|
||||
|
||||
import { Wallet } from "./Wallet";
|
||||
import { Panel } from "./template/Panel";
|
||||
import { Footer } from "./template/Footer";
|
||||
|
||||
|
||||
const { chains, provider, webSocketProvider } = configureChains(
|
||||
[mainnet, goerli, localhost],
|
||||
[publicProvider()]
|
||||
);
|
||||
|
||||
const { connectors } = getDefaultWallets({
|
||||
appName: 'My RainbowKit App',
|
||||
chains
|
||||
});
|
||||
|
||||
class App extends Component {
|
||||
constructor() {
|
||||
super({});
|
||||
}
|
||||
const wagmiClient = createClient({
|
||||
autoConnect: true,
|
||||
connectors,
|
||||
provider,
|
||||
webSocketProvider
|
||||
});
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Wallet />
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<WagmiConfig client={wagmiClient}>
|
||||
<RainbowKitProvider chains={chains}>
|
||||
<Wallet />
|
||||
<Panel />
|
||||
</RainbowKitProvider>
|
||||
<ParticlesBg type="cobweb" num={400} bg={{
|
||||
position: "fixed",
|
||||
zIndex: -1,
|
||||
}}/>
|
||||
<Footer title="Send me your ETH you piece of shit" />
|
||||
<ParticlesBg type="cobweb" num={400} bg={false}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render(<App />, document.getElementById("root"));
|
||||
</WagmiConfig>
|
||||
);
|
||||
Loading…
Reference in New Issue