From e58b4fac0d2d8440701bd2fdad55b554088cc999 Mon Sep 17 00:00:00 2001
From: aidencao <aiden.c@nodereal.io>
Date: Mon, 31 Jul 2023 10:32:59 +0800
Subject: [PATCH] feat(dcellar-web-ui): add sp meta

---
 .../src/components/common/DCSelect/index.tsx  |  34 ++--
 .../src/components/common/SvgIcon/RefLink.svg |   3 +
 .../components/layout/Header/GlobalTasks.tsx  |   7 +
 apps/dcellar-web-ui/src/facade/sp.ts          |   7 +
 .../buckets/List/components/SPSelector.tsx    | 191 ++++++++++++++----
 .../modules/object/components/ObjectList.tsx  |   8 +-
 apps/dcellar-web-ui/src/pages/api/sp-meta.ts  |  17 ++
 .../dcellar-web-ui/src/store/slices/apollo.ts |   2 +
 apps/dcellar-web-ui/src/store/slices/sp.ts    |  28 ++-
 9 files changed, 229 insertions(+), 68 deletions(-)
 create mode 100644 apps/dcellar-web-ui/src/components/common/SvgIcon/RefLink.svg
 create mode 100644 apps/dcellar-web-ui/src/pages/api/sp-meta.ts

diff --git a/apps/dcellar-web-ui/src/components/common/DCSelect/index.tsx b/apps/dcellar-web-ui/src/components/common/DCSelect/index.tsx
index 16dcb17f..4d6d910d 100644
--- a/apps/dcellar-web-ui/src/components/common/DCSelect/index.tsx
+++ b/apps/dcellar-web-ui/src/components/common/DCSelect/index.tsx
@@ -20,11 +20,13 @@ import {
   InputProps,
 } from '@totejs/uikit';
 import React, { useEffect, useRef, useState } from 'react';
+import TickIcon from '@/components/common/SvgIcon/TickIcon.svg';
 
 import noResultImage from '@/public/images/common/no-result.png';
 import { useKeyDown } from '@/hooks/useKeyDown';
 import { useSaveFuncRef } from '@/hooks/useSaveFuncRef';
 import { GAClick } from '@/components/common/GATracker';
