Song meta

.circleci/config.yml

@@ -0,0 +1,28 @@
+version: 2.1
+executors:
+  cypress-14-19-0:
+    docker:
+      - image: "cypress/base:14.19.0"
+orbs:
+  cypress: cypress-io/cypress@1
+workflows:
+  build:
+    jobs:
+      # first get the source code and install npm dependencies
+      - cypress/install:
+          executor: cypress-14-19-0
+          # run a custom app build step
+          install-command: 'yarn install --frozen-lockfile'
+          build: 'yarn build'
+      - cypress/run:
+          # make sure app has been installed and built
+          # before running tests across multiple machines
+          # this avoids installing same dependencies 10 times
+          executor: cypress-14-19-0
+          requires:
+            - cypress/install
+          record: false # record results on Cypress Dashboard
+          parallel: true # split all specs across machines
+          parallelism: 4 # use 4 CircleCI machines to finish quickly
+          group: 'all tests' # name this group "all tests" on the dashboard
+          start: 'yarn start' # start server before running tests

.eslintrc.json

@@ -5,5 +5,12 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "prettier"
-  ]
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/ban-types": "off",
+    "jsx-a11y/anchor-is-valid": "off"
+  }
 }

.gitignore

@@ -1,3 +1,6 @@
+cypress/downloads/
+cypress/screenshots/
+
 .idea
 
 /src/types/contracts

.npmrc

@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=6326A007-3153-4B54-BFF5-8604C0BFF663

cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    video: false,
+    defaultCommandTimeout: 10000,
+    viewportWidth: 1366,
+    viewportHeight: 768,
+  },
+})

cypress/e2e/01-wallet.cy.ts

@@ -0,0 +1,12 @@
+import { TEST_ADDRESS_NEVER_USE_SHORTENED } from '../utils/data';
+
+describe('Wallet', () => {
+  beforeEach(() => {
+    cy.setupWeb3Bridge();
+  });
+
+  it('eager connects wallet', () => {
+    cy.visit('/');
+    cy.get('[data-testid=wallet-connect]').contains(TEST_ADDRESS_NEVER_USE_SHORTENED);
+  });
+});

cypress/e2e/category.cy.ts

