• Releases and Installation

    • Downloads
      • Verification instructions
    • Release notes
  • Concordium Basics

    • Learn about Concordium
      • Identities
        • Company identity creation
      • Accounts
      • Glossary of Concordium Terms
    • Concordium wallets
      • Wallet FAQs
        • Deciding between the wallets
        • Concordium Wallet for Mobile FAQ
        • Concordium Wallet for Web FAQ
      • Set up a wallet
        • Set up the Concordium Wallet for Web
        • Set up the Concordium Wallet for Mobile
        • Set up the Concordium Legacy Wallet
        • Set up the Desktop Wallet
      • Wallet activities
        • Create an identity
        • Create an account
        • Export a private key
        • Backup and recovery
        • Update your passcode and biometric settings
        • Manage address book
        • Create a transaction report
      • Account activities
        • Send CCD
        • Find and share your account address
        • Connect dApps to wallets
        • Tokens in the wallet
        • Shield and unshield CCD on an account
        • Scheduled releases
      • Desktop Wallet
        • Transfer CCD with a schedule in Desktop Wallet
        • Apply a transaction log filter in the Desktop Wallet
        • Update the Desktop Wallet
        • Desktop Wallet navigation and settings
        • Reset desktop wallet data
        • Shared accounts with multiple credentials in Desktop Wallet
    • Staking with Concordium
      • Validators
        • Validator management
        • Add a validator
        • Change validator options
        • Run a validator node on Windows
        • Run a validator node on macOS
        • Run a validator node on Ubuntu
        • Run a validator node on Docker
        • Become a validator using the Concordium Client
      • Delegation
        • Delegate to a staking pool or passive delegation
        • Update delegation to a staking pool or passive delegation
        • Remove delegation to a staking pool or passive delegation
      • Delegation and validation FAQ
  • Develop on Concordium

    • Developer resources
      • SDKs and APIs
      • dApp examples
      • Dashboards and Status Pages
      • Auxiliary Tools
      • gRPC V2 documentation
    • Run a node on Concordium
      • Ubuntu nodes
        • Run a node on a server with Ubuntu on Mainnet
        • Run a node on a server with Ubuntu on Testnet
        • Troubleshoot a node on a server with Ubuntu
      • MacOS nodes
        • Run and manage a node on macOS
        • Troubleshoot a node on MacOS
      • Windows nodes
        • Run and manage a node on Windows
        • Concordium Windows node runner service configuration
        • Troubleshoot a node running on Windows
      • Docker nodes
        • Run a node with Docker
        • Troubleshoot a node on a server with Docker
    • Concordium Client
      • Concordium Client transactions
      • Querying a node
    • Run a local chain
    • Use Concordium's ID layer
      • Web3 ID in the Concordium Wallet for Web
      • Web3 ID issuers
      • Create proofs
      • Concordia
    • Concordium low-code NFT framework
      • Low code NFT marketplace
      • Low-code NFT minting tool
    • CCDScan
      • CCDScan Blocks overview
      • CCDScan Transactions overview
      • CCDScan Accounts overview
      • CCDScan Staking overview
      • CCDScan Nodes overview
    • Concordium Standards
  • Smart Contracts

    • V1 smart contract documentation
      • Introduction
        • Smart contract modules
        • Smart contract instances
        • Smart contract schemas
        • Developing smart contracts in Rust
      • Quick start guide
      • Best practices
        • Development best practices
      • Contract development guides
        • Install tools for development
        • Setting up a smart contract project
        • Compile a Rust smart contract module
        • Return custom errors
        • Locally simulate contract functions
        • Build a contract schema
        • Build using no_std
        • Fallback entrypoints
        • Make a contract upgradeable
        • Work with the JSON parameters
        • Migrate contracts for concordium-std 8.1
      • Contract testing guides
        • Integration test a contract in Rust
      • On-chain guides
        • Deploy a smart contract module
        • Initialize a smart contract instance
        • Interact with a smart contract instance
        • Inspect a smart contract instance
        • Invoke a smart contract instance
      • References
        • Cryptographic primitives
        • Contract host functions
        • Local settings
        • References on-chain
        • Schema JSON representation
        • Simulation contexts
        • Rust contract examples (repo)
        • concordium-std
      • Ethereum developer onboarding
      • Solana developer onboarding
        • FAQ
    • V0 smart contract documentation
      • Introduction and general guides
        • Smart contract modules
        • Smart contract instances
        • Smart contract schemas
        • Developing smart contracts in Rust
      • Tutorials
        • Writing the piggy bank smart contract
        • Testing the piggy bank smart contract
      • Contract development guides
        • Install tools for development
        • Setting up a smart contract project
        • Compile a Rust smart contract module
        • Unit test a contract in Rust
        • Return custom errors
        • Locally simulate contract functions
        • Build a contract schema
        • Build using no_std
      • On-chain guides
        • Deploy a smart contract module
        • Initialize a smart contract instance
        • Interact with a smart contract instance
        • Inspect a smart contract instance
      • References
        • Schema JSON representation
        • Simulation contexts
        • Contract host functions
        • References on-chain
        • Local settings
        • Rust contract examples (repo)
        • concordium-std
  • Tutorials

    • Smart contract tutorials
      • Setup the development environment
      • Counter
      • PiggyBank
        • Writing the piggy bank smart contract
        • Testing the piggy bank smart contract
        • Deploying the piggy bank smart contract
        • Setting up a front end
      • wCCD
        • Understanding the wCCD token protocol
        • Interacting with the wCCD token protocol
        • Setting up the front end
        • Running your first full dApp
      • The Voting dApp
        • Writing a voting smart contract
        • Setting up the front-end
      • Mint an NFT
        • Upload the NFT
        • Initialize, build, and deploy the smart contract
        • Mint and transfer the NFT
      • Mint a semi-fungible token
        • Setup the development environment
        • Smart contract modifications
        • Mint and transfer semi-fungible token
      • Mint fungible tokens
        • Smart contract implementation for fungible tokens
        • Mint, transfer, and burn fungible tokens
      • NFT marketplace smart contract tutorial
        • Build and deploy the smart contract
      • eSealing
        • Exploring the eSealing dapp
      • Sponsored Transactions
        • Exploring the sponsored Transactions Smart Contract
        • Exploring the sponsored Transactions dApp
        • Wallet Connect
      • Smart Contract Upgrade
        • Native upgradability
    • Using ID tutorial
      • Writing the verifying backend
      • Interacting with a wallet
      • Setting up the front end
