CHORES: add skeleton VCI draft PR

packages/vci/.eslintrc.json

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

packages/vci/.gitignore

@@ -0,0 +1,39 @@
+# 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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# project
+.env

packages/vci/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

packages/vci/components/Dashboard.tsx

@@ -0,0 +1,67 @@
+import AssetSelection from "./sections/AssetSelection";
+import ProtocolSelection from "./sections/ProtocolSelection";
+import { GrDocumentConfig } from "react-icons/gr";
+import { IoMdArrowForward } from "react-icons/io";
+import AdapterSelection from "./sections/AdapterSelection";
+import AdapterConfiguration from "./sections/AdapterConfiguration";
+import StrategySelection from "./sections/StrategySelection";
+import FeeConfiguration from "./sections/FeeConfiguration";
+import { useRouter } from "next/router";
+import { useAtom } from "jotai";
+import { adapterAtom, adapterConfigAtom, checkInitParamValidity } from "@/lib/adapter";
+import { feeAtom } from "@/lib/fees";
+import { constants, utils } from "ethers";
+import { formatUnits } from "ethers/lib/utils.js";
+import NetworkSelection from "./sections/NetworkSelection";
+
+function Dashboard() {
+  const router = useRouter();
+  const [adapter,] = useAtom(adapterAtom);
+  const [adapterConfig,] = useAtom(adapterConfigAtom);
+  const [fees,] = useAtom(feeAtom)
+
+  const validFees = ([fees.deposit, fees.withdrawal, fees.management, fees.performance].some(fee => Number(formatUnits(fee)) > 0) && fees.recipient != constants.AddressZero)
+    && utils.isAddress(fees.recipient)
+    && [fees.deposit, fees.withdrawal, fees.management, fees.performance].every(fee => Number(formatUnits(fee)) < 1)
+  const validAdapter = !!adapter
+  const validAdapterConfig = typeof adapter.initParams === "undefined"
+    || (!!adapter.initParams && adapter.initParams.length > 0 && adapterConfig.length === adapter.initParams.length &&
+      // @ts-ignore
+      (adapterConfig.every((config, i) => checkInitParamValidity(config, adapter.initParams[i])))
+    )
+
+  return (
+    <section>
+      <h1 className="text-2xl flex items-center gap-2 font-bold mt-6 mb-8">
+        <GrDocumentConfig />
+        <span>Setup New Vault</span>
+      </h1>
+      <div className="mb-12">
+        <NetworkSelection />
+        <ProtocolSelection />
+        <AssetSelection />
+        <AdapterSelection />
+        <AdapterConfiguration />
+        <StrategySelection />
+        <FeeConfiguration />
+      </div>
+      <div className="flex justify-center mt-8">
+        <button
+          className="flex group gap-2 items-center bg-blue-600 text-white font-bold px-6 py-4 rounded-xl shadow disabled:bg-gray-500"
+          onClick={() => router.push("/vault-preview")}
+          disabled={!validFees || !validAdapter || !validAdapterConfig}
+        >
+          <span>Preview Vault</span>
+          <IoMdArrowForward className="text-[150%] group-hover:translate-x-px" />
+        </button>
+        <div>
+          <p>ValidFees: {String(validFees)}</p>
+          <p>ValidAdapter: {String(validAdapter)}</p>
+          <p>ValidAdapterConfig: {String(validAdapterConfig)}</p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Dashboard;

packages/vci/components/Preview.tsx

@@ -0,0 +1,126 @@
+import Section from "@/components/content/Section";
+import { constants, ethers } from "ethers";
+import { useAccount } from "wagmi";
+import { adapterAtom, adapterConfigAtom, adapterDeploymentAtom } from "@/lib/adapter";
+import { useAtom } from "jotai";
+import { assetAtom } from "@/lib/assets";
+import { feeAtom } from "@/lib/fees";
+import { useEffect } from "react";
+import { useDeployVault } from "@/lib/vaults";
+import { noOp } from "@/lib/helpers";
+import { IoMdArrowBack, IoMdArrowForward } from "react-icons/io";
+import { useRouter } from "next/router";
+import { AbiCoder, formatUnits } from "ethers/lib/utils.js";
+
+
+export default function Preview(): JSX.Element {
+  const { address: account } = useAccount();
+  const router = useRouter();
+  const [asset,] = useAtom(assetAtom);
+  const [adapter,] = useAtom(adapterAtom);
+  const [adapterConfig,] = useAtom(adapterConfigAtom);
+  const [adapterData, setAdapterData] = useAtom(adapterDeploymentAtom);
+  const [fees,] = useAtom(feeAtom);
+
+  const { write: deployVault = noOp } = useDeployVault();
+
+
+  useEffect(() => {
+    setAdapterData({
+      id: ethers.utils.formatBytes32String(adapter.key ? adapter.key : ""),
+      data: !!adapter.initParams ?
+        ethers.utils.defaultAbiCoder.encode(adapter.initParams?.map(param => param.type), adapterConfig)
+        : "0x"
+    })
+  }, [adapterConfig]);
+
+  return (
+    <section>
+      <div>
+        <h1 className="text-2xl flex items-center gap-2 font-bold mt-6 mb-8">
+          Review Vault
+        </h1>
+        <Section title="Vault Configuration">
+          <p>Asset: {asset?.address || constants.AddressZero}</p>
+          <p>Adapter: {constants.AddressZero}</p>
+          <p>Owner: {account}</p>
+          <p>Deposit Limit: {constants.MaxUint256.toString()}</p>
+          <div>
+            <p>Fees: </p>
+            <div>
+              <p>Deposit: {Number(fees.deposit.hex)} ({formatUnits(fees.deposit)})</p>
+              <p>Withdrawal: {Number(fees.withdrawal.hex)} ({formatUnits(fees.withdrawal)})</p>
+              <p>Management: {Number(fees.management.hex)} ({formatUnits(fees.management)})</p>
+              <p>Performance: {Number(fees.performance.hex)} ({formatUnits(fees.performance)})</p>
+              <p>Recipient: {fees.recipient}</p>
+            </div>
+          </div>
+        </Section>
+        <Section title="Adapter Configuration">
+          <p>Name: {adapter.name}</p>
+          <p>Id: {adapterData.id}</p>
+          <p>Data: {adapterData.data}</p>
+          <div>
+            <p>Params: </p>
+            <div>
+              {adapterConfig?.map((param, i) => <p>{i}: {param}</p>)}
+            </div>
+          </div>
+        </Section>
+        <Section title="Strategy Configuration">
+          <p>Id: {ethers.utils.formatBytes32String("")}</p>
+          <p>Data: 0x</p>
+          <div>
+            <p>Params: </p>
+          </div>
+        </Section>
+        <Section title="Staking Configuration">
+          <p>Deploy Staking: false </p>
+          <p>RewardsData: 0x</p>
+        </Section>
+        <Section title="Vault Metadata">
+          <p>Vault: {constants.AddressZero}</p>
+          <p>Adapter: {constants.AddressZero}</p>
+          <p>Creator: {account}</p>
+          <p>MetadataCID: ""</p>
+          <p>SwapAddress: {constants.AddressZero}</p>
+          <p>Exchange: 0</p>
+          <div>
+            <p>SwapTokenAddresses: </p>
+            <div>
+              <p>0: {constants.AddressZero}</p>
+              <p>1: {constants.AddressZero}</p>
+              <p>2: {constants.AddressZero}</p>
+              <p>3: {constants.AddressZero}</p>
+              <p>4: {constants.AddressZero}</p>
+              <p>5: {constants.AddressZero}</p>
+              <p>6: {constants.AddressZero}</p>
+              <p>7: {constants.AddressZero}</p>
+            </div>
+          </div>
+        </Section>
+        <Section title="InitialDeposit">
+          <p>InitialDeposit: 0</p>
+        </Section>
+        <div className="flex justify-center mt-8">
+          <div className="flex flex-row items-center space-x-4">
+            <button
+              className="flex group gap-2 items-center bg-red-500 text-white font-bold px-6 py-4 rounded-xl shadow"
+              onClick={() => router.push("/")}
+            >
+              <IoMdArrowBack className="text-[150%] group-hover:translate-x-px" />
+              <span>Change Stuff</span>
+            </button>
+            <button
+              className="flex group gap-2 items-center bg-blue-600 text-white font-bold px-6 py-4 rounded-xl shadow"
+              onClick={() => { console.log("done"); deployVault() }}
+            >
+              <span>Deploy Vault</span>
+              <IoMdArrowForward className="text-[150%] group-hover:translate-x-px" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

packages/vci/components/Selector.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from "react";
+import { Listbox } from "@headlessui/react";
+
+function Selector({
+  selected,
+  onSelect,
+  children,
+  actionContent,
+}: {
+  selected?: any;
+  onSelect: (value: any) => void;
+  children: any;
+  actionContent: (selected: any) => JSX.Element;
+}) {
+  return (
+    <Listbox className="relative self-start" as="div" value={selected} onChange={onSelect}>
+      <Listbox.Button className="border rounded-lg flex gap-2 p-2">{actionContent(selected)}</Listbox.Button>
+      <Listbox.Options className="z-[1] absolute flex flex-col min-w-[12rem] rounded-lg ml-[100%] top-0 left-0 p-2 bg-white shadow-xl max-h-[80vh] overflow-auto">
+        {children}
+      </Listbox.Options>
+    </Listbox>
+  );
+}
+
+export function Option({ value, children }: { value: any; children: any }) {
+  return (
+    <Listbox.Option value={value} as={Fragment}>
+      {({ active }) => {
+        return (
+          <button
+            className={`p-2 flex gap-2 border border-transparent rounded-lg whitespace-nowrap text-left hover:bg-zinc-400/5 ${
+              active && "bg-zinc-400/5 border-zinc-400/5"
+            }`}
+          >
+            {children}
+          </button>
+        );
+      }}
+    </Listbox.Option>
+  );
+}
+
+export default Selector;

packages/vci/components/content/Fieldset.tsx

@@ -0,0 +1,10 @@
+function Fieldset({ children, label: labelContent, className }: { children: any; label: string; className?: string }) {
+  return (
+    <fieldset className={`${className} flex items-center gap-2`}>
+      <label className="min-w-[12rem]">{labelContent}</label>
+      {children}
+    </fieldset>
+  );
+}
+
+export default Fieldset;

packages/vci/components/content/Input.tsx

@@ -0,0 +1,8 @@
+import type { HTMLProps } from "react";
+
+export type InputProps = HTMLProps<HTMLInputElement>;
+function Input({ className, ...props }: InputProps) {
+  return <input className={`${className} p-2 bg-zinc-500/5 rounded-lg`} type="text" {...props} />;
+}
+
+export default Input;

packages/vci/components/content/Navbar.tsx

@@ -0,0 +1,22 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import Image from "next/image";
+
+import asset_logo from "@/assets/logo.png";
+import { useAccount } from "wagmi";
+import { beautifyAddress } from "@/lib/helpers";
+
+
+export default function Navbar(): JSX.Element {
+  const { address: account } = useAccount();
+  return (
+    <section className="bg-slate-400/5 border-b border-slate-100 p-4">
+      <nav className="w-full max-w-screen-lg mx-auto flex justify-end">
+        <figure className="w-16">
+          <Image src={asset_logo} alt="" />
+        </figure>
+        <div className="flex-grow" />
+        {account ? <p>{beautifyAddress(account)}</p> : <ConnectButton />}
+      </nav>
+    </section>
+  )
+}

packages/vci/components/content/Page.tsx

@@ -0,0 +1,12 @@
+import Navbar from "./Navbar";
+
+export default function Page({ children }: { children: JSX.Element }): JSX.Element {
+  return (
+    <>
+      <Navbar />
+      <main className="max-w-screen-lg mx-auto py-4">
+        {children}
+      </main>
+    </>
+  )
+}

packages/vci/components/content/Section.tsx

@@ -0,0 +1,10 @@
+function Section({ children, title, className }: { children: any; className?: string; title: string }) {
+  return (
+    <section className={`border-t p-4 mt-4 flex flex-col gap-4 ${className}`}>
+      <h2 className="text-lg font-bold">{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+export default Section;