add bytecode size to artifact details

Author: mr-zwets

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "my-cashscript-playground",
+  "name": "cashscript-playground",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@cashscript/utils": "^0.11.0-next.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@monaco-editor/react": "^3.6.2",

src/components/ArtifactsInfo.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Artifact } from 'cashscript'
+import { asmToBytecode } from '@cashscript/utils'
 import { Button } from 'react-bootstrap'
 import FileUploader from './FileUploader'
 
@@ -89,6 +90,7 @@ const ArtifactsInfo: React.FC<Props> = ({ setCode, artifacts, setArtifacts }) =>
               <strong>Last Updated</strong>
               <p>{artifact.updatedAt.split('T')[0]} {artifact.updatedAt.split('T')[1].slice(0,5)}</p>
               <strong>Artifact Bytecode</strong>
+              <div>Bytecode size: {asmToBytecode(artifact.bytecode).length } bytes (without constructor args)</div>
               <details>
                 <summary>
                   show full Bytecode