+import styled from '@emotion/styled';
 
 interface ListItemProps extends MenuItemProps {
   gaClickName?: string;
@@ -121,22 +123,8 @@ export function Select(props: DCSelectProps) {
         onEnter={onEnter}
       />
 
-      <MenuList border="1px solid readable.border" borderRadius={8} {...listProps}>
-        {header && (
-          <Box
-            color="#2AA372"
-            fontSize={12}
-            lineHeight="15px"
-            bg="bg.bottom"
-            py={8}
-            px={24}
-            fontWeight={500}
-            borderBottom="1px solid readable.border"
-            {...headerProps}
-          >
-            {header}
-          </Box>
-        )}
+      <MenuList mt={5} border="1px solid readable.border" borderRadius={8} {...listProps}>
+        {header}
 
         <Box
           maxH={220}
@@ -158,8 +146,10 @@ export function Select(props: DCSelectProps) {
             return (
               <GAClick key={item.value} name={gaClickName}>
                 <MenuItem
-                  px={24}
-                  py={8}
+                  as="div"
+                  position="relative"
+                  px={0}
+                  py={0}
                   transitionDuration="normal"
                   transitionProperty="colors"
                   bg={isSelected ? rgba('#00BA34', 0.1) : undefined}
@@ -172,7 +162,7 @@ export function Select(props: DCSelectProps) {
                   }}
                   {...restItemProps}
                 >
-                  {item.label}
+                  {isSelected && <Tick />} {item.label}
                 </MenuItem>
               </GAClick>
             );
@@ -258,3 +248,9 @@ const NoResult = () => {
     </Center>
   );
 };
+
+const Tick = styled(TickIcon)`
+  color: #00ba34;
+  position: absolute;
+  left: 8px;
+`;
diff --git a/apps/dcellar-web-ui/src/components/common/SvgIcon/RefLink.svg b/apps/dcellar-web-ui/src/components/common/SvgIcon/RefLink.svg
new file mode 100644
index 00000000..cd754740
--- /dev/null
+++ b/apps/dcellar-web-ui/src/components/common/SvgIcon/RefLink.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.3502 3.04995C4.3502 2.71858 4.61882 2.44995 4.9502 2.44995H8.8502C9.34725 2.44995 9.7502 2.8529 9.7502 3.34995V7.24995C9.7502 7.58132 9.48157 7.84995 9.1502 7.84995C8.81882 7.84995 8.5502 7.58132 8.5502 7.24995V4.49848L2.97446 10.0742C2.74014 10.3085 2.36025 10.3085 2.12593 10.0742C1.89162 9.8399 1.89162 9.46 2.12593 9.22569L7.70167 3.64995H4.9502C4.61882 3.64995 4.3502 3.38132 4.3502 3.04995Z" fill="currentColor"/>
+</svg>
diff --git a/apps/dcellar-web-ui/src/components/layout/Header/GlobalTasks.tsx b/apps/dcellar-web-ui/src/components/layout/Header/GlobalTasks.tsx
index 83dfbb8b..8207d1d9 100644
--- a/apps/dcellar-web-ui/src/components/layout/Header/GlobalTasks.tsx
+++ b/apps/dcellar-web-ui/src/components/layout/Header/GlobalTasks.tsx
@@ -21,11 +21,13 @@ import axios from 'axios';
 import { headObject, queryLockFee } from '@/facade/object';
 import Long from 'long';
 import { formatLockFee } from '@/utils/object';
+import { setupSpMeta } from '@/store/slices/sp';
 
 interface GlobalTasksProps {}
 
 export const GlobalTasks = memo<GlobalTasksProps>(function GlobalTasks() {
   const dispatch = useAppDispatch();
+  const { SP_RECOMMEND_META } = useAppSelector((root) => root.apollo);
   const { loginAccount } = useAppSelector((root) => root.persist);
   const { spInfo } = useAppSelector((root) => root.sp);
   const { primarySp } = useAppSelector((root) => root.object);
@@ -128,5 +130,10 @@ export const GlobalTasks = memo<GlobalTasksProps>(function GlobalTasks() {
     }
   }, [sealQueue.join(''), counter]);
 
+  useAsyncEffect(async () => {
+    if (!loginAccount || !SP_RECOMMEND_META) return;
+    dispatch(setupSpMeta());
+  }, [loginAccount, SP_RECOMMEND_META]);
+
   return <></>;
 });
diff --git a/apps/dcellar-web-ui/src/facade/sp.ts b/apps/dcellar-web-ui/src/facade/sp.ts
index e11ea402..2fc226af 100644
--- a/apps/dcellar-web-ui/src/facade/sp.ts
+++ b/apps/dcellar-web-ui/src/facade/sp.ts
@@ -1,6 +1,8 @@
 import { getClient } from '@/base/client';
 import { resolve } from '@/facade/common';
 import { commonFault } from '@/facade/error';
+import axios from 'axios';
+import { SpMeta } from '@/store/slices/sp';
 
 export const getStorageProviders = async () => {
   const client = await getClient();
@@ -9,3 +11,8 @@ export const getStorageProviders = async () => {
   console.log('getStorageProviders', performance.now() - start);
   return (sps || []).filter((sp) => sp.endpoint.startsWith('https'));
 };
+
+export const getSpMeta = async () => {
+  const { data } = await axios.get<Array<SpMeta>>('/api/sp-meta');
+  return data;
+};
diff --git a/apps/dcellar-web-ui/src/modules/buckets/List/components/SPSelector.tsx b/apps/dcellar-web-ui/src/modules/buckets/List/components/SPSelector.tsx
index 67fdea89..c9579bac 100644
--- a/apps/dcellar-web-ui/src/modules/buckets/List/components/SPSelector.tsx
+++ b/apps/dcellar-web-ui/src/modules/buckets/List/components/SPSelector.tsx
@@ -1,17 +1,26 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Text } from '@totejs/uikit';
+import { Box, Flex, Text, Tooltip } from '@totejs/uikit';
 import { IDCSelectOption, Select } from '@/components/common/DCSelect';
 import { trimLongStr } from '@/utils/string';
 import { useAppSelector } from '@/store';
 import { useMount } from 'ahooks';
 import { SpItem } from '@/store/slices/sp';
