Skip to content

Song meta #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 25 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b085c74
setup tailwind and mui
beigiz Jul 9, 2022
adac72e
Setup ui libraries
beigiz Aug 3, 2022
5be9911
Add mark-up to category page
beigiz Aug 5, 2022
7642327
feat: update contracts
DeMonkeyCoder Aug 8, 2022
80e2fdc
feat: add npmrc for fontawesome license
DeMonkeyCoder Aug 8, 2022
6da0a39
feat: add boilerplate code for showing songs in a category
DeMonkeyCoder Aug 10, 2022
3e2c683
feat: load data even when wallet is not connected
DeMonkeyCoder Aug 10, 2022
3bdf7c8
feat: add react router
DeMonkeyCoder Aug 11, 2022
b14d8d6
refactor: setup cypress
DeMonkeyCoder Aug 11, 2022
7f8c305
fix: getCustomizedBridge params
DeMonkeyCoder Aug 11, 2022
64f66ad
feat: circleci
DeMonkeyCoder Aug 11, 2022
dfa6b1d
fix: linter
DeMonkeyCoder Aug 11, 2022
cec7cbf
test: add category e2e test
DeMonkeyCoder Aug 12, 2022
208926a
refactor: mock contracts for e2e test
DeMonkeyCoder Aug 12, 2022
738cd45
refactor: abi handler in e2e tests
DeMonkeyCoder Aug 12, 2022
b5ffcf3
refactor: no console warn and error in e2e
DeMonkeyCoder Aug 12, 2022
2af71c0
feat: add montserrat font
beigiz Aug 18, 2022
2a93286
refactor: change font to titilum web
beigiz Aug 18, 2022
4662bc5
feat: add song-card style
beigiz Aug 18, 2022
2dd68fb
docs: add todo comments in category.tsx
beigiz Aug 18, 2022
5b1cdb1
feat: add large button style
beigiz Aug 18, 2022
27cdc76
feat: set song-list and aside grid
beigiz Aug 18, 2022
bd822f9
feat: add song meta data
DeMonkeyCoder Aug 19, 2022
8f29cc7
feat: load song meta from url
DeMonkeyCoder Aug 20, 2022
b8ec169
test: load song meta from url
DeMonkeyCoder Aug 20, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -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
9 changes: 8 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
cypress/downloads/
cypress/screenshots/

.idea

/src/types/contracts
Expand Down
2 changes: 2 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=6326A007-3153-4B54-BFF5-8604C0BFF663
11 changes: 11 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { defineConfig } from 'cypress'

export default defineConfig({
e2e: {
baseUrl: 'http://localhost:3000',
video: false,
defaultCommandTimeout: 10000,
viewportWidth: 1366,
viewportHeight: 768,
},
})
12 changes: 12 additions & 0 deletions cypress/e2e/01-wallet.cy.ts
Original file line number Diff line number Diff line change
@@ -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);
});
});
41 changes: 41 additions & 0 deletions cypress/e2e/category.cy.ts
Original file line number Diff line number Diff line change
@@ -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');
});
});
5 changes: 5 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]",
"body": "Fixtures are a great way to mock data for responses to routes"
}
56 changes: 56 additions & 0 deletions cypress/support/commands.js
Original file line number Diff line number Diff line change
@@ -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);
});
37 changes: 37 additions & 0 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -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>
// }
// }
// }
20 changes: 20 additions & 0 deletions cypress/support/e2e.ts
Original file line number Diff line number Diff line change
@@ -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')
24 changes: 24 additions & 0 deletions cypress/support/index.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
19 changes: 19 additions & 0 deletions cypress/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"compilerOptions": {
"esModuleInterop": true,
"resolveJsonModule": true,
"strict": true,
"baseUrl": "../node_modules",
"target": "es5",
"lib": [
"es5",
"dom"
],
"types": [
"cypress"
],
},
"include": [
"**/*.ts"
]
}
61 changes: 61 additions & 0 deletions cypress/utils/data.ts
Original file line number Diff line number Diff line change
@@ -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',
};
27 changes: 27 additions & 0 deletions cypress/utils/ethbridge/AbiHandler.ts
Original file line number Diff line number Diff line change
@@ -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());
}
}
Loading