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>
2023-02-23 14:54:01 -05:00 · 2023-02-23 14:54:01 -05:00 · 70df262d94
parent 964c1a651f
commit 70df262d94
25 changed files with 2623 additions and 256 deletions
--- a/contracts/contracts/FleekERC721.sol
+++ b/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(
-        uint256 indexed token,
-        bool indexed settings,
-        address indexed triggeredBy
-    );
+    event ChangeAccessPointAutoApproval(uint256 indexed token, bool indexed settings, address indexed triggeredBy);

    event ChangeAccessPointScore(string apName, uint256 indexed tokenId, uint256 score, address indexed triggeredBy);

@ -54,7 +50,7 @@ contract FleekERC721 is Initializable, ERC721Upgradeable, FleekAccessControl, Fl
        AccessPointCreationStatus status,
        address indexed triggeredBy
    );
-    
+
    /**
     * The properties are stored as string to keep consistency with
     * other token contracts, we might consider changing for bytes32
@ -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 {
--- a/contracts/test/foundry/FleekERC721/AccessPoints/AccessPointsAutoApprovalOff.t.sol
+++ b/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)
+        );
    }
 }
--- a/contracts/test/foundry/FleekERC721/AccessPoints/AccessPointsAutoApprovalOn.t.sol
+++ b/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)
+        );
    }
 }
--- a/contracts/test/foundry/FleekERC721/AccessPoints/ApBase.sol
+++ b/contracts/test/foundry/FleekERC721/AccessPoints/ApBase.sol
@ -21,4 +21,4 @@ contract APConstants is Test {
        string memory expectedJSON = string(abi.encodePacked('{"tokenId":', _tokenId, ',"score":', score, ',"nameVerified":', nameVerified, ',"contentVerified":', contentVerified, ',"owner":"', owner.toHexString(), '","status":', status,'}'));
        assertEq(current, expectedJSON);
    }
-}
+}
--- a/contracts/test/hardhat/contracts/FleekERC721/access-point/access-points-autoapproval-off.t.ts
+++ b/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
-      .connect(owner)
-      .setAccessPointAutoApproval(tokenId, true);
+    await contract.connect(owner).setAccessPointAutoApproval(tokenId, true);

    await contract.addAccessPoint(tokenId, 'accesspoint.com');

--- a/ui/README.md
+++ b/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
--- a/ui/index.html
+++ b/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"
--- a/ui/package.json
+++ b/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",
--- a/ui/src/app.tsx
+++ b/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 />} />
--- a/ui/src/constants/env.ts
+++ b/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 || '',
--- a/ui/src/index.tsx
+++ b/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';
-
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { refetchOnWindowFocus: false } },
-});
+import { Providers } from './providers';

 const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
@ -16,10 +10,8 @@ const root = ReactDOM.createRoot(

 root.render(
  <React.StrictMode>
-    <ReduxProvider store={store}>
-      <QueryClientProvider client={queryClient}>
-        <App />
-      </QueryClientProvider>
-    </ReduxProvider>
+    <Providers>
+      <App />
+    </Providers>
  </React.StrictMode>
 );
--- a/ui/src/providers/connectkit-provider.tsx
+++ b/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>
+);
--- a/ui/src/providers/index.ts
+++ b/ui/src/providers/index.ts
@ -0,0 +1 @@
+export * from './providers';
--- a/ui/src/providers/providers.tsx
+++ b/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>
+  );
+};
--- a/ui/src/providers/react-query-provider.tsx
+++ b/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>
+  );
+};
--- a/ui/src/providers/redux-provider.tsx
+++ b/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>
+);
--- a/ui/src/theme/globals.ts
+++ b/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',

--- a/ui/src/views/home/home.tsx
+++ b/ui/src/views/home/home.tsx
@ -1,3 +1,7 @@
 export const Home = () => {
-  return <h1>Home</h1>;
+  return (
+    <>
+      <h1>Home</h1>
+    </>
+  );
 };
--- a/ui/src/views/home/list.tsx
+++ b/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>
-  );
-};
-
--- a/ui/src/views/mint/form-step/mint-form.tsx
+++ b/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={{
--- a/ui/src/views/mint/github-step/steps/github-connect/github-connect-step.tsx
+++ b/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 = () =>  (
-    <Card.Container>
-      <Card.Heading
-        title="Connect GitHub"
-        rightIcon={
-          <IconButton
-            aria-label="Add"
-            colorScheme="gray"
-            variant="link"
-            icon={<Icon name="info" />}
-          />
-        }
-      />
-      <Card.Body>
-        <Grid css={{ rowGap: '$6' }}>
-          <GithubButton />
-          <Card.Text
-            css={{ height: '$46h', width: '$95', fontSize: '$md', px: '$12' }}
-          >
-            <span>
-              After connecting your GitHub, your repositories will show here.
-            </span>
-          </Card.Text>
-        </Grid>
-      </Card.Body>
-    </Card.Container>
- );
+export const GithubConnect: React.FC = () => (
+  <Card.Container>
+    <Card.Heading
+      title="Connect GitHub"
+      rightIcon={
+        <IconButton
+          aria-label="Add"
+          colorScheme="gray"
+          variant="link"
+          icon={<Icon name="info" />}
+        />
+      }
+    />
+    <Card.Body>
+      <Grid css={{ rowGap: '$6' }}>
+        <GithubButton />
+        <Card.Text
+          css={{ height: '$46h', width: '$95', fontSize: '$md', px: '$12' }}
+        >
+          <span>
+            After connecting your GitHub, your repositories will show here.
+          </span>
+        </Card.Text>
+      </Grid>
+    </Card.Body>
+  </Card.Container>
+);
--- a/ui/src/views/mint/wallet-step/connect-wallet-button.tsx
+++ b/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>
+  );
+};
--- a/ui/src/views/mint/wallet-step/wallet-step.tsx
+++ b/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
-            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>
+          <ConnectWalletButton />
          <Card.Text
            css={{ height: '$46h', width: '$95', fontSize: '$md', px: '$12' }}
          >
--- a/ui/vite.config.ts
+++ b/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',
--- a/ui/yarn.lock
+++ b/ui/yarn.lock