feat(ui): add explorer link to operator addr #257

src/components/Common/Copy/index.tsx

@@ -23,7 +23,7 @@ export const Copy = observer(({ value }: IProps) => {
     >
       <CopyButton value={value} timeout={2000}>
         {({ copied, copy }) => (
-          <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
+          <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="top">
             <ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>
               {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
             </ActionIcon>

src/components/Common/ExternalLink/index.tsx

@@ -0,0 +1,26 @@
+import { Tooltip, Text, CopyButton, ActionIcon } from '@mantine/core';
+import { observer, useLocalStore } from 'mobx-react-lite';
+import { IconCheck, IconCopy } from '@tabler/icons';
+import { Box } from '@chakra-ui/react';
+import copy from 'copy-to-clipboard';
+import { FiExternalLink } from 'react-icons/fi';
+
+interface IProps {
+  link: string;
+  tooltipLabel: string;
+}
+export const ExternalLink = observer(({ link, tooltipLabel }: IProps) => {
+  return (
+    <Box
+      onClick={async (e) => {
+        window.open(link);
+      }}
+    >
+      <Tooltip label={tooltipLabel} withArrow position="top">
+        <Box borderRadius={'4px'} p={1.5} _hover={{ bg: 'rgba(248, 249, 250, 1)' }}>
+          <FiExternalLink cursor={'pointer'} color="gray"  />
+        </Box>
+      </Tooltip>
+    </Box>
+  );
+});

src/components/IDE/Settings/index.tsx

@@ -1,17 +1,20 @@
 import React, { useEffect } from 'react';
-import { Box, Button, Divider, Flex, Icon, Spinner, Stack, Text, Tooltip } from '@chakra-ui/react';
+import { Box, Button, Divider, Flex, HStack, Icon, Spinner, Stack, Text, Tooltip } from '@chakra-ui/react';
 import { observer, useLocalObservable } from 'mobx-react-lite';
-import { useStore } from '@/store/index';
+import { rootStore, useStore } from '@/store/index';
 import { ProjectEnvs } from '@/components/JSONFormWidgets/ProjectEnvs';
 import { defaultOutlineButtonStyle } from '@/lib/theme';
 import { axios } from '@/lib/axios';
 import { eventBus } from '@/lib/event';
 import { FaFileExport, FaRegQuestionCircle } from 'react-icons/fa';
 import { PromiseState } from '@/store/standard/PromiseState';
 import { MdEditDocument } from 'react-icons/md';
+import { FiExternalLink } from 'react-icons/fi';
 import SelectTagWidget from '@/components/JSONFormWidgets/SelectTagWidget';
 import { trpc } from '@/lib/trpc';
 import toast from 'react-hot-toast';
+import { Copy } from '@/components/Common/Copy';
+import { ExternalLink } from '@/components/Common/ExternalLink';
 
 const Settings = () => {
   const {
@@ -39,12 +42,25 @@ const Settings = () => {
           return '';
         }
       }
+    }),
+    operateBalance: new PromiseState<() => Promise<any>, string>({
+      defaultValue: null,
+      function: async () => {
+        try {
+          console.log(await rootStore.god.currentNetwork.loadBalanceFromAddress(store.operateAddress.value));
+          return await (await rootStore.god.currentNetwork.loadBalanceFromAddress(store.operateAddress.value)).format;
+        } catch (error) {
+          return '';
+        }
+      }
     })
   }));
 
   useEffect(() => {
     project.setMode('edit');
-    store.operateAddress.call();
+    store.operateAddress.call().then(() => {
+      store.operateBalance.call();
+    });
   }, []);
 
   useEffect(() => {
@@ -59,7 +75,18 @@ const Settings = () => {
     {
       title: 'Operator Address',
       value: store.operateAddress.value,
-      tips: 'The operator account is randomly generated and assigned to your project. It is used by W3bstream to sign transaction is that your applet sends to the blockchain. Please ensure that you fund this address with the tokens required for gas on the destination chain to which you are se nding your transactions.'
+      tips: 'The operator account is randomly generated and assigned to your project. It is used by W3bstream to sign transaction is that your applet sends to the blockchain. Please ensure that you fund this address with the tokens required for gas on the destination chain to which you are se nding your transactions.',
+      extra: (
+        <>
+          {store.operateAddress && (
+            <HStack spacing="4px" ml={2}>
+              {store.operateBalance.value != null && <Box fontSize="sm">({store.operateBalance.value} IOTX)</Box>}
+              <ExternalLink tooltipLabel="Jump to explorer" link={`https://iotexscan.io/address/${store.operateAddress.value}?format=0x`} />
+              <Copy value={store.operateAddress.value} />
+            </HStack>
+          )}
+        </>
+      )
     },
     {
       title: 'WASM file name',
@@ -163,6 +190,7 @@ const Settings = () => {
               <Text ml="10px" fontSize={'14px'} color="blackAlpha.700">
                 {item.value}
               </Text>
+
               {item.extra}
             </Flex>
           );

src/store/network/EthNetworkState.ts

@@ -6,6 +6,7 @@ import { NetworkState } from './NetworkState';
 import { GodStore } from '../god';
 import BigNumber from 'bignumber.js';
 import { CallParams } from '../lib/ContractState';
+import { BigNumberState } from '../standard/BigNumberState';
 
 export class EthNetworkState implements NetworkState {
   god: GodStore;
@@ -35,6 +36,14 @@ export class EthNetworkState implements NetworkState {
     this.currentChain.Coin.balance.setValue(new BigNumber(balance.toString()));
   }
 
+  async loadBalanceFromAddress(address: string): Promise<BigNumberState> {
+    if (!this.signer) {
+      return new BigNumberState({ value: new BigNumber(0) });
+    }
+    const balance = await this.signer.provider.getBalance(address);
+    return new BigNumberState({ value: new BigNumber(balance.toString()) });
+  }
+
   set(args: Partial<EthNetworkState>) {
     Object.assign(this, args);
   }