feat: UI connect kit integration (#136)

* chore: connectkit poc

* feat: add connection on wallet step;

* chore: add info on readme and new env variable

* chore: add continue button if the user is connected

* chore: added constanst env file

* Update ui/src/views/mint/wallet-step/connect-wallet-button.tsx

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

* chore: rename env variables. remove unneccesary files. add connect button

* feat: create providers folder to keep clean code

* ed

* chore: add TODO comment

---------

Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>

contracts/contracts/FleekERC721.sol

@@ -28,11 +28,7 @@ contract FleekERC721 is Initializable, ERC721Upgradeable, FleekAccessControl, Fl
     event NewAccessPoint(string apName, uint256 indexed tokenId, address indexed owner);
     event RemoveAccessPoint(string apName, uint256 indexed tokenId, address indexed owner);
 
-    event ChangeAccessPointAutoApproval(
+    event ChangeAccessPointAutoApproval(uint256 indexed token, bool indexed settings, address indexed triggeredBy);
-        uint256 indexed token,
-        bool indexed settings,
-        address indexed triggeredBy
-    );
 
     event ChangeAccessPointScore(string apName, uint256 indexed tokenId, uint256 score, address indexed triggeredBy);
 
@@ -432,7 +428,14 @@ contract FleekERC721 is Initializable, ERC721Upgradeable, FleekAccessControl, Fl
 
         if (_apps[tokenId].accessPointAutoApproval) {
             // Auto Approval is on.
-            _accessPoints[apName] = AccessPoint(tokenId, 0, false, false, msg.sender, AccessPointCreationStatus.APPROVED);
+            _accessPoints[apName] = AccessPoint(
+                tokenId,
+                0,
+                false,
+                false,
+                msg.sender,
+                AccessPointCreationStatus.APPROVED
+            );
 
             emit ChangeAccessPointStatus(apName, tokenId, AccessPointCreationStatus.APPROVED, msg.sender);
         } else {

contracts/test/foundry/FleekERC721/AccessPoints/AccessPointsAutoApprovalOff.t.sol

@@ -6,7 +6,7 @@ import "../TestBase.sol";
 import {Strings} from "@openzeppelin/contracts/utils/Strings.sol";
 import {FleekAccessControl} from "contracts/FleekAccessControl.sol";
 import "../../../../contracts/FleekERC721.sol";
-import './ApBase.sol';
+import "./ApBase.sol";
 
 contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
     using Strings for address;
@@ -21,7 +21,16 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
         string memory accessPointName = "accesspoint.com";
         CuT.addAccessPoint(tokenId, accessPointName);
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 
     function test_removeAccessPoint() public {
@@ -29,7 +38,16 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
         CuT.addAccessPoint(tokenId, accessPointName);
         CuT.removeAccessPoint(accessPointName);
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "3", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "3",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 
     function test_cannotRemoveNonExistentAccessPoint() public {
@@ -47,20 +65,56 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
     function test_increaseAccessPointScore() public {
         string memory accessPointName = "accesspoint.com";
         CuT.addAccessPoint(tokenId, accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
 
         CuT.increaseAccessPointScore(accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "1", "false", "false", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "1",
+            "false",
+            "false",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
 
         CuT.increaseAccessPointScore(accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "2", "false", "false", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "2",
+            "false",
+            "false",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 
     function test_cannotDecreaseAccessPointScoreToMinusOne() public {
         string memory accessPointName = "accesspoint.com";
         CuT.addAccessPoint(tokenId, accessPointName);
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
         expectRevertWithMinimalScore();
         CuT.decreaseAccessPointScore(accessPointName);
     }
@@ -69,11 +123,38 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
         string memory accessPointName = "accesspoint.com";
         CuT.addAccessPoint(tokenId, accessPointName);
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
         CuT.increaseAccessPointScore(accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "1", "false", "false", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "1",
+            "false",
+            "false",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
         CuT.decreaseAccessPointScore(accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 
     function test_cannotAddAccessPointToNonexistentToken() public {
@@ -100,6 +181,15 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
         CuT.setAccessPointContentVerify(accessPointName, true);
         vm.stopPrank();
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "true", "true", deployer, "0", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "true",
+            "true",
+            deployer,
+            "0",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 }

contracts/test/foundry/FleekERC721/AccessPoints/AccessPointsAutoApprovalOn.t.sol

@@ -22,7 +22,16 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
         string memory accessPointName = "accesspoint.com";
         CuT.addAccessPoint(tokenId, accessPointName);
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 
     function test_removeAccessPoint() public {
@@ -30,7 +39,16 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
         CuT.addAccessPoint(tokenId, accessPointName);
         CuT.removeAccessPoint(accessPointName);
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "3", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "3",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 
     function test_cannotRemoveNonExistentAccessPoint() public {
@@ -49,20 +67,56 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
     function test_increaseAccessPointScore() public {
         string memory accessPointName = "accesspoint.com";
         CuT.addAccessPoint(tokenId, accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
 
         CuT.increaseAccessPointScore(accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "1", "false", "false", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "1",
+            "false",
+            "false",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
 
         CuT.increaseAccessPointScore(accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "2", "false", "false", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "2",
+            "false",
+            "false",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 
     function test_cannotDecreaseAccessPointScoreToMinusOne() public {
         string memory accessPointName = "accesspoint.com";
         CuT.addAccessPoint(tokenId, accessPointName);
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
         expectRevertWithMinimalScore();
         CuT.decreaseAccessPointScore(accessPointName);
     }
@@ -71,11 +125,38 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
         string memory accessPointName = "accesspoint.com";
         CuT.addAccessPoint(tokenId, accessPointName);
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
         CuT.increaseAccessPointScore(accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "1", "false", "false", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "1",
+            "false",
+            "false",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
         CuT.decreaseAccessPointScore(accessPointName);
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "false", "false", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "false",
+            "false",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 
     function test_cannotAddAccessPointToNonExistentToken() public {
@@ -102,6 +183,15 @@ contract Test_FleekERC721_AccessPoint is Test_FleekERC721_Base, APConstants {
         CuT.setAccessPointContentVerify(accessPointName, true);
         vm.stopPrank();
 
-        APConstants.assertAccessPointJSON(accessPointName, "0", "0", "true", "true", deployer, "1", CuT.getAccessPointJSON(accessPointName));
+        APConstants.assertAccessPointJSON(
+            accessPointName,
+            "0",
+            "0",
+            "true",
+            "true",
+            deployer,
+            "1",
+            CuT.getAccessPointJSON(accessPointName)
+        );
     }
 }

contracts/test/hardhat/contracts/FleekERC721/access-point/access-points-autoapproval-off.t.ts

@@ -204,9 +204,7 @@ describe('FleekERC721.AccessPoints.AutoApprovalOff', () => {
   it('should token owner be able to change the auto approval settings to on', async () => {
     const { contract, tokenId, owner } = fixture;
 
-    await contract
+    await contract.connect(owner).setAccessPointAutoApproval(tokenId, true);
-      .connect(owner)
-      .setAccessPointAutoApproval(tokenId, true);
 
     await contract.addAccessPoint(tokenId, 'accesspoint.com');
 

ui/README.md

@@ -23,7 +23,12 @@ To run the UI localy follow the steps:
    ```bash
    $ yarn
    ```
-3. You'll need to set up your firebase cretendials to make work the github login. Set the .env file with the following variables
+3. To use ConnecKit is neccessary get an [Alchemy ID](https://alchemy.com/), so create an App and get the credentials. Then set the following .env file
+   ```bash
+   VITE_ALCHEMY_API_KEY
+   VITE_ALCHEMY_APP_NAME
+   ```
+   Also, you'll need to set up your firebase cretendials to make work the github login. Add to the .env file the following variables
 
    ```bash
    VITE_FIREBASE_API_KEY

ui/index.html

@@ -1,12 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="module">
-      import { Buffer } from 'buffer';
-      import process from 'process';
-      window.Buffer = Buffer;
-      window.process = process;
-    </script>
     <meta charset="UTF-8" />
     <link
       rel="icon"

ui/package.json

@@ -21,6 +21,7 @@
     "@reduxjs/toolkit": "^1.9.1",
     "@stitches/react": "^1.2.8",
     "colorthief": "^2.3.2",
+    "connectkit": "^1.1.3",
     "firebase": "^9.17.1",
     "formik": "^2.2.9",
     "octokit": "^2.0.14",
@@ -28,7 +29,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.4.4"
+    "react-router-dom": "^6.4.4",
+    "wagmi": "^0.11.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

ui/src/app.tsx

@@ -3,6 +3,7 @@ import { initializeWallet } from './store';
 import { themeGlobals } from '@/theme/globals';
 import { Home, Mint } from './views';
 import { SVGTestScreen } from './views/svg-test'; // TODO: remove when done
+import { ConnectKitButton } from 'connectkit';
 
 initializeWallet();
 
@@ -10,6 +11,10 @@ export const App = () => {
   themeGlobals();
   return (
     <>
+      <div style={{ position: 'absolute', top: '1.25rem', left: '1.25rem' }}>
+        {/* TODO remove after adding NavBar */}
+        <ConnectKitButton />
+      </div>
       <BrowserRouter>
         <Routes>
           <Route path="/home" element={<Home />} />

ui/src/constants/env.ts

@@ -1,4 +1,8 @@
 export const env = Object.freeze({
+  alchemy: {
+    id: import.meta.env.VITE_ALCHEMY_API_KEY || '',
+    appName: import.meta.env.VITE_ALCHEMY_APP_NAME || '',
+  },
   firebase: {
     apiKey: import.meta.env.VITE_FIREBASE_API_KEY || '',
     authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || '',

ui/src/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './app';
-import { Provider as ReduxProvider } from 'react-redux';
-import { store } from './store';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import './styles.css';
-
+import { Providers } from './providers';
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { refetchOnWindowFocus: false } },
-});
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -16,10 +10,8 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <ReduxProvider store={store}>
+    <Providers>
-      <QueryClientProvider client={queryClient}>
+      <App />
-        <App />
+    </Providers>
-      </QueryClientProvider>
-    </ReduxProvider>
   </React.StrictMode>
 );

ui/src/providers/connectkit-provider.tsx

@@ -0,0 +1,30 @@
+import { WagmiConfig, createClient } from 'wagmi';
+import { polygonMumbai } from 'wagmi/chains';
+import {
+  ConnectKitProvider as ConnectKitProviderLib,
+  getDefaultClient,
+} from 'connectkit';
+import { env } from '@/constants';
+
+const alchemyId = env.alchemy.id;
+const chains = [polygonMumbai];
+
+const wagmiClient = createClient(
+  getDefaultClient({
+    appName: env.alchemy.appName,
+    alchemyId,
+    chains,
+  })
+);
+
+type ConnectKitProviderProps = {
+  children: React.ReactNode;
+};
+
+export const ConnectkitProvider: React.FC<ConnectKitProviderProps> = ({
+  children,
+}) => (
+  <WagmiConfig client={wagmiClient}>
+    <ConnectKitProviderLib>{children}</ConnectKitProviderLib>
+  </WagmiConfig>
+);

ui/src/providers/index.ts

@@ -0,0 +1 @@
+export * from './providers';

ui/src/providers/providers.tsx

@@ -0,0 +1,17 @@
+import { ConnectkitProvider } from './connectkit-provider';
+import { ReactQueryProvider } from './react-query-provider';
+import { ReduxProvider } from './redux-provider';
+
+type ProviderProps = {
+  children: React.ReactNode;
+};
+
+export const Providers: React.FC<ProviderProps> = ({ children }) => {
+  return (
+    <ReduxProvider>
+      <ReactQueryProvider>
+        <ConnectkitProvider>{children}</ConnectkitProvider>
+      </ReactQueryProvider>
+    </ReduxProvider>
+  );
+};

ui/src/providers/react-query-provider.tsx

@@ -0,0 +1,17 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { refetchOnWindowFocus: false } },
+});
+
+type ReactQueryProviderProps = {
+  children: React.ReactNode;
+};
+
+export const ReactQueryProvider: React.FC<ReactQueryProviderProps> = ({
+  children,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};

ui/src/providers/redux-provider.tsx

@@ -0,0 +1,10 @@
+import { store } from '@/store';
+import { Provider } from 'react-redux';
+
+type ReduxProviderProps = {
+  children: React.ReactNode;
+};
+
+export const ReduxProvider: React.FC<ReduxProviderProps> = ({ children }) => (
+  <Provider store={store}>{children}</Provider>
+);

ui/src/theme/globals.ts

@@ -4,7 +4,6 @@ export const themeGlobals = globalCss({
   'html, body, #root': {
     height: '100%',
     padding: 0,
-    margin: '25px 50px',
     color: '#ECEDEE',
     backgroundColor: 'black',
 

ui/src/views/home/home.tsx

@@ -1,3 +1,7 @@
 export const Home = () => {
-  return <h1>Home</h1>;
+  return (
+    <>
+      <h1>Home</h1>
+    </>
+  );
 };

ui/src/views/home/list.tsx

@@ -1,22 +0,0 @@
-import { Loading } from '@/components';
-import { Flex } from '@chakra-ui/react';
-import { useQuery } from 'react-query';
-import { SiteCard } from '@/components';
-import { FleekERC721 } from '@/integrations';
-
-export const ListSites = () => {
-  const { data, isLoading } = useQuery('fetchLastTokenId', () =>
-    FleekERC721.lastTokenId()
-  );
-
-  if (!data || isLoading) return <Loading />;
-  return (
-    <Flex gap={10} mt="40px" flexWrap="wrap" justifyContent="center">
-      {new Array(data).fill(0).map((_, index) => {
-        const id = data - index - 1;
-        return <SiteCard key={id} tokenId={id} />;
-      })}
-    </Flex>
-  );
-};
-

ui/src/views/mint/form-step/mint-form.tsx

@@ -8,14 +8,22 @@ import {
   VerifyNFAField,
 } from './fields';
 import { MintCardHeader } from '../mint-card';
+import { useAccount } from 'wagmi';
 
 export const FormStep = () => {
+  const { address } = useAccount();
   const { prevStep, nextStep } = Stepper.useContext();
   const { appName, appDescription, domain } = Mint.useContext();
 
+  //TODO remove once it's integrated with mint function
+  console.log('address', address);
+  const handlePrevStep = () => {
+    prevStep();
+  };
+
   return (
     <Card.Container css={{ width: '$107h' }}>
-      <MintCardHeader title="NFA Details" onClickBack={prevStep} />
+      <MintCardHeader title="NFA Details" onClickBack={handlePrevStep} />
       <Card.Body>
         <Grid
           css={{

ui/src/views/mint/github-step/steps/github-connect/github-connect-step.tsx

@@ -1,30 +1,30 @@
 import { Card, Grid, Icon, IconButton } from '@/components';
 import { GithubButton } from './github-button';
 
-export const GithubConnect: React.FC = () =>  (
+export const GithubConnect: React.FC = () => (
-    <Card.Container>
+  <Card.Container>
-      <Card.Heading
+    <Card.Heading
-        title="Connect GitHub"
+      title="Connect GitHub"
-        rightIcon={
+      rightIcon={
-          <IconButton
+        <IconButton
-            aria-label="Add"
+          aria-label="Add"
-            colorScheme="gray"
+          colorScheme="gray"
-            variant="link"
+          variant="link"
-            icon={<Icon name="info" />}
+          icon={<Icon name="info" />}
-          />
+        />
-        }
+      }
-      />
+    />
-      <Card.Body>
+    <Card.Body>
-        <Grid css={{ rowGap: '$6' }}>
+      <Grid css={{ rowGap: '$6' }}>
-          <GithubButton />
+        <GithubButton />
-          <Card.Text
+        <Card.Text
-            css={{ height: '$46h', width: '$95', fontSize: '$md', px: '$12' }}
+          css={{ height: '$46h', width: '$95', fontSize: '$md', px: '$12' }}
-          >
+        >
-            <span>
+          <span>
-              After connecting your GitHub, your repositories will show here.
+            After connecting your GitHub, your repositories will show here.
-            </span>
+          </span>
-          </Card.Text>
+        </Card.Text>
-        </Grid>
+      </Grid>
-      </Card.Body>
+    </Card.Body>
-    </Card.Container>
+  </Card.Container>
- );
+);

ui/src/views/mint/wallet-step/connect-wallet-button.tsx

@@ -0,0 +1,43 @@
+import { Button, Icon, Stepper } from '@/components';
+import { ConnectKitButton } from 'connectkit';
+
+export const ConnectWalletButton = () => {
+  const { nextStep } = Stepper.useContext();
+
+  return (
+    <ConnectKitButton.Custom>
+      {({ isConnected, show, truncatedAddress, address }) => {
+        if (isConnected && address) {
+          return (
+            <Button onClick={nextStep} css={{ color: '$slate12' }}>
+              Connected address: {truncatedAddress}. Continue
+            </Button>
+          );
+        } else {
+          return (
+            <Button
+              disabled={isConnected}
+              iconSpacing="44"
+              size="lg"
+              variant="ghost"
+              css={{
+                backgroundColor: '$slate4',
+                color: '$slate12',
+                py: '$2h',
+              }}
+              onClick={show}
+              rightIcon={
+                <Icon
+                  name="ethereum"
+                  css={{ color: 'white', fontSize: '$4xl' }}
+                />
+              }
+            >
+              Connect Wallet
+            </Button>
+          );
+        }
+      }}
+    </ConnectKitButton.Custom>
+  );
+};

ui/src/views/mint/wallet-step/wallet-step.tsx

@@ -1,32 +1,15 @@
 import { Button, Card, Grid, Icon, Stepper } from '@/components';
 import { MintCardHeader } from '../mint-card';
+import { ConnectWalletButton } from './connect-wallet-button';
 
 export const WalletStep = () => {
-  const { prevStep, nextStep } = Stepper.useContext();
+  const { prevStep } = Stepper.useContext();
   return (
     <Card.Container>
       <MintCardHeader title="Connect Wallet" onClickBack={prevStep} />
       <Card.Body>
         <Grid css={{ rowGap: '$6' }}>
-          <Button
+          <ConnectWalletButton />
-            iconSpacing="52"
-            size="lg"
-            variant="ghost"
-            css={{
-              backgroundColor: '$slate4',
-              color: '$slate12',
-              py: '$2h',
-            }}
-            onClick={nextStep}
-            rightIcon={
-              <Icon
-                name="metamask"
-                css={{ color: 'white', fontSize: '$4xl' }}
-              />
-            }
-          >
-            Metamask
-          </Button>
           <Card.Text
             css={{ height: '$46h', width: '$95', fontSize: '$md', px: '$12' }}
           >

ui/vite.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
 import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
 import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
 import builtins from 'rollup-plugin-node-builtins';
@@ -10,44 +9,6 @@ import builtins from 'rollup-plugin-node-builtins';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
-  resolve: {
-    alias: {
-      // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
-      // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
-      // process and buffer are excluded because already managed
-      // by node-globals-polyfill
-      util: 'rollup-plugin-node-polyfills/polyfills/util',
-      sys: 'util',
-      events: 'rollup-plugin-node-polyfills/polyfills/events',
-      stream: 'rollup-plugin-node-polyfills/polyfills/stream',
-      path: 'rollup-plugin-node-polyfills/polyfills/path',
-      querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
-      punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
-      url: 'rollup-plugin-node-polyfills/polyfills/url',
-      string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
-      http: 'rollup-plugin-node-polyfills/polyfills/http',
-      https: 'rollup-plugin-node-polyfills/polyfills/http',
-      os: 'rollup-plugin-node-polyfills/polyfills/os',
-      assert: 'rollup-plugin-node-polyfills/polyfills/assert',
-      constants: 'rollup-plugin-node-polyfills/polyfills/constants',
-      _stream_duplex:
-        'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
-      _stream_passthrough:
-        'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
-      _stream_readable:
-        'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
-      _stream_writable:
-        'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
-      _stream_transform:
-        'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
-      timers: 'rollup-plugin-node-polyfills/polyfills/timers',
-      console: 'rollup-plugin-node-polyfills/polyfills/console',
-      vm: 'rollup-plugin-node-polyfills/polyfills/vm',
-      zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
-      tty: 'rollup-plugin-node-polyfills/polyfills/tty',
-      domain: 'rollup-plugin-node-polyfills/polyfills/domain',
-    },
-  },
   optimizeDeps: {
     esbuildOptions: {
       target: 'es2020',