Fix delete hook and some refactor.

Better package loading experience.
Merge pull request #282 from XRPLF/feat/bundle-xrpl
2023-02-10 14:43:51 +05:30 · 2023-02-09 22:15:22 +05:30 · 2023-02-09 20:22:43 +05:30
4 changed files with 152 additions and 144 deletions
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -15,7 +15,7 @@ const contentShow = keyframes({
  '100%': { opacity: 1 }
 })
 const StyledOverlay = styled(DialogPrimitive.Overlay, {
-  zIndex: 10000,
+  zIndex: 3000,
  backgroundColor: blackA.blackA9,
  position: 'fixed',
  inset: 0,
--- a/components/RunScript/index.tsx
+++ b/components/RunScript/index.tsx
@@ -31,7 +31,7 @@ const generateHtmlTemplate = async (code: string, data?: Record<string, any>) =>
  }

  processString = JSON.stringify(process)
-  
+
  const libs = (await import("xrpl-accountlib/dist/browser.hook-bundle.js")).default;
  return `
  <html>
@@ -135,14 +135,28 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
  const runScript = useCallback(async () => {
    setIsLoading(true);
    try {
+      // Show loading toast only after 1 second, otherwise skip it.
+      let loaded = false
+      let toastId: string | undefined;
+      setTimeout(() => {
+        if (!loaded) {
+          toastId = toast.loading('Loading packages, may take a few seconds...', {
+            position: 'bottom-center',
+          })
+        }
+      }, 1000)
+
      let data: any = {}
      Object.keys(fields).forEach(key => {
        data[key] = fields[key].value
      })
      const template = await generateHtmlTemplate(content, data)
-
      setIframeCode(template)

+      loaded = true
+      if (toastId) {
+        toast.dismiss(toastId)
+      }
      state.scriptLogs = [{ type: 'success', message: 'Started running...' }]
    } catch (err) {
      state.scriptLogs = [
@@ -181,11 +195,11 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {

  const isDisabled = Object.values(fields).some(field => field.required && !field.value)

-  const handleRun = useCallback(() => {
+  const handleRun = useCallback(async () => {
    if (isDisabled) return toast.error('Please fill in all the required fields.')

    state.scriptLogs = []
-    runScript()
+    await runScript();
    setIsDialogOpen(false)
  }, [isDisabled, runScript])

--- a/state/actions/deployHook.tsx
+++ b/state/actions/deployHook.tsx
@@ -85,13 +85,13 @@ export const prepareDeployHookTx = async (
  //     }
  //   }
  // });
-  if (typeof window === 'undefined') return;
+  if (typeof window === 'undefined') return
  const tx = {
    Account: account.address,
    TransactionType: 'SetHook',
    Sequence: account.sequence,
    Fee: data.Fee,
-    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID || state.client.getState().server.networkId,
+    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID,
    Hooks: [
      {
        Hook: {
@@ -111,86 +111,84 @@ export const prepareDeployHookTx = async (
  return tx
 }

-/* deployHook function turns the wasm binary into
- * hex string, signs the transaction and deploys it to
- * Hooks testnet.
+/*
+ * Turns the wasm binary into hex string, signs the transaction and deploys it to Hooks testnet.
 */
 export const deployHook = async (account: IAccount & { name?: string }, data: SetHookData) => {
-  if (typeof window !== 'undefined') {
-    const activeFile = state.files[state.active]?.compiledContent
-      ? state.files[state.active]
-      : state.files.filter(file => file.compiledContent)[0]
-    state.deployValues[activeFile.name] = data
-    const tx = await prepareDeployHookTx(account, data)
-    if (!tx) {
-      return
-    }
-    const keypair = derive.familySeed(account.secret)
+  const activeFile = state.files[state.active]?.compiledContent
+    ? state.files[state.active]
+    : state.files.filter(file => file.compiledContent)[0]
+  state.deployValues[activeFile.name] = data

-    const { signedTransaction } = sign(tx, keypair)
-    const currentAccount = state.accounts.find(acc => acc.address === account.address)
-    if (currentAccount) {
-      currentAccount.isLoading = true
-    }
-    let submitRes
+  const tx = await prepareDeployHookTx(account, data)
+  if (!tx) {
+    return
+  }
+  const keypair = derive.familySeed(account.secret)
+  const { signedTransaction } = sign(tx, keypair)

-    try {
-      submitRes = await xrplSend({
-        command: 'submit',
-        tx_blob: signedTransaction
+  const currentAccount = state.accounts.find(acc => acc.address === account.address)
+  if (currentAccount) {
+    currentAccount.isLoading = true
+  }
+
+  let submitRes
+  try {
+    submitRes = await xrplSend({
+      command: 'submit',
+      tx_blob: signedTransaction
+    })
+
+    const txHash = submitRes.tx_json?.hash
+    const resultMsg = ref(
+      <>
+        [<ResultLink result={submitRes.engine_result} />] {submitRes.engine_result_message}{' '}
+        {txHash && (
+          <>
+            Transaction hash:{' '}
+            <Link
+              as="a"
+              href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${txHash}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {txHash}
+            </Link>
+          </>
+        )}
+      </>
+    )
+    if (submitRes.engine_result === 'tesSUCCESS') {
+      state.deployLogs.push({
+        type: 'success',
+        message: 'Hook deployed successfully ✅'
      })
-
-      const txHash = submitRes.tx_json?.hash
-      const resultMsg = ref(
-        <>
-          [<ResultLink result={submitRes.engine_result} />] {submitRes.engine_result_message}{' '}
-          {txHash && (
-            <>
-              Transaction hash:{' '}
-              <Link
-                as="a"
-                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${txHash}`}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {txHash}
-              </Link>
-            </>
-          )}
-        </>
-      )
-      if (submitRes.engine_result === 'tesSUCCESS') {
-        state.deployLogs.push({
-          type: 'success',
-          message: 'Hook deployed successfully ✅'
-        })
-        state.deployLogs.push({
-          type: 'success',
-          message: resultMsg
-        })
-      } else if (submitRes.engine_result) {
-        state.deployLogs.push({
-          type: 'error',
-          message: resultMsg
-        })
-      } else {
-        state.deployLogs.push({
-          type: 'error',
-          message: `[${submitRes.error}] ${submitRes.error_exception}`
-        })
-      }
-    } catch (err) {
-      console.log(err)
+      state.deployLogs.push({
+        type: 'success',
+        message: resultMsg
+      })
+    } else if (submitRes.engine_result) {
      state.deployLogs.push({
        type: 'error',
-        message: 'Error occurred while deploying'
+        message: resultMsg
+      })
+    } else {
+      state.deployLogs.push({
+        type: 'error',
+        message: `[${submitRes.error}] ${submitRes.error_exception}`
      })
    }
