From bea405e98b94fd2ef477109cb270d069345cb4ac Mon Sep 17 00:00:00 2001
From: siegfried <zhiqiang.lei@gmail.com>
Date: Wed, 6 Apr 2022 06:20:33 +0800
Subject: [PATCH] Tx create UI improvement (#53)

* Extract AddAssetButton

* Add placeholder to transaction message

* Style tx creating form

* Extract path methods

* Fix address input padding

* Improve NativeScriptInfoViewer

* Remove unused import

* Add ShareCurrentURLButton

* Apply CopyButton to CopyVkeysButton

* Improve validation

* Add more tips

* Split input and output

* Remove warning

* Use CopyButton

* Remove CopyToClipboardButton

* Add CardanoScanLink
---
 src/components/layout.tsx                   |  59 ++++++-
 src/components/transaction.tsx              | 166 +++++++++++---------
 src/pages/transactions/[base64CBOR].tsx     |  26 ++-
 src/pages/treasuries/[base64CBOR]/index.tsx |  10 +-
 src/pages/treasuries/[base64CBOR]/new.tsx   |  21 +--
 src/pages/treasuries/new.tsx                |   2 +-
 src/route.ts                                |  13 ++
 7 files changed, 188 insertions(+), 109 deletions(-)
 create mode 100644 src/route.ts

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 78fbbe82..6e55cdb6 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -8,6 +8,7 @@ import { useLiveQuery } from 'dexie-react-hooks'
 import { db, Treasury } from '../db'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
+import { getTreasuriesPath } from '../route'
 
 const Toggle: NextPage<{
   isOn: boolean
@@ -31,6 +32,49 @@ const Panel: NextPage<{ className?: string }> = ({ children, className }) => {
   )
 }
 
+const CopyButton: NextPage<{
+  disabled?: boolean
+  className?: string
+  getContent: () => string
+  ms?: number
+}> = ({ children, className, disabled, getContent, ms }) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const clickHandle = () => {
+    navigator.clipboard.writeText(getContent())
+    setIsCopied(true)
+  }
+
+  useEffect(() => {
+    let isMounted = true
+
+    const timer = setTimeout(() => {
+      if (isMounted && isCopied) setIsCopied(false)
+    }, ms)
+
+    return () => {
+      isMounted = false
+      clearTimeout(timer)
+    }
+  }, [isCopied, ms])
+
+  return (
+    <button className={className} disabled={disabled || isCopied} onClick={clickHandle}>
+      {isCopied ? 'Copied!' : children}
+    </button>
+  )
+}
+
+const ShareCurrentURLButton: NextPage<{
+  className?: string
+}> = ({ children, className }) => {
+  return (
+    <CopyButton className={className} getContent={() => document.location.href} ms={500}>
+      {children}
+    </CopyButton>
+  )
+}
+
 const BackButton: NextPage<{
   className?: string
 }> = ({ children, className }) => {
@@ -100,7 +144,7 @@ const TreasuryListing: NextPage<{
   const { name, script } = treasury
   return (
     <NavLink
-      href={`/treasuries/${encodeURIComponent(script)}`}
+      href={getTreasuriesPath(encodeURIComponent(script))}
       onPageClassName='bg-sky-700 font-semibold'
       className='block w-full p-4 truncate hover:bg-sky-700'>
       {name}
@@ -127,6 +171,17 @@ const SecondaryBar: NextPage = () => {
   )
 }
 
+const CardanoScanLink: NextPage<{
+  className?: string
+  type: 'transaction'
+  id: string
+}> = ({ className, children, type, id }) => {
+  const [config, _] = useContext(ConfigContext)
+  const host = config.isMainnet ? 'https://cardanoscan.io' : 'https://testnet.cardanoscan.io'
+  const href = [host, type, id].join('/')
+  return <a className={className} href={href} target='_blank' rel='noreferrer'>{children}</a>;
+}
+
 const Hero: NextPage<{ className?: string }> = ({ className, children }) => {
   return <div className={'rounded p-4 bg-sky-700 text-white shadow space-y-4 ' + className}>{children}</div>;
 }
@@ -151,4 +206,4 @@ const Layout: NextPage = ({ children }) => {
   )
 }
 
-export { Layout, Panel, Toggle, Hero, BackButton }
+export { Layout, Panel, Toggle, Hero, BackButton, CardanoScanLink, CopyButton, ShareCurrentURLButton }
diff --git a/src/components/transaction.tsx b/src/components/transaction.tsx
index 762197ac..ed01566d 100644
--- a/src/components/transaction.tsx
+++ b/src/components/transaction.tsx
@@ -5,10 +5,10 @@ import { Cardano, encodeCardanoData, getResult, toHex, toIter } from '../cardano
 import type { Result } from '../cardano/serialization-lib'
 import type { Address, NativeScript, NativeScripts, Transaction, TransactionBody, TransactionHash, TransactionOutput, Vkeywitness } from '@adaocommunity/cardano-serialization-lib-browser'
 import { nanoid } from 'nanoid'
-import { ArrowRightIcon, CheckIcon, DuplicateIcon, PlusIcon, TrashIcon, XIcon } from '@heroicons/react/solid'
+import { CheckIcon, DuplicateIcon, PlusIcon, SearchIcon, TrashIcon, XIcon } from '@heroicons/react/solid'
 import Link from 'next/link'
 import { Config, ConfigContext } from '../cardano/config'
-import { BackButton, Panel, Toggle } from './layout'
+import { BackButton, CardanoScanLink, CopyButton, Panel, Toggle } from './layout'
 import { NextPage } from 'next'
 import { NotificationContext } from './notification'
 import Image from 'next/image'
@@ -17,6 +17,7 @@ import Gun from 'gun'
 import type { IGunInstance } from 'gun'
 import { useRouter } from 'next/router'
 import { useLiveQuery } from 'dexie-react-hooks'
+import { getTreasuriesPath, getTreasuryPath } from '../route'
 
 type Recipient = {
   id: string
@@ -54,22 +55,66 @@ const LabeledCurrencyInput: NextPage<{
   }
 
   return (
-    <label className='flex grow border rounded-md overflow-hidden'>
+    <label className='flex grow border rounded overflow-hidden'>
       <CurrencyInput
         className='p-2 block w-full outline-none'
         decimals={decimal}
         value={value}
         onChange={changeHandle}
         placeholder={placeholder} />
-      <span className='p-2'>{symbol}</span>
-      <button onClick={() => onChange(max)} className='bg-gray-100 px-1 group hover:space-x-1'>
-        <span>Max</span>
-        <span className='hidden group-hover:inline'>{toDecimal(max, decimal)}</span>
+      <div className='p-2 space-x-1'>
+        <span>of</span>
+        <span>{toDecimal(max, decimal)}</span>
+        <span>{symbol}</span>
+      </div>
+      <button
+        onClick={() => onChange(max)}
+        className='bg-gray-100 border-l py-2 px-4 group text-sky-700'>
+        Max
       </button>
     </label>
   )
 }
 
+const AddAssetButton: NextPage<{
+  budget: Value
+  value: Value
+  onSelect: (id: string) => void
+}> = ({ budget, value, onSelect }) => {
+  const assets = Array
+    .from(budget.assets)
+    .filter(([id, quantity]) => !value.assets.has(id) && quantity > BigInt(0))
+  const isDisabled = assets.length <= 0
+
+  return (
+    <div className='relative'>
+      <button
+        className='flex text-sky-700 py-2 space-x-1 peer items-center disabled:text-gray-400'
+        disabled={isDisabled}>
+        <PlusIcon className='w-4' />
+        <span>Add Asset</span>
+      </button>
+      <ul className='absolute divide-y bg-white text-sm max-h-64 border rounded shadow overflow-y-auto scale-0 z-50 peer-focus:scale-100 hover:scale-100'>
+        {assets.map(([id, quantity]) => (
+          <li key={id}>
+            <button
+              onClick={() => onSelect(id)}
+              className='block w-full h-full p-2 hover:bg-sky-700 hover:text-white'>
+              <div className='flex space-x-2'>
+                <span>{decodeASCII(getAssetName(id))}</span>
+                <span className='grow text-right'>{quantity.toString()}</span>
+              </div>
+              <div className='flex space-x-1'>
+                <span className='text-xs'>{id.slice(0, 56)}</span>
+              </div>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
 const Recipient: NextPage<{
   recipient: Recipient
   budget: Value
@@ -108,8 +153,8 @@ const Recipient: NextPage<{
   return (
     <div className='p-4 space-y-2'>
       <div>
-        <label className='flex block border rounded-md overflow-hidden'>
-          <span className='p-2 bg-gray-200'>TO</span>
+        <label className='flex block border rounded overflow-hidden'>
+          <span className='p-2 bg-gray-100 border-r'>To</span>
           <input
             className='p-2 block w-full outline-none'
             value={address}
@@ -144,31 +189,7 @@ const Recipient: NextPage<{
           )
         })}
       </ul>
-      <div className='relative'>
-        <button className='flex text-sky-700 py-2 space-x-1 peer items-center'>
-          <PlusIcon className='w-4' />
-          <span>Add Asset</span>
-        </button>
-        <ul className='absolute mt-1 divide-y bg-white text-sm max-h-64 border rounded shadow overflow-y-scroll invisible z-50 peer-focus:visible hover:visible'>
-          {Array.from(budget.assets)
-            .filter(([id, quantity]) => !value.assets.has(id) && quantity > BigInt(0))
-            .map(([id, quantity]) => (
-              <li key={id}>
-                <button
-                  onClick={() => setAsset(id, BigInt(0))}
-                  className='block w-full h-full p-2 hover:bg-sky-700 hover:text-white'>
-                  <div className='flex space-x-2'>
-                    <span>{decodeASCII(getAssetName(id))}</span>
-                    <span className='grow text-right'>{quantity.toString()}</span>
-                  </div>
-                  <div className='flex space-x-1'>
-                    <span className='text-xs'>{id.slice(0, 56)}</span>
-                  </div>
-                </button>
-              </li>
-            ))}
-        </ul>
-      </div>
+      <AddAssetButton budget={budget} value={value} onSelect={(id) => setAsset(id, BigInt(0))} />
     </div>
   )
 }
@@ -323,6 +344,7 @@ const NewTransaction: NextPage<{
         </header>
         <textarea
           className='p-4 block w-full outline-none'
+          placeholder='Optional transaction message'
           rows={4}
           value={message}
           onChange={(e) => setMessage(e.target.value)}>
@@ -406,22 +428,28 @@ const TransactionBodyViewer: NextPage<{
   })
 
   return (
-    <Panel>
-      <div className='p-4'>
-        <h2 className='text-center text-bg mb-4 space-x-2'>
-          <span className='font-semibold'>TxHash:</span>
+    <Panel className='p-4 space-y-2'>
+      <div className='space-y-1'>
+        <div className='font-semibold'>TxHash</div>
+        <div className='flex items-center space-x-1'>
           <span>{toHex(txHash)}</span>
-        </h2>
-        <div className='flex items-center'>
-          <ul className='basis-[47.5%] space-y-1'>
+          <span>
+            <CardanoScanLink className='block text-sky-700 p-2' type='transaction' id={toHex(txHash)}><SearchIcon className='w-4' /></CardanoScanLink>
+          </span>
+        </div>
+      </div>
+      <div className='flex space-x-2'>
+        <div className='basis-1/2 space-y-1'>
+          <div className='font-semibold'>From</div>
+          <ul className='space-y-1'>
             {!txInputs.isQueried && txInputs.data.map(({ txHash, index }) =>
               <li key={`${txHash}${index}`} className='p-2 border rounded-md break-all'>{txHash}#{index}</li>
             )}
           </ul>
-          <div className='basis-[5%] flex justify-center'>
-            <ArrowRightIcon className='h-10 w-10' />
-          </div>
-          <ul className='basis-[47.5%] space-y-1'>
+        </div>
+        <div className='basis-1/2 space-y-1'>
+          <div className='font-semibold'>To</div>
+          <ul className='space-y-1'>
             {recipients.map(({ id, address, value }) =>
               <li key={id} className='p-2 border rounded-md'>
                 <p className='flex space-x-1 break-all'>{address}</p>
@@ -451,26 +479,6 @@ const TransactionBodyViewer: NextPage<{
   )
 }
 
-const CopyToClipboardButton: NextPage<{
-  className?: string
-  content: string
-  disabled?: boolean
-}> = ({ className, content, children, disabled }) => {
-
-  const clickHandle = () => {
-    navigator.clipboard.writeText(content)
-  }
-
-  return (
-    <button
-      onClick={clickHandle}
-      disabled={!!disabled}
-      className={className}>
-      {children}
-    </button>
-  )
-}
-
 const AddressViewer: NextPage<{
   address: Address
 }> = ({ address }) => {
@@ -478,9 +486,9 @@ const AddressViewer: NextPage<{
   return (
     <span className='items-center'>
       <span>{bech32}</span>
-      <CopyToClipboardButton className='p-2' content={bech32}>
+      <CopyButton className='p-2 text-sm' getContent={() => bech32} ms={500}>
         <DuplicateIcon className='w-4' />
-      </CopyToClipboardButton>
+      </CopyButton>
     </span>
   )
 }
@@ -492,9 +500,11 @@ const NativeScriptInfoViewer: NextPage<{
   const treasury = useLiveQuery(async () => db.treasuries.get(encodeCardanoData(script, 'base64')), [script])
 
   if (!treasury) return (
-    <div className='p-4 text-white bg-sky-700 rounded space-y-1'>
+    <div className='p-4 text-white bg-sky-700 rounded shadow space-y-1'>
       <div className='font-semibold'>Note</div>
-      <div>This is an unknown treasury. You can save it by editing its info.</div>
+      <div>
+        This is an unknown treasury. You can <Link href={getTreasuryPath(script, 'edit')}><a className='underline'>save it</a></Link> by editing its info.
+      </div>
     </div>
   )
 
@@ -519,7 +529,7 @@ const DeleteTreasuryButton: NextPage<{
     db
       .treasuries
       .delete(encodeCardanoData(script, 'base64'))
-      .then(() => router.push('/treasuries/new'))
+      .then(() => router.push(getTreasuriesPath('new')))
   }
 
   return (
@@ -562,7 +572,7 @@ const NativeScriptViewer: NextPage<{
               <li key={index} className={'flex items-center ' + (signature ? 'text-green-500' : '')}>
                 <span>{toHex(keyHash)}</span>
                 {signature && <span><CheckIcon className='w-4' /></span>}
-                {hex && <CopyToClipboardButton content={hex}><DuplicateIcon className='w-4' /></CopyToClipboardButton>}
+                {hex && <CopyButton className='text-sm' getContent={() => hex} ms={500}><DuplicateIcon className='w-4' /></CopyButton>}
               </li>
             )
           })}
@@ -724,7 +734,7 @@ const SaveTreasuryButton: NextPage<{
     db
       .treasuries
       .put({ name, description, script: base64CBOR, updatedAt: new Date() }, base64CBOR)
-      .then(() => router.push(`/treasuries/${encodeURIComponent(base64CBOR)}`))
+      .then(() => router.push(getTreasuryPath(script)))
       .catch(() => notify('error', 'Failed to save'))
   }
 
@@ -804,14 +814,14 @@ const CopyVkeysButton: NextPage<{
   className?: string
   vkeys: Vkeywitness[]
 }> = ({ cardano, className, children, vkeys }) => {
-  const content = cardano.buildSignatureSetHex(vkeys)
   return (
-    <CopyToClipboardButton
-      disabled={vkeys.length === 0}
-      className={className}
-      content={content}>
+    <CopyButton
+      getContent={() => cardano.buildSignatureSetHex(vkeys)}
+      disabled={vkeys.length <= 0}
+      ms={500}
+      className={className}>
       {children}
-    </CopyToClipboardButton>
+    </CopyButton>
   )
 }
 
diff --git a/src/pages/transactions/[base64CBOR].tsx b/src/pages/transactions/[base64CBOR].tsx
index a9c310b6..d6f98340 100644
--- a/src/pages/transactions/[base64CBOR].tsx
+++ b/src/pages/transactions/[base64CBOR].tsx
@@ -1,13 +1,13 @@
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
-import { Layout, Panel } from '../../components/layout'
+import { Hero, Layout, Panel, ShareCurrentURLButton } from '../../components/layout'
 import { toHex, toIter, verifySignature } from '../../cardano/serialization-lib'
 import { getResult, useCardanoSerializationLib } from '../../cardano/serialization-lib'
 import { ErrorMessage, Loading } from '../../components/status'
 import { CopyVkeysButton, NativeScriptViewer, SignatureSync, SignTxButton, SubmitTxButton, TransactionBodyViewer } from '../../components/transaction'
 import type { Vkeywitness } from '@adaocommunity/cardano-serialization-lib-browser'
 import { useContext, useState } from 'react'
-import { PencilAltIcon } from '@heroicons/react/solid'
+import { ShareIcon, UploadIcon } from '@heroicons/react/solid'
 import { ConfigContext } from '../../cardano/config'
 
 const ManualSign: NextPage<{
@@ -28,15 +28,15 @@ const ManualSign: NextPage<{
         rows={4}
         value={signature}
         onChange={(e) => setSignature(e.target.value)}
-        placeholder="Signature">
+        placeholder="Input signature here and import">
       </textarea>
       <footer className='flex p-4 bg-gray-100 space-x-2'>
         <button
           onClick={manualSignHandle}
           disabled={isDisabled}
           className='flex items-center space-x-1 p-2 disabled:border rounded-md bg-sky-700 text-white disabled:bg-gray-100 disabled:text-gray-400'>
-          <PencilAltIcon className='h-6' />
-          <span>Manual Sign</span>
+          <UploadIcon className='w-4' />
+          <span>Import</span>
         </button>
         {children}
       </footer>
@@ -107,6 +107,17 @@ const GetTransaction: NextPage = () => {
   return (
     <Layout>
       <div className='space-y-2'>
+        <Hero>
+          <h1 className='font-semibold text-lg'>Review Transaction</h1>
+          <p>Share current page URL to other signers so they can sign. After you have signed the transaction, you may copy your signatures to others to import. If the auto sync switch is on, your signatures would be exchanged automatically.</p>
+          <nav>
+            <ShareCurrentURLButton
+              className='flex space-x-1 bg-white text-sky-700 py-1 px-2 rounded shadow w-32 justify-center items-center'>
+              <ShareIcon className='w-4' />
+              <span>Copy URL</span>
+            </ShareCurrentURLButton>
+          </nav>
+        </Hero>
         <TransactionBodyViewer cardano={cardano} txBody={transaction.body()} />
         {txMessage && <Panel className='space-y-1 p-4'>
           <div className='font-semibold'>Message</div>
@@ -129,8 +140,9 @@ const GetTransaction: NextPage = () => {
               <CopyVkeysButton
                 cardano={cardano}
                 vkeys={Array.from(signatureMap.values())}
-                className='px-4 py-2 border text-sky-700 rounded disabled:text-gray-400'>
-                Copy all signatures
+                className='flex space-x-1 justify-center items-center p-2 border text-sky-700 rounded w-48 disabled:text-gray-400'>
+                <ShareIcon className='w-4' />
+                <span>Copy my signatures</span>
               </CopyVkeysButton>
             </footer>
           </Panel>
diff --git a/src/pages/treasuries/[base64CBOR]/index.tsx b/src/pages/treasuries/[base64CBOR]/index.tsx
index da6dd1f5..a78465be 100644
--- a/src/pages/treasuries/[base64CBOR]/index.tsx
+++ b/src/pages/treasuries/[base64CBOR]/index.tsx
@@ -1,7 +1,7 @@
 import type { NativeScript } from '@adaocommunity/cardano-serialization-lib-browser'
 import { NextPage } from 'next'
 import { useRouter } from 'next/router'
-import { encodeCardanoData, getResult, useCardanoSerializationLib } from '../../../cardano/serialization-lib'
+import { getResult, useCardanoSerializationLib } from '../../../cardano/serialization-lib'
 import type { Cardano } from '../../../cardano/serialization-lib'
 import { Layout, Panel } from '../../../components/layout'
 import { ErrorMessage, Loading } from '../../../components/status'
@@ -11,6 +11,7 @@ import { useContext } from 'react'
 import { ConfigContext } from '../../../cardano/config'
 import { getAssetName, getBalance, getPolicyId, useAddressUTxOsQuery } from '../../../cardano/query-api'
 import { ADAAmount, AssetAmount } from '../../../components/currency'
+import { getTreasuryPath } from '../../../route'
 
 const ShowBalance: NextPage<{
   cardano: Cardano
@@ -54,9 +55,6 @@ const ShowTreasury: NextPage<{
   cardano: Cardano
   script: NativeScript
 }> = ({ cardano, script }) => {
-  const base64CBOR = encodeCardanoData(script, 'base64')
-  const path = `/treasuries/${encodeURIComponent(base64CBOR)}`
-
   return (
     <Panel>
       <div className='p-4 space-y-2'>
@@ -65,10 +63,10 @@ const ShowTreasury: NextPage<{
         <ShowBalance cardano={cardano} script={script} />
       </div>
       <footer className='flex justify-end p-4 bg-gray-100 space-x-2'>
-        <Link href={`${path}/edit`}>
+        <Link href={getTreasuryPath(script, 'edit')}>
           <a className='px-4 py-2 border text-sky-700 rounded'>Edit Info</a>
         </Link>
-        <Link href={`${path}/new`}>
+        <Link href={getTreasuryPath(script, 'new')}>
           <a className='px-4 py-2 border text-white bg-sky-700 rounded'>Create Transaction</a>
         </Link>
       </footer>
diff --git a/src/pages/treasuries/[base64CBOR]/new.tsx b/src/pages/treasuries/[base64CBOR]/new.tsx
index dda13eb5..a8cd01a5 100644
--- a/src/pages/treasuries/[base64CBOR]/new.tsx
+++ b/src/pages/treasuries/[base64CBOR]/new.tsx
@@ -1,17 +1,15 @@
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
-import { Layout, Panel } from '../../../components/layout'
-import { Cardano, encodeCardanoData } from '../../../cardano/serialization-lib'
+import { Layout } from '../../../components/layout'
+import { Cardano } from '../../../cardano/serialization-lib'
 import { getResult, useCardanoSerializationLib } from '../../../cardano/serialization-lib'
 import { ErrorMessage, Loading } from '../../../components/status'
 import { useContext } from 'react'
 import { ConfigContext } from '../../../cardano/config'
-import { NewTransaction } from '../../../components/transaction'
+import { NativeScriptInfoViewer, NewTransaction } from '../../../components/transaction'
 import type { ProtocolParameters } from '../../../cardano/query-api'
 import { useAddressUTxOsQuery, useProtocolParametersQuery } from '../../../cardano/query-api'
 import type { NativeScript } from '@adaocommunity/cardano-serialization-lib-browser'
-import { useLiveQuery } from 'dexie-react-hooks'
-import { db } from '../../../db'
 
 const NewMultiSigTransaction: NextPage<{
   cardano: Cardano
@@ -22,8 +20,6 @@ const NewMultiSigTransaction: NextPage<{
   const [config, _] = useContext(ConfigContext)
   const address = cardano.getScriptAddress(script, config.isMainnet)
 
-  const treasury = useLiveQuery(async () => db.treasuries.get(encodeCardanoData(script, 'base64')))
-
   const utxos = useAddressUTxOsQuery(address.to_bech32(), config)
   if (utxos.type === 'loading') return <Loading />;
   if (utxos.type === 'error') return <ErrorMessage>An error happened when query balance.</ErrorMessage>;
@@ -34,14 +30,9 @@ const NewMultiSigTransaction: NextPage<{
   return (
     <Layout>
       <div className='space-y-2'>
-        <Panel className='p-4 space-y-1'>
-          <h1 className='font-semibold text-lg'>{treasury?.name || 'No name'}</h1>
-          {treasury?.description &&
-            <article className='whitespace-pre-line'>
-              {treasury?.description}
-            </article>
-          }
-        </Panel>
+        <NativeScriptInfoViewer
+          className='border-t-4 border-sky-700 bg-white rounded shadow overflow-hidden p-4 space-y-1'
+          script={script} />
         <NewTransaction
           changeAddress={address}
           cardano={cardano}
diff --git a/src/pages/treasuries/new.tsx b/src/pages/treasuries/new.tsx
index 530052d4..b602285a 100644
--- a/src/pages/treasuries/new.tsx
+++ b/src/pages/treasuries/new.tsx
@@ -67,7 +67,7 @@ const AddressInput: NextPage<{
     }
   }
 
-  const base = 'block w-full border px-4 py-2 rounded'
+  const base = 'block w-full border p-2 rounded'
   const textColor = parsedAddress.isOk || (!address) ? '' : 'text-red-500'
   const className = [base, textColor].join(' ')
 
diff --git a/src/route.ts b/src/route.ts
new file mode 100644
index 00000000..3fee465d
--- /dev/null
+++ b/src/route.ts
@@ -0,0 +1,13 @@
+import { NativeScript } from "@adaocommunity/cardano-serialization-lib-browser";
+import { encodeCardanoData } from "./cardano/serialization-lib";
+
+function getTreasuriesPath(subPath?: string): string {
+  return '/' + ['treasuries', subPath].join('/')
+}
+
+function getTreasuryPath(script: NativeScript, subPath?: string): string {
+  const base64CBOR = encodeCardanoData(script, 'base64')
+  return getTreasuriesPath([encodeURIComponent(base64CBOR), subPath].join('/'))
+}
+
+export { getTreasuriesPath, getTreasuryPath }