feat(dcellar-web-ui): opt billing module (#255)

* feat(dcellar-web-ui): opt some billing styles * feat(dcellar-web-ui): add ssr to pricing-calculator * feat(dcellar-web-ui): opt billing styles * fix(dcellar-web-ui): display address error * fix(dcellar-web-ui): support auto width adjustment for address
node-real · Nov 9, 2023 · e3657a5 · e3657a5
1 parent 4e9918a
commit e3657a5
Show file tree

Hide file tree

Showing 16 changed files with 300 additions and 192 deletions.
diff --git a/apps/dcellar-web-ui/package.json b/apps/dcellar-web-ui/package.json
@@ -53,7 +53,8 @@
     "swiper": "~10.3.1",
     "echarts": "~5.4.3",
     "echarts-for-react": "~3.0.2",
-    "next-transpile-modules": "~10.0.1"
+    "next-transpile-modules": "~10.0.1",
+    "redux": "~4.2.1"
   },
   "devDependencies": {
     "@babel/plugin-syntax-flow": "^7.14.5",

diff --git a/apps/dcellar-web-ui/src/components/common/DCTable/index.tsx b/apps/dcellar-web-ui/src/components/common/DCTable/index.tsx
@@ -32,7 +32,7 @@ export const DCTable = memo<DCTableProps & Omit<SimplePaginationProps, 'loading'
     ...props
   }) {
     return (
-      <Container className="dc-table">
+      <Container className="dc-table" rowCursor={typeof props.onRow === 'function' ? 'pointer' : 'default'}>
         <ConfigProvider renderEmpty={renderEmpty} theme={antdTheme}>
           <Table dataSource={dataSource} {...props} pagination={false} tableLayout="fixed" />
         </ConfigProvider>
@@ -182,7 +182,7 @@ export const SortItem = styled.span`
   }
 `;
 
-const Container = styled.div`
+const Container = styled.div<{rowCursor: string}>`
   border-radius: 4px;
   border: 1px solid var(--ui-colors-readable-border);
   background: #fff;
@@ -256,6 +256,7 @@ const Container = styled.div`
       .btn-action {
         visibility: visible;
       }
+      cursor: ${(props) => props.rowCursor};
     }
   }
 

diff --git a/apps/dcellar-web-ui/src/modules/accounts/AccountDetail.tsx b/apps/dcellar-web-ui/src/modules/accounts/AccountDetail.tsx
@@ -43,7 +43,7 @@ export const AccountDetail = () => {
       <Flex gap={16} flexDirection={'column'}>
         <AccountBreadCrumb name={accountDetail.name} />
         <AccountDetailNav address={curAddress} />
-        <Flex gap={16}>
+        <Flex gap={16} flexWrap={'wrap'}>
           <MetaInfo address={curAddress} />
           <AccountCostTrend address={curAddress} />
         </Flex>

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/AccountCostTrend.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/AccountCostTrend.tsx
@@ -109,21 +109,24 @@ export const AccountCostTrend = memo(({ address }: Props) => {
       title: {
         text: 'Cost Trend',
         textStyle: {
-          color: '#1e2026',
+          color: cssVar('readable.normal'),
           fontSize: 16,
           fontWeight: 700,
         },
+        left: 0,
+        padding: [5, 5, 5, 0],
+        textAlign: 'left',
       },
       tooltip: {
         trigger: 'axis',
         axisPointer: {
-          type: 'cross',
+          type: 'shadow',
         },
         formatter: (params: any, ticket: string) => {
           const curData = barData[params[0].dataIndex];
           const styles = getStyles();
           const TokenSymbol = displayTokenSymbol();
-          const TotalFragment = `<div style="${styles.total}">Total Cost: <div style="${styles.bnb}">${curData.totalCost} ${TokenSymbol}</div>
+          const TotalFragment = `<div style="${styles.total}">Total Cost: <div style="${styles.bnb}">${curData.totalCost || 0} ${TokenSymbol}</div>
           </div>`;
           const EstimateFragment =
             curData.estimateCost === null
@@ -164,18 +167,36 @@ export const AccountCostTrend = memo(({ address }: Props) => {
         itemGap: 16,
         right: 0,
         data: ['Monthly Cost', 'Estimate Cost', 'MoM'],
+        textStyle: {
+          fontWeight: 400,
+        }
       },
       xAxis: [
         {
           type: 'category',
           axisTick: {
+            show: true,
             alignWithLabel: true,
+            lineStyle: {
+              color: cssVar('bg.bottom'),
+            },
           },
           axisLabel: {
             color: cssVar('readable.tertiary'),
             fontSize: 12,
-            transform: 'scale(0.8333)',
             fontWeight: 500,
+            margin: 16,
+            lineHeight: 12,
+          },
+          axisLine: {
+            show: false,
+            margin: 18,
+          },
+          axisPointer: {
+            lineStyle: {
+              color: cssVar('readable.secondary'),
+              type: 'solid',
+            },
           },
           data: xAxisData,
         },
@@ -186,16 +207,21 @@ export const AccountCostTrend = memo(({ address }: Props) => {
           // name: 'Monthly Cost',
           position: 'left',
           alignTicks: true,
+          splitNumber: 5,
           axisLine: {
             show: false,
           },
           axisLabel: {
             color: cssVar('readable.tertiary'),
             fontSize: 12,
             fontWeight: 500,
-            transform: 'scale(0.8333)',
             formatter: '{value} BNB',
           },
+          splitLine: {
+            lineStyle: {
+              color: cssVar('bg.bottom'),
+            },
+          },
         },
         // {
         //   type: 'value',
@@ -234,7 +260,7 @@ export const AccountCostTrend = memo(({ address }: Props) => {
   }, [barData]);
   const loading = isEmpty(barData);
   return (
-    <CardContainer flex={1} width={'50%'} minW={0}>
+    <CardContainer flex={1} width={'50%'} minW={478} minH={283}>
       {loading && <Loading />}
       {!loading && (
         <Box w={'100%'} h={'100%'}>

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetailNav.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetailNav.tsx
@@ -5,7 +5,7 @@ import { selectStoreFeeParams } from '@/store/slices/global';
 import { InternalRoutePaths } from '@/utils/constant';
 import { BN } from '@/utils/math';
 import { displayTokenSymbol } from '@/utils/wallet';
-import { Box, Flex, Link, Text } from '@totejs/uikit'
+import { Box, Flex, Link, Text } from '@totejs/uikit';
 import { isEmpty } from 'lodash-es';
 import { useRouter } from 'next/router';
 import { useMemo } from 'react';
@@ -35,68 +35,68 @@ export const AccountDetailNav = ({ address }: { address: string }) => {
     router.push(url);
   };
   return (
-    <Flex gap={16} alignItems={'center'} onClick={goBack}>
-    <IconFont type="backward" w={24} />
-    <Text fontSize={24} fontWeight={700}>
-      {accountDetail.name}
-    </Text>
-    {isFrozen && (
-      <Tips
-        containerWidth={280}
-        iconSize={16}
-        padding={4}
-        iconStyle={{
-          color: '#F15D3C',
-          _hover: {
+    <Flex gap={16} alignItems={'center'} onClick={goBack} cursor={'pointer'}>
+      <IconFont type="backward" w={24} />
+      <Text fontSize={24} fontWeight={700}>
+        {accountDetail.name}
+      </Text>
+      {isFrozen && (
+        <Tips
+          containerWidth={280}
+          iconSize={16}
+          padding={4}
+          iconStyle={{
             color: '#F15D3C',
-          },
-          marginTop: '-1px',
-        }}
-        trigger="hover"
-        tips={
-          <Box>
-            <Text fontSize={14} fontWeight={600} mb={4}>
-              Frozen Account
-            </Text>
-            <Text fontSize={14} fontWeight={400} color="readable.normal" mb={4}>
-              Your account is suspended due to insufficient balance. To reactivate your
-              account, please deposit at least &nbsp;
-              <strong>
-                {unFreezeAmount} &nbsp;{displayTokenSymbol()}
-              </strong>
-              &nbsp; immediately.
-            </Text>
-            <Link
-              cursor={'pointer'}
-              display={'inline-block'}
-              textDecoration={'underline'}
-              w="100%"
-              textAlign={'right'}
-              onClick={() => onTopUpClick()}
-            >
-              Top Up
-            </Link>
-          </Box>
-        }
-      />
-    )}
-    <Box>
-      {!loading && accountDetail?.refundable === false && (
-        <Box
-          padding={'4px 8px'}
-          borderRadius={16}
-          bgColor={'bg.bottom'}
-          fontSize={12}
-          fontWeight={500}
-          w="fit-content"
-          color={'readable.tertiary'}
-        >
-          Non-Refundable
-        </Box>
+            _hover: {
+              color: '#F15D3C',
+            },
+            marginTop: '-1px',
+          }}
+          trigger="hover"
+          tips={
+            <Box>
+              <Text fontSize={14} fontWeight={600} mb={4}>
+                Frozen Account
+              </Text>
+              <Text fontSize={14} fontWeight={400} color="readable.normal" mb={4}>
+                Your account is suspended due to insufficient balance. To reactivate your account,
+                please deposit at least &nbsp;
+                <strong>
+                  {unFreezeAmount} &nbsp;{displayTokenSymbol()}
+                </strong>
+                &nbsp; immediately.
+              </Text>
+              <Link
+                cursor={'pointer'}
+                display={'inline-block'}
+                textDecoration={'underline'}
+                w="100%"
+                textAlign={'right'}
+                onClick={() => onTopUpClick()}
+              >
+                Top Up
+              </Link>
+            </Box>
+          }
+        />
       )}
-    </Box>
-  </Flex>
-  )
-}
+      <Box>
+        {!loading && accountDetail?.refundable === false && (
+          <Box
+            padding={'4px 8px'}
+            borderRadius={16}
+            bgColor={'bg.bottom'}
+            fontSize={12}
+            fontWeight={500}
+            w="fit-content"
+            color={'readable.tertiary'}
+          >
+            Non-Refundable
+          </Box>
+        )}
+      </Box>
+    </Flex>
+  );
+};
 
-export default AccountDetailNav
+export default AccountDetailNav;
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/Common.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/Common.tsx
@@ -18,15 +18,23 @@ export const CardTitle = ({ children, ...props }: TextProps) => {
 export const CardTime = ({ children, ...props }: TextProps) => {
   return (
     <Text fontSize={12} fontWeight={500} color={'readable.tertiary'} {...props}>
-    {children}
-  </Text>
+      {children}
+    </Text>
   );
 };
 
 export const CardCost = ({ children, ...props }: TextProps) => {
   return (
-    <Text fontSize={24} fontWeight={700}>
-    {children}
-  </Text>
+    <Text fontSize={24} fontWeight={700} {...props}>
+      {children}
+    </Text>
+  );
+};
+
+export const SectionHeader = ({ children, ...props }: TextProps) => {
+  return (
+    <Text as={'h3'} fontSize={16} fontWeight={600} {...props}>
+      {children}
+    </Text>
   );
 };