tx data decode to utf-8

lib/hexToBytes.ts

+export default function hexToBytes(hex: string) {
+  const bytes = [];
+  for (let c = 0; c < hex.length; c += 2) {
+    bytes.push(parseInt(hex.substring(c, c + 2), 16));
+  }
+  return bytes;
+}

lib/hexToUtf8.ts

+import hexToBytes from 'lib/hexToBytes';
+
+export default function hexToUtf8(hex: string) {
+  const utf8decoder = new TextDecoder();
+  const bytes = new Uint8Array(hexToBytes(hex));
+
+  return utf8decoder.decode(bytes);
+}

ui/shared/RawInputData.tsx

 import { Box, Flex, Select, Textarea } from '@chakra-ui/react';
 import React from 'react';
 
+import hexToUtf8 from 'lib/hexToUtf8';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 type DataType = 'Hex' | 'UTF-8'
@@ -26,7 +27,7 @@ const RawInputData = ({ hex }: Props) => {
         <CopyToClipboard text={ hex }/>
       </Flex>
       <Textarea
-        value={ selectedDataType === 'Hex' ? hex : 'UTF-8 equivalent' }
+        value={ selectedDataType === 'Hex' ? hex : hexToUtf8(hex) }
         w="100%"
         maxH="220px"
         mt={ 2 }
@@ -38,4 +39,4 @@ const RawInputData = ({ hex }: Props) => {
   );
 };
 
-export default RawInputData;
+export default React.memo(RawInputData);