(operate) feat: add operate app

.github/workflows/operate.yml

@@ -0,0 +1,30 @@
+# TODO: figure out how to trigger workflow from vercel for nx
+
+name: Operate
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'apps/operate/**'
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'apps/operate/**'
+
+jobs:
+  build:
+    continue-on-error: False
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - name: Install modules
+        run: yarn
+      - name: Run ESLint
+        run: yarn nx lint operate

apps/govern/components/Contracts/EditVotes/index.tsx

@@ -7,9 +7,8 @@ import { Allocation } from 'types';
 import { Address } from 'viem';
 import { useAccount } from 'wagmi';
 
-import { CHAIN_NAMES } from 'libs/util-constants/src';
+import { CHAIN_NAMES, RETAINER_ADDRESS } from 'libs/util-constants/src';
 
-import { RETAINER_ADDRESS } from 'common-util/constants/addresses';
 import { INVALIDATE_AFTER_UPDATE_KEYS } from 'common-util/constants/scopeKeys';
 import { getBytes32FromAddress } from 'common-util/functions/addresses';
 import { voteForNomineeWeights } from 'common-util/functions/requests';

apps/govern/components/Contracts/MyVotingWeight/Votes.tsx

@@ -6,9 +6,8 @@ import styled from 'styled-components';
 import { Allocation } from 'types';
 
 import { COLOR } from 'libs/ui-theme/src';
-import { CHAIN_NAMES } from 'libs/util-constants/src';
+import { CHAIN_NAMES, RETAINER_ADDRESS } from 'libs/util-constants/src';
 
-import { RETAINER_ADDRESS } from 'common-util/constants/addresses';
 import { getBytes32FromAddress } from 'common-util/functions/addresses';
 import { NextWeekTooltip } from 'components/NextWeekTooltip';
 import { useAppSelector } from 'store/index';

apps/govern/components/Layout/Menu.tsx

