Pull requests

https://github.com/onflow/flow-playground-api/pull/14

https://github.com/onflow/flow-playground/pull/177

Demo (screen recording)

https://youtu.be/PEB1A5GRAbA

From 1-1 account-contract mapping to 1-many account-contracts mapping

Contract struct is introduced for this. index refers to its Account index (i.e 0x01 is 0, etc).

type Contract {
  id: UUID!
  accountIndex: Int!
  title: String!
  code: String!
  deployedCode: String
}

index refers to the Account's index which the contract belongs to

Previous contract info inside the Account struct has been removed

• https://github.com/onflow/flow-playground/pull/177/commits/342242accc5482eafb85d122beeee20ddd91acf2 (flow-playground)
• https://github.com/soetop/flow-playground-api/commit/f95030b8355f115884019f6139e5b6433288fdc5 (flow-playground-api)

type Account {
  id: UUID!
  address: Address!
  ~~draftCode: String!
  deployedCode: String!~~
  deployedContracts: [String!]!
  state: String!
}

UI changes for multiple contracts

ContractList.tsx react component is created to display the account's contracts as tabs above the Cadence editor.

Alternatively, I was initially fiddling contract tabs as vertical list. Based on UX review, I can make necessary changes.