Merge branch 'kodadot:main' into main

.eslintrc.js

@@ -29,7 +29,7 @@ module.exports = {
     ],
     'no-useless-catch': 1,
     'no-var': 'error',
-    'linebreak-style': ['error', 'unix'],
+    'linebreak-style': 0,
     quotes: ['error', 'single'],
     semi: ['error', 'never'],
     'max-classes-per-file': ['error', 2],

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto eol=lf
+pnpm-lock.yaml linguist-generated

.github/CODEOWNERS

@@ -1 +1 @@
-*       @kodadot/code-review-guild
+*       @kodadot/code-review-guild @kodadot/qa-guild

.github/ISSUE_TEMPLATE/basilisk_bug.yml

@@ -0,0 +1,100 @@
+name: Basilisk Bug Report
+description: Create a report to help us improve KodaDot on Basilisk
+title: "Be descriptive and short"
+labels: ["🐍 - basilisk", "bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Tell us, what happened?
+      placeholder: Tell us what you seen!
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Please reproduce in steps
+      description: Tells us steps how to reproduce the bug behaviour
+      placeholder: Go to ... Click on .... See error
+    validations:
+      required: true
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected Behavior
+      description: A clear and concise description of what you expected to happen.
+      placeholder: I have expected ...
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Microsoft Edge
+        - Mobile Android Chrome
+        - Mobile iOS Safari
+        - Mobile Firefox
+  - type: dropdown
+    id: beta-yes-no
+    attributes:
+      label: At which address did you encounter bug?
+      multiple: true
+      options:
+        - beta.kodadot.xyz
+        - kodadot.xyz
+  - type: dropdown
+    id: logged-in
+    attributes:
+      label: Are you logged in?
+      multiple: false
+      options:
+        - "Yes"
+        - "No"
+  - type: dropdown
+    id: wallet-selector
+    attributes:
+      label: Which wallet you are using? 
+      multiple: true
+      options:
+        - PolkadotJS
+        - Talisman
+        - SubWallet
+  - type: textarea
+    id: Screenshots
+    attributes:
+      label: Screenshots
+      description: Screenshot/Video is worth more than debug logs!
+      placeholder: Paste from your clipboard or upload screenshots/video
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+
+  - type: textarea
+    id: rewardaddress
+    attributes:
+      label: Payment link for reward
+      description: Whenever you will be actively participating to get your bug fixed, helping elaborating and testing to get bug mitigated, you are eliglible for recieving reward. Read more how to share your address for reciving rewards https://github.com/kodadot/nft-gallery/blob/main/CONTRIBUTING.md#sharing-your-address-to-receive-reward 
+      value: "https://kodadot.xyz/transfer/?target=%3CMy_Kusama_Address_check_https://github.com/kodadot/nft-gallery/blob/main/CONTRIBUTING.md#creating-your-ksm-address%3E"
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our [Code of Conduct](https://example.com)
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true

.github/ISSUE_TEMPLATE/bug.yml

@@ -12,8 +12,8 @@ body:
     attributes:
       label: What happened?
       description: Tell us, what happened?
-      placeholder: Tell us what you seen!
-      value: "A bug happened!"
+      placeholder: Tell us what you've seen!
+
     validations:
       required: true
   - type: textarea
@@ -22,16 +22,14 @@ body:
       label: Please reproduce in steps
       description: Tells us steps how to reproduce the bug behaviour
       placeholder: Go to ... Click on .... See error
-      value: "Go to ... Click on .... See error"
     validations:
       required: true
   - type: textarea
     id: expected-behavior
     attributes:
       label: Expected Behavior
       description: A clear and concise description of what you expected to happen.
-      placeholder: Tell us what you want to see!
-      value: "I've expected ..."
+      placeholder: I've expected ...
     validations:
       required: true
   - type: dropdown
@@ -40,13 +38,21 @@ body:
       label: What browsers are you seeing the problem on?
       multiple: true
       options:
-        - Firefox
         - Chrome
+        - Firefox
         - Safari
         - Microsoft Edge
-        - Mobile iOS Safari
         - Mobile Android Chrome
+        - Mobile iOS Safari
         - Mobile Firefox
+  - type: dropdown
+    id: beta-yes-no
+    attributes:
+      label: At which address did you encounter bug?
+      multiple: true
+      options:
+        - beta.kodadot.xyz
+        - kodadot.xyz
   - type: dropdown
     id: logged-in
     attributes:
@@ -56,20 +62,29 @@ body:
         - "Yes"
         - "No"
   - type: dropdown
-    id: beta-yes-no
+    id: chain-selector
     attributes:
-      label: At which address did you encounter bug?
+      label: Which wallet you are using? 
       multiple: true
       options:
-        - beta.kodadot.xyz
-        - kodadot.xyz
+        - PolkadotJS
+        - Talisman
+        - SubWallet
+  - type: dropdown
+    id: wallet-selector
+    attributes:
+      label: At which chain did you encounter bug?
+      multiple: true
+      options:
+        - Basilisk
+        - MoonSama
+        - RMRK
   - type: textarea
     id: Screenshots
     attributes:
       label: Screenshots
       description: Screenshot/Video is worth more than debug logs!
       placeholder: Paste from your clipboard or upload screenshots/video
-      value: "Paste from your clipboard or upload screenshots/video"
     validations:
       required: true
   - type: textarea

.github/workflows/build.yml

@@ -1,11 +1,14 @@
 name: Lint, Build & Test workflow
 
 on:
+  workflow_dispatch:
+    push:
+      branches: [main]
   pull_request:
     branches: [main]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -35,8 +38,60 @@ jobs:
       - name: Run Code Lint
         run: pnpm lint:quiet
 
-      - name: Run Build
-        run: pnpm build
-
       - name: Run Test
         run: pnpm test
+
+      - name: Install cypress binary
+        run: npx cypress install
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
+        with:
+          project: ./tests
+          build: pnpm generate
+          start: pnpm start:static
+          wait-on: 'http://localhost:9090'
+          # wait for 2 minutes for the server to respond
+          wait-on-timeout: 150
+          command: pnpm test:e2e
+
+
+      - name: Upload Screenshots
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-website-screenshots
+          path: /tests/cypress/screenshots/
+
+  build:
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.2.1
+        with:
+          version: latest
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Run Build
+        run: pnpm generate

.gitignore

@@ -88,3 +88,6 @@ typings/
 
 ### its generated, this time is different
 ## service-worker.js
+
+# cypress
+/tests/cypress/screenshots/

.npmrc

@@ -1,2 +1,4 @@
 node-linker=hoisted
 engine-strict=true
+strict-peer-dependencies=false
+prefer-symlinked-executables=false

CONTRIBUTING.md

@@ -166,6 +166,30 @@ For content changes, make sure that you:
 - Check that all of your changes render correctly in staging. Remember that lists and tables can be tricky.
 - If there are any failing checks in your PR, troubleshoot them until they're all passing.
 
+### Keeping tests relevant🔬
+
+Since we're using [Cypress](https://www.cypress.io/) as our primary E2E tool for testing, we need to ensure that newly added features are not breaking tests we previously implemented. Tests run automatically as [GitHub action](https://github.com/features/actions) to catch bugs introduced by development. Still, it's essential to check whether the failing test broke something or whether the subject of the test changed.
+
+One of the main reasons tests will fail (except when bugs get introduced) is that we're using custom HTML tags to [select elements](https://docs.cypress.io/guides/references/best-practices#Selecting-Elements) within the testing suite. If your contribution touches components with these custom tags and you get failed tests, these selectors must be checked and usually adjusted.
+
+You can identify these kinds of problems by seeing similar-looking test reports:  
+`Expected to find element: [data-cy="submit"], but never found it.`
+
+TL;DR: If you're touching components which include HTML tags such as `data-cy="submit"`, and the tests fail, make sure the tests still use the correct selector.
+
+**Example:**
+```html
+<button
+  id="main"
+  class="btn btn-large"
+  name="submission"
+  role="button"
+  data-cy="submit"
+>
+  Submit
+</button>
+```
+
 ### Update strategy: always use `merge`
 
 Try to submit your PR as soon as possible. That's always an excellent way to avoid conflict with other commits.

FIRST_TIME.md

@@ -165,16 +165,17 @@ Then we can use it like this:
 
 ```html
 <script lang="ts">
-  import { Component, Vue } from 'nuxt-property-decorator'
-  import Connector from '@kodadot1/sub-api'
+  import { Component, mixins } from 'nuxt-property-decorator'
+  import { ApiFactory } from '@kodadot1/sub-api'
+  import ApiUrlMixin from '@/utils/mixins/apiUrlMixin'
 
   @Component({})
-  export default class GalleryItem extends Vue {
+  export default class GalleryItem extends mixins(ApiUrlMixin) {
     id = '0'
     collectionId = '0'
 
     async fetch() {
-      const { api } = Connector.getInstance()
+      const api = await ApiFactory.useApiInstance(this.apiUrl)
       const nft = await api.query.uniques.asset(this.collectionId, this.id)
       console.log('nft', nft)
     }
@@ -211,13 +212,12 @@ Then we can use it like this:
 <script lang="ts">
   import { Component, mixins } from 'nuxt-property-decorator'
   import MetaTransactionMixin from '@/utils/mixins/metaMixin'
-  // import AuthMixin from '~/utils/mixins/authMixin' // get currently logged in account
-
-  import Connector from '@kodadot1/sub-api'
+  import UseApiMixin from '@/utils/mixins/useApiMixin'
 
   @Component({})
-  export default class GalleryItem extends mixins(MetaTransactionMixin) {
+  export default class GalleryItem extends mixins(MetaTransactionMixin, UseApiMixin) {
     async submit() {
+      const api = await this.useApi()
       const cb = api.tx.system.remark
       const args = 'Hello World'
 

REWARDS.md

@@ -1,7 +1,7 @@
 ## Rewards
 
-To scale our development and operations, we prefer paid trials to know developers better and fit the team. More your PRs gets merged to `main` branch, **more-likely you'll be part of the inner team.**
-On-demand or part-time contributions are welcome, and **we will reward them in $KSM**
+To scale our development and operations, we prefer paid trials to know developers better and fit the team. The more your PRs gets merged to `main` branch,the  **more-likely you'll be part of the inner team.**
+On-demand or part-time contributions are welcome, and we will reward them in $KSM.
 
 KodaDot has started on [Kusama.network](https://kusama.network), and we prefer to pay out for your work in $KSM, which is the native cryptocurrency of Kusama network, [Polkadot's Canary network](https://polkadot.network) with bearing value.
 
@@ -31,6 +31,8 @@ Check `balances` under your _[accounts](https://polkadot.js.org/apps/#/accounts)
 
 Our typical payout structure for bounties is per label on the issue. Here is the table for an overview
 
+***The reward amount is in USD, paid in KSM***
+
 |                              $                               |                          $$                           |                                $$$                                |                              $$$$                               |                                         $$$$$                                          |
 | :----------------------------------------------------------: | :---------------------------------------------------: | :---------------------------------------------------------------: | :-------------------------------------------------------------: | :------------------------------------------------------------------------------------: |
 |                            50-100                            |                        150-300                        |                              450-600                              |                           700 - 1000                            |                                         1000+                                          |

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true)
+  const presets = ['@babel/preset-env']
+  const plugins = ['@babel/plugin-proposal-optional-chaining']
+  return { presets, plugins }
+}