[Report] Phoenix Zero - Vehicle History and Service Tracker (Jan 6→ 31, 2022)

Project title: Vehicle History and Service Tracker

One-liner: Development of app that allows a user to add vehicles and vehicle services to the blockChain

Project Summary: Project consists of two repos, a smart contract that uses near-sdk-core, where a user can add vehicles and vehicles services to the blockchain. The second repo is a front-end repo the uses Vue.js and near-api-js to render the state of the contract on a browser.

Developer in Residence:
discord: phoenixpulsar | A Macedo#8225

Period:
Jan 6→ 31, 2022

Summary of work done (40hrs)


Next Steps (from proposal)

  • Allow a user to log-in in the FE (nearWallet)
  • Allow a logged in user to create a contract to hold his/hers Vehicles and Vehicles Services
  • Allow a user to sell a vehicle to another user using NEAR coin
  • Add more css/style/flare
  • Investigate limits of RPC how to index or store if state grows above 50kb of state size
  • Document steps & create blog post english/spanish
  • Start next project smart forms

Detailed outline of main achievements/‘aha’ moments/ divided in 10hr blocks

Block 1 (10hrs)

  • Updated reviewed and created a new repo from NCD1 for smart contract
  • Use near-account utils to verify methods of smart contract
  • Debug error: Can not sign transactions for account dev-XXXX on network
    • Error caused by not having env variable OWNER to sign transaction
  • Created a couple a Vue apps to explore near-api-js
  • Debug developer tools for Vue
    • Vue developer tools need Beta for Vue 3 to work (different tools than Vue 2)
  • Spike: Very informative video on RPC endpoints
    • https://www.youtube.com/watch?v=T8rH8dxGRKg

Block 2 (10hrs)

  • Debug how to decode values from state near-api-js
    • To decoded it in Vue/JS I am using: atob(val)
    • Tools/linting warn this is deprecated, tried alternative suggested in error Buffer.from(val, "base64"); but did not work as atob() returned array Uint8Array instead of the value
  • Minor debugging using SCSS with Vue CLI 4
    • https://cli.vuejs.org/guide/css.html#pre-processors
  • Created a new Vue repo but picked dart-sass which did not seem to require loader from above

Block 3 (10hrs)

  • Added CSS to create UI, added double scroll(scroll through vehicles, flip card and scroll through services)
  • Wrangle data from RPC APIs, separated into data structures needed for UI to consume
  • Added code to use Vuex as state management to share state data across whole app

Block 4 (10hrs)

  • Created new clean repo for Front-End with clean git history
  • Created a new clean repo for Smart-Contract
  • Debug error: Server error: account dev-xxxxx does not exist while viewing
    • Deploying the front-end was creating a production build that was calling a contract on mainnet instead of testnet
  • Created a Netlily account to deploy FE
  • Hooked Netlify account with Github
1 Like