Skip to content

Latest commit

 

History

History
128 lines (96 loc) · 9.02 KB

README.md

File metadata and controls

128 lines (96 loc) · 9.02 KB

Interaction with Concordium Smart Contracts

market-ui is a React based frontend DAPP. It interacts with the deployed on-chain cis2-market & cis2-multi contracts. To allow a user to

  • Buy a Token
  • Sell a Token
  • Mint a Token
  • Initialize a new instance of Marketplace Contract
  • Initialize a new instance of CIS2-Multi Contract

Setup

  • Install Concordium chrome extension wallet.
  • Create a new Concordium Account and get initial balance.
  • Install yarn
  • Install Dependencies 
    yarn install
  • Set Configuration Various following configuration params are explained and initialized with default values. Which can be used with Concordium Testnet.
    • MARKET_CONTRACT_ADDRESS : Default value for deployed and initialized market place contract address.
    • MARKET_CONTRACT_SCHEMA : HEX string of schema.bin file got from compilation of rust code of cis2-market
    • MARKETPLACE_CONTRACT_INFO.moduleRef : Module reference of deployed module with cis2-market.
    • MULTI_CONTRACT_MODULE_REF: Module reference of deployed module with CIS2-Multi contract
    • MULTI_CONTRACT_SCHEMA : HEX string of schema.bin file got from compilation of rust code of cis2-multi
    • IPFS_GATEWAY_URL: gateway url for the IPFS gateway

Deploy

Currently the browser wallet does not allow to deploy modules to Concordium chain. However node-cli and concordium client can be used to deploy contracts

Interact

  • Start the frontend 
    yarn start
    This should start the server and you should be able to view the frontend at http://localhost:3000. If default port is used.
  • The UI provides following pages
    • Buy : A list of all the tokens listed for sale on marketplace
    • Sell : UI to add an owned token to the marketplace to be sold
    • Mint : UI to interact with token contract and mint new tokens
    • Create Marketplace : UI to initialize a new instance of Marketplace contract and use its address instead of the default one.

Code Structure

There are two high level parts to the code base

  • React components that enable to user to use the rendered UI to interact with the clients to communicate with concordium chain.
  • Intermediatory layer that enables interaction between UI and concordium chain. This mainly comprises of
    • Clients
    • Deserializer(s)

React Components

  • Pages

    • Buy : Used to get a list of buyable tokens and buy any one of them. This page component contains the following reusable components to interact with on chain contracts.

    • Sell : Used to add a new token to the list of buyable tokens

      • Cis2FindInstance : Find a contract on chain using Index and Subindex and ensures it supports CIS2 standard.
      • Cis2OperatorOf : Checks if the Input Marketplace Contract Address is operatorOf input Account address in the Token Contract.
      • Cis2UpdateOperator : updateOperator is the above is not true.
      • Cis2BalanceOf : Checks if the seller has some balance of the input token id. Using balanceOf
      • MarketplaceAdd : Adds the input token to the marketplace.

    • Mint : Used to interact with CIS2 standard Contract to Mint a new Token

      • Cis2FindInstanceOrInit : Gives the user either the option to Find a CIS2 compliant instance Or Initialize a new one using config value MULTI_CONTRACT_MODULE_REF
      • ConnectPinata : Uses the input pinata JWT token to establish and verify connection with pinata to be able to later upload image files and metadata json to IPFS.
      • UploadFiles : Allows users to drop a group of files and upload them to pinata.
      • Cis2BatchMetadataPrepareOrAdd : Either use the uploaded files to prepare metadata JSON or use a metadataUrl of already uploaded Metadata Json file. Uses following components
      • Cis2BatchMint : Calls the mint function of the contract to mint the tokens for which metadata has been provided.

    • Add / Create Marketplace : Can be used to Initialize a new Instance of Marketplace Contract and use it in place of the default contract.

Chain Interaction

  • Clients

    • Cis2 Client Provides interface to interact with CIS2-NFT onchain contract. CIS2 client provides methods to call various functions exposed by cis2-multi contract and cis2 standard in general.

      • isOperator : calls operatorOf and returns wether the input contract address can operate on the input token.
      • ensureSupportsCis2: calls supports. and throws an error if the input contract does not support CIS2 standard.
      • balanceOf: calls balanceOf function to fetch the balance of token for input address.
      • getTokenMetadata: calls tokenMetadata function to get the Metadata Url for a particular token. The contents of the token metadata is defined to be in this format
      • updateOperator : calls updateOperator function to update the operator of a token.
      • mint : calls the mint function of the cis2 token contract. To add a new token to the contract state.
      • isValidTokenId : its a utility function that checks if the input token is a valid token id according to the TokenId type used in the CIS2 token contract. CIS2 standard defines a variety of numeric types which can be used as a token Id. Read more about them here

    • Marketplace Client Provides interface to interact with a on chain Marketplace Contract

      • list : calls list function of market place contract to fetch a list of buyable tokens.
      • add : calls add function and enables to add a new token to the marketplace contract. So that it can be fetched using list function.
      • transfer : calls transfer function of marketplace contract which allows anyone to buy a token at the listed price.

    • Concordium Contract Client Provides methods to interact with any on chain contract. Ex Init Contract, Invoke Contract & Update Contract.

  • Deserializer Deserializer(s) are needed to be able to convert byte array returned from the Contract back to JSON structure which the frontend can understand and display.

    • Cis2 Deserializer Used by Clients to be able to deserialize byte arrays to CIS2 types. Represented in code by Cis2 Types

    • Concordium Deserializer Used by clients to be able to deserialize bytes arrays to general Concordium Types like Account Address & Contract Address.

    • Buffer Stream Used by higher level Deserializer to deserialize generic types like numbers and strings from byte arrays. Its a wrapper over Buffer and keeps a counter of the bytes already read from the buffer.

    • Marketplace Deserializer Used by clients to Deserialize Market Place contract return types. Represented by the file MarketplaceTypes