From 32ec04dce3a8543ecbb50a19e966e02dd87ef756 Mon Sep 17 00:00:00 2001 From: Josh Miller Date: Thu, 7 Mar 2024 20:06:18 +0000 Subject: [PATCH] Update Navbar and ServiceCard components --- frontend/components/Layout/Navbar/Navbar.tsx | 6 ---- .../YourAgents/ServiceCard/ServiceCard.tsx | 8 ++++- .../ServiceCard/ServiceCardSettings.tsx | 36 +++++++++++++++++++ frontend/package.json | 7 ++-- frontend/yarn.lock | 11 +++++- package.json | 5 +-- yarn.lock | 9 ++++- 7 files changed, 68 insertions(+), 14 deletions(-) create mode 100644 frontend/components/YourAgents/ServiceCard/ServiceCardSettings.tsx diff --git a/frontend/components/Layout/Navbar/Navbar.tsx b/frontend/components/Layout/Navbar/Navbar.tsx index bfd42b50a..dc420dbd7 100644 --- a/frontend/components/Layout/Navbar/Navbar.tsx +++ b/frontend/components/Layout/Navbar/Navbar.tsx @@ -1,16 +1,10 @@ import { Flex } from 'antd'; -import { SettingsButton } from './SettingsButton'; -import { NotificationButton } from './NotificationButton'; import Image from 'next/image'; export const Navbar = () => { return ( - - - - ); }; diff --git a/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx b/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx index e0479cbec..aaeaba563 100644 --- a/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx +++ b/frontend/components/YourAgents/ServiceCard/ServiceCard.tsx @@ -8,6 +8,7 @@ import { message, Tooltip, } from 'antd'; +import { green } from '@ant-design/colors'; import Image from 'next/image'; import { useCallback, useMemo, useState } from 'react'; import { useInterval } from 'usehooks-ts'; @@ -27,6 +28,7 @@ import { SERVICE_CARD_STATUS_POLLING_INTERVAL, } from '@/constants/intervals'; import { ServicesService, EthersService } from '@/service'; +import { ServiceCardSettings } from './ServiceCardSettings'; type ServiceCardProps = { service: Service; @@ -195,6 +197,8 @@ export const ServiceCard = ({ service }: ServiceCardProps) => { )} + + ; case DeploymentStatus.DEPLOYED: - return ; + return ( + + ); // processing status adds pulse animation; color prop is used to override the default color case DeploymentStatus.STOPPING: return ; case DeploymentStatus.STOPPED: diff --git a/frontend/components/YourAgents/ServiceCard/ServiceCardSettings.tsx b/frontend/components/YourAgents/ServiceCard/ServiceCardSettings.tsx new file mode 100644 index 000000000..93eb19762 --- /dev/null +++ b/frontend/components/YourAgents/ServiceCard/ServiceCardSettings.tsx @@ -0,0 +1,36 @@ +import { SpawnScreen } from '@/enums'; +import { SettingOutlined } from '@ant-design/icons'; +import { Button, Dropdown, MenuProps } from 'antd'; +import Link from 'next/link'; +import { useMemo } from 'react'; + +export const ServiceCardSettings = ({ + serviceHash, +}: { + serviceHash: string; +}) => { + const items: MenuProps['items'] = useMemo( + () => [ + { + key: '1', + label: ( + + Fund agent + + ), + }, + { key: '2', label: Delete Agent, danger: true }, + ], + [serviceHash], + ); + + return ( + + + + ); +}; diff --git a/frontend/package.json b/frontend/package.json index e6bccd236..59d264daa 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,8 @@ { "author": "Valory AG", "dependencies": { + "@ant-design/colors": "^7.0.2", + "@ant-design/cssinjs": "^1.18.4", "@ant-design/icons": "^5.3.0", "antd": "^5.14.0", "ethers": "5.7.2", @@ -8,10 +10,9 @@ "next": "14.1.0", "react": "^18", "react-dom": "^18", + "sudo-prompt": "9.2.1", "swr": "^2.2.4", - "usehooks-ts": "^2.14.0", - "@ant-design/cssinjs": "^1.18.4", - "sudo-prompt": "9.2.1" + "usehooks-ts": "^2.14.0" }, "devDependencies": { "@testing-library/jest-dom": "^6.4.2", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 27a17a503..657435aab 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -20,13 +20,20 @@ "@jridgewell/gen-mapping" "^0.3.0" "@jridgewell/trace-mapping" "^0.3.9" -"@ant-design/colors@^7.0.0", "@ant-design/colors@^7.0.2": +"@ant-design/colors@^7.0.0": version "7.0.2" resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.2.tgz" integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg== dependencies: "@ctrl/tinycolor" "^3.6.1" +"@ant-design/colors@^7.0.2": + version "7.0.2" + resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-7.0.2.tgz#c5c753a467ce8d86ba7ca4736d2c01f599bb5492" + integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg== + dependencies: + "@ctrl/tinycolor" "^3.6.1" + "@ant-design/cssinjs@^1.18.4": version "1.18.4" resolved "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.4.tgz" @@ -5436,6 +5443,7 @@ string-length@^4.0.1: strip-ansi "^6.0.0" "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + name string-width-cjs version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -5946,6 +5954,7 @@ which@^2.0.1: isexe "^2.0.0" "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: + name wrap-ansi-cjs version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== diff --git a/package.json b/package.json index 486f9b317..c034d142f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "author": "Valory AG", "dependencies": { + "@ant-design/colors": "^7.0.2", "@ant-design/cssinjs": "^1.18.4", "@ant-design/icons": "^5.3.0", "antd": "^5.14.0", @@ -16,9 +17,9 @@ "ps-tree": "^1.2.0", "react": "^18", "react-dom": "^18", + "sudo-prompt": "9.2.1", "swr": "^2.2.4", - "usehooks-ts": "^2.14.0", - "sudo-prompt": "9.2.1" + "usehooks-ts": "^2.14.0" }, "devDependencies": { "concurrently": "^8.2.2", diff --git a/yarn.lock b/yarn.lock index 9006ba3d6..08bb583c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,13 +12,20 @@ resolved "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz" integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA== -"@ant-design/colors@^7.0.0", "@ant-design/colors@^7.0.2": +"@ant-design/colors@^7.0.0": version "7.0.2" resolved "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.2.tgz" integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg== dependencies: "@ctrl/tinycolor" "^3.6.1" +"@ant-design/colors@^7.0.2": + version "7.0.2" + resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-7.0.2.tgz#c5c753a467ce8d86ba7ca4736d2c01f599bb5492" + integrity sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg== + dependencies: + "@ctrl/tinycolor" "^3.6.1" + "@ant-design/cssinjs@^1.18.4": version "1.18.4" resolved "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.4.tgz"