Add UI into the repo

.gitignore

@@ -23,6 +23,5 @@ typechain/
 
 test-results.json
 scenario-results.json
-api3-aave-ui/
 
 api3-adaptors/deployments/

api3-aave-ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

api3-aave-ui/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+/generated-configs

api3-aave-ui/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies = false

api3-aave-ui/README.md

@@ -0,0 +1,33 @@
+[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)
+
+# API3 Aave UI
+
+This repository is being used in [Aave Protocol V2 Fork](https://github.com/api3-ecosystem/aave-protocol-v2-fork) to spin up market frontend. follow the docs the in [Aave Protocol V2 Fork](https://github.com/api3-ecosystem/aave-protocol-v2-fork) to run frontend on custom networks
+
+## What is Aave?
+
+Aave is a decentralized non-custodial liquidity markets protocol where users can participate as depositors or borrowers. Depositors provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralized (perpetually) or undercollateralized (one-block liquidity) fashion.
+
+## What is API3
+
+API3 is a collaborative project to deliver traditional API services to smart contract platforms in a decentralized and trust-minimized way.
+
+API3 is building secure first-party oracles and OEV-enabled data feeds for DeFi protocols and users. The data feeds are continuously updated by first-party oracles using signed data.
+
+## Setup
+
+The repository uses `deployment-configs.json` to load market configs. By default it uses default configs, and it uses defined configs if started from [Aave Protocol V2 Fork](https://github.com/api3-ecosystem/aave-protocol-v2-fork).
+
+### Spinning up the frontend locally with defaults
+
+- Install dependencies`
+
+  ```bash
+  yarn
+  ```
+
+- Start next client
+
+  ```bash
+  yarn dev
+  ```

api3-aave-ui/components/ConnectWallet.tsx

@@ -0,0 +1,89 @@
+import { Wallet } from "@mui/icons-material";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+
+export default function ConnectWallet() {
+  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");
+
+        console.log("chain", chain);
+        return (
+          <div
+            {...(!ready && {
+              "aria-hidden": true,
+              style: {
+                opacity: 0,
+                pointerEvents: "none",
+                userSelect: "none",
+              },
+            })}
+          >
+            {(() => {
+              if (!connected) {
+                return (
+                  <button
+                    onClick={openConnectModal}
+                    type="button"
+                    className="button flex items-center gap-2"
+                    style={{ borderRadius: 10 }}
+                  >
+                    <Wallet />
+                    Connect Wallet
+                  </button>
+                );
+              }
+              if (chain.unsupported) {
+                return (
+                  <button
+                    onClick={openChainModal}
+                    type="button"
+                    className="button outline"
+                    style={{ borderRadius: 14 }}
+                  >
+                    Wrong network
+                  </button>
+                );
+              }
+              return (
+                <button
+                  onClick={openAccountModal}
+                  type="button"
+                  className="button flex items-center gap-2 border-0 outline "
+                >
+                  <picture>
+                    <img src={chain?.iconUrl} alt="" />
+                  </picture>
+
+                  <span>
+                    {account.displayName}
+                    <mark className="highlight">
+                      {account.displayBalance
+                        ? ` (${account.displayBalance})`
+                        : ""}
+                    </mark>
+                  </span>
+                </button>
+              );
+            })()}
+          </div>
+        );
+      }}
+    </ConnectButton.Custom>
+  );
+}