-    if (currentAccount) {
-      currentAccount.isLoading = false
-    }
-    return submitRes
+  } catch (err) {
+    console.error(err)
+    state.deployLogs.push({
+      type: 'error',
+      message: 'Error occurred while deploying'
+    })
  }
+  if (currentAccount) {
+    currentAccount.isLoading = false
+  }
+  return submitRes
 }

 export const deleteHook = async (account: IAccount & { name?: string }) => {
@@ -198,77 +196,73 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
  if (currentAccount?.isLoading || !currentAccount?.hooks.length) {
    return
  }
-  if (typeof window !== 'undefined') {
-    const tx = {
-      Account: account.address,
-      TransactionType: 'SetHook',
-      Sequence: account.sequence,
-      Fee: '100000',
-      Hooks: [
-        {
-          Hook: {
-            CreateCode: '',
-            Flags: 1
-          }
+  const tx = {
+    Account: account.address,
+    TransactionType: 'SetHook',
+    Sequence: account.sequence,
+    Fee: '100000',
+    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID,
+    Hooks: [
+      {
+        Hook: {
+          CreateCode: '',
+          Flags: 1
        }
-      ]
-    }
-
-    const keypair = derive.familySeed(account.secret)
-    try {
-      // Update tx Fee value with network estimation
-      const res = await estimateFee(tx, account)
-      tx['Fee'] = res?.base_fee ? res?.base_fee : '1000'
-    } catch (err) {
-      // use default value what you defined earlier
-      console.log(err)
-    }
-    const { signedTransaction } = sign(tx, keypair)
-
-    if (currentAccount) {
-      currentAccount.isLoading = true
-    }
-    let submitRes
-    const toastId = toast.loading('Deleting hook...')
-    try {
-      submitRes = await xrplSend({
-        command: 'submit',
-        tx_blob: signedTransaction
-      })
-
-      if (submitRes.engine_result === 'tesSUCCESS') {
-        toast.success('Hook deleted successfully ✅', { id: toastId })
-        state.deployLogs.push({
-          type: 'success',
-          message: 'Hook deleted successfully ✅'
-        })
-        state.deployLogs.push({
-          type: 'success',
-          message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`
-        })
-        currentAccount.hooks = []
-      } else {
-        toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, {
-          id: toastId
-        })
-        state.deployLogs.push({
-          type: 'error',
-          message: `[${submitRes.engine_result || submitRes.error}] ${
-            submitRes.engine_result_message || submitRes.error_exception
-          }`
-        })
      }
-    } catch (err) {
-      console.log(err)
-      toast.error('Error occurred while deleting hook', { id: toastId })
+    ]
+  }
+  const keypair = derive.familySeed(account.secret)
+  try {
+    // Update tx Fee value with network estimation
+    const res = await estimateFee(tx, account)
+    tx['Fee'] = res?.base_fee || '1000'
+  } catch (err) {
+    console.error(err)
+  }
+  const { signedTransaction } = sign(tx, keypair)
+  if (currentAccount) {
+    currentAccount.isLoading = true
+  }
+  let submitRes
+  const toastId = toast.loading('Deleting hook...')
+  try {
+    submitRes = await xrplSend({
+      command: 'submit',
+      tx_blob: signedTransaction
+    })
+
+    if (submitRes.engine_result === 'tesSUCCESS') {
+      toast.success('Hook deleted successfully ✅', { id: toastId })
+      state.deployLogs.push({
+        type: 'success',
+        message: 'Hook deleted successfully ✅'
+      })
+      state.deployLogs.push({
+        type: 'success',
+        message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`
+      })
+      currentAccount.hooks = []
+    } else {
+      toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, {
+        id: toastId
+      })
      state.deployLogs.push({
        type: 'error',
-        message: 'Error occurred while deleting hook'
+        message: `[${submitRes.engine_result || submitRes.error}] ${
+          submitRes.engine_result_message || submitRes.error_exception
+        }`
      })
    }
-    if (currentAccount) {
-      currentAccount.isLoading = false
-    }
-    return submitRes
+  } catch (err) {
+    console.log(err)
+    toast.error('Error occurred while deleting hook', { id: toastId })
+    state.deployLogs.push({
+      type: 'error',
+      message: 'Error occurred while deleting hook'
+    })
  }
+  if (currentAccount) {
+    currentAccount.isLoading = false
+  }
+  return submitRes
 }
--- a/state/actions/sendTransaction.tsx
+++ b/state/actions/sendTransaction.tsx
@@ -27,7 +27,7 @@ export const sendTransaction = async (
    Account: account.address,
    Sequence: account.sequence,
    Fee,
-    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID || state.client.getState().server.networkId,
+    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID,
    ...opts
  }
  const { logPrefix = '' } = options || {}
Author	SHA1	Message	Date
muzam1l	43c83d0de6	Fix delete hook and some refactor.	2023-02-10 14:43:51 +05:30
muzam1l	6bb407cb0f	Better package loading experience.	2023-02-09 22:15:22 +05:30
muzamil	d7b29ba809	Merge pull request #282 from XRPLF/feat/bundle-xrpl Bundle patched `xrpl-accountlib` and expose through require syntax.	2023-02-09 20:22:43 +05:30