Add hex-to-zil and fix API calls (#1)

* Add hex-to-zil button

Fix copy button to display new address

Made changes according to comments

package.json

@@ -29,6 +29,7 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "chart.js": "^4.4.1",
     "ethers": "^6.9.0",
+    "@zilliqa-js/zilliqa" : "^3.5.0",
     "highlightjs-solidity": "^2.0.6",
     "prettier-plugin-organize-imports": "^3.2.4",
     "react": "^18.2.0",

src/components/AddressSwap.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faRetweet } from "@fortawesome/free-solid-svg-icons";
+
+import { fromBech32Address, toBech32Address } from '@zilliqa-js/crypto'
+import { validation } from '@zilliqa-js/util'
+import Copy from "./Copy";
+
+type AddressSwapProps = {
+  addr: string;
+};
+
+const AddressSwap: React.FC<AddressSwapProps> = ({addr}) => {
+  const [addrPair, setAddrPair] = useState<string[] | null>(null) // [bech32, hex]
+  const [toggle, setToggle] = useState(0)
+
+  useEffect(() => {
+    try {
+      setAddrPair([addr, toBech32Address(addr)])
+    }
+    catch(e) {
+      setAddrPair([addr, "Invalid hex-encoded address"])
+    }
+
+  }, [addr])
+
+  return (
+    addrPair && 
+    <>
+      <span className="font-address text-base text-gray-500">
+        {addrPair[toggle]}
+      </span>
+      <button
+        className={`self-center flex flex-no-wrap justify-center items-center space-x-1 text-gray-500 focus:outline-none 
+        transition-colors transition-shadows bg-gray-200 hover:bg-gray-500 hover:text-gray-200 hover:shadow w-7 h-7 rounded-full text-xs`}
+        title="Switch Address Form"
+        onClick={() => {
+          setToggle((prevToggle) => prevToggle === 0 ? 1 : 0)
+        }}
+      >
+      <FontAwesomeIcon size='sm' icon={faRetweet} />
+      </button>
+      <Copy value={addrPair[toggle]} rounded />
+    </>
+
+  );
+};
+
+export default React.memo(AddressSwap);

src/execution/address/AddressSubtitle.tsx

@@ -1,12 +1,14 @@
 import { FC, useContext } from "react";
 import Blockies from "react-blockies";
 import Copy from "../../components/Copy";
+import AddressSwap from "../../components/AddressSwap";
 import Faucet from "../../components/Faucet";
 import StandardSubtitle from "../../components/StandardSubtitle";
 import { useChainInfo } from "../../useChainInfo";
 import { RuntimeContext } from "../../useRuntime";
 import { AddressAwareComponentProps } from "../types";
 import AddressAttributes from "./AddressAttributes";
+import { validation } from '@zilliqa-js/util'
 
 type AddressSubtitleProps = AddressAwareComponentProps & {
   isENS: boolean | undefined;
@@ -30,13 +32,7 @@ const AddressSubtitle: FC<AddressSubtitleProps> = ({
           scale={3}
         />
         <span>Address</span>
-        <span
-          className="font-address text-base text-gray-500"
-          data-test="address"
-        >
-          {address}
-        </span>
-        <Copy value={address} rounded />
+        <AddressSwap addr={address} />
         {/* Only display faucets for testnets who actually have any */}
         {faucets && faucets.length > 0 && <Faucet address={address} rounded />}
         {isENS && (

src/useErigonHooks.ts

@@ -297,13 +297,15 @@ export const useInternalOperations = (
     }
 
     const _t: InternalOperation[] = [];
-    for (const t of data) {
-      _t.push({
-        type: t.type,
-        from: formatter.address(getAddress(t.from)),
-        to: formatter.address(getAddress(t.to)),
-        value: formatter.bigInt(t.value),
-      });
+    if(data){
+      for (const t of data) {
+        _t.push({
+          type: t.type,
+          from: provider.formatter.address(getAddress(t.from)),
+          to: provider.formatter.address(getAddress(t.to)),
+          value: provider.formatter.bigNumber(t.value),
+        });
+      }
     }
     return _t;
   }, [provider, data]);

vite.config.ts

@@ -5,6 +5,9 @@ import viteCompression from "vite-plugin-compression";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    "global": {},
+  },
   plugins: [
     react(),
     viteCompression(),