feat: add disassember

Author: Rexagon

bun.lockb

@@ -12,6 +12,9 @@
   "dependencies": {
     "@broxus/tvm-connect-ui": "^1.0.1",
     "@soerenmartius/vue3-clipboard": "^0.1.2",
+    "@ton/core": "^0.60.1",
+    "@ton/crypto": "^3.3.0",
+    "@tychosdk/disasm": "^0.1.6",
     "bignumber.js": "^9.1.0",
     "everscale-inpage-provider": "^0.4.0",
     "fflate": "^0.8.2",

package-lock.json

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { disasmToFift } from "@tychosdk/disasm";
+import { ref, shallowRef, watchEffect } from 'vue';
+
+const input = ref<string>('');
+const state = shallowRef<{
+  generatedCode?: string;
+  error?: string;
+}>({});
+
+const shared: { idx: number } = { idx: 0 };
+watchEffect(() => {
+  const idx = ++shared.idx;
+  disasmToFift(input.value).then((generatedCode) => {
+    if (idx !== shared.idx) {
+      return;
+    }
+    state.value = {
+      generatedCode,
+      error: undefined
+    };
+  }).catch((e: any) => {
+    if (idx !== shared.idx) {
+      return;
+    }
+    state.value = {
+      generatedCode: undefined,
+      error: e.toString()
+    };
+  });
+});
+
+const onPaste = (e: Event) => {
+  const pastedText = (e as ClipboardEvent).clipboardData.getData('text');
+  input.value = pastedText;
+  e.preventDefault();
+};
+</script>
+
+<template>
+  <section class="section pb-0">
+    <div class="container is-fluid">
+      <div class="columns">
+        <div class="column">
+          <div class="field">
+            <label class="label">Enter contract code BOC:</label>
+            <div class="control">
+              <textarea :class="['textarea', { 'is-danger': state.error != null }]" spellcheck="false" v-model="input"
+                @paste="onPaste" rows="5" />
+            </div>
+            <pre v-if="state.error != null" class="help is-danger">{{ state.error }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section">
+    <div class="container is-fluid">
+      <label class="label">Disassembled code:</label>
+      <div class="control">
+        <pre
+          aria-hidden="true"><code class="language-html" id="highlighting-content">{{ state.generatedCode }}</code></pre>
+      </div>
+    </div>
+  </section>
+</template>

package.json

@@ -25,6 +25,7 @@ const balance = computed(() => fromNano(tvmConnectState.value.balance));
         <NavbarItem path="/deserializer">Deserializer</NavbarItem>
         <NavbarItem path="/signer">Signer</NavbarItem>
         <NavbarItem path="/debugger">Debugger</NavbarItem>
+        <NavbarItem path="/disasm">Disasm</NavbarItem>
         <NavbarItem path="/microwave">Microwave</NavbarItem>
         <NavbarItem path="/tip3">TIP3</NavbarItem>
         <NavbarItem path="/tip6">TIP6</NavbarItem>
@@ -33,28 +34,20 @@ const balance = computed(() => fromNano(tvmConnectState.value.balance));
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="wallet">
-            <button
-              v-if="!tvmConnectState.isReady"
+            <button v-if="!tvmConnectState.isReady"
               :class="['button is-primary', { 'is-loading': tvmConnectState.isLoading }]"
-              @click="() => tvmConnect.connect()"
-            >
+              @click="() => tvmConnect.connect()">
               <strong>Connect wallet</strong>
             </button>
             <template v-else>
               <div class="tag is-white is-medium">
                 Network ID: {{ tvmConnectState.networkId }}
               </div>
-              <button
-                class="button is-white"
-                @click="() => tvmConnect.connect()"
-              >
+              <button class="button is-white" @click="() => tvmConnect.connect()">
                 {{ tvmConnectState.providerId }}
               </button>
-              <button
-                v-if="tvmConnectState.balance != null"
-                class="button is-white"
-                v-clipboard="tvmConnectState.balance"
-              >
+              <button v-if="tvmConnectState.balance != null" class="button is-white"
+                v-clipboard="tvmConnectState.balance">
                 {{ balance }} {{ CURRENCY }}
               </button>
               <div class="field has-addons">
@@ -64,12 +57,14 @@ const balance = computed(() => fromNano(tvmConnectState.value.balance));
                   </button>
                 </div>
                 <div class="control">
-                  <button :class="['button', { 'is-loading': tvmConnectState.isLoading }]" @click="tvmConnect.changeAccount">
+                  <button :class="['button', { 'is-loading': tvmConnectState.isLoading }]"
+                    @click="tvmConnect.changeAccount">
                     <span class="icon"><i class="fas fa-sync-alt" /></span>
                   </button>
                 </div>
                 <div class="control">
-                  <button :class="['button', { 'is-loading': tvmConnectState.isLoading }]" @click="tvmConnect.disconnect">
+                  <button :class="['button', { 'is-loading': tvmConnectState.isLoading }]"
+                    @click="tvmConnect.disconnect">
                     <span class="icon"><i class="fas fa-sign-out-alt" /></span>
                   </button>
                 </div>
@@ -83,8 +78,8 @@ const balance = computed(() => fromNano(tvmConnectState.value.balance));
 </template>
 
 <style scoped>
-  .wallet {
-    display: flex;
-    align-items: center;
-  }
+.wallet {
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/DisasmWorkspace.vue

@@ -6,10 +6,11 @@ import SerializerWorkspace from './components/SerializerWorkspace.vue';
 import DeserializerWorkspace from './components/DeserializerWorkspace.vue';
 import SignerWorkspace from './components/SignerWorkspace.vue';
 import DebuggerWorkspace from './components/DebuggerWorkspace.vue';
+import DisasmWorkspace from './components/DisasmWorkspace.vue';
 import MicrowaveWorkspace from './components/MicrowaveWorkspace.vue';
 import Tip3Workspace from './components/Tip3Workspace.vue';
 import Tip6Workspace from './components/Tip6Workspace.vue';
-import CodegenWorkspace from "./components/CodegenWorkspace.vue";
+import CodegenWorkspace from './components/CodegenWorkspace.vue';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -21,6 +22,7 @@ const router = createRouter({
     { path: '/deserializer', component: DeserializerWorkspace },
     { path: '/signer', component: SignerWorkspace },
     { path: '/debugger', component: DebuggerWorkspace },
+    { path: '/disasm', component: DisasmWorkspace },
     { path: '/microwave', component: MicrowaveWorkspace },
     { name: 'tip3', path: '/tip3/:address?', component: Tip3Workspace },
     { name: 'tip6', path: '/tip6', component: Tip6Workspace },