diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..629adb37c
--- /dev/null
+++ b/.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"
+ }
+}
\ No newline at end of file
diff --git a/.github/workflows/main.yml.bak b/.github/workflows/main.yml.bak
new file mode 100644
index 000000000..c4116f458
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 9202c09b2..d7fffc6f0 100644
--- a/.gitignore
+++ b/.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__/
\ No newline at end of file
diff --git a/README.md b/README.md
index 26c482782..eb90e92eb 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,34 @@
-# olas-operate-app
\ No newline at end of file
+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
+```
+
+
+
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
new file mode 100644
index 000000000..e690c1201
--- /dev/null
+++ b/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 (
+
+
+ {children}
+
+ );
+};
diff --git a/components/Layout/Navbar/Navbar.tsx b/components/Layout/Navbar/Navbar.tsx
new file mode 100644
index 000000000..5a5360ef0
--- /dev/null
+++ b/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 (
+
+ Operate
+
+
+
+
+
+ );
+};
diff --git a/components/Marketplace/Marketplace.tsx b/components/Marketplace/Marketplace.tsx
new file mode 100644
index 000000000..67d8e918e
--- /dev/null
+++ b/components/Marketplace/Marketplace.tsx
@@ -0,0 +1,10 @@
+import { Flex } from "antd";
+import { MarketplaceItem } from "./MarketplaceItem";
+
+export const Marketplace = () => {
+ return (
+
+
+
+ );
+};
diff --git a/components/Marketplace/MarketplaceItem.tsx b/components/Marketplace/MarketplaceItem.tsx
new file mode 100644
index 000000000..62b43a7f0
--- /dev/null
+++ b/components/Marketplace/MarketplaceItem.tsx
@@ -0,0 +1,26 @@
+import { Row, Col, Button } from "antd";
+import Image from "next/image";
+export const MarketplaceItem = () => {
+ return (
+
+
+
+
+
+ Agent Name
+ Agent Description
+
+
+
+ );
+};
diff --git a/components/QRModal/QRModal.tsx b/components/QRModal/QRModal.tsx
new file mode 100644
index 000000000..6d924feaa
--- /dev/null
+++ b/components/QRModal/QRModal.tsx
@@ -0,0 +1,11 @@
+import { Modal } from "antd";
+import { Dispatch, SetStateAction } from "react";
+type QRModalProps = {
+ open: boolean;
+ setOpen: Dispatch>;
+ address: string;
+};
+
+export const QRModal = ({ open, setOpen, address }: QRModalProps) => {
+ return setOpen(false)} footer={null} />;
+};
diff --git a/components/Spawn/SpawnDone/SpawnDone.tsx b/components/Spawn/SpawnDone/SpawnDone.tsx
new file mode 100644
index 000000000..927ef91d6
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
diff --git a/components/Spawn/SpawnFunds/SpawnFunds.tsx b/components/Spawn/SpawnFunds/SpawnFunds.tsx
new file mode 100644
index 000000000..359f00dfa
--- /dev/null
+++ b/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: (
+
+
+ Send {mock.amount} {mock.currency} to: {mock.to}
+
+
+
+
+
+
+ ),
+ })),
+ [],
+ );
+
+ const hasSentAllFunds = useMemo(
+ () => mockRequiresFunds.every((mock) => mock.recieved),
+ [],
+ );
+
+ return (
+
+ Your agent needs funds!
+
+
+
+ );
+};
diff --git a/components/Spawn/SpawnHeader/SpawnHeader.tsx b/components/Spawn/SpawnHeader/SpawnHeader.tsx
new file mode 100644
index 000000000..299ddadc4
--- /dev/null
+++ b/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 (
+ <>
+
+ {title}
+
+
+ );
+};
diff --git a/components/Spawn/SpawnRPC/SpawnRPC.tsx b/components/Spawn/SpawnRPC/SpawnRPC.tsx
new file mode 100644
index 000000000..9c98f62bc
--- /dev/null
+++ b/components/Spawn/SpawnRPC/SpawnRPC.tsx
@@ -0,0 +1,85 @@
+import { Button, Flex, Input, Timeline, Typography } from "antd";
+import { NODIES_URL } from "@/constants/urls";
+import { useMemo, useState } from "react";
+import { useSpawn } from "@/hooks/useSpawn";
+import { SpawnState } from "@/enums/SpawnState";
+
+export const SpawnRPC = () => {
+ const { setSpawnState } = useSpawn();
+
+ const [rpc, setRpc] = useState("");
+
+ const handlePaste = () => {
+ navigator.clipboard.readText().then((text) => setRpc(text));
+ };
+
+ const handleContinue = () => {
+ setSpawnState(SpawnState.FUNDS);
+ };
+
+ const items = useMemo(
+ () => [
+ // Get nodies account
+ {
+ children: (
+
+ Get a Nodies account
+
+
+ ),
+ },
+ // Add application
+ {
+ children: (
+
+ Add application
+
+ Set Gnosis as network
+
+
+ ),
+ },
+ // Copy endpoint
+ {
+ children: (
+
+ Copy endpoint
+
+ Copy the endpoint from the nodies site
+
+
+ ),
+ },
+ // Paste endpoint
+ {
+ children: (
+
+ Paste endpoint
+
+ setRpc(e.target.value)}
+ >
+
+
+
+ ),
+ },
+ ],
+ [rpc],
+ );
+
+ return (
+
+
+
+
+ );
+};
diff --git a/components/Spawn/index.tsx b/components/Spawn/index.tsx
new file mode 100644
index 000000000..9f412b6ea
--- /dev/null
+++ b/components/Spawn/index.tsx
@@ -0,0 +1,4 @@
+export * from "./SpawnDone/SpawnDone";
+export * from "./SpawnFunds/SpawnFunds";
+export * from "./SpawnHeader/SpawnHeader";
+export * from "./SpawnRPC/SpawnRPC";
diff --git a/components/Timeline/TimelineItem/TimelineItem.tsx b/components/Timeline/TimelineItem/TimelineItem.tsx
new file mode 100644
index 000000000..ec77bd482
--- /dev/null
+++ b/components/Timeline/TimelineItem/TimelineItem.tsx
@@ -0,0 +1,14 @@
+export const TimelineItem = ({
+ title,
+ body,
+}: {
+ title: string;
+ body: JSX.Element;
+}) => {
+ return (
+
+ );
+};
diff --git a/components/YourAgents/YourAgents.tsx b/components/YourAgents/YourAgents.tsx
new file mode 100644
index 000000000..97be151b0
--- /dev/null
+++ b/components/YourAgents/YourAgents.tsx
@@ -0,0 +1,39 @@
+import { Tab } from "@/enums/Tabs";
+import { useAgents } from "@/hooks/useAgents";
+import { useTabs } from "@/hooks/useTabs";
+import { Button, Flex, Typography } from "antd";
+
+export const YourAgents = () => {
+ const { agents } = useAgents();
+
+ const hasAgents = agents?.length > 0;
+
+ return <>{hasAgents ? : };
+};
+
+export const HasAgents = ({ agents }: { agents: any[] }) => {
+ const { stopAgent } = useAgents();
+ return (
+ <>
+ {agents.map((agent) => (
+
+ {agent.name}
+ {agent.description}
+
+
+ ))}
+
+ );
+};
+
+export const NoAgents = () => {
+ const { setActiveTab } = useTabs();
+ return (
+
+ No agents running.
+
+
+ );
+};
diff --git a/constants/urls.ts b/constants/urls.ts
new file mode 100644
index 000000000..85623ee5d
--- /dev/null
+++ b/constants/urls.ts
@@ -0,0 +1 @@
+export const NODIES_URL = "https://nodies.app";
diff --git a/context/AgentsProvider.tsx b/context/AgentsProvider.tsx
new file mode 100644
index 000000000..2b5cb6614
--- /dev/null
+++ b/context/AgentsProvider.tsx
@@ -0,0 +1,41 @@
+import {
+ Dispatch,
+ PropsWithChildren,
+ SetStateAction,
+ createContext,
+ useEffect,
+ useState,
+} from "react";
+import useSWR from "swr";
+
+type AgentContextType = {
+ agents: any[];
+ setAgents: Dispatch>;
+ isLoading: boolean;
+};
+
+export const AgentsContext = createContext({
+ agents: [],
+ setAgents: () => {},
+ isLoading: false,
+});
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export const AgentsProvider = ({ children }: PropsWithChildren) => {
+ const [agents, setAgents] = useState([]);
+ const { data, error, isLoading } = useSWR("/api/agents", fetcher, {
+ refreshInterval: 1000,
+ });
+
+ useEffect(() => {
+ if (error) return console.log(error);
+ setAgents(data);
+ }, [data, error]);
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/context/SpawnContext.tsx b/context/SpawnContext.tsx
new file mode 100644
index 000000000..709ad1cd0
--- /dev/null
+++ b/context/SpawnContext.tsx
@@ -0,0 +1,27 @@
+import { SpawnState } from "@/enums/SpawnState";
+import {
+ Dispatch,
+ PropsWithChildren,
+ SetStateAction,
+ createContext,
+ useState,
+} from "react";
+
+type SpawnContextType = {
+ spawnState: SpawnState;
+ setSpawnState: Dispatch>;
+};
+
+export const SpawnContext = createContext({
+ spawnState: SpawnState.RPC,
+ setSpawnState: () => {},
+});
+
+export const SpawnProvider = ({ children }: PropsWithChildren) => {
+ const [spawnState, setSpawnState] = useState(SpawnState.RPC);
+ return (
+
+ {children}
+
+ );
+};
diff --git a/context/TabsProvider.tsx b/context/TabsProvider.tsx
new file mode 100644
index 000000000..ef14c9608
--- /dev/null
+++ b/context/TabsProvider.tsx
@@ -0,0 +1,21 @@
+import {
+ Dispatch,
+ PropsWithChildren,
+ SetStateAction,
+ createContext,
+ useState,
+} from "react";
+
+export const TabsContext = createContext<{
+ activeTab: string;
+ setActiveTab: Dispatch>;
+}>({ activeTab: "1", setActiveTab: () => {} });
+
+export const TabsProvider = ({ children }: PropsWithChildren) => {
+ const [activeTab, setActiveTab] = useState("1");
+ return (
+
+ {children}
+
+ );
+};
diff --git a/electron/icons/robot-head.png b/electron/icons/robot-head.png
new file mode 100644
index 000000000..cca439fe7
Binary files /dev/null and b/electron/icons/robot-head.png differ
diff --git a/electron/loading.html b/electron/loading.html
new file mode 100644
index 000000000..7b6f48c0a
--- /dev/null
+++ b/electron/loading.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Olas Operate
+
+
+
+
Loading...
+
+