@@ -0,0 +1,41 @@
+import RoutePath, { getRoute, RouteParam } from '../../src/routes';
+import { ArenaHandler } from '../utils/ethbridge/abihandlers/Arena';
+import { SupportedChainId } from '../../src/constants/chains';
+import { ARENA_ADDRESS, MULTICALL2_ADDRESS } from '../../src/constants/addresses';
+import { BaseMulticallHandler } from '../utils/ethbridge/abihandlers/Multicall';
+import { IPFS_SERVER_URL, songMeta } from '../utils/data';
+
+describe('Category', () => {
+  it('loads songs', () => {
+    cy.intercept(
+      {
+        url: `${IPFS_SERVER_URL}**`,
+      },
+      {
+        statusCode: 404,
+      },
+    );
+    cy.intercept(
+      {
+        url: `${IPFS_SERVER_URL}/choice/2.json`,
+      },
+      {
+        body: songMeta,
+      },
+    );
+    const topicId = 0;
+    cy.setupWeb3Bridge();
+    cy.setAbiHandler(ARENA_ADDRESS[SupportedChainId.GOERLI], new ArenaHandler());
+    cy.setAbiHandler(MULTICALL2_ADDRESS[SupportedChainId.GOERLI], new BaseMulticallHandler());
+
+    cy.visit(
+      getRoute(RoutePath.CATEGORY, {
+        [RouteParam.CATEGORY_ID]: String(topicId),
+      }),
+    );
+    cy.get('[data-testid=category-list-item-0]').should('exist');
+    cy.get('[data-testid=category-list-item-1]').should('exist');
+    cy.get('[data-testid=category-list-item-0-meta]').should('not.exist');
+    cy.get('[data-testid=category-list-item-1-meta]').should('exist');
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,56 @@
+// ***********************************************
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+/* eslint-disable no-undef */
+
+import { getCustomizedBridge } from '../utils/ethbridge/CustomizedBridge';
+
+Cypress.Commands.add('shouldBeCalled', (alias, timesCalled) => {
+  expect(
+    cy.state('requests').filter((call) => call.alias === alias),
+    `${alias} should have been called ${timesCalled} times`,
+  ).to.have.length(timesCalled);
+});
+
+// https://github.com/cypress-io/cypress/issues/2752#issuecomment-1039285381
+Cypress.on('window:before:load', (win) => {
+  let copyText;
+
+  if (!win.navigator.clipboard) {
+    win.navigator.clipboard = {
+      __proto__: {},
+    };
+  }
+
+  win.navigator.clipboard.__proto__.writeText = (text) => (copyText = text);
+  win.navigator.clipboard.__proto__.readText = () => copyText;
+});
+
+Cypress.Commands.add('setupWeb3Bridge', () => {
+  const web3Bridge = getCustomizedBridge()
+  cy.wrap(web3Bridge).as('web3Bridge')
+  cy.on('window:before:load', (win) => {
+    win.ethereum = web3Bridge;
+  });
+});
+
+Cypress.Commands.add('setAbiHandler', (address, abiHandler) => {
+  cy.get('@web3Bridge').then(web3Bridge => {
+    web3Bridge.setHandler(address, abiHandler)
+  });
+});
+
+beforeEach(() => {
+  cy.on('window:before:load', (win) => {
+    cy.spy(win.console, 'error').as('spyWinConsoleError');
+    cy.spy(win.console, 'warn').as('spyWinConsoleWarn');
+  });
+});
+
+afterEach(() => {
+  cy.get('@spyWinConsoleError').should('have.callCount', 0);
+  cy.get('@spyWinConsoleWarn').should('have.callCount', 0);
+});

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/support/index.ts

@@ -0,0 +1,24 @@
+// ***********************************************************
+// This file is processed and loaded automatically before your test files.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';
+import { AbiHandler } from '../utils/ethbridge/AbiHandler';
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to select DOM element by data-cy attribute.
+       * @example cy.dataCy('greeting')
+       */
+      setupWeb3Bridge(): void;
+
+      setAbiHandler(address: string, handler: AbiHandler): void;
+    }
+  }
+}

cypress/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "baseUrl": "../node_modules",
+    "target": "es5",
+    "lib": [
+      "es5",
+      "dom"
+    ],
+    "types": [
+      "cypress"
+    ],
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

cypress/utils/data.ts

@@ -0,0 +1,61 @@
+import { shortenAddress } from '../../src/utils';
+import { Wallet } from '@ethersproject/wallet';
+import { ChoiceStruct, TopicStruct } from '../../src/types/contracts/Arena';
+import { SongMeta } from '../../src/types';
+
+export const TEST_PRIVATE_KEY = '0xe580410d7c37d26c6ad1a837bbae46bc27f9066a466fb3a66e770523b4666d19';
+// address of the above key
+export const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address;
+export const TEST_ADDRESS_NEVER_USE_SHORTENED = shortenAddress(TEST_ADDRESS_NEVER_USE);
+
+export const SAMPLE_ERROR_MESSAGE = 'An error occurred';
+
+export const IPFS_SERVER_URL = 'https://some.ipfs.server';
+
+export const topics: {
+  [topicId: number]: TopicStruct;
+} = {
+  0: {
+    cycleDuration: 2,
+    startBlock: 0,
+    sharePerCyclePercentage: 10000,
+    prevContributorsFeePercentage: 1200,
+    topicFeePercentage: 500,
+    maxChoiceFeePercentage: 2500,
+    relativeSupportThreshold: 0,
+    fundingPeriod: 0,
+    fundingPercentage: 0,
+    funds: '0x211eEBa0ebe516744614C35572555BdFDD13424d',
+    metaDataUrl: IPFS_SERVER_URL + '/topic/topic1.json',
+  },
+};
+
+export const choices: {
+  [topicId: number]: {
+    [choiceId: number]: ChoiceStruct;
+  };
+} = {
+  0: {
+    ...Object.assign({}, [
+      ...[1, 2, 3, 4, 5, 6].map((i) => ({
+        description: i + ' Song',
+        funds: '0x211eEBa0ebe516744614C35572555BdFDD13424d',
+        feePercentage: 1000,
+        fundingTarget: '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
+        metaDataUrl: IPFS_SERVER_URL + `/choice/${i}.json`,
+      })),
+    ]),
+  },
+};
+
+export const songMeta: SongMeta = {
+  thumbnail: 'https://bafybeicp7kjqwzzyfuryefv2l5q23exl3dbd6rgmuqzxs3cy6vaa2iekka.ipfs.w3s.link/sample.png',
+  title: 'Dark Days and Beautiful',
+  tags: [
+    { subject: 'Mood', title: 'Confused' },
+    { subject: 'Genre', title: 'Folk' },
+  ],
+  by: 'jonathan.eth',
+  date: 'June 9, 2022',
+  opensea: 'somelink',
+};

cypress/utils/ethbridge/AbiHandler.ts

@@ -0,0 +1,27 @@
+import { decodeEthCall, encodeEthResult } from './abiutils';
+import { CustomizedBridgeContext } from './CustomizedBridge';
+
+export class AbiHandler {
+  abi = {};
+
+  methods: { [name: string]: (...args: any[]) => any } = {};
+
+  async handleCall(context: CustomizedBridgeContext, data: string, setResult?: (arg0: string) => void) {
+    const decoded = decodeEthCall(this.abi, data);
+    if (decoded.method === 'multicall') {
+      const [deadline, [data]] = decoded.inputs;
+      await this.handleCall(context, data, setResult);
+      return;
+    }
+    const method = this.methods[decoded.method];
+    if (method) {
+      const res = await method(context, decoded.inputs);
+      setResult?.(encodeEthResult(this.abi, decoded.method, res));
+    }
+  }
+
+  async handleTransaction(context: CustomizedBridgeContext, data: string, setResult: (arg0: string) => void) {
+    await this.handleCall(context, data);
+    setResult(context.getFakeTransactionHash());
+  }
+}