Merge pull request #81 from valory-xyz/mohan/gas-and-trading-balance

feat: gas and trading balance update

Author: mohandast52

frontend/components/Main/MainGasBalance.tsx

@@ -1,24 +1,99 @@
-import { QuestionCircleTwoTone } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { ArrowUpOutlined, QuestionCircleTwoTone } from '@ant-design/icons';
+import { Spin, Tooltip, Typography } from 'antd';
+import { useMemo } from 'react';
+import styled from 'styled-components';
 
-import { balanceFormat } from '@/common-util/numberFormatters';
+import { COLOR } from '@/constants';
 import { useBalance } from '@/hooks';
 
 import { CardSection } from '../styled/CardSection';
 
+const { Text } = Typography;
+
+const Dot = styled.span`
+  position: relative;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
+  border: 2px solid #ffffff;
+  box-shadow:
+    rgb(0 0 0 / 7%) 0px 2px 4px 0px,
+    rgb(0 0 0 / 3%) 0px 0px 4px 2px;
+`;
+const EmptyDot = styled(Dot)`
+  background-color: ${COLOR.RED};
+`;
+const FineDot = styled(Dot)`
+  background-color: ${COLOR.GREEN_2};
+`;
+const LowDot = styled(Dot)`
+  background-color: ${COLOR.PURPLE};
+`;
+
+const BalanceStatus = () => {
+  const { isLoaded, totalEthBalance } = useBalance();
+
+  const status = useMemo(() => {
+    if (!totalEthBalance || totalEthBalance === 0) {
+      return { statusName: 'Empty', StatusComponent: EmptyDot };
+    }
+
+    if (totalEthBalance < 0.1) {
+      return { statusName: 'Low', StatusComponent: LowDot };
+    }
+
+    return { statusName: 'Fine', StatusComponent: FineDot };
+  }, [totalEthBalance]);
+
+  if (!isLoaded) {
+    return <Spin />;
+  }
+
+  const { statusName, StatusComponent } = status;
+  return (
+    <>
+      <StatusComponent />
+      <Text>{statusName}</Text>
+    </>
+  );
+};
+
+const TooltipContent = styled.div`
+  font-size: 77.5%;
+  a {
+    margin-top: 6px;
+    display: inline-block;
+  }
+`;
+
 export const MainGasBalance = () => {
-  const { totalEthBalance } = useBalance();
   return (
     <CardSection justify="space-between" border>
-      <Typography.Text type="secondary" strong>
+      <Text>
         Gas and trading balance&nbsp;
-        <Tooltip title="Gas balance is the amount of XDAI you have to pay for transactions.">
+        <Tooltip
+          title={
+            <TooltipContent>
+              Your agent uses this balance to pay for transactions and other
+              trading activity on-chain.
+              <br />
+              {/* TODO: ask link */}
+              <a href="https://docs.openlaw.io/olas/olas-eth" target="_blank">
+                Track activity on blockchain explorer{' '}
+                <ArrowUpOutlined style={{ rotate: '45deg' }} />
+              </a>
+            </TooltipContent>
+          }
+        >
           <QuestionCircleTwoTone />
         </Tooltip>
-      </Typography.Text>
-      <Typography.Text strong>
-        {balanceFormat(totalEthBalance, 2)} XDAI&nbsp;
-      </Typography.Text>
+      </Text>
+
+      <Text strong>
+        <BalanceStatus />
+      </Text>
     </CardSection>
   );
 };

frontend/constants/color.ts

@@ -3,4 +3,5 @@ export const COLOR = {
   GREEN_2: '#00F422',
   PURPLE: '#722ed1',
   BLUE: '#1677FF',
+  ORANGE: '#FAAD14',
 };

frontend/styles/globals.scss

@@ -23,10 +23,17 @@ button, input, select, textarea, .ant-input-suffix {
   -webkit-app-region: no-drag;
 }
 
+// antd overrides
 .ant-card-head {
   -webkit-app-region: drag;
 }
 
+.ant-alert {
+  .anticon {
+    margin-top: 3px;
+  }
+}
+
 .antd-card {
   background-color: white;
   overflow-y: scroll;