getting fancy shit working better

package.json

@@ -5,15 +5,18 @@
   "private": true,
   "main": "src/index.js",
   "dependencies": {
+    "@rainbow-me/rainbowkit": "^0.8.1",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "ethers": "^5.7.2",
     "particles-bg": "^2.5.5",
     "react": "^18.2.0",
     "react-awesome-button": "^7.0.4",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-ts-typewriter": "^0.1.8-b",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "wagmi": "^0.9.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/Wallet.jsx

@@ -0,0 +1,157 @@
+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()]
+);
+
+const { connectors } = getDefaultWallets({
+    appName: 'My RainbowKit App',
+    chains
+});
+
+const wagmiClient = createClient({
+    autoConnect: true,
+    connectors,
+    provider
+});
+
+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;
+
+                        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>
+                                );
+                            }
+
+                            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>
+
+                                <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>
+                            );
+                            })()}
+                        </div>
+                        );
+                    }}
+                </ConnectButton.Custom>
+            </RainbowKitProvider>
+        </WagmiConfig>
+    );
+};
+
+export default Wallet;

src/index.js

@@ -1,23 +1,13 @@
+import 'react-awesome-button/dist/styles.css';
+import "./styles.css";
 import { render } from "react-dom";
 import React, { Component } from "react";
 import ParticlesBg from "particles-bg";
 import { Footer } from "./template/Footer";
-import { AwesomeButton, AwesomeButtonProgress, AwesomeButtonSocial } from 'react-awesome-button';
+import Wallet from "./Wallet";
-import "./styles.css";
+
-import 'react-awesome-button/dist/styles.css';
+
 
-function Button() {
-  return (
-    <AwesomeButtonProgress
-      type="primary"
-      onPress={(event, release) => {
-        // do a sync/async task then call `release()`
-        release();
-      }}>
-      Button
-    </AwesomeButtonProgress>
-  );
-}
 
 
 class App extends Component {
@@ -27,8 +17,8 @@ class App extends Component {
 
   render() {
     return (
-      <div className="">
+      <div>
-        <Button />
+        <Wallet />
         <Footer title="Send me your ETH you piece of shit" />
         <ParticlesBg type="cobweb" num={200} bg={false}/>
       </div>

src/styles.css

@@ -8,6 +8,12 @@ svg * { transform-origin: 50% }
   100% { transform: rotate(360deg) }
 }
 
+.buttons {
+  position: absolute;
+  right: 1em;
+  top: 1em;
+}
+
 .aws-btn {
   --button-default-height: 55px;
   --button-default-font-size: 14px;
@@ -124,9 +130,9 @@ body {
     line-height: 14px;
   }
   
-  #root {
+  /* #root {
     height: 500vh;
-  }
+  } */
   
   footer::before {
     display: block;