@@ -9,7 +9,7 @@ interface MenuItem {
 }
 
 const items: MenuItem[] = [
-  { label: 'Staking Contracts', key: 'contracts', path: '/contracts' },
+  { label: 'Staking contracts', key: 'contracts', path: '/contracts' },
   { label: 'Proposals', key: 'proposals', path: '/proposals' },
   { label: 'veOLAS', key: 'veolas', path: '/veolas' },
   { label: 'Docs', key: 'docs', path: '/docs' },

apps/govern/hooks/useFetchStakingContractsList.ts

@@ -4,16 +4,15 @@ import { Address } from 'viem';
 import { mainnet } from 'viem/chains';
 import { useReadContract } from 'wagmi';
 
+import { useNominees, useNomineesMetadata } from 'libs/common-contract-functions/src';
+import { RETAINER_ADDRESS } from 'libs/util-constants/src';
 import { VOTE_WEIGHTING } from 'libs/util-contracts/src/lib/abiAndAddresses';
 
-import { RETAINER_ADDRESS } from 'common-util/constants/addresses';
 import { NEXT_RELATIVE_WEIGHTS_KEY, TIME_SUM_KEY } from 'common-util/constants/scopeKeys';
 import { getBytes32FromAddress } from 'common-util/functions';
 import { setStakingContracts } from 'store/govern';
 import { useAppDispatch, useAppSelector } from 'store/index';
 
-import { useNominees } from './useNominees';
-import { useNomineesMetadata } from './useNomineesMetadata';
 import { useNomineesWeights } from './useNomineesWeights';
 
 const WEEK_IN_SECONDS = 604_800;

apps/govern/hooks/useFetchUserVotes.ts

@@ -2,13 +2,14 @@ import { useEffect } from 'react';
 import { UserVotes } from 'types';
 import { useAccount, useBlock } from 'wagmi';
 
+import { useNominees } from 'libs/common-contract-functions/src';
+
 import { LATEST_BLOCK_KEY, NEXT_USERS_SLOPES_KEY } from 'common-util/constants/scopeKeys';
 import { getUnixWeekStartTimestamp } from 'common-util/functions/time';
 import { setLastUserVote, setUserVotes } from 'store/govern';
 import { useAppDispatch, useAppSelector } from 'store/index';
 
 import { useLastUserVote } from './useLastUserVote';
-import { useNominees } from './useNominees';
 import { useVoteUserPower } from './useVoteUserPower';
 import { useVoteUserSlopes } from './useVoteUserSlopes';
 

apps/govern/jest.setup.js

@@ -21,12 +21,14 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
-
-const { gnosis, mainnet, polygon } = require('viem/chains');
+const { mainnet, optimism, gnosis, polygon, base, arbitrum, celo } = require('viem/chains');
 
 jest.mock('wagmi/chains', () => ({
-  gnosis,
   mainnet,
+  optimism,
+  gnosis,
   polygon,
+  base,
+  arbitrum,
+  celo,
 }));
-

apps/launch/components/MyStakingContracts/FieldLabels.tsx

@@ -1,109 +1,89 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
-import { ReactNode } from 'react';
+import { Typography } from 'antd';
 
-import { COLOR } from 'libs/ui-theme/src';
+import { LabelWithTooltip } from 'libs/ui-components/src';
 
 import { FieldConfig } from './FieldConfig';
 
-const { Paragraph, Text } = Typography;
+const { Text } = Typography;
 
-const TextWithTooltip = ({
-  text,
-  description,
-}: {
-  text: string;
-  description?: string | ReactNode;
-}) => {
-  if (!description) return <Text type="secondary">{text}</Text>;
+export const NameLabel = () => <Text type="secondary">{FieldConfig.contractName.name}</Text>;
 
-  return (
-    <Tooltip color={COLOR.WHITE} title={<Paragraph className="m-0">{description}</Paragraph>}>
-      <Text type="secondary">
-        {text} <InfoCircleOutlined className="ml-4" />
-      </Text>
-    </Tooltip>
-  );
-};
-
-export const NameLabel = () => <TextWithTooltip text={FieldConfig.contractName.name} />;
-
-export const DescriptionLabel = () => <TextWithTooltip text={FieldConfig.description.name} />;
+export const DescriptionLabel = () => <Text type="secondary">{FieldConfig.description.name}</Text>;
 
 export const MaximumStakedAgentsLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.maxNumServices.name}
     description={FieldConfig.maxNumServices.desc}
   />
 );
 
 export const RewardsPerSecondLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.rewardsPerSecond.name}
     description={FieldConfig.rewardsPerSecond.desc}
   />
 );
 
 export const TemplateInfo = () => (
-  <TextWithTooltip text="Template" description="Template contracts must be approved by DAO vote" />
+  <LabelWithTooltip text="Template" description="Template contracts must be approved by DAO vote" />
 );
 
 export const MinimumStakingDepositLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.minStakingDeposit.name}
     description={FieldConfig.minStakingDeposit.desc}
   />
 );
 
 export const MinimumStakingPeriodsLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.minNumStakingPeriods.name}
     description={FieldConfig.minNumStakingPeriods.desc}
   />
 );
 
 export const MaximumInactivityPeriodsLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.maxNumInactivityPeriods.name}
     description={FieldConfig.maxNumInactivityPeriods.desc}
   />
 );
 
 export const LivenessPeriodLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.livenessPeriod.name}
     description={FieldConfig.livenessPeriod.desc}
   />
 );
 
 export const TimeForEmissionsLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.timeForEmissions.name}
     description={FieldConfig.timeForEmissions.desc}
   />
 );
 
 export const AgentInstancesLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.numAgentInstances.name}
     description={FieldConfig.numAgentInstances.desc}
   />
 );
 
 export const AgentIdsLabel = () => (
-  <TextWithTooltip text={FieldConfig.agentIds.name} description={FieldConfig.agentIds.desc} />
+  <LabelWithTooltip text={FieldConfig.agentIds.name} description={FieldConfig.agentIds.desc} />
 );
 
 export const MultisigThresholdLabel = () => (
-  <TextWithTooltip text={FieldConfig.threshold.name} description={FieldConfig.threshold.desc} />
+  <LabelWithTooltip text={FieldConfig.threshold.name} description={FieldConfig.threshold.desc} />
 );
 
 export const ServiceConfigHashLabel = () => (
-  <TextWithTooltip text={FieldConfig.configHash.name} description={FieldConfig.configHash.desc} />
+  <LabelWithTooltip text={FieldConfig.configHash.name} description={FieldConfig.configHash.desc} />
 );
 
 export const ActivityCheckerAddressLabel = () => (
-  <TextWithTooltip
+  <LabelWithTooltip
     text={FieldConfig.activityChecker.name}
     description={FieldConfig.activityChecker.desc}
   />

apps/launch/jest.setup.js

@@ -21,12 +21,16 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
-const { gnosis, mainnet, polygon } = require('viem/chains');
+const { mainnet, optimism, gnosis, polygon, base, arbitrum, celo } = require('viem/chains');
 
 jest.mock('wagmi/chains', () => ({
-  gnosis,
   mainnet,
+  optimism,
+  gnosis,
   polygon,
+  base,
+  arbitrum,
+  celo,
 }));
 
 jest.mock('common-util/config/wagmi', () => ({

apps/operate/.babelrc

@@ -0,0 +1,22 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "extensions": [".js", ".jsx"],
+        "alias": {
+          "util": "./util",
+          "common-util": "./common-util",
+          "components": "./components",
+          "images": "./public/images",
+          "store": "./store",
+          "hooks": "./hooks",
+          "types": "./types",
+          "context": "./context"
+        }
+      }
+    ],
+    ["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": true }]
+  ]
+}