On this page
  • Schemas
  • Explore your public key
  • Submit a sponsored updateOperator transaction
  • Submit a sponsored transfer transaction
Edit this page

Sponsored Transactions Front End and Back End#

The goal of this part of the tutorial is to set up the front end and the back end locally and to understand the two flows that the dApp provides.

You can explore the hosted sponsored transaction service. The sponsored transaction service consists of a front end and a back end. You can start your own service by following the instructions in the front end README.md file and then the instructions in the back end README.md file. Alternatively, follow the steps in the README.md file to deploy the Docker container. The docker container will set up the front end as well as the back end.

Note

Comprehensive instructions on how to set up the Concordium Wallet for Web, create an account in the Concordium Wallet for Web, get some testnet CCD and run a local front end can be found in wCCD frontend-set-up section.

The front end supports the following two flows with the Concordium Wallet for Web (or Concordium Wallet for Mobile that uses WalletConnect):

  • Create the message of a sponsored updateOperator transaction => Sign it with the wallet => Submit the signature to the /submitUpdateOperator back-end endpoint.

  • Mint an NFT to your wallet account => Create the message of a sponsored transfer transaction => Sign it with the wallet => Submit the signature to the /submitTransfer back-end endpoint.

The back end is a server that exposes two endpoints:

  • POST /submitUpdateOperator

  • POST /submitTransfer

