refactor(parser): use starknetjs parsers to encode decode data #334

metalboyrick · 2024-10-25T19:02:32Z

Task name here

Fixes #326
Fixes #319

Types of change

Feature
Bug
Enhancement

Comments (optional)

Have not cleaned up yet, but tested with bulletproof contracts, should work with previous data types

TODO:

Debug page
useScaffoldReadContract hook
useScafffoldWriteContract hook
useScaffoldMultiWriteContract hook
~~useScaffoldEventHistory hook~~
Documentation on the hooks input and output - docs: update based on new parser ss2-docs#38
Code cleanup of old parsers
Update unit tests

metalboyrick · 2024-10-25T19:03:03Z

Can review first, I will leave it as draft for now @jrcarlos2000 @Nadai2010

packages/nextjs/app/debug/_components/contract/Array.tsx

packages/nextjs/app/debug/_components/contract/ContractInput.tsx

ngjupeng · 2024-10-29T14:10:57Z

there's a bug with tuple unsigned integer

iossocket · 2024-10-29T14:52:02Z

packages/nextjs/app/debug/_components/contract/utilsContract.tsx

+    // translate boolean input
+    if (isCairoBool(key)) return convertStringInputToBool(value);
+
+    if (


should include u256 and parsed by decimal?

if ( isValidNumber(value) && (isCairoBigInt(key) || isCairoInt(key) || isCairoFelt(key) || isCairoU256(key)) ) { return parseInt(value, 10); }

not necessarily, inputs can be hex as well, but i can add another check

Thanks for your reply and explanation, I have a question, correct me if I'm wrong. If we write an unit test like this, what's the expect result? 10 or pared 10 as a hex value 16?

describe("utilsContract", () => { it("should parse u8 form correctly", () => { const result = getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::u8": '10' }, false, true); expect(result).toEqual([10]); }) });

For an IntegerInput component, we can not input something like 0x10. for now so how can we differentiate decimal and hexadecimal？

Im thinking to add new logic branch to differentiate it. which can check hex number or decimal number

function isValidHexNumber(input?: string): boolean { if ((input || "").length === 0) return false; return /^0x[0-9a-fA-F]+$/i.test(input || "") } ... if ( isValidHexNumber(value) && (isCairoBigInt(key) || isCairoInt(key) || isCairoFelt(key) || isCairoU256(key)) ) { return parseInt(value, 16); } if ( isValidNumber(value) && (isCairoBigInt(key) || isCairoInt(key) || isCairoFelt(key) || isCairoU256(key)) ) { return parseInt(value, 10); }

And I wrote a unit test suit, try to cover all the cases, would you mind to check it?

import { describe, expect, it } from "vitest"; import { getArgsAsStringInputFromForm } from "../utilsContract"; describe("utilsContract", () => { it("should parse integer form correctly", () => { expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::u8": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::u16": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::u32": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::u64": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::u128": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::u256": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::felt252": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::i8": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::i16": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::i32": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::i64": '10' }, false, true)).toEqual([10]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::integer::i128": '10' }, false, true)).toEqual([10]); }); it("should parse bool form correctly", () => { expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": 'true' }, false, true)).toEqual([true]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": '1' }, false, true)).toEqual([true]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": '0x1' }, false, true)).toEqual([true]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": '0x01' }, false, true)).toEqual([true]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": '0x001' }, false, true)).toEqual([true]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": 'false' }, false, true)).toEqual([false]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": '0' }, false, true)).toEqual([false]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": '0x0' }, false, true)).toEqual([false]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": '0x00' }, false, true)).toEqual([false]); expect(getArgsAsStringInputFromForm({ "echo_u8_input_core::bool": '0x000' }, false, true)).toEqual([false]); }); it("should parse struct correctly", () => { const form = { "echo_struct_input_contracts::YourModel::User": { "name": { "type": "core::byte_array::ByteArray", "value": "john" }, "age": { "type": "core::integer::u8", "value": "24" }, "msg": { "type": "contracts::YourModel::Message", "value": { "variant": { "Quit": { "type": "()", "value": "" }, "Echo": { "type": "core::felt252", "value": "" }, "Move": { "type": "(core::integer::u128, core::integer::u128)", "value": "(1,2)" } } } } } } const result = getArgsAsStringInputFromForm(form, false, true); expect(result).toEqual([ { "name": "john", "age": 24, "msg": { "variant": { "Move": { "0": 1, "1": 2 }, } } } ]) }); it("should parse multi input correctly", () => { const form = { "echo_enum_u_input_u8_core::integer::u8": "1", "echo_enum_u_input_contracts::YourModel::Message": { "variant": { "Quit": { "type": "()", "value": "" }, "Echo": { "type": "core::felt252", "value": "32" }, "Move": { "type": "(core::integer::u128, core::integer::u128)", "value": "" } } }, "echo_enum_u_input_u16_core::integer::u16": "3", "echo_enum_u_input_u32_core::integer::i32": "4" } const result = getArgsAsStringInputFromForm(form, false, true); expect(result).toEqual([ 1, { "variant": { "Echo": 32 } }, 3, 4 ]) }); });

hahaha sorry ser, would be helpful if you can branch out into a separate branch that is based off this branch and work from there if the changes are alot, cuz pretty hard to read in the comments cannot show which stuff are changed. Appreciate your effort in reviewing the PRs though!.

But this UT should prove helpful!

For the distinction between hex or regular int, im currently considering the idea of using radio buttons, like how starkscan does it, wdyt cc @ngjupeng @Nadai2010 @jrcarlos2000, but automatic validation like the suggested change can work, just that we have to update the placeholder text later

@iossocket i will incorporate your isValidHex function

@metalboyrick Hi I have created a pr on #337

ngjupeng · 2024-10-29T14:56:06Z

packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx

@@ -66,8 +71,7 @@ export const ReadOnlyFunctionForm = ({
  });

  const handleRead = () => {
-    const newInputValue = getParsedContractFunctionArgs(form, false, true);
-
+    const newInputValue = getArgsAsStringInputFromForm(form, false, true);


bug with integer type, and

export const isCairoInt = (type: string): type is CairoInt => /^core::integer::(u|i)(8|16|32)$/.test(type);

never trigger as true because the form is const key = getFunctionInputKey(abiFunction.name, input, inputIndex); so its start with function name not start with core

ngjupeng · 2024-10-29T15:38:56Z

ContractAddress is bigint here

metalboyrick · 2024-11-03T11:25:27Z

Since I've written some changes for the Address component, this should resolve issue #319 as well

ngjupeng · 2024-11-03T14:11:36Z

0x0x issue from useScaffoldEventHistory on felt type

ngjupeng · 2024-11-03T14:45:49Z

issue happen in nested enum

Sample nested enum cairo code:

#[derive(Drop, Serde)]
enum SampleEnum {
    enum1: u256,
    enum2: felt252
}

#[derive(Drop, Serde)]
enum SampleNestedEnum {
    enum1: SampleEnum,
    enum2: felt252
}

#[derive(Drop, starknet::Event)]
pub struct EventWithNestedEnum {
    element1: u256,
    element2: SampleNestedEnum,
}

 fn emit_event_with_nested_enum(
          ref self: ContractState, element1: u256, element2: SampleNestedEnum
      ) {
          self.emit(EventWithNestedEnum { element1, element2 });
      }

iossocket · 2024-11-03T15:08:13Z

@ngjupeng hi, #339 had fixed the 0x0x event issue, would you mind to check it ?

ngjupeng · 2024-11-05T13:02:53Z

we need handle this case?

jrcarlos2000 · 2024-11-05T13:09:17Z

we need handle this case?

this used to be handled before @metalboyrick iirc

metalboyrick · 2024-11-05T14:46:54Z

@jrcarlos2000 @ngjupeng used to be, new changes may have override this, will check

ngjupeng · 2024-11-05T15:00:37Z

0x is valid input (ignore the gia, it only exist on my local for debug purpose)

ngjupeng · 2024-11-05T15:01:13Z

u256>

ngjupeng · 2024-11-05T15:02:18Z

integer type is not working

ngjupeng · 2024-11-05T15:03:06Z

expect to return as contract format

iossocket · 2024-11-06T03:45:29Z

will this be a fix for inputting more than one variant for enum form? @metalboyrick

metalboyrick · 2024-11-06T04:27:42Z

@iossocket yep, enums are supposed to only have one active variant only

metalboyrick · 2024-11-06T04:37:38Z

yeah but that somehow doesnt work

iossocket · 2024-11-06T06:19:56Z

does not get this hint?

metalboyrick · 2024-11-06T06:28:21Z

wait now it works

metalboyrick · 2024-11-06T06:28:29Z

@iossocket that is the expected one

metalboyrick · 2024-11-06T06:35:13Z

i tink this breaks down if the enum is nested
@iossocket

iossocket · 2024-11-06T07:26:33Z

is it because one form will only have one errorMessage state, other field item may change it as well?

metalboyrick · 2024-11-06T08:04:29Z

yep @iossocket fixed this, cc @ngjupeng

metalboyrick · 2024-11-06T10:34:52Z

expect to return as contract format

@ngjupeng this has been fixed but some output might loook a bit uglier haha

iossocket · 2024-11-06T10:34:56Z

for the signed integer, starknetjs does not support right now. starknet-io/starknet.js#1177

ngjupeng · 2024-11-06T13:36:18Z

expect to return as contract format

@ngjupeng this has been fixed but some output might loook a bit uglier haha

this issue existed in tuple and struct also, but it was fixed on array

metalboyrick · 2024-11-06T15:02:17Z

merging and will record outstanding issues to unblock HH usage

metalboyrick added 12 commits October 14, 2024 22:24

hotfix: remove console log [skip ci]

0cadd7b

Merge branch 'main' of https://github.com/Quantum3-Labs/scaffold-stark-2

3bd05ed

Merge branch 'main' of https://github.com/Quantum3-Labs/scaffold-stark-2

84f0b34

Merge branch 'main' of https://github.com/Quantum3-Labs/scaffold-stark-2

296fcad

Merge branch 'main' of https://github.com/Quantum3-Labs/scaffold-stark-2

e2a4687

Merge branch 'main' of https://github.com/Quantum3-Labs/scaffold-stark-2

9d10b03

Merge branch 'main' of https://github.com/Quantum3-Labs/scaffold-stark-2

6cbeb33

Merge branch 'main' of https://github.com/Quantum3-Labs/scaffold-stark-2

976c292

chore: cleanup from previous parsers in write hooks

2528085

refactor: fixed for structs and enums as well as primitives

137d298

fix: tuple error

f8bf944

fix: array parsing

5fc462a

metalboyrick requested review from Nadai2010 and 0xquantum3labs October 25, 2024 19:02

chore: remove console log

2d384d6

Nadai2010 approved these changes Oct 27, 2024

View reviewed changes

iossocket reviewed Oct 29, 2024

View reviewed changes

packages/nextjs/app/debug/_components/contract/Array.tsx Outdated Show resolved Hide resolved

iossocket reviewed Oct 29, 2024

View reviewed changes

packages/nextjs/app/debug/_components/contract/ContractInput.tsx Show resolved Hide resolved

iossocket reviewed Oct 29, 2024

View reviewed changes

ngjupeng reviewed Oct 29, 2024

View reviewed changes

refactor: array input code

c1336d7

metalboyrick mentioned this pull request Oct 30, 2024

docs: update based on new parser Scaffold-Stark/ss2-docs#38

Merged

2 tasks

fix: display contract address correctly

39aeed3

metalboyrick marked this pull request as ready for review October 30, 2024 15:36

iossocket and others added 2 commits November 3, 2024 17:59

add unit test for getArgsAsStringInputFromForm. (#337)

9aa4ae6

chore: run prettier

3bc7759

chore: clean up unused parser functions

28423df

fix: revamp input error handling to be more robust

383eb15

fix: array not displaying correct things

1f9f341

fix: write always disabled

983cf5d

0xquantum3labs approved these changes Nov 6, 2024

View reviewed changes

metalboyrick merged commit cac2446 into main Nov 6, 2024
2 checks passed

metalboyrick deleted the refactor/use-starknetjs-parsers-to-encode-decode-data branch November 6, 2024 15:02

refactor(parser): use starknetjs parsers to encode decode data #334

refactor(parser): use starknetjs parsers to encode decode data #334

Conversation

metalboyrick commented Oct 25, 2024 • edited Loading

Task name here

Types of change

Comments (optional)

metalboyrick commented Oct 25, 2024

ngjupeng commented Oct 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iossocket Oct 30, 2024 • edited Loading

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

ngjupeng commented Oct 29, 2024

metalboyrick commented Nov 3, 2024

ngjupeng commented Nov 3, 2024

ngjupeng commented Nov 3, 2024

iossocket commented Nov 3, 2024

ngjupeng commented Nov 5, 2024

jrcarlos2000 commented Nov 5, 2024

metalboyrick commented Nov 5, 2024

ngjupeng commented Nov 5, 2024

ngjupeng commented Nov 5, 2024

ngjupeng commented Nov 5, 2024

ngjupeng commented Nov 5, 2024

iossocket commented Nov 6, 2024

metalboyrick commented Nov 6, 2024

metalboyrick commented Nov 6, 2024

iossocket commented Nov 6, 2024

metalboyrick commented Nov 6, 2024

metalboyrick commented Nov 6, 2024

metalboyrick commented Nov 6, 2024

iossocket commented Nov 6, 2024

metalboyrick commented Nov 6, 2024

metalboyrick commented Nov 6, 2024

iossocket commented Nov 6, 2024

ngjupeng commented Nov 6, 2024 • edited Loading

metalboyrick commented Nov 6, 2024

metalboyrick commented Oct 25, 2024 •

edited

Loading

iossocket Oct 30, 2024 •

edited

Loading

ngjupeng commented Nov 6, 2024 •

edited

Loading