Fix fee calculation of Mulit-Sig scripts (#29)

* Add .nvmrc

* Set native scripts before calculation of fee

* Use my individual CSL instead

* Add TxHash to the viewer

* Increase padding

.nvmrc

@@ -0,0 +1 @@
+v17.7.1

cardano/serialization-lib.ts

@@ -1,8 +1,8 @@
-import type { Address, BaseAddress, Ed25519KeyHash, NativeScript, NativeScripts, NetworkInfo, ScriptHash, Transaction, TransactionBuilder, TransactionUnspentOutputs, Vkeywitness } from '@emurgo/cardano-serialization-lib-browser'
+import type { Address, BaseAddress, Ed25519KeyHash, NativeScript, NativeScripts, NetworkInfo, ScriptHash, Transaction, TransactionBuilder, TransactionUnspentOutputs, Vkeywitness } from '@zqlsg/cardano-serialization-lib-browser'
 import { useEffect, useState } from 'react'
 import { ProtocolParameters } from './query-api'
 
-type CardanoWASM = typeof import('@emurgo/cardano-serialization-lib-browser')
+type CardanoWASM = typeof import('@zqlsg/cardano-serialization-lib-browser')
 type MultiSigType = 'all' | 'any' | 'atLeast'
 
 type Result<T> =
@@ -228,7 +228,7 @@ class Factory {
 
   public async load() {
     if (!this.instance)
-      this._instance = new Cardano(await import('@emurgo/cardano-serialization-lib-browser'))
+      this._instance = new Cardano(await import('@zqlsg/cardano-serialization-lib-browser'))
     return this.instance
   }
 }

components/transaction.tsx

@@ -3,7 +3,7 @@ import { toDecimal, CurrencyInput, getADASymbol, AssetAmount, ADAAmount } from '
 import { getBalance, ProtocolParameters, UTxO, Value } from '../cardano/query-api'
 import { Cardano, getResult, toHex, toIter } from '../cardano/serialization-lib'
 import type { Result } from '../cardano/serialization-lib'
-import type { Address, NativeScript, NativeScripts, Transaction, TransactionBody, TransactionOutput, Vkeywitness } from '@emurgo/cardano-serialization-lib-browser'
+import type { Address, NativeScript, NativeScripts, Transaction, TransactionBody, TransactionOutput, Vkeywitness } from '@zqlsg/cardano-serialization-lib-browser'
 import { nanoid } from 'nanoid'
 import { ArrowRightIcon, CheckIcon, DuplicateIcon, XIcon } from '@heroicons/react/solid'
 import Link from 'next/link'
@@ -258,21 +258,21 @@ const NewTransaction: NextPage<{
 
   const transactionResult = getResult(() => {
     const txBuilder = cardano.createTxBuilder(protocolParameters)
-    const { Address, Transaction, TransactionWitnessSet } = cardano.lib
+    const { Address } = cardano.lib
 
     txOutputResults.forEach((txOutputResult) => {
       if (!txOutputResult?.isOk) throw new Error('There are some invalid Transaction Outputs')
       txBuilder.add_output(txOutputResult.data)
     })
 
+    if (nativeScriptSet) {
+      txBuilder.set_native_scripts(nativeScriptSet)
+    }
+
     const address = changeAddress ? changeAddress : Address.from_bech32(utxos[0].address)
     cardano.chainCoinSelection(txBuilder, buildUTxOSet(), address)
 
-    const txBody = txBuilder.build()
-    const witnessSet = TransactionWitnessSet.new()
-    nativeScriptSet && witnessSet.set_native_scripts(nativeScriptSet)
-
-    return Transaction.new(txBody, witnessSet)
+    return txBuilder.build_tx()
   })
 
   const handleRecipientChange = (recipient: Recipient) => {
@@ -333,7 +333,12 @@ const NewTransaction: NextPage<{
   )
 }
 
-const TransactionBodyViewer: NextPage<{ txBody: TransactionBody }> = ({ txBody }) => {
+const TransactionBodyViewer: NextPage<{
+  txBody: TransactionBody
+  cardano: Cardano
+}> = ({ cardano, txBody }) => {
+  const txHash = cardano.lib.hash_transaction(txBody)
+
   const fee = BigInt(txBody.fee().to_str())
   type TxInputSet = { isQueried: false, data: { txHash: string, index: number }[] }
   const txInputs: TxInputSet = {
@@ -381,6 +386,10 @@ const TransactionBodyViewer: NextPage<{ txBody: TransactionBody }> = ({ txBody }
   return (
     <Panel title='Proposal'>
       <div className='p-4'>
+        <h2 className='text-center text-bg mb-4 space-x-2'>
+          <span className='font-bold'>TxHash:</span>
+          <span>{toHex(txHash)}</span>
+        </h2>
         <div className='flex items-center'>
           <ul className='basis-[47.5%] space-y-1'>
             {!txInputs.isQueried && txInputs.data.map(({ txHash, index }) =>

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@apollo/client": "^3.5.9",
     "@cardano-graphql/client-ts": "^6.2.0",
-    "@emurgo/cardano-serialization-lib-browser": "^10.0.3",
+    "@zqlsg/cardano-serialization-lib-browser": "^10.0.3",
     "@heroicons/react": "^1.0.6",
     "axios": "^0.26.0",
     "buffer": "^6.0.3",

pages/transactions/[base64CBOR].tsx

@@ -5,7 +5,7 @@ import { toHex, toIter } from '../../cardano/serialization-lib'
 import { getResult, useCardanoSerializationLib } from '../../cardano/serialization-lib'
 import { ErrorMessage, Loading } from '../../components/status'
 import { NativeScriptViewer, SignTxButton, SubmitTxButton, TransactionBodyViewer } from '../../components/transaction'
-import type { Vkeywitness } from '@emurgo/cardano-serialization-lib-browser'
+import type { Vkeywitness } from '@zqlsg/cardano-serialization-lib-browser'
 import { useState } from 'react'
 import { PencilAltIcon } from '@heroicons/react/solid'
 
@@ -23,7 +23,7 @@ const ManualSign: NextPage<{
   return (
     <Panel title='Sign'>
       <textarea
-        className='block w-full p-2 outline-none'
+        className='block w-full p-4 outline-none'
         rows={4}
         value={signature}
         onChange={(e) => setSignature(e.target.value)}
@@ -106,7 +106,7 @@ const GetTransaction: NextPage = () => {
   return (
     <Layout>
       <div className='space-y-2'>
-        <TransactionBodyViewer txBody={transaction.body()} />
+        <TransactionBodyViewer cardano={cardano} txBody={transaction.body()} />
         {nativeScriptSet && Array.from(toIter(nativeScriptSet), (script, index) =>
           <NativeScriptViewer cardano={cardano} script={script} signatures={signatureMap} key={index} />
         )}

pages/treasuries/[base64CBOR].tsx

@@ -9,7 +9,7 @@ import { ConfigContext } from '../../cardano/config'
 import { NativeScriptViewer, NewTransaction } from '../../components/transaction'
 import type { ProtocolParameters } from '../../cardano/query-api'
 import { useAddressUTxOsQuery, useProtocolParametersQuery } from '../../cardano/query-api'
-import type { NativeScript } from '@emurgo/cardano-serialization-lib-browser'
+import type { NativeScript } from '@zqlsg/cardano-serialization-lib-browser'
 
 const NewMultiSigTransaction: NextPage<{
   cardano: Cardano

pages/treasuries/new.tsx

@@ -6,7 +6,7 @@ import type { Cardano, MultiSigType } from '../../cardano/serialization-lib'
 import Link from 'next/link'
 import { ConfigContext } from '../../cardano/config'
 import { Loading } from '../../components/status'
-import type { Ed25519KeyHash } from '@emurgo/cardano-serialization-lib-browser'
+import type { Ed25519KeyHash } from '@zqlsg/cardano-serialization-lib-browser'
 import { XIcon } from '@heroicons/react/solid'
 
 const NewTreasury: NextPage = () => {

yarn.lock

@@ -61,11 +61,6 @@
   resolved "https://registry.yarnpkg.com/@cardano-graphql/client-ts/-/client-ts-6.2.0.tgz#e28de304320596b24b17887ae28701f812e0fdf0"
   integrity sha512-xuvHz5nT19Lh2P0SK8rb2YxUWhNqaflYFPj/jGOXdfOYI3Pkt2W2jT4nxb6OaEgq1EgPvWbZu+vy2nABsSpPCA==
 
-"@emurgo/cardano-serialization-lib-browser@^10.0.3":
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/@emurgo/cardano-serialization-lib-browser/-/cardano-serialization-lib-browser-10.0.3.tgz#bc3aa7c8da5129a15f5d0ed1c108d49a24b5cbca"
-  integrity sha512-FRl6S90Mxc7LyvHGmD40k0HkTIG3kOckWso/0Y8bj+L5L4Z8K01fuTfjPB+gF6ZwsfxRy1Bdll256l2uoQ7AbQ==
-
 "@eslint/eslintrc@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.1.0.tgz#583d12dbec5d4f22f333f9669f7d0b7c7815b4d3"
@@ -297,6 +292,11 @@
   dependencies:
     tslib "^2.3.0"
 
+"@zqlsg/cardano-serialization-lib-browser@^10.0.3":
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/@zqlsg/cardano-serialization-lib-browser/-/cardano-serialization-lib-browser-10.0.4.tgz#ba43b421195571cd3699a67b336551ce45a791a7"
+  integrity sha512-6Av7Rgowlra3GJ44y9oVwUu5r6H2rcH2Hn5Y8IFW/RVfEgwZtx3VLkpqTkfXTdU/0fUcORlhtqdfmo+1yLrVFw==
+
 acorn-jsx@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"