After submitting the signature to the /submitUpdateOperator or the /submitTransfer endpoint, the back end creates a sponsored transaction and submits it on-chain to the permit function in the smart contract {index: SMART_CONTRACT_INDEX, subindex: 0}. The deployed smart contract code can be found here. After the transaction is sent to the blockchain node, the back end returns the transaction hash to the front end.

The back-end server has to have access to a blockchain node and an account (with its associated private key) that is funded with some CCD to submit the sponsored transaction to the chain. The back-end wallet will pay for the transaction fees on behalf of the user.

Schemas#

The front end uses several json schemas in the ./frontend/src/constants.ts file such as:

export const UPDATE_OPERATOR_SCHEMA = 'EAEUAAIAAAAGAAAAdXBkYXRlFQIAAAAGAAAAUmVtb3ZlAgMAAABBZGQCCAAAAG9wZXJhdG9yFQIAAAAHAAAAQWNjb3VudAEBAAAACwgAAABDb250cmFjdAEBAAAADA';

export const TRANSFER_SCHEMA = 'EAEUAAUAAAAIAAAAdG9rZW5faWQdAAYAAABhbW91bnQbJQAAAAQAAABmcm9tFQIAAAAHAAAAQWNjb3VudAEBAAAACwgAAABDb250cmFjdAEBAAAADAIAAAB0bxUCAAAABwAAAEFjY291bnQBAQAAAAsIAAAAQ29udHJhY3QBAgAAAAwWAQQAAABkYXRhEAEC';

export const SERIALIZATION_HELPER_SCHEMA = 'FAAFAAAAEAAAAGNvbnRyYWN0X2FkZHJlc3MMBQAAAG5vbmNlBQkAAAB0aW1lc3RhbXANCwAAAGVudHJ5X3BvaW50FgEHAAAAcGF5bG9hZBABAg==';

export const NONCE_OF_PARAMETER_SCHEMA = 'FAABAAAABwAAAHF1ZXJpZXMQARQAAQAAAAcAAABhY2NvdW50Cw==';

export const NONCE_OF_RETURN_VALUE_SCHEMA = 'FAEBAAAAEAEF';

export const MINT_PARAMETER_SCHEMA = 'FAABAAAABQAAAG93bmVyFQIAAAAHAAAAQWNjb3VudAEBAAAACwgAAABDb250cmFjdAEBAAAADA==';

These schemas can be generated in the smart contract folder with the command below.

cargo concordium build --schema-json-out ./

This command creates a file with the JSON schema of your smart contract in your current directory.

Explore your public key#

You can export your keys file from the Concordium Wallet for Web as follows:

../../../_images/pic1.png ../../../_images/pic2.png ../../../_images/pic3.png

In this exported file, you will find a verifyKey (your public key), which should be identical to the displayed public key at the front end. The front end also displays your next nonce associated with your account. This nonce is initially 0 and increases every time a successful sponsored transaction is recorded in the smart contract that was signed by your account.

Note

The nonce is used as a method of preventing replay attacks by ensuring that a signed message by your account can not be reused a second time.

Submit a sponsored updateOperator transaction#

Update operator gif

The GIF shows an example of input parameters that can be used to successfully execute a sponsored updateOperator transaction. The transaction should be successfully submitted by the back end to the blockchain which can be checked on the blockchain explorer by clicking the transaction hash displayed at the front end.

When exploring the code, you will realize that the input parameter to the permit function and the message that is signed in the wallet are rather complex. For example, the message for the sponsored updateOperator transaction is as follows:

const operatorAction = addOperator
   ? {
      Add: [],
   }
   : {
      Remove: [],
   };

const updateOperator = [
   {
      operator: {
         Account: [operator],
      },
      update: operatorAction,
   },
];

const payload = serializeTypeValue(updateOperator, toBuffer(UPDATE_OPERATOR_SCHEMA, 'base64'));

