feat(transfer): javascript playground #624

jessevanmuijden · 2023-07-19T11:34:25Z

This PR updates the depency on @kadena/client to the latest (~1.0.0) version. Also, it extends the module explorer functinoality with a JavaScript playground. It should be considered if the module explorer extension should better be moved to another PR and limit the current PR to just the kadena client version update.

The approach to the module explorer and the JavaScript playground is as follows.

Routing
Users can search modules on any chain by typing in the search field. Below the form, a list of modules in the selected the chain are displayed, filtered on the search query. Clicking on any module name will navigate the user to a /module-explorer/networks/{network}/chains/{chain/modules/{moduleName} route. On the respective page, the pact code as well as a list of functions, capabilities and interfaces are displayed. Clicking on a function name will navigate the user to a /module-explorer/networks/{network}/chains/{chain/modules/{moduleName}/functions/{function} route. This page contains a code editor and a readonly output frame.

Evaluating user provided JavaScript
A user can enter JavaScript code in the editor and click the "Run" button to execute the JavaScript. the scopedEval npm package is used to execute the user provided JavaScript within the scope of the application. For security purposes, only { Pact, getClient, signWithChainweaver, isSignedCommand } from the @kadena/client as well as a simple Logger to display output are available in the scope where the user provided JavaScript is executed in. This approach does require a thorough evaluation with regard to security.

Example code snippets
The codebase contains many example code snippets, e.g. in the cookbook and the client-examples directory. It could help the onboarding of new developers on the Kadena platform, if we could provide example code snippets for use in the aforementioned JavaScript editor. This would require a way to match example code snippets to the function that someone wants to use. As a proof of concept I have created a git repository on my own github account with a directory structure that mirrors the routing of the module explorer described above. If we agree on this approach, we should probably find a good central location for the example code snippets in this kadena repository. To give an example of how it works, there is an example script for the get-balance function of the coin module on chain 9 of TESTNET located in /networks/TESTNET/chains/9/modules/coin/functions/get-balance.js. If the transfer app can find this file, it will show a button "Load example code". When it is clicked, the example code from the git repository will be loaded into the code editor and can be executed by clicking the "Run" button. It could also be an idea to turn the get-balance.js file into a ./get-balance directory containing multiple example snippets for the function at hand. Maintainability of this approach needs to be discussed, because it may not be practical to maintain example snippets separately for every chain in case a Pact module is deployed on all chains. On the other hand, A module with the same name may have a different implementation on another chain.

to do

Unit tests for services in the transfer app
Extend unit tests for components in the transfer app
Integration tests for transfer app functionality
E2E tests for transfer app
Add tests for packages that were upgraded to kadena/client v1

vercel · 2023-07-19T11:34:31Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

3 Ignored Deployments

Name	Status	Preview	Updated (UTC)
alpha-docs	⬜️ Ignored (Inspect)	Visit Preview	Jul 25, 2023 0:43am
react-ui	⬜️ Ignored (Inspect)	Visit Preview	Jul 25, 2023 0:43am
transfer	⬜️ Ignored (Inspect)		Jul 25, 2023 0:43am

nil-amrutlal · 2023-07-24T13:11:33Z

There are some conflicting files. Can we resolve these and try again? From checking the screenshot @sstraatemans provided (see below) I cant really see the problem. Could have to do with the versioning of the client

alber70g · 2023-09-08T09:35:31Z

packages/apps/transfer/src/components/Global/Ace/index.tsx

 export interface IAceEditorProps {
  code?: string;
+  width?: string;
+  height?: string;
+  readonly?: boolean;
+  onChange?: IOnchange;
 }

-const AceViewerComponent: FC<IAceEditorProps> = ({ code }) => (
+const AceViewerComponent: FC<IAceEditorProps> = ({
+  code,
+  width,
+  height,
+  readonly,
+  onChange,
+}) => (


I know Ace Editor has support for Vim-mode. Can we enable that with a toggle? Not blocking for this PR, just a thought

alber70g

Minor comments. Only code review, not execution

alber70g · 2023-09-08T09:45:18Z

packages/apps/transfer/src/constants/client.ts

+const client = getClient();
+
+export default client;


I think it's preferred to use named exports. It's easier to resolve a missing import that way. Also making it a bit more specific might help to distinguish from other clients.

Suggested change

const client = getClient();

export default client;

export const kadenaClient = getClient();

alber70g · 2023-09-11T08:53:46Z

packages/apps/transfer/src/pages/faucet/existing/index.tsx

+        const result = (await fundExistingAccount(
+          accountName,
+          chainID,
+          AMOUNT_OF_COINS_FUNDED,
+        )) as IFundExistingAccountResponse;


Can't this type be set in the fundExistingAccount function?

alber70g · 2023-09-11T08:58:10Z

...fer/module-explorer/networks/[network]/chains/[chain]/modules/[module]/functions/[defun].tsx

+
+const FunctionPage: FC = () => {
+  Debug('kadena-transfer:pages:transfer:module-explorer:module:function');


How is this being used?
Usually you assign the return value to a variable to use in other places.
This can be assigned outside the component as it doesn't change in other components

Suggested change

const FunctionPage: FC = () => {

Debug('kadena-transfer:pages:transfer:module-explorer:module:function');

const log = Debug('kadena-transfer:pages:transfer:module-explorer:module:function');

const FunctionPage: FC = () => {

log('executing FunctionPage'); // example

alber70g · 2023-09-11T08:58:43Z

.../pages/transfer/module-explorer/networks/[network]/chains/[chain]/modules/[module]/index.tsx

+import React, { FC, useEffect, useState } from 'react';
+
+const ModulePage: FC = () => {
+  Debug('kadena-transfer:pages:transfer:module-explorer:module');


alber70g · 2023-09-11T09:40:44Z

packages/apps/transfer/src/services/faucet/index.ts

  const apiHost = getKadenaConstantByNetwork('TESTNET').apiHost({
    networkId: NETWORK_ID,
    chainId,
  });

-  await transactionBuilder.send(apiHost);
+  transaction.sigs = [{ sig: signature1.sig }, { sig: signature2.sig }];

-  return await transactionBuilder.pollUntil(apiHost, {
-    onPoll,
-  });
+  const { submit, pollStatus } = getClient(apiHost);


Can we make this work with WalletConnect? Take the network from the walletconnect settings, this will open up using this on the devnet as well.
Might be better to do in a next PR though

alber70g · 2023-09-11T09:42:55Z

packages/apps/transfer/src/services/modules/describe-module.ts

+  return await local(transaction, {
+    preflight: false,
+    signatureVerification: false,
+  });


You can use dirtyRead from getClient

alber70g · 2023-09-11T09:43:16Z

packages/apps/transfer/src/services/modules/list-module.ts

@@ -26,27 +25,29 @@ export const listModules = async (
  ttl: number = kadenaConstants.API_TTL,
 ): Promise<IModulesResult> => {
  debug(listModules.name);


alber70g · 2023-09-11T09:43:24Z

packages/apps/transfer/src/services/modules/list-module.ts

+  const response = await local(transaction, {
+    preflight: false,
+    signatureVerification: false,
+  });


alber70g · 2023-09-11T09:46:32Z

packages/tools/cookbook/src/accounts/details.ts

+  const response = await local(transaction, {
+    preflight: false,
+    signatureVerification: false,
+  });


alber70g · 2023-09-11T09:46:36Z

packages/tools/cookbook/src/accounts/get-balance.ts

+  const response = await local(transaction, {
+    preflight: false,
+    signatureVerification: false,
+  });


alber70g

Minor comments. Only code review, not execution

github-actions · 2023-11-10T16:42:58Z

This PR is stale because it is open for 60 days with no activity

Randynamic · 2024-09-04T14:17:38Z

@javadkh2 @alber70g research what to do with this PR

vercel bot had a problem deploying to Preview – transfer July 19, 2023 16:12 Failure

vercel bot had a problem deploying to Preview – transfer July 20, 2023 10:26 Failure

vercel bot had a problem deploying to Preview – transfer July 20, 2023 19:27 Failure

vercel bot had a problem deploying to Preview – transfer July 20, 2023 19:33 Failure

jessevanmuijden force-pushed the feat/transfer/javascript-playground branch from 9587a5a to bffeff4 Compare July 20, 2023 21:34

vercel bot had a problem deploying to Preview – transfer July 20, 2023 21:34 Failure

vercel bot had a problem deploying to Preview – transfer July 20, 2023 21:42 Failure

vercel bot deployed to Preview – alpha-docs July 20, 2023 21:48 View deployment

vercel bot deployed to Preview – react-ui July 20, 2023 21:49 View deployment

jessevanmuijden force-pushed the feat/transfer/javascript-playground branch from 5c39a8d to 5daf4b1 Compare July 21, 2023 09:47

vercel bot had a problem deploying to Preview – transfer July 21, 2023 09:53 Failure

vercel bot had a problem deploying to Preview – transfer July 21, 2023 16:03 Failure

jessevanmuijden marked this pull request as ready for review July 21, 2023 16:08

vercel bot had a problem deploying to Preview – transfer July 22, 2023 17:38 Failure

jessevanmuijden force-pushed the feat/transfer/javascript-playground branch from 85033bc to acfe6d4 Compare July 24, 2023 10:18

vercel bot had a problem deploying to Preview – transfer July 24, 2023 10:24 Failure

vercel bot had a problem deploying to Preview – transfer July 24, 2023 10:55 Failure

vercel bot had a problem deploying to Preview – transfer July 24, 2023 11:26 Failure

vercel bot had a problem deploying to Preview – transfer July 24, 2023 11:36 Failure

vercel bot had a problem deploying to Preview – transfer July 24, 2023 11:56 Failure

vercel bot had a problem deploying to Preview – transfer July 24, 2023 12:16 Failure

jessevanmuijden force-pushed the feat/transfer/javascript-playground branch from e7c9ac2 to bad545f Compare July 24, 2023 13:19

jessevanmuijden requested review from alber70g and webpro as code owners July 24, 2023 13:19

vercel bot had a problem deploying to Preview – transfer July 24, 2023 13:22 Failure

vercel bot deployed to Preview – alpha-docs July 24, 2023 13:27 View deployment

vercel bot had a problem deploying to Preview – transfer July 24, 2023 13:35 Failure

jessevanmuijden force-pushed the feat/transfer/javascript-playground branch from 379add2 to 714c1f1 Compare July 25, 2023 11:29

jessevanmuijden added 18 commits July 25, 2023 08:35

chore(transfer): linting

34cf102

chore(transfer): fix build

d0770e1

fix(transfer): tracker & cross-chain finisher

7a167d3

fix(transfer): get pact capabilities & functions

2b9d1b8

fix(transfer): use workspace:* as version for dependencies

6717459

fix(transfer): pass pact command as string to exection()

32700e7

fix(transfer): local() return value typing

8c431e9

fix(transfer): distinguish PactResultError better

d3d91e6

fix(transfer): build issues

07eebf6

fix(transfer): linting & ts-ignore

a41d752

fix(transfer): use @kadena/pactjs-cli:workspace:*

a2a5de7

fix(transfer): prettier

130448f

fix(transfer): resolve conflict

099a6e4

fix(transfer): fix typo

67bcd29

fix(transfer): prettier

8914025

fix(transfer): use published build of chainweb-node-client

896dc11

fix(transfer): update shrinkwrap

57a93a5

fix(transfer): update shrinkwrap

35d679b

jessevanmuijden force-pushed the feat/transfer/javascript-playground branch from cd3b6bc to 35d679b Compare July 25, 2023 12:39

alber70g reviewed Sep 8, 2023

View reviewed changes

alber70g reviewed Sep 11, 2023

View reviewed changes

This comment was marked as duplicate.

Sign in to view

alber70g approved these changes Sep 11, 2023

View reviewed changes

github-actions bot added the no-pr-activity label Nov 10, 2023

Randynamic marked this pull request as draft September 4, 2024 14:18

Randynamic added the research label Sep 4, 2024

greatheart2 approved these changes Oct 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(transfer): javascript playground #624

feat(transfer): javascript playground #624

jessevanmuijden commented Jul 19, 2023 •

edited

Loading

vercel bot commented Jul 19, 2023 •

edited

Loading

nil-amrutlal commented Jul 24, 2023 •

edited

Loading

alber70g Sep 8, 2023

alber70g left a comment

alber70g Sep 8, 2023

alber70g Sep 11, 2023

alber70g Sep 11, 2023

alber70g Sep 11, 2023

alber70g Sep 11, 2023

alber70g Sep 11, 2023

alber70g Sep 11, 2023

alber70g Sep 11, 2023

alber70g Sep 11, 2023

alber70g Sep 11, 2023

This comment was marked as duplicate.

alber70g left a comment

github-actions bot commented Nov 10, 2023

Randynamic commented Sep 4, 2024


		const FunctionPage: FC = () => {
		Debug('kadena-transfer:pages:transfer:module-explorer:module:function');

feat(transfer): javascript playground #624

Are you sure you want to change the base?

feat(transfer): javascript playground #624

Conversation

jessevanmuijden commented Jul 19, 2023 • edited Loading

vercel bot commented Jul 19, 2023 • edited Loading

nil-amrutlal commented Jul 24, 2023 • edited Loading

Choose a reason for hiding this comment

alber70g left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as duplicate.

alber70g left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 10, 2023

Randynamic commented Sep 4, 2024

jessevanmuijden commented Jul 19, 2023 •

edited

Loading

vercel bot commented Jul 19, 2023 •

edited

Loading

nil-amrutlal commented Jul 24, 2023 •

edited

Loading