apps/operate/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": ["plugin:@nx/react-typescript", "next/core-web-vitals", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", ".next/**/*"],
+  "rules": {
+    "@nx/enforce-module-boundaries": [
+      "error",
+      {
+        "allow": ["libs*"]
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["*.*"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": "off"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": ["error", "apps/operate/pages"]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/operate/common-util/config/wagmi.ts

@@ -0,0 +1,22 @@
+import { createConfig, http } from 'wagmi';
+import { Chain, arbitrum, base, celo, gnosis, mainnet, optimism, polygon } from 'wagmi/chains';
+
+import { RPC_URLS } from 'libs/util-constants/src';
+
+export const SUPPORTED_CHAINS: [Chain, ...Chain[]] = [
+  mainnet,
+  gnosis,
+  polygon,
+  optimism,
+  base,
+  arbitrum,
+  celo,
+];
+
+export const wagmiConfig = createConfig({
+  chains: SUPPORTED_CHAINS,
+  transports: SUPPORTED_CHAINS.reduce(
+    (acc, chain) => Object.assign(acc, { [chain.id]: http(RPC_URLS[chain.id]) }),
+    {},
+  ),
+});

apps/operate/common-util/functions/frontend-library.ts

@@ -0,0 +1,26 @@
+import {
+  getChainId as getChainIdFn,
+  getProvider as getProviderFn,
+  notifyError,
+} from '@autonolas/frontend-library';
+
+import { RPC_URLS } from 'libs/util-constants/src';
+
+import { SUPPORTED_CHAINS } from 'common-util/config/wagmi';
+
+export const getProvider = () => {
+  const provider = getProviderFn(SUPPORTED_CHAINS, RPC_URLS);
+  // not connected, return fallback URL
+  if (typeof provider === 'string') return provider;
+  // coinbase injected multi wallet provider
+  if (provider?.selectedProvider) return provider.selectedProvider;
+  if (provider?.providerMap?.get('CoinbaseWallet'))
+    return provider.providerMap.get('CoinbaseWallet');
+  // standard provider
+  if (provider) return provider;
+  return notifyError('Provider not found');
+};
+
+export const getChainId = (chainId?: number) => {
+  return getChainIdFn(SUPPORTED_CHAINS, chainId || '');
+};

apps/operate/common-util/functions/index.ts

@@ -0,0 +1,2 @@
+export * from './frontend-library';
+export * from './web3';

apps/operate/common-util/functions/web3.ts

@@ -0,0 +1,12 @@
+import Web3 from 'web3';
+
+import { getChainId, getProvider } from 'common-util/functions/frontend-library';
+
+/**
+ * returns the web3 details
+ */
+export const getWeb3Details = () => {
+  const chainId = getChainId();
+  const web3 = new Web3(getProvider());
+  return { web3, chainId };
+};