Merge pull request #1 from valory-xyz/feature/frontend-boilerplate

feat: first with boilerplate

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:jest/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+    "JSX": true,
+    "React": true
+  },
+  "plugins": [
+    "jest",
+    "prettier",
+    "react",
+    "react-hooks"
+  ],
+  "rules": {
+    "no-console": "warn",
+    "no-unused-vars": "off",
+    "prettier/prettier": ["error", {
+      "endOfLine": "auto",
+      "semi": true
+    }],
+    "react/jsx-props-no-spreading": "off",
+    "react/no-array-index-key": "off",
+    "react/react-in-jsx-scope": "off",    
+    "react-hooks/rules-of-hooks": "error", 
+    "react-hooks/exhaustive-deps": "warn" 
+  }
+}

.github/workflows/main.yml.bak

@@ -0,0 +1,37 @@
+# TBA
+name: Frontend Workflow
+
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Node
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20.11"
+      # Python
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.10"
+      - name: Install and configure Poetry
+        uses: snok/install-poetry@v1
+        with:
+          version: "1.7.1"
+          virtualenvs-create: true
+          virtualenvs-in-project: false
+          virtualenvs-path: ~/my-custom-path
+          installer-parallel: true
+      # Install dependencies
+      - name: Install dependencies
+        run: yarn
+      # Lint and test
+      - name: Lint
+        run: yarn lint
+      - name: Test
+        run: yarn test

.gitignore

@@ -1,2 +1,42 @@
-data/
-__pycache__/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# python
+data
+backend/__pycache__/
+backend/scripts/__pycache__/

README.md

@@ -1 +1,34 @@
-# olas-operate-app
+Frontend Electron + NextJS application for the Olas Operate App.
+
+## Technologies Used
+- NextJS
+- Electron
+- AntD
+- TypeScript
+- Python
+- Flask
+- Poetry
+
+
+## Getting Started
+
+### Install Yarn 
+
+```bash
+npm install --global yarn
+```
+
+### Install dependencies
+
+```bash
+yarn
+```
+
+### Run the development app
+
+```bash
+yarn dev
+```
+
+
+

components/Layout/Layout.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+import { Navbar } from "./Navbar/Navbar";
+import { Flex } from "antd";
+
+export const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <Flex vertical>
+      <Navbar />
+      {children}
+    </Flex>
+  );
+};

components/Layout/Navbar/Navbar.tsx

@@ -0,0 +1,14 @@
+import { BellOutlined, SettingOutlined } from "@ant-design/icons";
+import { Flex, Typography } from "antd";
+
+export const Navbar = () => {
+  return (
+    <Flex vertical={false} justify="space-between" style={{ minWidth: "100%" }}>
+      <Typography.Text style={{ fontWeight: 700 }}>Operate</Typography.Text>
+      <Flex gap={4}>
+        <BellOutlined />
+        <SettingOutlined />
+      </Flex>
+    </Flex>
+  );
+};

components/Marketplace/Marketplace.tsx

@@ -0,0 +1,10 @@
+import { Flex } from "antd";
+import { MarketplaceItem } from "./MarketplaceItem";
+
+export const Marketplace = () => {
+  return (
+    <Flex vertical>
+      <MarketplaceItem />
+    </Flex>
+  );
+};

components/Marketplace/MarketplaceItem.tsx

@@ -0,0 +1,26 @@
+import { Row, Col, Button } from "antd";
+import Image from "next/image";
+export const MarketplaceItem = () => {
+  return (
+    <Row gutter={16}>
+      <Col span={8}>
+        <Image
+          src=""
+          alt="Image"
+          style={{
+            minWidth: "100%",
+            minHeight: "100%",
+            border: "1px solid black",
+          }}
+        />
+      </Col>
+      <Col span={16}>
+        <h2>Agent Name</h2>
+        <p>Agent Description</p>
+        <Button href="/spawn/1" type="primary">
+          Run this agent
+        </Button>
+      </Col>
+    </Row>
+  );
+};

