Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Build Transaction] Params input and validation + encode JSON to XDR #832

Merged
merged 9 commits into from
Apr 26, 2024
Merged

[Build Transaction] Params input and validation + encode JSON to XDR #832

merged 9 commits into from
Apr 26, 2024

Conversation

quietbits
Copy link
Contributor

@quietbits quietbits commented Apr 22, 2024 •
edited
Loading

Production

  • Using Option 2 from below until Stellar XDR is updated to support string for number (stopgap solution).
  • lossless-json package is used to stringify JSON because native JSON.stringify doesn't work with BigInt.
  • Everything should work (validation, keep values and validation on page refresh, etc). If something doesn't work, it's a bug.
XDR example is rendered in Operations tab

image

Proof of concept

Using Stellar XDR to build transactions from JSON instead of transaction builder from Stellar SDK. This allows us to decode/encode to/from JSON/XDR easily.

This example uses only transaction params and no options, but the approach would be the same. Temporary validation and XDR output are displayed at the bottom of the page.

Screenshot

image

Everything works, but there is a challenge with the number/int type that is required in XDR for fields such as sequence number, base fee, and Memo ID. Inputs in the form must be strings, so at some point, we need to convert the string to number. There are a couple of ways we can handle this on the client.

  1. Convert string to a number when saving the value in the store JSON (this is used directly to convert to XDR when needed). This makes the validation UI a little strange because we can only show something that is a number as it is typed in the field and not any other character. See the example below (I'm typing aaa when the error is shown). We can still show the error message to let the user know what is wrong.
Screen recording
lab-fee-validation.webm
  1. Create a helper that converts all needed number params before we encode them to XDR. This way, the validation is more straightforward: users can input anything and will see that value in the input field. The downside is that we need to manually write checks for every field that needs to be converted. For the params, it's not an issue because those fields are static and always required. It will be more work to implement this for operations.
Code example

image

  1. The best solution for the client side would be for the Stellar XDR to accept numbers and strings for fields that must be number/int type and do the conversion when validating/building the XDR. I don't know if this is possible in Rust, nor that it's a good idea for the XDR.

Note

Validation on page refresh doesn't work, so the XDR encoding might break. Make a change in any field to trigger validation. I didn't add page load validation to keep the updates smaller and more relevant to working with the Stellar XDR package.

If we're happy with how this works, we'll need to clean up the code in this PR and finish validation before merging it.

@quietbits quietbits marked this pull request as draft April 22, 2024 14:14
@stellar-jenkins
Copy link

Preview is available here:
http://laboratory-pr832.previews.kube001.services.stellar-ops.com/

quietbits
quietbits commented Apr 22, 2024
View reviewed changes
.eslintrc.json Outdated Show resolved Hide resolved
@stellar-jenkins
Copy link

Something went wrong with PR preview build please check

@stellar-jenkins
Copy link

Preview is available here:
http://laboratory-pr832.previews.kube001.services.stellar-ops.com/

@quietbits quietbits linked an issue Apr 22, 2024 that may be closed by this pull request
Stellar XDR proof of concept #828
Closed
@quietbits quietbits requested a review from accordeiro April 22, 2024 17:07
@stellar-jenkins
Copy link

Preview is available here:
http://laboratory-pr832.previews.kube001.services.stellar-ops.com/

@stellar-jenkins
Copy link

Preview is available here:
http://laboratory-pr832.previews.kube001.services.stellar-ops.com/

@quietbits quietbits changed the title [DO NOT MERGE] Testing Stellar XDR [Build Transaction] Params input and validation + encode JSON to XDR Apr 25, 2024
@quietbits quietbits marked this pull request as ready for review April 25, 2024 14:43
quietbits
quietbits commented Apr 25, 2024
View reviewed changes
package.json Show resolved Hide resolved
@quietbits quietbits linked an issue Apr 25, 2024 that may be closed by this pull request
[Build Transaction] Attributes input and validation #822
Closed
@stellar-jenkins
Copy link

Preview is available here:
http://laboratory-pr832.previews.kube001.services.stellar-ops.com/

@stellar-jenkins
Copy link

Preview is available here:
http://laboratory-pr832.previews.kube001.services.stellar-ops.com/

jeesunikim
jeesunikim approved these changes Apr 25, 2024
View reviewed changes
Copy link
Contributor

@jeesunikim jeesunikim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked the encoded XDR in old lab view XDR and they work!

@quietbits quietbits merged commit 342211d into laboratory-v2 Apr 26, 2024
3 checks passed
@quietbits quietbits deleted the txn-build-params-xdr branch April 26, 2024 12:57
quietbits added a commit that referenced this pull request Aug 21, 2024
@quietbits @jacekn
@jeesunikim @fnando @janewang @ElliotFriend @leighmcculloch
Lab v2 release (#963)
c26d3e4 
* Next.js and other config

* Add git-info

* Static build

* V2 Layout and basic page setup (#740)

* Layout mostly done

* Cleanup

* Updated next.config.js

* Delete extra folders

* Remove trailingSlash config

* Add console.log for testing

* V2 Basic demo setup for state management (#741)

* Layout mostly done

* Cleanup

* Updated next.config.js

* Delete extra folders

* Remove trailingSlash config

* Add console.log for testing

* Basic demo setup for state management

* V2 Network selector (#742)

* Network selector functional

* Improved network dropdown functionality

* Network selector done

* Updated network links

* Test PR to trigger PR preview for testing (#743)

### What

Test PR to trigger PR preview for testing

### Why

I need a way to test PR previews for laboratory-v2

### Issue addressed by this PR

stellar/ops#2846

* V2 Intro page + some page placeholders (#744)

* V2 Maintenance banner (#745)

* V2 Add Playwright testing framework with initial tests (#748)

* Updated dependencies

* Playwright config + initial tests

* Disable missingSuspenseWithCSRBailout

* Replace class selector with testId

* V2 Explore Endpoints: Horizon navigation and routes (#764)

* V2 Explore Endpoints: routes + side navigation

* Explore Endpoints landing page

* Privacy Policy and Terms of Service links (#770)

* Privacy Policy and Terms of Service links

* Update font size

* [wip] create account

* [Account Routes] add routes for Account

* updating styles

* rename Account 'routes'

* fix routes

* updating scss to use 'gap'

* fix

* remove unused styling

* Network switch update (#778)

* Update network order

* Fix test

* Upgrade SDS

* Add warning for futurenet

* Explore Endpoints: Basic tabs view setup (#772)

* Explore Endpoints: Params tab view

* Picker components (#777)

* RadioPicker

* OrderPicker

* IncludeFailedPicker

* AssetPicker + PubKeyPicker

* Update hover color + expand transition speed

* Cleanup

* Tweaks and cleanup

* Cleanup

* add <GenerateKeypair/> component (#779)

* Run `eslint:recommended` when committing (#787)

* Creat and Fund Account Page (#788)

* Explore Endpoints: Accounts Params view + template rendering setup (#789)

* Explore Endpoints: data flow functional

* Accounts endpoint done

* Cleanup

* Remove none option + update anim transition

* Clean up input onChange methods

* Require code and issuer for non-native assets

* Text updates

* Fix tests

* use @stellar/stellar-sdk (#795)

* Explore Endpoints submit and response (#797)

* Explore Endpoints: submit + json response

* Cleanup

* Fix reset query on change and submit + PrettyJson unique keys

* Box component + tweak ExpandBox (#800)

* Use Node v20 + updated dependencies (#803)

* Minor dep updates

* Use Node v20

* [Account] create and parse muxed account (#794)

* Explore Endpoints: pages part 1 (#805)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Fix positiveInt validation when changing routes

* update husky's lintstagedrc and linting rule (#804)

* Explore Endpoints: pages part 2 (#807)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Payments

* Transactions

* Update SDS

* Order book + asset object params

* Trade aggregations

* Fix PrettyJson records rendering

* Trades

* Cleanup

* Cleanup

* Fix linting

* Explore Endpoints: pages part 3 (#809)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Payments

* Transactions

* Update SDS

* Order book + asset object params

* Trade aggregations

* Fix PrettyJson records rendering

* Trades

* Cleanup

* Paths

* Liquidity pools

* Fix URL validation

* Cleanup

* Update reserves asset type

* Cleanup

* Don't hard-code component IDs

* Endpoints tests (#811)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Payments

* Transactions

* Update SDS

* Order book + asset object params

* Trade aggregations

* Fix PrettyJson records rendering

* Trades

* Cleanup

* Paths

* Liquidity pools

* Fix URL validation

* Cleanup

* Update reserves asset type

* Cleanup

* Endpoints tests

* Update asset validation

* openUrl helper

* Renamed Explore Endpoints to Endpoints (#813)

* Renamed Explore Endpoints to Endpoints

* Rename View XDR to XDR

* adding tests for create and fund account (#808)

* [Build Transaction] Attributes view UI only (without input values and validation) (#825)

* Build transaction: basic tabs setup

* Attributes UI done

* Update button label

* Rename Attributes to Params

* [Sign TX] Input Overview View (#826)

* PrettyJson theme + updated network accent colors (#830)

* Update network accent colors

* PrettyJson theme updated

* [Create Account] Fund account with Friend button behavior (#827)

* [Build Transaction] Params input and validation + encode JSON to XDR (#832)

* Transaction: build params validation + XDR

* Add temp Stellar XDR package locally

* Moved temp into src

* Fix build

* XDR works

* Cleanup

* Rename GH Action + remove BigNumber.js

* Rename GH action job to build

* [Build Transaction] Basic Operations layout + button actions (#836)

* Clear params btn + extended Box component

* Basic operations layout + buttons with action

* [Build Transaction] Operations setup + create account op (#840)

* [Build Transaction] Added operations  (#843)

* Operation type description + docs URL

* Payment operation

* Manage buy and sell operations

* Create Passive Sell Offer operation

* Update maintenance banner (#846)

* [Build Transaction] Add more operations (#844)

* Operation type description + docs URL

* Payment operation

* Manage buy and sell operations

* Create Passive Sell Offer operation

* Account Merge operation

* Manage Data operation

* Bump Sequence operation

* Claim Claimable Balance operation

* Begin and End Sponsoring Future Reserves operations

* [sign tx] add signing with secrets and ValidationResponseCard (#839)

* [Build Transaction] More operations pt. 4 (#847)

* Operation type description + docs URL

* Payment operation

* Manage buy and sell operations

* Create Passive Sell Offer operation

* Account Merge operation

* Manage Data operation

* Bump Sequence operation

* Claim Claimable Balance operation

* Begin and End Sponsoring Future Reserves operations

* Clawback operation

* Clawback Claimable Balance operation

* Path Payment Strict Send operation

* Path Payment Strict Receive operation

* [Sign Transaction] Enable persisting data on page refresh  (#850)

* [Build Transaction] Set Options operation (#851)

* Operation type description + docs URL

* Payment operation

* Manage buy and sell operations

* Create Passive Sell Offer operation

* Account Merge operation

* Manage Data operation

* Bump Sequence operation

* Claim Claimable Balance operation

* Begin and End Sponsoring Future Reserves operations

* Clawback operation

* Clawback Claimable Balance operation

* Path Payment Strict Send operation

* Path Payment Strict Receive operation

* Set Options operation

* Fix signer key encoding

* [Sign Tx] Integrate with 'stellar-wallets-kit' (#852)

* Update GitHub Action packages (#854)

* [Build Transaction] Change Trust operation (#853)

* Change Trust operation

* Use string value

* [Build Transaction] Allow Trust operation (#856)

* Allow Trust operation

* Cleanup

* Use @stellar/stellar-xdr-json-web package and remove temp files (#863)

* [Sign Tx] Add a sign with hardware wallets (trezor, ledger) (#859)

* [Build Transaction] Liquidity Pool Deposit and Withdraw (#857)

* Change Trust operation

* Allow Trust operation

* Cleanup

* Liquidity Pool Deposit and Withdraw

* [Build Transaction] Set Trust Line Flags + Revoke Sponsorship operations (#858)

* Set Trust Line Flags operation

* Revoke Sponsorship operation

* [Build Transaction] Create Claimable Balance operation (#861)

* Create Claimable Balance operation

* Cleanup

* Cleanup

* [UI] Display commit hash + 404 page design (#865)

* Display commit hash

* 404 page design

* Save commit hash in env var instead of file

* Use .env.local

* Update scripts

* Another test

* Another experiment

* Tweak Docker config

* Cleanup

* [View XDR] UI + decoded JSON (#876)

* Link "Sign in Transaction Signer" button to "Sign Transaction" page (#875)

* Update XDR validation + show error message on View XDR page (#877)

* Update XDR validation + show error message on View XDR page

* Update XDR validation + show error message on View XDR page

* [Submit Tx] Add a Submit Tx Page (#879)

* Updated dependencies + CSP middleware configuration (#884)

* Minor updates

* Configure CSP

* Tweaks

* [View XDR] XDR Type dropdown with search + remove custom key for zustand-querystring (#882)

* XDR type search select

* Use default key in zustand-querystring

* Update test

* Text update + copy JSON button

* Fix clawback claimable balance operation (#887)

* [XDR] JSON To XDR (#886)

* XDR type search select

* Use default key in zustand-querystring

* Update test

* Text update + copy JSON button

* To XDR

* Add Fee Bump Tx (#888)

* [Endpoints] Saved Endpoints (#892)

* Wider content + updated transaction base fee note (#896)

* Make content width wider

* Update txn base fee note text

* Fix assetMulti validation

* [Transactions] Saved Transactions (#895)

* Saved Horizon Endpoints

* XDR: prettify copy JSON

* Fix tests

* Save transactions

* Temp disable tests in pre-push

* Some cleanup

* Enable prefetch for links

* Put back pre-push test

* Update saved endpoints layout

* Update src/app/(sidebar)/transaction/saved/page.tsx

Co-authored-by: jeesun 지선 <[email protected]>

---------

Co-authored-by: jeesun 지선 <[email protected]>

* Maintenance banner: update loading state (#898)

* Maintenance banner: update loading state

* Replace loader

* Temp: test beta website (#902)

* Small tweaks (#901)

* Small tweaks

* Update button variant

* [RPC Endpoints] (#897)

* enable Rpc Url input in network selector

* Fix design issues 737 (#914)

* Update src/components/NetworkSelector/index.tsx

Co-authored-by: Nando Vieira <[email protected]>

* Rename validate methods function (#919)

* [Fund Account] switch network page on mainnet (#917)

* V2: undo beta test (#905)

* ThemeSwitch: fix state on page load (#931)

* [Navigation] Utilize vertical space and add subnavigation for endpoints (#930)

* enable switch button when rpc url is different on mainnet (#920)

* UI tweaks (#932)

* Action button tooltip

* Remove main nav link underline

* Upgrade SDS

* Use custom icon + CSS cleanup

* [Rpc endpoint] Bug fixes (#911)

* Simulate Transaction page (#934)

* Network: persist mainnet RPC URL

* XDR: fix large number parsing in JSON (#953)

* XDR: update labels (#954)

* UI tweaks (#945)

* Updated readme

* Added GitHub links

* Update main nav link order + allow Wallet Kit img source in CSP

* Don't show nothing scheduled maintenance banner

* Adjust Network selector max-width

* Rename nav items + endpoints expand by default

* MultiPicker: delete function + button variant update

* Fix test

* Update link + rename Stellar RPC

* Fix test

* Fix another test

* Submit Transaction using RPC (#941)

* Submit Transaction using RPC

* Reset response on input change

* Add diagnosticEvents output

* Remove unused file

* Submit Transaction: Simulate and Save transaction buttons (#943)

* Submit Transaction using RPC

* Reset response on input change

* Add diagnosticEvents output

* Submit Transaction: Simulate transaction button

* Update Payments for Transaction info link

* delayedAction helper + XDR type const + Sign Tx View XDR button

* Sign tx Fee Bump button

* Updated saved transaction logic + save tx on Submit Transaction page

* Resolved merge conflicts

* Update SEO + rename laboratory to lab (#955)

* Resolve conflicts with master branch (#960)

* correct a link on the endpoint explorer to Horizon API documentation

* Improve Soroban XDR rendering (#746)

* Upgrade to TypeScript v5 (#760)

* XDR: fix contract ID and type rendering (#761)

* XDR: fix scvVec rendering (#763)

* display the correct soroban network (#796)

* Add option to sign transaction hash with Ledger device (#838)

* Upgrade @stellar/stellar-sdk to v12.0.0-rc.1 (#841)

* Upgrade stellar/stellar-sdk to v12.0.0-rc.1

* Use Node v18 in GH action

* Dependency updates (#878)

* Temp: beta test v1 (#903)

* V1: undo beta test (#904)

* Remove CLA reference from contributing document (#958)

* Remove CLA reference from contributing document

* Update CONTRIBUTING.md

---------

Co-authored-by: Elliot Voris <[email protected]>
Co-authored-by: jeesun 지선 <[email protected]>
Co-authored-by: Leigh McCulloch <[email protected]>

* Endpoints: handle JSON response links (#956)

* Endpoints: JSON response account + XDR custom links

* JSON response links

* Do not reset Endpoints for XDR links

* No need to clear errors

* Use href instead onClick

* Use href instead onClick

* Trigger PR preview

* Cleanup test

* Final tweaks (#962)

* correct a link on the endpoint explorer to Horizon API documentation

* Improve Soroban XDR rendering (#746)

* Upgrade to TypeScript v5 (#760)

* XDR: fix contract ID and type rendering (#761)

* XDR: fix scvVec rendering (#763)

* display the correct soroban network (#796)

* Add option to sign transaction hash with Ledger device (#838)

* Upgrade @stellar/stellar-sdk to v12.0.0-rc.1 (#841)

* Upgrade stellar/stellar-sdk to v12.0.0-rc.1

* Use Node v18 in GH action

* Dependency updates (#878)

* Temp: beta test v1 (#903)

* V1: undo beta test (#904)

* Remove CLA reference from contributing document (#958)

* Remove CLA reference from contributing document

* Update CONTRIBUTING.md

* Final tweaks

---------

Co-authored-by: Elliot Voris <[email protected]>
Co-authored-by: jeesun 지선 <[email protected]>
Co-authored-by: Leigh McCulloch <[email protected]>

---------

Co-authored-by: jacekn <[email protected]>
Co-authored-by: Jeesun Kim <[email protected]>
Co-authored-by: Jeesun Kim <[email protected]>
Co-authored-by: jeesun 지선 <[email protected]>
Co-authored-by: Nando Vieira <[email protected]>
Co-authored-by: Jane Wang <[email protected]>
Co-authored-by: Elliot Voris <[email protected]>
Co-authored-by: Leigh McCulloch <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jeesunikim jeesunikim jeesunikim approved these changes

@leighmcculloch leighmcculloch Awaiting requested review from leighmcculloch

@accordeiro accordeiro Awaiting requested review from accordeiro

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Stellar XDR proof of concept [Build Transaction] Attributes input and validation
3 participants
@quietbits @stellar-jenkins @jeesunikim