diff --git a/pages/framework/tokenscript-syntax/attributes.mdx b/pages/framework/tokenscript-syntax/attributes.mdx index e1b9dca..0826d93 100644 --- a/pages/framework/tokenscript-syntax/attributes.mdx +++ b/pages/framework/tokenscript-syntax/attributes.mdx @@ -86,4 +86,19 @@ It's important to consider how top-level attributes may impact performance when - contractAddress (in the context of a token card) - tokenId (in the context of a non-fungible token) - ownerAddress (the owner of the current token, usually the currently connected wallet address). -- chainId (The chain for the current token) \ No newline at end of file +- chainId (The chain for the current token) + +## Complex return types + +Smart contracts often return complex data types such as multiple return values, arrays & structs (often referred to as tuples). +TokenScript attributes can fetch and decode this complex data, as long as the ABI fragment for that method is available in the referenced `ts:contract`. + +Simply change the `as` parameter of `ts:call` to `abi`: + +```xml + + + + + +``` \ No newline at end of file diff --git a/pages/framework/tokenscript-syntax/cards.mdx b/pages/framework/tokenscript-syntax/cards.mdx index 61b67c7..a258299 100644 --- a/pages/framework/tokenscript-syntax/cards.mdx +++ b/pages/framework/tokenscript-syntax/cards.mdx @@ -101,10 +101,19 @@ The `ts:view` element defines the web content for this card and also has several ### urlFragment -The `urlFragment` +The `urlFragment` fragment attribute is used to support routing within TokenScript projects built as an SPA. +When the card is loaded this value is added onto the document.location.hash. ### uiButton +For simple actions, TokenScript viewer UI provides a button at the bottom of the card that can be used to trigger the +default transaction or invoke the window.onConfirm function defined by the script. + +This button is shown by default on action cards and disabled by default on all other cards. The "uiButton" attribute can be used to override the default behavior. + ### fullScreen +By, default cards are shown as a popup modal and should use a responsive design to ensure a good user experience on mobile devices. +The default max size for the popover modal in TokenScript viewer is 500px wide & 700px high. +If your card should be full screen, simply set `fullScreen="true"`. diff --git a/pages/framework/tokenscript-syntax/transactions.mdx b/pages/framework/tokenscript-syntax/transactions.mdx index 0125c96..fe1d562 100644 --- a/pages/framework/tokenscript-syntax/transactions.mdx +++ b/pages/framework/tokenscript-syntax/transactions.mdx @@ -1 +1,85 @@ -# Transactions \ No newline at end of file +# Transactions + +One powerful feature of the TokenScript framework is the concept of declarative transactions. +They provide an easy way to invoke ethereum transactions without writing lots of Javascript. +In fact, it's possible to wire up simple transactions without a single line of imperative code! +This is because transactions take advantages of attribute values which they can reference for use in the smart contract's method parameters. +This is also true for user-input attributes, which can be automatically collected by the engine & card SDK before invoking a transaction. + +## A simple action card example + +This card implements the erc-721 transfer function and does so without any Javascript: + +```xml + + + Transfer + + + + 1.3.6.1.4.1.1466.115.121.1.27 + + + To Address + + + + + + + + + + + + + + + + + + +``` + +The syntax for transactions is very similar to attributes that use `ethereum:call`. +Note: Attributes defined within the card (either in XML or via Card SDK `setProps`) should use `local-ref` rather than `ref` to reference attributes. + +Since we have defined our user-input attribute `toAddress`, we only need to supply an input field in the view with the same ID: + +```html +
+

+ Account Address +

+ +
+``` + +The engine will ask the card SDK to collect the input value before invoking the transaction. +The other parameters (ownerAddress & tokenId) are intrinsic attributes that are known by the engine, but can also be user-define attributes. + +## Setting inputs programmatically + +Sometimes using direct user input may not be possible, such as when the input requires some +processing to get the final value, or when the value is calculated based on some off-chain logic. + +The Card SDK's `tokenscript.action.setProps()` method can be used to programmatically set parameter values. +You do not have to define `ts:user-entry` attributes when using `setProps`. + +Note: When using `setProps`, make sure you don't have any HTML input elements with the same ID as the keys you set may be overwritten. +Alternatively you can define `data-ts-prop="false"` on the input element to disable the automatic collection of input fields. + +## Invoking transactions + +### UI Button + +### Card SDK + +