components/QRModal/QRModal.tsx

@@ -0,0 +1,11 @@
+import { Modal } from "antd";
+import { Dispatch, SetStateAction } from "react";
+type QRModalProps = {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  address: string;
+};
+
+export const QRModal = ({ open, setOpen, address }: QRModalProps) => {
+  return <Modal open={open} onCancel={() => setOpen(false)} footer={null} />;
+};

components/Spawn/SpawnDone/SpawnDone.tsx

@@ -0,0 +1,28 @@
+import { SpawnState } from "@/enums/SpawnState";
+import { Tab } from "@/enums/Tabs";
+import { useSpawn } from "@/hooks/useSpawn";
+import { useTabs } from "@/hooks/useTabs";
+import { Button, Flex } from "antd";
+import { useRouter } from "next/router";
+
+export const SpawnDone = () => {
+  const router = useRouter();
+
+  const { setSpawnState } = useSpawn();
+  const { setActiveTab } = useTabs();
+
+  const handleViewAgent = () => {
+    router.push("/").then(() => {
+      setActiveTab(Tab.YOUR_AGENTS);
+      setSpawnState(SpawnState.RPC);
+    });
+  };
+
+  return (
+    <Flex gap={8} vertical>
+      <Button type="primary" onClick={handleViewAgent}>
+        View agent
+      </Button>
+    </Flex>
+  );
+};

components/Spawn/SpawnFunds/SpawnFunds.tsx

@@ -0,0 +1,56 @@
+import { SpawnState } from "@/enums/SpawnState";
+import { copyToClipboard } from "@/helpers/copyToClipboard";
+import { useSpawn } from "@/hooks/useSpawn";
+import { Button, Flex, Timeline, Typography } from "antd";
+import { useMemo } from "react";
+
+const mockRequiresFunds = [
+  { amount: 0.1, currency: "xDAI", to: "0xTest", recieved: true },
+];
+
+export const SpawnFunds = () => {
+  const { setSpawnState } = useSpawn();
+
+  const handleContinue = () => {
+    setSpawnState(SpawnState.DONE);
+  };
+
+  const items = useMemo(
+    () =>
+      mockRequiresFunds.map((mock) => ({
+        children: (
+          <Flex gap={8} vertical key={mock.to}>
+            <Typography.Text>
+              Send {mock.amount} {mock.currency} to: {mock.to}
+            </Typography.Text>
+            <Flex gap={8}>
+              <Button type="primary" onClick={() => copyToClipboard(mock.to)}>
+                Copy address
+              </Button>
+              <Button type="default">Show QR</Button>
+            </Flex>
+          </Flex>
+        ),
+      })),
+    [],
+  );
+
+  const hasSentAllFunds = useMemo(
+    () => mockRequiresFunds.every((mock) => mock.recieved),
+    [],
+  );
+
+  return (
+    <Flex gap={8} vertical>
+      <Typography.Text>Your agent needs funds!</Typography.Text>
+      <Timeline items={items} />
+      <Button
+        type="default"
+        disabled={!hasSentAllFunds}
+        onClick={handleContinue}
+      >
+        Continue
+      </Button>
+    </Flex>
+  );
+};

components/Spawn/SpawnHeader/SpawnHeader.tsx

@@ -0,0 +1,21 @@
+import { useSpawn } from "@/hooks/useSpawn";
+import { Progress, Typography } from "antd";
+import Image from "next/image";
+import { useMemo } from "react";
+
+export const SpawnHeader = () => {
+  const { spawnPercentage } = useSpawn();
+
+  const title = useMemo(
+    () => (spawnPercentage === 100 ? "Agent Spawned" : "Spawn your Agent"),
+    [spawnPercentage],
+  );
+
+  return (
+    <>
+      <Image src="/robot-head.png" alt="robot head" width={200} height={200} />
+      <Typography.Title>{title}</Typography.Title>
+      <Progress percent={spawnPercentage} />
+    </>
+  );
+};