sfyr111 / zksync-dapp-checkout

zkCheckout — trustable permissionless DeFi payment gateway. Brand new zkSync dApp w/t all L2 perks: fast&cheap transfers / simple&quick withdrawal

zkSync Checkout dApp · zkSync.io

zkSync Checkout — trustable permissionless DeFi payment gateway

zkSync Checkout helps anyone permission-less adopt checkout backed by zkSync, receive payments automatically and benefit from all the advantage of zkSync Rollup: speed of the transaction, times lower cost of a single transaction, simplicity of withdrawal fund to the onchain-wallet.

• SDK documentation | Changelog

Deployment

zkSync uses firebase hosting for all it's dApps. Resource targets for the zkCheckout are:

Available Hosts

• prod-mainnet
• prod-goerli
• staging

Initial Setup / Static version generation

# install dependencies
$ sh cli-dev.sh ci

# Populate .env file as of goerli connection && serve with hot reload at localhost:3000
$ yarn dev

# static version generation
$ yarn ci:build:goerli
# afterward you'll have prepared distributive in /public folder

# generate static for the mainnet release
$ sh cli-dev.sh ci
$ yarn ci:build:mainnet
# afterward you'll have prepared distributive in /public folder

Dev toolset

cli-dev.sh

This helper-script is used to simplify regular tasks when developing or using the package:

# removes all generated directories & run package installation with the yarn2.* based on stored yarn.lock with the modifier --check-cache
$ sh cli-dev.sh ci

# drops node_modules, .yarn/cache .yarn/build-state.yml .yarn/install-state.gz & trigger cache flushing (yarn cache clean --all)
$ sh cli-dev.sh clean yarn

# drops .nuxt and clear public directory
$ sh cli-dev.sh clean nuxt

Linting & checking

# Run stylelint with --fix modifier
$ yarn run lint-style:fix

# Run eslint with --fix modifier
$ yarn run lint-ts:fix

# Formats all of the code w/t stored style rules by running prettier
$ yarn format:prettier

# Check spelling in src files
$ yarn spell-check

For detailed explanation on how things work, check out Nuxt.js docs.

---

Release CI

This sharable configuration conforms to angular standard

• Using @semantic-release/commit-analyzer ensures that commits are conformed to the conventional commits specification.
  • PATCH version created if any of build, ci, chore, docs, refactor, style, test commit types pushed to master
  • MINOR version created if fix commit type pushed MAJOR version created if feat commit type pushed
  • MAJOR version created if feat commit type pushed
• By default, config used publishes the new version to NPM. But in zkSync's case release flow differs from the deployment flow.
  • Bumps a version in package.json.
  • Generates or updates a changelog file including all PATCH keywords (not included in default angular package).
  • Releases new release for the GitHub repo

Solutions used

• Nuxt.js

• TS Lang

• Vue.js

• Vuex

• nuxt/Tailwind

• nuxt-build-optimisations

• Nuxt TypeScript

  • inc. @nuxt/typescript-build
  • inc. @nuxt/typescript-runtime
  • w/t built-in linting typescript-runtime-linting
  • store is build on top of Vanilla Vuex

• Axios Nuxtjs

• Nuxt social meta

• Sentry

• Nuxt Webfontloader

  ...and others.

Libraries used

• zkSync Checkout lib: our open sourced NPM-package
• zkSync.js lib: our open sourced NPM-package
• zkCheckout link builder: UI to create unique permissionless payment link and get paid in tokens
• SDK description: details on how to use zkCheckout SDK
• ethers.js lib: a simple to use Web3 Provider Bridge as a single JavaScript file