const message = {
   contract_address: {
      index: Number(process.env.SMART_CONTRACT_INDEX),
      subindex: 0,
   },
   nonce: Number(nonce),
   timestamp: expiryTimeSignature,
   entry_point: 'updateOperator',
   payload: Array.from(payload),
};

Because the schema is included in the smart contract, you can use the format returned by the below command to get a template for how to create the message and input parameters for the functions in the smart contract:

cargo concordium build --schema-template-out -

The above command will print the schema template to the console. The command has to be executed in the smart contract folder.

Submit a sponsored transfer transaction#

Transfer gif

The GIF shows an example of input parameters that can be used to successfully execute a sponsored transfer transaction. The transaction should be successfully submitted by the back end to the blockchain which can be checked on the blockchain explorer by clicking the transaction hash displayed at the front end. You can also check that your to account is now the owner of the token_id.

When exploring the code, you will realize that the input parameter to the permit function and the message that is signed in the wallet are rather complex. For example, the message for the sponsored transfer transaction is as follows:

const transfer = [
   {
      amount: '1',
      data: [],
      from: {
         Account: [from],
      },
      to: {
         Account: [to],
      },
      token_id: tokenID,
   },
];

const payload = serializeTypeValue(transfer, toBuffer(TRANSFER_SCHEMA, 'base64'));

const message = {
   contract_address: {
      index: Number(process.env.SMART_CONTRACT_INDEX),
      subindex: 0,
   },
   nonce: Number(nonce),
   timestamp: expiryTimeSignature,
   entry_point: 'transfer',
   payload: Array.from(payload),
};

Because the schema is included in the smart contract, you can use the format returned by the below command to get a template on how to create the message and input parameters for the functions in the smart contract:

cargo concordium build --schema-template-out -

The above command will print the schema template to the console. The command has to be executed in the smart contract folder.

Note

The NFT smart contract used in the hosted demo app is meant for exploring sponsored transactions. To ease this process, the mint function can be called by any account to mint a token. Token_ids are stored in the smart contract in little-endian order and a counter is used to increase the token_id by 1 every time the mint function is invoked. The wallet displays the token_id bytes in a hex string. In other words, the first token minted will have the token_id=01000000, the second token minted will have 02000000, …, 0f000000, 10000000, …, ff000000, 00010000, … . You can look up your minted token_id in the Concordium Wallet for Web by getting the smart contract index as seen below and searching for tokens in that contract that are owned by your account.

../../../_images/TokenId_1.png ../../../_images/TokenId_2.png ../../../_images/TokenId_3.png ../../../_images/TokenId_4.png ../../../_images/TokenId_5.png ../../../_images/TokenId_6.png ../../../_images/TokenId_7.png

Note

Every token_id would usually have its own metadata associated with it by e.g. appending the TOKEN_METADATA_URL with the token_id. But to simplify the metadata management for Concordium, the NFT smart contract used in the hosted demo app returns the same metadata hash (TOKEN_METADATA_URL) for all token_ids. The NFT picture in the below URL changes every time you access https://picsum.photos/40/40. Hence, the Concordium Wallet for Web depicts random new pictures for your minted NFT.

const TOKEN_METADATA_URL: &str = "https://gist.githubusercontent.com/abizjak/ab5b6fc0afb78acf23ee24d979eb7639/raw/7c03f174d628df1d2fd0dc8cffb319c89e770708/metadata.json";

previous

Sponsored Transactions Smart Contract

next

WalletConnect

Copyright 2021 - 2023, Concordium Software ApS Legal information

This website only aggregates and analyzes the actions you take here if you allow cookies. If you do not allow cookies, it protects your privacy, but also prevents the owner from learning from your actions and creating a better experience for you and other users.

Note that if you opt in and you clear your cookies, delete the opt-in cookie, or if you change computers or Web browsers, you will need to perform the opt-in procedure again.

Privacy policy