+import styled from '@emotion/styled';
+import { ColoredInfoIcon } from '@totejs/icons';
+import RefLink from '@/components/common/SvgIcon/RefLink.svg';
+import { GREENFIELD_CHAIN_EXPLORER_URL } from '@/base/env';
+import { formatBytes } from '@/modules/file/utils';
+import BigNumber from 'bignumber.js';
+import { transientOptions } from '@/utils/transientOptions';
+import { css } from '@emotion/react';
+import { sortBy } from 'lodash-es';
 
 interface SPSelector {
   onChange: (value: SpItem) => void;
 }
 
 export function SPSelector(props: SPSelector) {
-  const { sps, spInfo, oneSp } = useAppSelector((root) => root.sp);
+  const { sps, spInfo, oneSp, spMeta } = useAppSelector((root) => root.sp);
   const len = sps.length;
   const [sp, setSP] = useState({} as SpItem);
   const [total, setTotal] = useState(0);
@@ -45,26 +54,42 @@ export function SPSelector(props: SPSelector) {
     return tmpValue.includes(tmpKeyword) || tmpName.includes(tmpKeyword);
   };
 
-  const options = useMemo(
-    () =>
-      sps.map((item) => {
-        const { operatorAddress, moniker: name, endpoint } = item;
-        return {
-          label: <OptionItem address={operatorAddress} name={name} endpoint={endpoint} />,
-          value: operatorAddress,
-          name,
-          endpoint: item.endpoint,
-        };
-      }),
-    [sps],
-  );
+  const options = useMemo(() => {
+    const sorted = sortBy(sps, [
+      (sp) => {
+        const meta = spMeta[sp.operatorAddress];
+        return meta ? meta.Latency : Infinity;
+      },
+    ]);
+    return sorted.map((item) => {
+      const { operatorAddress, moniker: name, endpoint } = item;
+      return {
+        label: <OptionItem address={operatorAddress} name={name} endpoint={endpoint} />,
+        value: operatorAddress,
+        name,
+        endpoint: item.endpoint,
+      };
+    });
+  }, [sps, spMeta]);
 
   return (
     <Select
       value={sp.operatorAddress}
       text={renderItem(sp.moniker, sp.operatorAddress)}
       options={options}
-      header={`Primary Storage Provider (${total})`}
+      header={
+        <Row>
+          <TH w={200}>SP list</TH>
+          <TH w={100}>Free Quota</TH>
+          <TH w={120}>
+            Storage Fee{' '}
+            <Tooltip content="BNB/GB/Month" placement="bottom-start">
+              <ColoredInfoIcon boxSize={16} cursor="pointer" />
+            </Tooltip>
+          </TH>
+          <TH w={100}>Latency</TH>
+        </Row>
+      }
       onChange={onChangeSP}
       onSearchFilter={onSearchFilter}
       onSearch={onSearch}
@@ -80,34 +105,118 @@ const renderItem = (moniker: string, address: string) => {
 };
 
 function OptionItem(props: any) {
+  const { spMeta } = useAppSelector((root) => root.sp);
   const { address, name, endpoint } = props;
+  const meta = spMeta[address];
 
   return (
-    <Box key={address} display="flex" flexDir="column" alignItems="flex-start" whiteSpace="normal">
-      <Text
-        fontSize={16}
-        lineHeight="19px"
-        fontWeight={400}
-        w="100%"
-        color="readable.top.secondary"
-        noOfLines={1}
+    <Flex key={address} alignItems="center">
+      <TD
+        w={200}
+        key={address}
+        display="flex"
+        flexDir="column"
+        alignItems="flex-start"
+        whiteSpace="normal"
       >
-        {renderItem(name, address)}
-      </Text>
-      {name && (
-        <Text
-          mt={2}
-          fontSize={12}
-          transformOrigin="0 50%"
-          transform={'scale(0.85)'}
-          lineHeight="18px"
-          fontWeight={400}
-          color="readable.secondary"
-          noOfLines={1}
-        >
-          {endpoint}
-        </Text>
-      )}
-    </Box>
+        <Flex alignItems="center" w="100%">
+          <Text
+            maxW="max-content"
+            minW={0}
+            flex={1}
+            lineHeight="17px"
+            fontSize={14}
+            fontWeight={400}
+            w="100%"
+            color="readable.top.secondary"
+            noOfLines={1}
+          >
+            {name}
+          </Text>
+          <A
+            href={`${GREENFIELD_CHAIN_EXPLORER_URL}/account/${address}`}
+            target="_blank"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <RefLink />
+          </A>
+        </Flex>
+
+        <Tooltip content={endpoint} placement="bottom-start">
+          <Text
+            lineHeight="14px"
+            wordBreak="break-all"
+            fontSize={12}
+            transformOrigin="0 50%"
+            transform={'scale(0.85)'}
+            fontWeight={400}
+            color="#76808F"
+            noOfLines={1}
+          >
+            {endpoint}
+          </Text>
+        </Tooltip>
+      </TD>
+      <TD w={100}>{meta ? formatBytes(meta.FreeReadQuota) : '--'}</TD>
+      <TD w={120}>{meta ? Number(BigNumber(meta.StorePrice).toFixed(5)) : '--'}</TD>
+      <TD $dot={meta?.Latency}>{meta ? meta.Latency + 'ms' : '--'}</TD>
+    </Flex>
   );
 }
+
+const A = styled.a`
+  :hover {
+    color: #00ba34;
+  }
+  margin-left: 4px;
+`;
+
+const Row = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e6e8ea;
+  background: #f5f5f5;
+`;
+
+const TH = styled(Box)`
+  padding: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  height: 32px;
+  &:first-of-type {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+`;
+
+const TD = styled(Box, transientOptions)<{ $dot?: number }>`
+  position: relative;
+  padding: 8px;
+  font-size: 14px;
+  color: #474d57;
+  font-weight: 400;
+  &:first-of-type {
+    padding-left: 32px;
+  }
+
+  ${(props) =>
+    props.$dot &&
+    css`
+      :before {
+        position: relative;
+        top: -1px;
+        margin-right: 4px;
+        display: inline-flex;
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-radius: 100%;
+
+        background-color: ${props.$dot < 100
+          ? '#00BA34'
+          : props.$dot < 200
+          ? '#EEBE11'
+          : '#EE3911'};
+      }
+    `}
+`;
diff --git a/apps/dcellar-web-ui/src/modules/object/components/ObjectList.tsx b/apps/dcellar-web-ui/src/modules/object/components/ObjectList.tsx
index 78d3a038..8c5d72db 100644
--- a/apps/dcellar-web-ui/src/modules/object/components/ObjectList.tsx
+++ b/apps/dcellar-web-ui/src/modules/object/components/ObjectList.tsx
@@ -282,12 +282,8 @@ export const ObjectList = memo<ObjectListProps>(function ObjectList() {
         let operations: string[] = [];
         const isCurRow = rowIndex === index;
         const isFolder = record.objectName.endsWith('/');
-        const isPublic = record.visibility === VisibilityType.VISIBILITY_TYPE_PUBLIC_READ;
         const isSealed = record.objectStatus === OBJECT_SEALED_STATUS;
 
-        if (!isPublic) {
-          fitActions = Actions.filter((a) => a.value !== 'share');
-        }
         if (isSealed) {
           fitActions = fitActions.filter((a) => a.value !== 'cancel');
         } else {
@@ -306,7 +302,7 @@ export const ObjectList = memo<ObjectListProps>(function ObjectList() {
         if (isFolder && !owner) {
           fitActions = [];
         }
-        isCurRow && !isFolder && isPublic && operations.push('share');
+        isCurRow && !isFolder && operations.push('share');
         isCurRow && !isFolder && isSealed && operations.push('download');
 
         return (
@@ -358,7 +354,7 @@ export const ObjectList = memo<ObjectListProps>(function ObjectList() {
   return (
     <>
       {editCreate && <CreateFolder refetch={refetch} />}
-      {editDelete?.objectName && !deleteFolderNotEmpty &&<DeleteObject refetch={refetch} />}
+      {editDelete?.objectName && !deleteFolderNotEmpty && <DeleteObject refetch={refetch} />}
       {deleteFolderNotEmpty && <FolderNotEmpty />}
       {statusDetail.title && <StatusDetail />}
       {editDetail?.objectName && <DetailObject />}
diff --git a/apps/dcellar-web-ui/src/pages/api/sp-meta.ts b/apps/dcellar-web-ui/src/pages/api/sp-meta.ts
new file mode 100644
index 00000000..01bd5a50
--- /dev/null
+++ b/apps/dcellar-web-ui/src/pages/api/sp-meta.ts
@@ -0,0 +1,17 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import axios from 'axios';
+
+// @ts-ignore
+// eslint-disable-next-line
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const endpoint = ((global as any).__GLOBAL_CONFIG || {}).SP_RECOMMEND_META;
+
+  if (!endpoint) res.json([]);
+  try {
+    const { data } = await axios.post(endpoint, { data: {} });
+    res.json(data);
+  } catch (e) {
+    console.log(e);
+    res.json([]);
+  }
+};
diff --git a/apps/dcellar-web-ui/src/store/slices/apollo.ts b/apps/dcellar-web-ui/src/store/slices/apollo.ts
index b5c7c992..5672885c 100644
--- a/apps/dcellar-web-ui/src/store/slices/apollo.ts
+++ b/apps/dcellar-web-ui/src/store/slices/apollo.ts
@@ -4,12 +4,14 @@ interface ApolloState {
   TOKEN_HUB_CONTRACT_ADDRESS: string;
   CROSS_CHAIN_CONTRACT_ADDRESS: string;
   RECOMMEND_SPS: string;
+  SP_RECOMMEND_META: string;
 }
 
 const initialState: ApolloState = {
   TOKEN_HUB_CONTRACT_ADDRESS: '',
   CROSS_CHAIN_CONTRACT_ADDRESS: '',
   RECOMMEND_SPS: '',
+  SP_RECOMMEND_META: '',
 };
 
 export const apolloSlice = createSlice({
diff --git a/apps/dcellar-web-ui/src/store/slices/sp.ts b/apps/dcellar-web-ui/src/store/slices/sp.ts
index 996152bc..e1820fb5 100644
--- a/apps/dcellar-web-ui/src/store/slices/sp.ts
+++ b/apps/dcellar-web-ui/src/store/slices/sp.ts
@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { getStorageProviders } from '@/facade/sp';
+import { getSpMeta, getStorageProviders } from '@/facade/sp';
 import {
   Description,
   StorageProvider,
@@ -17,11 +17,24 @@ const defaultDescription = (): Description => ({
 
 export type SpItem = Omit<StorageProvider, 'description'> & Description;
 
+export type SpMeta = {
+  Description: string;
+  Endpoint: string;
+  FreeReadQuota: number;
+  Latency: number;
+  ReadPrice: string;
+  SPAddress: string;
+  StakedBnb: string;
+  Status: string;
+  StorePrice: string;
+};
+
 export interface SpState {
   sps: Array<SpItem>;
   allSps: Array<SpItem>; // include unstable
   spInfo: Record<string, SpItem>;
   oneSp: string;
+  spMeta: Record<string, SpMeta>;
 }
 
 const initialState: SpState = {
@@ -29,12 +42,18 @@ const initialState: SpState = {
   allSps: [],
   spInfo: {},
   oneSp: '', // operatorAddress
+  spMeta: {},
 };
 
 export const spSlice = createSlice({
   name: 'sp',
   initialState,
   reducers: {
+    setSpMeta(state, { payload }: PayloadAction<SpMeta[]>) {
+      payload.forEach((meta) => {
+        state.spMeta[meta.SPAddress] = meta;
+      });
+    },
     setStorageProviders(
       state,
       {
@@ -81,7 +100,7 @@ export const spSlice = createSlice({
   },
 });
 
-export const { setStorageProviders, updateSps, filterSps } = spSlice.actions;
+export const { setStorageProviders, updateSps, filterSps, setSpMeta } = spSlice.actions;
 
 export const setupStorageProviders = () => async (dispatch: AppDispatch, getState: GetState) => {
   const { sps: _sps } = getState().sp;
@@ -97,4 +116,9 @@ export const setupStorageProviders = () => async (dispatch: AppDispatch, getStat
   dispatch(setStorageProviders({ sps, faultySps, recommend }));
 };
 
+export const setupSpMeta = () => async (dispatch: AppDispatch) => {
+  const list = await getSpMeta();
+  dispatch(setSpMeta(list || []));
+};
+
 export default spSlice.reducer;