diff --git a/.do/deploy.template.yaml b/.do/deploy.template.yaml index 50328da8d8..5941d94b29 100644 --- a/.do/deploy.template.yaml +++ b/.do/deploy.template.yaml @@ -1,25 +1,25 @@ spec: alerts: - - rule: DEPLOYMENT_FAILED - - rule: DOMAIN_FAILED + - rule: DEPLOYMENT_FAILED + - rule: DOMAIN_FAILED name: frontend-v2 services: - - envs: - - key: INFURA_PROJECT_ID - scope: RUN_AND_BUILD_TIME - - key: ALCHEMY_KEY - scope: RUN_AND_BUILD_TIME - - key: BLOCKNATIVE_DAPP_ID - scope: RUN_AND_BUILD_TIME - http_port: 80 - image: - registry_type: DOCKER_HUB - registry: balancerfi - repository: frontend-v2 - tag: latest - instance_count: 1 - instance_size_slug: basic-xxs - name: frontend-v2 - routes: - - path: / - source_dir: / \ No newline at end of file + - envs: + - key: INFURA_PROJECT_ID + scope: RUN_AND_BUILD_TIME + - key: ALCHEMY_KEY + scope: RUN_AND_BUILD_TIME + - key: BLOCKNATIVE_DAPP_ID + scope: RUN_AND_BUILD_TIME + http_port: 80 + image: + registry_type: DOCKER_HUB + registry: balancerfi + repository: frontend-v2 + tag: latest + instance_count: 1 + instance_size_slug: basic-xxs + name: frontend-v2 + routes: + - path: / + source_dir: / diff --git a/.eslintrc.js b/.eslintrc.js index f18cdaa1a7..c708185b6f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,7 +2,7 @@ module.exports = { root: true, env: { - node: true + node: true, }, globals: { @@ -10,23 +10,21 @@ module.exports = { withDefaults: true, defineProps: true, defineEmits: true, - defineExpose: true + defineExpose: true, }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', - '@vue/prettier', - '@vue/prettier/@typescript-eslint', - '@vue/typescript' + '@vue/typescript', ], plugins: ['simple-import-sort'], parserOptions: { ecmaVersion: 2020, - parser: '@typescript-eslint/parser' + parser: '@typescript-eslint/parser', }, rules: { @@ -41,18 +39,18 @@ module.exports = { '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/ban-ts-comment': 'off', 'simple-import-sort/imports': 'warn', - 'simple-import-sort/exports': 'warn' + 'simple-import-sort/exports': 'warn', }, overrides: [ { files: [ '**/__tests__/*.{j,t}s?(x)', - '**/tests/unit/**/*.spec.{j,t}s?(x)' + '**/tests/unit/**/*.spec.{j,t}s?(x)', ], env: { - jest: true - } - } - ] + jest: true, + }, + }, + ], }; diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md index 87600d5ce1..a6d9507fe1 100644 --- a/.github/CODE_OF_CONDUCT.md +++ b/.github/CODE_OF_CONDUCT.md @@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 88fa5c83b8..c83bbcf8b1 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -2,30 +2,30 @@ You should usually open an issue in the following situations: -* Report an error you can’t solve yourself -* Discuss a high-level topic or idea (for example, community, vision or policies) -* Propose a new feature or other project idea +- Report an error you can’t solve yourself +- Discuss a high-level topic or idea (for example, community, vision or policies) +- Propose a new feature or other project idea Tips for communicating on issues: -* **If you see an open issue that you want to tackle,** comment on the issue to let people know you’re on it. That way, people are less likely to duplicate your work. -* **If an issue was opened a while ago,** it’s possible that it’s being addressed somewhere else, or has already been resolved, so comment to ask for confirmation before starting work. -* **If you opened an issue, but figured out the answer later on your own,** comment on the issue to let people know, then close the issue. Even documenting that outcome is a contribution to the project. +- **If you see an open issue that you want to tackle,** comment on the issue to let people know you’re on it. That way, people are less likely to duplicate your work. +- **If an issue was opened a while ago,** it’s possible that it’s being addressed somewhere else, or has already been resolved, so comment to ask for confirmation before starting work. +- **If you opened an issue, but figured out the answer later on your own,** comment on the issue to let people know, then close the issue. Even documenting that outcome is a contribution to the project. ### Opening a pull request You should usually open a pull request in the following situations: -* Submit trivial fixes (for example, a typo, a broken link or an obvious error) -* Start work on a contribution that was already asked for, or that you’ve already discussed, in an issue +- Submit trivial fixes (for example, a typo, a broken link or an obvious error) +- Start work on a contribution that was already asked for, or that you’ve already discussed, in an issue A pull request doesn’t have to represent finished work. It’s usually better to open a pull request early on, so others can watch or give feedback on your progress. Just mark it as a “WIP” (Work in Progress) in the subject line. You can always add more commits later. If the project is on GitHub, here’s how to submit a pull request: -* **Fork the repository** and clone it locally. Connect your local to the original repository by adding it as a remote. Pull in changes from this repository often so that you stay up to date so that when you submit your pull request, merge conflicts will be less likely. -* **Create a branch** for your edits. -* **Reference any relevant issues** or supporting documentation in your PR (for example, “Closes #37.”) -* **Include screenshots of the before and after** if your changes include differences in HTML/CSS. Drag and drop the images into the body of your pull request. -* **Test your changes!** Run your changes against any existing tests if they exist and create new ones when needed. Whether tests exist or not, make sure your changes don’t break the existing project. -* **Contribute in the style of the project** to the best of your abilities. This may mean using indents, semi-colons or comments differently than you would in your own repository, but makes it easier for the maintainer to merge, others to understand and maintain in the future. +- **Fork the repository** and clone it locally. Connect your local to the original repository by adding it as a remote. Pull in changes from this repository often so that you stay up to date so that when you submit your pull request, merge conflicts will be less likely. +- **Create a branch** for your edits. +- **Reference any relevant issues** or supporting documentation in your PR (for example, “Closes #37.”) +- **Include screenshots of the before and after** if your changes include differences in HTML/CSS. Drag and drop the images into the body of your pull request. +- **Test your changes!** Run your changes against any existing tests if they exist and create new ones when needed. Whether tests exist or not, make sure your changes don’t break the existing project. +- **Contribute in the style of the project** to the best of your abilities. This may mean using indents, semi-colons or comments differently than you would in your own repository, but makes it easier for the maintainer to merge, others to understand and maintain in the future. diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea7824..b5c68e55be 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,7 +4,6 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md index 48d5f81fa4..96a47352ab 100644 --- a/.github/ISSUE_TEMPLATE/custom.md +++ b/.github/ISSUE_TEMPLATE/custom.md @@ -4,7 +4,4 @@ about: Describe this issue template's purpose here. title: '' labels: '' assignees: '' - --- - - diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7d61..2f28cead03 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,7 +4,6 @@ about: Suggest an idea for this project title: '' labels: '' assignees: '' - --- **Is your feature request related to a problem? Please describe.** diff --git a/.github/workflows/cache.yml b/.github/workflows/cache.yml index 6b5d0f5dd2..dd4228b09b 100644 --- a/.github/workflows/cache.yml +++ b/.github/workflows/cache.yml @@ -18,9 +18,9 @@ jobs: runs-on: ubuntu-latest needs: wait-for-vercel-deployment steps: - - name: Purge cache - uses: jakejarvis/cloudflare-purge-action@master - env: - # Zone is required by both authentication methods - CLOUDFLARE_ZONE: ${{ secrets.CLOUDFLARE_ZONE }} - CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }} \ No newline at end of file + - name: Purge cache + uses: jakejarvis/cloudflare-purge-action@master + env: + # Zone is required by both authentication methods + CLOUDFLARE_ZONE: ${{ secrets.CLOUDFLARE_ZONE }} + CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }} diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 795c1b9f80..71df6b2e3c 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -11,68 +11,70 @@ jobs: Version: runs-on: ubuntu-latest steps: - - name: Checkout repo - uses: actions/checkout@v2 - - name: Use Node.js - uses: actions/setup-node@v1 - with: - node-version: '14.x' - - name: Get package.json version - run: echo PACKAGE_VERSION=$(node -p -e "require('./package.json').version") >> $GITHUB_ENV - - name: Get package-lock.json version - run: echo PACKAGE_LOCK_VERSION=$(node -p -e "require('./package-lock.json').version") >> $GITHUB_ENV - - name: Check lockfile sync - if: env.PACKAGE_VERSION != env.PACKAGE_LOCK_VERSION - run: | - echo "package-lock.json out of sync" - exit 1 - - name: Check if version has been updated - id: check - uses: EndBug/version-check@v2 - with: - diff-search: true - - name: Log when changed - if: steps.check.outputs.changed == 'true' - run: 'echo "Version change found in commit ${{ steps.check.outputs.commit }}! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"' - - name: Fail if version not updated and PR base is master - if: steps.check.outputs.changed == 'false' && github.event.pull_request.base.ref == 'master' - run: exit 1 + - name: Checkout repo + uses: actions/checkout@v2 + - name: Use Node.js + uses: actions/setup-node@v1 + with: + node-version: '14.x' + - name: Get package.json version + run: echo PACKAGE_VERSION=$(node -p -e "require('./package.json').version") >> $GITHUB_ENV + - name: Get package-lock.json version + run: echo PACKAGE_LOCK_VERSION=$(node -p -e "require('./package-lock.json').version") >> $GITHUB_ENV + - name: Check lockfile sync + if: env.PACKAGE_VERSION != env.PACKAGE_LOCK_VERSION + run: | + echo "package-lock.json out of sync" + exit 1 + - name: Check if version has been updated + id: check + uses: EndBug/version-check@v2 + with: + diff-search: true + - name: Log when changed + if: steps.check.outputs.changed == 'true' + run: 'echo "Version change found in commit ${{ steps.check.outputs.commit }}! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"' + - name: Fail if version not updated and PR base is master + if: steps.check.outputs.changed == 'false' && github.event.pull_request.base.ref == 'master' + run: exit 1 Build: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - name: Use Node.js - uses: actions/setup-node@v1 - with: - node-version: '14.x' - - name: Install deps - run: npm install -g npm@7 && npm ci - - name: Run build - run: npm run build + - uses: actions/checkout@v2 + - name: Use Node.js + uses: actions/setup-node@v1 + with: + node-version: '14.x' + - name: Install deps + run: npm install -g npm@7 && npm ci + - name: Run build + run: npm run build Lint: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - name: Use Node.js - uses: actions/setup-node@v1 - with: - node-version: '14.x' - - name: Install deps - run: npm install -g npm@7 && npm ci - - name: Run lint - run: npm run lint - + - uses: actions/checkout@v2 + - name: Use Node.js + uses: actions/setup-node@v1 + with: + node-version: '14.x' + - name: Install deps + run: npm install -g npm@7 && npm ci + - name: Run lint + run: npm run lint + - name: Run prettier + run: npm run prettier + Test: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - name: Use Node.js - uses: actions/setup-node@v1 - with: - node-version: '14.x' - - name: Install deps - run: npm install -g npm@7 && npm ci - - name: Run tests - run: npm run test:unit + - uses: actions/checkout@v2 + - name: Use Node.js + uses: actions/setup-node@v1 + with: + node-version: '14.x' + - name: Install deps + run: npm install -g npm@7 && npm ci + - name: Run tests + run: npm run test:unit diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml index 40e6e533fb..49d6b6c6b5 100644 --- a/.github/workflows/docker.yml +++ b/.github/workflows/docker.yml @@ -12,21 +12,21 @@ jobs: steps: - name: Check out the repo uses: actions/checkout@v2 - + - name: Log in to Docker Hub uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9 with: username: ${{ secrets.DOCKER_USERNAME }} password: ${{ secrets.DOCKER_PASSWORD }} - + - name: get-npm-version id: package-version uses: martinbeentjes/npm-get-version-action@v1.1.0 - + - name: Build and push Docker image uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc with: context: . file: 'Dockerfile' push: true - tags: balancerfi/frontend-v2:latest,balancerfi/frontend-v2:${{ steps.package-version.outputs.current-version}} \ No newline at end of file + tags: balancerfi/frontend-v2:latest,balancerfi/frontend-v2:${{ steps.package-version.outputs.current-version}} diff --git a/.husky/pre-commit b/.husky/pre-commit index 6d395b884f..e95257bd62 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,5 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" +npm run prettier:fix npm run lint:fix diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..c0f64a8361 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +dist/ +build/ diff --git a/.prettierrc.js b/.prettierrc.js index 7d93e18086..dd8e1aa20c 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,3 +1,4 @@ module.exports = { - singleQuote: true + singleQuote: true, + arrowParens: 'avoid', }; diff --git a/.storybook/helpers/templates.ts b/.storybook/helpers/templates.ts index 05d40e74e3..b71a4d2aef 100644 --- a/.storybook/helpers/templates.ts +++ b/.storybook/helpers/templates.ts @@ -4,5 +4,5 @@ export function generateTemplate(story: string): string {
${story}
-` +`; } diff --git a/.storybook/main.js b/.storybook/main.js index 61ff63914b..7f8369b40d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,10 +1,4 @@ module.exports = { - "stories": [ - "../src/**/*.stories.mdx", - "../src/**/*.stories.@(js|jsx|ts|tsx)" - ], - "addons": [ - "@storybook/addon-links", - "@storybook/addon-essentials" - ] -} + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], +}; diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js index e6d2304dca..a05ac2165d 100644 --- a/.storybook/postcss.config.js +++ b/.storybook/postcss.config.js @@ -2,6 +2,6 @@ module.exports = { plugins: [ require('tailwindcss')('../tailwind.config.js'), require('postcss-nesting'), - require('autoprefixer') - ] + require('autoprefixer'), + ], }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 8cc0b046fc..e519d58ce9 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,17 +1,17 @@ import '../src/assets/css/tailwind.css'; import '../src/assets/css/index.css'; -import resolveConfig from 'tailwindcss/resolveConfig' -import tailwindConfig from '../tailwind.config' +import resolveConfig from 'tailwindcss/resolveConfig'; +import tailwindConfig from '../tailwind.config'; import '@storybook/addon-console'; -const fullConfig = resolveConfig(tailwindConfig) +const fullConfig = resolveConfig(tailwindConfig); export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, + actions: { argTypesRegex: '^on[A-Z].*' }, backgrounds: { values: [ { name: 'light', value: fullConfig.theme.colors.gray['50'] }, { name: 'dark', value: fullConfig.theme.colors.gray['900'] }, ], }, -} +}; diff --git a/README.md b/README.md index 3765cd772d..1e06a65ea4 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,25 @@ # Balancer Frontend App (v2) + Frontend Vue app for Balancer exchange and pool management. ## Development + To setup the development environment first clone the repo: + ```bash git clone https://github.com/balancer-labs/frontend-v2.git && cd frontend-v2 ``` ### Local env + Install dependencies: + ```bash npm install ``` Start the app: + ```bash npm run serve ``` @@ -21,6 +27,7 @@ npm run serve The app should be live at [http://localhost:8080](http://localhost:8080) ### Docker + If you'd rather spin up the app in a docker container, first install dependencies to you local folder: ```bash @@ -39,14 +46,16 @@ The app should be live at [http://localhost:8080](http://localhost:8080) If you are on Apple Silicon, try this: ```bash -export DOCKER_DEFAULT_PLATFORM=linux/amd64 +export DOCKER_DEFAULT_PLATFORM=linux/amd64 ``` source: https://stackoverflow.com/questions/65612411/forcing-docker-to-use-linux-amd64-platform-by-default-on-macos ### Change app network + To change your local development app network, update the network key for `VUE_APP_NETWORK` in `.env.development`. Available networks: + ``` 1 - Mainnet 5 - Goerli @@ -69,7 +78,7 @@ You can also specify your Portis Dapp ID if you wish to use that service, otherw Here's an example of how to run the container. This can also be found in [scripts/run-docker.sh](./scripts/run-docker.sh). ```bash -docker run \ +docker run \ -e INFURA_PROJECT_ID= \ # Required -e ALCHEMY_KEY= \ # Required -e BLOCKNATIVE_DAPP_ID= \ # Required @@ -84,9 +93,11 @@ Click the button below to deploy the frontend Docker image to a new instance in [![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/balancer-labs/frontend-v2/tree/UI-769-one-click-deploy-to-digital-ocean) ## Design System + The app is using [Tailwind](https://tailwindcss.com/) to configure base styles. In development these styles can be viewed by running: ```bash npm run tailwind-viewer ``` + Your browser should load the app at [http://localhost:3000](http://localhost:3000). diff --git a/babel.config.js b/babel.config.js index 2a46eace4c..4f168c80ae 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,4 @@ module.exports = { presets: ['@vue/cli-plugin-babel/preset'], - plugins: ['@babel/plugin-proposal-numeric-separator'] + plugins: ['@babel/plugin-proposal-numeric-separator'], }; diff --git a/docker-compose.yml b/docker-compose.yml index 195d548231..3aeceaab10 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,5 +1,5 @@ -version: "3.7" - +version: '3.7' + services: web: build: @@ -7,7 +7,7 @@ services: dockerfile: Dockerfile.dev restart: always command: npm run serve - volumes: + volumes: - ./:/app ports: - 8080:8080 @@ -19,7 +19,7 @@ services: # dockerfile: Dockerfile.dev # restart: always # command: npm run storybook - # volumes: + # volumes: # - ./:/app # - /app/node_modules # ports: diff --git a/jest.config.js b/jest.config.js index 9c8201b967..2b16d57e97 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,8 +2,8 @@ module.exports = { preset: 'ts-jest', globals: { 'ts-jest': { - isolatedModules: true - } + isolatedModules: true, + }, }, projects: [ { @@ -13,7 +13,7 @@ module.exports = { displayName: 'dom', testEnvironment: 'jsdom', testMatch: null, - testRegex: '(\\.|/)(test|spec)\\.[jt]sx?$' + testRegex: '(\\.|/)(test|spec)\\.[jt]sx?$', }, { preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', @@ -22,7 +22,7 @@ module.exports = { displayName: 'node', testEnvironment: 'node', testMatch: null, - testRegex: '(\\.|/)(test|spec.node)\\.[jt]sx?$' - } - ] + testRegex: '(\\.|/)(test|spec.node)\\.[jt]sx?$', + }, + ], }; diff --git a/package-lock.json b/package-lock.json index bf98427a8a..9dd0eeb78a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,7 +53,6 @@ "@vue/cli-plugin-vuex": "^4.4.0", "@vue/cli-service": "^4.4.0", "@vue/compiler-sfc": "3.2.6", - "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^7.0.0", "@vue/test-utils": "^2.0.0-alpha.1", "@vue/vue3-jest": "^27.0.0-alpha.4", @@ -70,7 +69,6 @@ "date-fns": "^2.21.1", "echarts": "^5.3.2", "eslint": "^6.7.2", - "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-vue": "^7.16.0", "ethereumjs-util": "^7.0.7", @@ -86,7 +84,7 @@ "paraswap": "^4.18.0", "parse-filepath": "1.0.2", "postcss": "^8.2.13", - "prettier": "^1.19.1", + "prettier": "^2.7.1", "promise-worker": "^2.0.1", "tailwind-config-viewer": "^1.5.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17", @@ -7412,20 +7410,6 @@ "integrity": "sha512-21u2jFOk8jbAneeGpDwZQ0W66RJa0IBDUyVl6SgKnn2cRFjLWzKj+ukXjpLhYr1KASyCe5E5U4jXwChVo0YUAw==", "dev": true }, - "node_modules/@vue/eslint-config-prettier": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz", - "integrity": "sha512-wFQmv45c3ige5EA+ngijq40YpVcIkAy0Lihupnsnd1Dao5CBbPyfCzqtejFLZX1EwH/kCJdpz3t6s+5wd3+KxQ==", - "dev": true, - "dependencies": { - "eslint-config-prettier": "^6.0.0" - }, - "peerDependencies": { - "eslint": ">= 5.0.0", - "eslint-plugin-prettier": "^3.1.0", - "prettier": ">= 1.13.0" - } - }, "node_modules/@vue/eslint-config-typescript": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz", @@ -13693,21 +13677,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/eslint-config-prettier": { - "version": "6.15.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz", - "integrity": "sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==", - "dev": true, - "dependencies": { - "get-stdin": "^6.0.0" - }, - "bin": { - "eslint-config-prettier-check": "bin/cli.js" - }, - "peerDependencies": { - "eslint": ">=3.14.1" - } - }, "node_modules/eslint-loader": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.2.1.tgz", @@ -13726,27 +13695,6 @@ "webpack": ">=2.0.0 <5.0.0" } }, - "node_modules/eslint-plugin-prettier": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", - "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==", - "dev": true, - "dependencies": { - "prettier-linter-helpers": "^1.0.0" - }, - "engines": { - "node": ">=6.0.0" - }, - "peerDependencies": { - "eslint": ">=5.0.0", - "prettier": ">=1.13.0" - }, - "peerDependenciesMeta": { - "eslint-config-prettier": { - "optional": true - } - } - }, "node_modules/eslint-plugin-simple-import-sort": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz", @@ -15580,12 +15528,6 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, - "node_modules/fast-diff": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", - "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", - "dev": true - }, "node_modules/fast-glob": { "version": "3.2.7", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz", @@ -16598,15 +16540,6 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, - "node_modules/get-stdin": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", - "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/get-stream": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", @@ -27301,27 +27234,18 @@ } }, "node_modules/prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", + "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==", "dev": true, "bin": { "prettier": "bin-prettier.js" }, "engines": { - "node": ">=4" - } - }, - "node_modules/prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "dependencies": { - "fast-diff": "^1.1.2" + "node": ">=10.13.0" }, - "engines": { - "node": ">=6.0.0" + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" } }, "node_modules/pretty": { @@ -41049,15 +40973,6 @@ "integrity": "sha512-21u2jFOk8jbAneeGpDwZQ0W66RJa0IBDUyVl6SgKnn2cRFjLWzKj+ukXjpLhYr1KASyCe5E5U4jXwChVo0YUAw==", "dev": true }, - "@vue/eslint-config-prettier": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz", - "integrity": "sha512-wFQmv45c3ige5EA+ngijq40YpVcIkAy0Lihupnsnd1Dao5CBbPyfCzqtejFLZX1EwH/kCJdpz3t6s+5wd3+KxQ==", - "dev": true, - "requires": { - "eslint-config-prettier": "^6.0.0" - } - }, "@vue/eslint-config-typescript": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz", @@ -46272,15 +46187,6 @@ } } }, - "eslint-config-prettier": { - "version": "6.15.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz", - "integrity": "sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==", - "dev": true, - "requires": { - "get-stdin": "^6.0.0" - } - }, "eslint-loader": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.2.1.tgz", @@ -46294,15 +46200,6 @@ "rimraf": "^2.6.1" } }, - "eslint-plugin-prettier": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", - "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==", - "dev": true, - "requires": { - "prettier-linter-helpers": "^1.0.0" - } - }, "eslint-plugin-simple-import-sort": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz", @@ -47702,12 +47599,6 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, - "fast-diff": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", - "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", - "dev": true - }, "fast-glob": { "version": "3.2.7", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz", @@ -48535,12 +48426,6 @@ } } }, - "get-stdin": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", - "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", - "dev": true - }, "get-stream": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", @@ -56945,20 +56830,11 @@ "dev": true }, "prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz", + "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==", "dev": true }, - "prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "requires": { - "fast-diff": "^1.1.2" - } - }, "pretty": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz", diff --git a/package.json b/package.json index bc72dc2115..da5a1a525b 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "import-abis": "cp ../core/deployments/artifacts/dockerParity/*.json ./src/utils/balancer/abi/.", "import-config": "tsc ./scripts/update-config.ts && node ./scripts/update-config.ts", "lint:fix": "vue-cli-service lint", + "prettier": "prettier --check .", + "prettier:fix": "prettier --write . --loglevel warn", "prepare": "node ./prepare.js", "tailwind:build": "tailwind-config-viewer export ./tailwind-static", "tailwind:view": "tailwind-config-viewer -o", @@ -64,7 +66,6 @@ "@vue/cli-plugin-vuex": "^4.4.0", "@vue/cli-service": "^4.4.0", "@vue/compiler-sfc": "3.2.6", - "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^7.0.0", "@vue/test-utils": "^2.0.0-alpha.1", "@vue/vue3-jest": "^27.0.0-alpha.4", @@ -81,7 +82,6 @@ "date-fns": "^2.21.1", "echarts": "^5.3.2", "eslint": "^6.7.2", - "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-vue": "^7.16.0", "ethereumjs-util": "^7.0.7", @@ -97,7 +97,7 @@ "paraswap": "^4.18.0", "parse-filepath": "1.0.2", "postcss": "^8.2.13", - "prettier": "^1.19.1", + "prettier": "^2.7.1", "promise-worker": "^2.0.1", "tailwind-config-viewer": "^1.5.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17", diff --git a/postcss.config.js b/postcss.config.js index 52a8bf067a..3ea9307f40 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,3 +1,3 @@ module.exports = { - plugins: [require('tailwindcss'), require('autoprefixer')] + plugins: [require('tailwindcss'), require('autoprefixer')], }; diff --git a/public/data/vebal-gauge.json b/public/data/vebal-gauge.json index 3f539d32a0..211d9ef2c6 100644 --- a/public/data/vebal-gauge.json +++ b/public/data/vebal-gauge.json @@ -40,4 +40,3 @@ } } ] - diff --git a/public/data/voting-gauges.json b/public/data/voting-gauges.json index 2d4c6cb208..9157d56935 100644 --- a/public/data/voting-gauges.json +++ b/public/data/voting-gauges.json @@ -2577,4 +2577,4 @@ "0xdFCeA9088c8A88A76FF74892C1457C17dfeef9C1": "" } } -] \ No newline at end of file +] diff --git a/public/index.html b/public/index.html index 2213f1e0c6..9cd2248d11 100644 --- a/public/index.html +++ b/public/index.html @@ -1,44 +1,75 @@ - - - - + + + + Balancer - - + + - - - - - + + + + + - - - - - + + + + + - + - +
diff --git a/public/manifest.json b/public/manifest.json index 9d6a69d797..ad0ac3b1c9 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -18,4 +18,4 @@ "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" -} \ No newline at end of file +} diff --git a/scripts/update-config.ts b/scripts/update-config.ts index 61b9b5a0fa..91e7596c3c 100644 --- a/scripts/update-config.ts +++ b/scripts/update-config.ts @@ -5,30 +5,45 @@ const network = process.argv[2] || 'docker-parity'; const networkCamelcase = process.argv[2] || 'dockerParity'; function contractAddress(contractName) { - const contractArtifactPath = path.resolve(__dirname,'../../core/deployments/artifacts/' + networkCamelcase + '/' + contractName + '.json') + const contractArtifactPath = path.resolve( + __dirname, + '../../core/deployments/artifacts/' + + networkCamelcase + + '/' + + contractName + + '.json' + ); const file = fs.readFileSync(contractArtifactPath, 'utf8'); - const json = JSON.parse(file) - return json.address + const json = JSON.parse(file); + return json.address; } function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } -const jsonConfigFilePath = path.resolve(__dirname, '../src/lib/utils/balancer/configs/' + network + '.json') +const jsonConfigFilePath = path.resolve( + __dirname, + '../src/lib/utils/balancer/configs/' + network + '.json' +); let doc = JSON.parse(fs.readFileSync(jsonConfigFilePath, 'utf8')); Object.entries(doc).forEach(([contractName, address]) => { try { - let address = contractAddress(capitalizeFirstLetter(contractName)) - doc[contractName] = address + let address = contractAddress(capitalizeFirstLetter(contractName)); + doc[contractName] = address; } catch (err) { - const msg = 'Cannot find ' + network + ' contract artifacts for ' + contractName + ' - missing deployment artifacts?' - console.log(msg) + const msg = + 'Cannot find ' + + network + + ' contract artifacts for ' + + contractName + + ' - missing deployment artifacts?'; + console.log(msg); } -}) +}); -fs.writeFile(jsonConfigFilePath, JSON.stringify(doc, null, 2), (err) => { +fs.writeFile(jsonConfigFilePath, JSON.stringify(doc, null, 2), err => { if (err) { console.log(err); } diff --git a/src/App.vue b/src/App.vue index b7570612e0..8394250586 100644 --- a/src/App.vue +++ b/src/App.vue @@ -37,7 +37,7 @@ export default defineComponent({ ThirdPartyServicesModal, Notifications, AppSidebar, - GlobalModalContainer + GlobalModalContainer, }, setup() { @@ -57,7 +57,7 @@ export default defineComponent({ const { isWalletSelectVisible, toggleWalletSelectModal, - isSanctioned + isSanctioned, // isMainnet } = useWeb3(); const route = useRoute(); @@ -109,9 +109,9 @@ export default defineComponent({ sidebarOpen, // methods toggleWalletSelectModal, - handleThirdPartyModalToggle + handleThirdPartyModalToggle, }; - } + }, }); diff --git a/src/Root.ts b/src/Root.ts index aa109efd00..96b48e29a0 100644 --- a/src/Root.ts +++ b/src/Root.ts @@ -8,7 +8,7 @@ const providers = Object.values(providerMap); export default defineComponent({ components: { App, - ...providerMap + ...providerMap, }, render() { @@ -22,11 +22,11 @@ export default defineComponent({ { default() { return [renderProviders(remainingProviders)]; - } + }, } ); } return renderProviders(providers); - } + }, }); diff --git a/src/__mocks__/pool.ts b/src/__mocks__/pool.ts index 8f0330a54a..9a627f5177 100644 --- a/src/__mocks__/pool.ts +++ b/src/__mocks__/pool.ts @@ -10,7 +10,7 @@ export const PoolMock: Pool = { symbol: 'GRO', name: 'Gro DAO Token', logoURI: - 'https://raw.githubusercontent.com/balancer-labs/assets/master/assets/0x3ec8798b81485a254928b70cda1cf0a2bb0b74d7.png' + 'https://raw.githubusercontent.com/balancer-labs/assets/master/assets/0x3ec8798b81485a254928b70cda1cf0a2bb0b74d7.png', }, '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2': { decimals: 18, @@ -19,14 +19,14 @@ export const PoolMock: Pool = { symbol: 'WETH', name: 'Wrapped Ether', logoURI: - 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png' - } + 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png', + }, }, amp: '0', swapEnabled: true, totalSupply: '150501.891977546028526082', decimals: 18, - swapFee: '0.0037' + swapFee: '0.0037', }, address: '0x702605F43471183158938C1a3e5f5A359d7b31ba', createTime: 1633385013, @@ -40,21 +40,21 @@ export const PoolMock: Pool = { address: '0x3Ec8798B81485A254928B70CDA1cf0A2BB0B74D7', balance: '408784.606604112667634055', priceRate: '1', - weight: '0.8' + weight: '0.8', }, { address: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', balance: '95.094102533755196937', priceRate: '1', - weight: '0.2' - } + weight: '0.2', + }, ], tokensList: [ '0x3Ec8798B81485A254928B70CDA1cf0A2BB0B74D7', - '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2' + '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2', ], totalLiquidity: '1203724.083931267693503729', totalShares: '150501.891977546028526082', totalSwapFee: '165820.9454823753843641664971705477', - totalSwapVolume: '52262349.4122392298543195893618041' + totalSwapVolume: '52262349.4122392298543195893618041', }; diff --git a/src/__mocks__/transactions.ts b/src/__mocks__/transactions.ts index 7f7c031678..8ec5b606e7 100644 --- a/src/__mocks__/transactions.ts +++ b/src/__mocks__/transactions.ts @@ -9,31 +9,30 @@ export const txResponseMock = { from: '0xBeE21365A462b8df12CFE9ab7C40f1BB5f5ED495', gasPrice: { type: 'BigNumber', - hex: '0x83eb3da3' + hex: '0x83eb3da3', }, maxPriorityFeePerGas: { type: 'BigNumber', - hex: '0x83eb3d99' + hex: '0x83eb3d99', }, maxFeePerGas: { type: 'BigNumber', - hex: '0x83eb3da3' + hex: '0x83eb3da3', }, gasLimit: { type: 'BigNumber', - hex: '0x04521e' + hex: '0x04521e', }, to: '0x762F8ba904f16382A230b2A0284dc5f202821ce1', value: { type: 'BigNumber', - hex: '0x00' + hex: '0x00', }, nonce: 1121, - data: - '0x6a6278420000000000000000000000005be3bbb5d7497138b9e623506d8b6c6cd72daceb', + data: '0x6a6278420000000000000000000000005be3bbb5d7497138b9e623506d8b6c6cd72daceb', r: '0x0296dba6eed4cb5ecf5833dc5e3a509e6468bf9b97f77255515d3983285a6f46', s: '0x2e61237d44ed52d2f943678c781ff73d3430d40386262af154df62aa25f76e3b', v: 1, creates: null, - chainId: 0 + chainId: 0, }; diff --git a/src/__mocks__/vue-i18n.ts b/src/__mocks__/vue-i18n.ts index 0120c748fe..6754d5193d 100644 --- a/src/__mocks__/vue-i18n.ts +++ b/src/__mocks__/vue-i18n.ts @@ -1,6 +1,6 @@ export function useI18n() { return { - t: jest.fn().mockImplementation() + t: jest.fn().mockImplementation(), }; } diff --git a/src/__mocks__/vuex.ts b/src/__mocks__/vuex.ts index 827c3eb9c1..c577eab4f4 100644 --- a/src/__mocks__/vuex.ts +++ b/src/__mocks__/vuex.ts @@ -1,6 +1,6 @@ export function useStore() { const store = { - commit: jest.fn().mockImplementation() + commit: jest.fn().mockImplementation(), }; return store; } diff --git a/src/assets/css/animations/fireworks.css b/src/assets/css/animations/fireworks.css index ff89bc0a56..8009709eb7 100644 --- a/src/assets/css/animations/fireworks.css +++ b/src/assets/css/animations/fireworks.css @@ -1,10 +1,37 @@ -.fireworks > .before, .fireworks > .after { +.fireworks > .before, +.fireworks > .after { position: absolute; width: 5px; height: 5px; border-radius: 50%; - box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c; - animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; + box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, + 190px 16.33333px #002bff, -113px -308.66667px #ff009d, + -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, + 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, + -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, + -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, + 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, + -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, + -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, + 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, + -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, + -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, + 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, + 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, + 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, + -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, + -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, + 91px -278.66667px #000dff, -22px -191.66667px #9dff00, + 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, + -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, + -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, + 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, + 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, + 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, + 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, + 100px -6.66667px #ff008c; + animation: 1s bang ease-out infinite backwards, + 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; } .fireworks > .after { @@ -14,136 +41,251 @@ @-webkit-keyframes bang { from { - box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } } + box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white; + } +} @-moz-keyframes bang { from { - box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } } + box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white; + } +} @-o-keyframes bang { from { - box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } } + box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white; + } +} @-ms-keyframes bang { from { - box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } } + box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white; + } +} @keyframes bang { from { - box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } } + box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, + 0 0 white, 0 0 white, 0 0 white; + } +} @-webkit-keyframes gravity { to { transform: translateY(200px); - opacity: 0; } } + opacity: 0; + } +} @-moz-keyframes gravity { to { transform: translateY(200px); - opacity: 0; } } + opacity: 0; + } +} @-o-keyframes gravity { to { transform: translateY(200px); - opacity: 0; } } + opacity: 0; + } +} @-ms-keyframes gravity { to { transform: translateY(200px); - opacity: 0; } } + opacity: 0; + } +} @keyframes gravity { to { transform: translateY(200px); - opacity: 0; } } + opacity: 0; + } +} @-webkit-keyframes position { - 0%, 19.9% { + 0%, + 19.9% { margin-top: 10%; - margin-left: 40%; } + margin-left: 40%; + } - 20%, 39.9% { + 20%, + 39.9% { margin-top: 40%; - margin-left: 30%; } + margin-left: 30%; + } - 40%, 59.9% { + 40%, + 59.9% { margin-top: 20%; - margin-left: 70%; } + margin-left: 70%; + } - 60%, 79.9% { + 60%, + 79.9% { margin-top: 30%; - margin-left: 20%; } + margin-left: 20%; + } - 80%, 99.9% { + 80%, + 99.9% { margin-top: 30%; - margin-left: 80%; } } + margin-left: 80%; + } +} @-moz-keyframes position { - 0%, 19.9% { + 0%, + 19.9% { margin-top: 10%; - margin-left: 40%; } + margin-left: 40%; + } - 20%, 39.9% { + 20%, + 39.9% { margin-top: 40%; - margin-left: 30%; } + margin-left: 30%; + } - 40%, 59.9% { + 40%, + 59.9% { margin-top: 20%; - margin-left: 70%; } + margin-left: 70%; + } - 60%, 79.9% { + 60%, + 79.9% { margin-top: 30%; - margin-left: 20%; } + margin-left: 20%; + } - 80%, 99.9% { + 80%, + 99.9% { margin-top: 30%; - margin-left: 80%; } } + margin-left: 80%; + } +} @-o-keyframes position { - 0%, 19.9% { + 0%, + 19.9% { margin-top: 10%; - margin-left: 40%; } + margin-left: 40%; + } - 20%, 39.9% { + 20%, + 39.9% { margin-top: 40%; - margin-left: 30%; } + margin-left: 30%; + } - 40%, 59.9% { + 40%, + 59.9% { margin-top: 20%; - margin-left: 70%; } + margin-left: 70%; + } - 60%, 79.9% { + 60%, + 79.9% { margin-top: 30%; - margin-left: 20%; } + margin-left: 20%; + } - 80%, 99.9% { + 80%, + 99.9% { margin-top: 30%; - margin-left: 80%; } } + margin-left: 80%; + } +} @-ms-keyframes position { - 0%, 19.9% { + 0%, + 19.9% { margin-top: 10%; - margin-left: 40%; } + margin-left: 40%; + } - 20%, 39.9% { + 20%, + 39.9% { margin-top: 40%; - margin-left: 30%; } + margin-left: 30%; + } - 40%, 59.9% { + 40%, + 59.9% { margin-top: 20%; - margin-left: 70%; } + margin-left: 70%; + } - 60%, 79.9% { + 60%, + 79.9% { margin-top: 30%; - margin-left: 20%; } + margin-left: 20%; + } - 80%, 99.9% { + 80%, + 99.9% { margin-top: 30%; - margin-left: 80%; } } + margin-left: 80%; + } +} @keyframes position { - 0%, 19.9% { + 0%, + 19.9% { margin-top: 10%; - margin-left: 40%; } + margin-left: 40%; + } - 20%, 39.9% { + 20%, + 39.9% { margin-top: 40%; - margin-left: 30%; } + margin-left: 30%; + } - 40%, 59.9% { + 40%, + 59.9% { margin-top: 20%; - margin-left: 70%; } + margin-left: 70%; + } - 60%, 79.9% { + 60%, + 79.9% { margin-top: 30%; - margin-left: 20%; } + margin-left: 20%; + } - 80%, 99.9% { + 80%, + 99.9% { margin-top: 30%; - margin-left: 80%; } } + margin-left: 80%; + } +} diff --git a/src/assets/css/global/all.css b/src/assets/css/global/all.css index 736b8a9ecc..2b7732dc36 100644 --- a/src/assets/css/global/all.css +++ b/src/assets/css/global/all.css @@ -1,9 +1,9 @@ -@import "./fonts.css"; -@import "./typography.css"; -@import "./backgrounds.css"; -@import "./animations.css"; -@import "./social-icons.css"; -@import "./nprogress.css"; +@import './fonts.css'; +@import './typography.css'; +@import './backgrounds.css'; +@import './animations.css'; +@import './social-icons.css'; +@import './nprogress.css'; html, body { @@ -44,8 +44,8 @@ input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } -input[type=number] { - -moz-appearance:textfield; /* Firefox */ +input[type='number'] { + -moz-appearance: textfield; /* Firefox */ } *::-webkit-scrollbar { diff --git a/src/assets/css/global/animations.css b/src/assets/css/global/animations.css index 6d94fa5683..021e36b4ce 100644 --- a/src/assets/css/global/animations.css +++ b/src/assets/css/global/animations.css @@ -1,4 +1,4 @@ -@import "../animations/fireworks.css"; +@import '../animations/fireworks.css'; .icon-spin-anim .feather-settings { @apply transition-all duration-200 ease-out; @@ -14,10 +14,10 @@ @keyframes fadeIn { 0% { - opacity: 0; + opacity: 0; } 100% { - opacity: 1; + opacity: 1; } } @@ -35,23 +35,23 @@ @keyframes fadeInMoveUp { 0% { - opacity: 0; - transform: translateY(5px); + opacity: 0; + transform: translateY(5px); } 100% { - opacity: 1; - transform: translateY(0px); + opacity: 1; + transform: translateY(0px); } } @keyframes fadeInMoveDown { 0% { - opacity: 0; - transform: translateY(-5px); + opacity: 0; + transform: translateY(-5px); } 100% { - opacity: 1; - transform: translateY(0px); + opacity: 1; + transform: translateY(0px); } } @@ -68,12 +68,12 @@ @keyframes fadeInMoveUpScaleUp { 0% { - opacity: 0; - transform: scale(0.96) translateY(-10px); + opacity: 0; + transform: scale(0.96) translateY(-10px); } 100% { - opacity: 1; - transform: scale(1) translateY(0px); + opacity: 1; + transform: scale(1) translateY(0px); } } diff --git a/src/assets/css/global/fonts.css b/src/assets/css/global/fonts.css index c74148a9ed..1d84b461a0 100644 --- a/src/assets/css/global/fonts.css +++ b/src/assets/css/global/fonts.css @@ -6,10 +6,10 @@ } @font-face { - font-family: "Tiempos Headline Medium"; - src: url("../../fonts/tiemposDispMed.woff2") format("woff2"), - url("../../fonts/tiemposDispMed.woff") format("woff"), format("opentype"), - url("../../fonts/tiemposDispMed.ttf") format("truetype"); + font-family: 'Tiempos Headline Medium'; + src: url('../../fonts/tiemposDispMed.woff2') format('woff2'), + url('../../fonts/tiemposDispMed.woff') format('woff'), format('opentype'), + url('../../fonts/tiemposDispMed.ttf') format('truetype'); font-style: normal; font-weight: 400; -} \ No newline at end of file +} diff --git a/src/assets/css/global/nprogress.css b/src/assets/css/global/nprogress.css index ed1bfe7e34..bac608d049 100644 --- a/src/assets/css/global/nprogress.css +++ b/src/assets/css/global/nprogress.css @@ -1,4 +1,3 @@ - @import '~nprogress/nprogress.css'; /* nprogress overrides */ @@ -6,14 +5,12 @@ @apply bg-blue-800 dark:bg-blue-500; } - #nprogress .peg { - box-shadow: 0 0 10px theme('colors.blue.500'), 0 0 5px theme('colors.blue.500'); + box-shadow: 0 0 10px theme('colors.blue.500'), + 0 0 5px theme('colors.blue.500'); } #nprogress .spinner-icon { border-top-color: theme('colors.blue.500'); border-left-color: theme('colors.blue.500'); - } - diff --git a/src/assets/css/global/social-icons.css b/src/assets/css/global/social-icons.css index ee229b915c..206ef38d3b 100644 --- a/src/assets/css/global/social-icons.css +++ b/src/assets/css/global/social-icons.css @@ -1,22 +1,22 @@ .social-icon:hover .logo { - fill: #fff; /* gray-900 */ - transform-origin: center; - transform: scale(1.05); + fill: #fff; /* gray-900 */ + transform-origin: center; + transform: scale(1.05); } .social-icon .bg { - fill: #0f172a; /* gray-900 */ - @apply transition-all; -} + fill: #0f172a; /* gray-900 */ + @apply transition-all; +} .social-icon .logo { - fill: #fff; - @apply transition-all; + fill: #fff; + @apply transition-all; } .dark .social-icon:hover .logo { - fill: #fff; + fill: #fff; } .dark .social-icon .bg { - fill: #fff; -} + fill: #fff; +} .dark .social-icon .logo { - fill: #0f172a; /* gray-900 */ + fill: #0f172a; /* gray-900 */ } diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 68cbd53b1c..7bc6eaa709 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -1 +1 @@ -@import "./global/all.css"; +@import './global/all.css'; diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css index 19d0a49e2e..20f6149b9c 100644 --- a/src/assets/css/tailwind.css +++ b/src/assets/css/tailwind.css @@ -3,79 +3,83 @@ @tailwind utilities; @layer utilities { - .text-primary { - @apply text-gray-900 dark:text-gray-100; - } - .text-secondary { - @apply text-gray-600 dark:text-gray-400; - } + .text-primary { + @apply text-gray-900 dark:text-gray-100; + } + .text-secondary { + @apply text-gray-600 dark:text-gray-400; + } - th, - .font-thin, - .font-extralight, - .font-light, - .font-normal, - .font-medium, - .font-semibold, - .font-bold, - .font-extrabold, - .font-black { - font-weight: unset; - } - th { - font-variation-settings: 'wght' 600; - } - .font-thin { - font-variation-settings: 'wght' 100; - } - .font-extralight { - font-variation-settings: 'wght' 200; - } - .font-light { - font-variation-settings: 'wght' 300; - } - .font-normal { - font-variation-settings: 'wght' 400; - } - .font-medium { - font-variation-settings: 'wght' 500; - } - .font-semibold { - font-variation-settings: 'wght' 600; - } - .font-bold { - font-variation-settings: 'wght' 700; - } - .font-extrabold { - font-variation-settings: 'wght' 800; - } - .font-black { - font-variation-settings: 'wght' 900; - } - .font-numeric { - font-feature-settings: 'tnum'; - letter-spacing: -0.5px; - } - .eth-address { - font-variant-ligatures: no-contextual; - } - .text-gradient { - @apply bg-blue-500; - background-image: linear-gradient(45deg, theme('colors.blue.700'), theme('colors.pink.500')); - background-size: 100%; - -webkit-background-clip: text; - -moz-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-text-fill-color: transparent; - } - .link { - @apply text-blue-600 hover:text-purple-600 focus:text-purple-600 dark:text-blue-400 dark:hover:text-yellow-500 dark:focus:text-yellow-500 hover:underline focus:underline transition-all; - } - - .link-black { - @apply text-gray-900 hover:text-purple-600 focus:text-purple-600 dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 hover:underline focus:underline transition-all; - } - .text-shadow { - text-shadow: 0px 1px 0px rgb(0 0 0 / 10%), 4px 4px 8px rgb(0 0 0 / 15%); - } + th, + .font-thin, + .font-extralight, + .font-light, + .font-normal, + .font-medium, + .font-semibold, + .font-bold, + .font-extrabold, + .font-black { + font-weight: unset; + } + th { + font-variation-settings: 'wght' 600; + } + .font-thin { + font-variation-settings: 'wght' 100; + } + .font-extralight { + font-variation-settings: 'wght' 200; + } + .font-light { + font-variation-settings: 'wght' 300; + } + .font-normal { + font-variation-settings: 'wght' 400; + } + .font-medium { + font-variation-settings: 'wght' 500; + } + .font-semibold { + font-variation-settings: 'wght' 600; + } + .font-bold { + font-variation-settings: 'wght' 700; + } + .font-extrabold { + font-variation-settings: 'wght' 800; + } + .font-black { + font-variation-settings: 'wght' 900; + } + .font-numeric { + font-feature-settings: 'tnum'; + letter-spacing: -0.5px; + } + .eth-address { + font-variant-ligatures: no-contextual; + } + .text-gradient { + @apply bg-blue-500; + background-image: linear-gradient( + 45deg, + theme('colors.blue.700'), + theme('colors.pink.500') + ); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; + } + .link { + @apply text-blue-600 hover:text-purple-600 focus:text-purple-600 dark:text-blue-400 dark:hover:text-yellow-500 dark:focus:text-yellow-500 hover:underline focus:underline transition-all; + } + + .link-black { + @apply text-gray-900 hover:text-purple-600 focus:text-purple-600 dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 hover:underline focus:underline transition-all; + } + .text-shadow { + text-shadow: 0px 1px 0px rgb(0 0 0 / 10%), 4px 4px 8px rgb(0 0 0 / 15%); + } } diff --git a/src/components/_global/BalAccordion/BalAccordion.vue b/src/components/_global/BalAccordion/BalAccordion.vue index 43f81d8dc9..15ee906286 100644 --- a/src/components/_global/BalAccordion/BalAccordion.vue +++ b/src/components/_global/BalAccordion/BalAccordion.vue @@ -23,7 +23,7 @@ type Props = { }; const props = withDefaults(defineProps(), { - showSectionBorder: true + showSectionBorder: true, }); const activeSection = ref(''); @@ -66,7 +66,7 @@ async function toggleSection(section: string, collapse = true) { anime({ targets: handleBar, translateY: `0px`, - easing + easing, }); }); @@ -88,7 +88,7 @@ async function toggleSection(section: string, collapse = true) { anime({ targets: wrapperElement.value, height: `${heightToAnimate}px`, - easing + easing, }); handleBarsToTransform.forEach(handleBar => { @@ -96,14 +96,14 @@ async function toggleSection(section: string, collapse = true) { anime({ targets: handleBar, translateY: `${y}px`, - easing + easing, }); }); // animate the arrow anime({ targets: arrowElement.value, - rotate: '90deg' + rotate: '90deg', }); setTimeout(async () => { @@ -115,11 +115,11 @@ async function toggleSection(section: string, collapse = true) { top: '0', left: '0', right: '0', - opacity: 0 + opacity: 0, }); anime({ targets: activeSectionElement.value, - opacity: 1 + opacity: 1, }); } }, 300); @@ -194,8 +194,8 @@ watch( :class="[ 'w-full flex justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-800', { - 'border-b dark:border-gray-900': i !== sections.length - 1 - } + 'border-b dark:border-gray-900': i !== sections.length - 1, + }, ]" >
{{ section.title }}
@@ -210,7 +210,7 @@ watch(
diff --git a/src/components/_global/BalActionSteps/BalActionSteps.vue b/src/components/_global/BalActionSteps/BalActionSteps.vue index 296147cb32..18b157c71f 100644 --- a/src/components/_global/BalActionSteps/BalActionSteps.vue +++ b/src/components/_global/BalActionSteps/BalActionSteps.vue @@ -10,7 +10,7 @@ import { ChainId } from '@aave/protocol-js'; import { TransactionReceipt, - TransactionResponse + TransactionResponse, } from '@ethersproject/abstract-provider'; import { computed, ref, watch } from 'vue'; @@ -23,7 +23,7 @@ import { Step, StepState } from '@/types'; import { TransactionAction, TransactionActionInfo, - TransactionActionState + TransactionActionState, } from '@/types/transactions'; /** @@ -46,7 +46,7 @@ type Props = { const props = withDefaults(defineProps(), { disabled: false, isLoading: false, - loadingLabel: '' + loadingLabel: '', }); const emit = defineEmits<{ @@ -57,7 +57,7 @@ const defaultActionState: TransactionActionState = { init: false, confirming: false, confirmed: false, - confirmedAt: '' + confirmedAt: '', }; /** @@ -68,7 +68,7 @@ const _actions = ref(props.actions); const actionStates = ref( _actions.value.map(() => ({ - ...defaultActionState + ...defaultActionState, })) ); @@ -80,11 +80,11 @@ watch( () => { _actions.value = props.actions; actionStates.value = _actions.value.map(() => ({ - ...defaultActionState + ...defaultActionState, })); }, { - deep: true + deep: true, } ); @@ -110,8 +110,8 @@ const actions = computed((): TransactionAction[] => { promise: submit.bind(null, actionInfo.action, actionState), step: { tooltip: actionInfo.stepTooltip, - state: getStepState(actionState, idx) - } + state: getStepState(actionState, idx), + }, }; }); }); @@ -200,7 +200,7 @@ async function handleTransaction( }, onTxFailed: () => { state.confirming = false; - } + }, }); } diff --git a/src/components/_global/BalAlert/BalAlert.stories.ts b/src/components/_global/BalAlert/BalAlert.stories.ts index 7a4502a05f..2f9c6387a0 100644 --- a/src/components/_global/BalAlert/BalAlert.stories.ts +++ b/src/components/_global/BalAlert/BalAlert.stories.ts @@ -5,7 +5,7 @@ export default { component: BalAlert, title: 'Components/BalAlert', parameters: { - layout: 'centered' + layout: 'centered', }, args: { type: 'warning', @@ -13,24 +13,24 @@ export default { title: 'A title message', description: 'A description message', actionLabel: 'Action', - raised: false + raised: false, }, argTypes: { type: { type: { name: 'string', default: 'button' }, control: { type: 'select', - options: ['warning', 'error', 'info'] - } + options: ['warning', 'error', 'info'], + }, }, size: { type: { name: 'string', default: 'md' }, control: { type: 'select', - options: ['sm', 'md', 'lg'] - } - } - } + options: ['sm', 'md', 'lg'], + }, + }, + }, }; type Props = { @@ -46,7 +46,7 @@ const Template = (args: Props) => ({ }, template: generateTemplate(` -`) +`), }); export const Primary = Template.bind({}); diff --git a/src/components/_global/BalAlert/BalAlert.vue b/src/components/_global/BalAlert/BalAlert.vue index de2e30a0bf..6519ca47f8 100644 --- a/src/components/_global/BalAlert/BalAlert.vue +++ b/src/components/_global/BalAlert/BalAlert.vue @@ -45,7 +45,7 @@ export default defineComponent({ components: { BalIcon, - BalBtn + BalBtn, }, emits: ['actionClick'], @@ -55,13 +55,13 @@ export default defineComponent({ size: { type: String, default: 'md', - validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val) + validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val), }, title: { type: String, default: 'A title message' }, description: { type: String }, actionLabel: { type: String }, raised: { type: Boolean, default: false }, - block: { type: Boolean, default: false } + block: { type: Boolean, default: false }, }, setup(props, { slots }) { @@ -101,17 +101,17 @@ export default defineComponent({ [bgColorClass.value]: true, [paddingClasses.value]: true, 'shadow-sm': props.raised, - 'w-full': props.block + 'w-full': props.block, }; }); const containerClasses = computed(() => ({ - 'items-center': !props.description && !slots.default + 'items-center': !props.description && !slots.default, })); const contentClasses = computed(() => ({ 'items-center': !props.description && !slots.default, - 'flex-col': !!props.description || slots.default + 'flex-col': !!props.description || slots.default, })); const iconSizeClasses = computed(() => { @@ -139,12 +139,12 @@ export default defineComponent({ const iconClasses = computed(() => { return { [iconSizeClasses.value]: true, - [iconColorClasses.value]: true + [iconColorClasses.value]: true, }; }); const titleClasses = computed(() => ({ - 'font-semibold': !!props.description || slots.default + 'font-semibold': !!props.description || slots.default, })); const descriptionColor = computed(() => { @@ -175,7 +175,7 @@ export default defineComponent({ const actionClasses = computed(() => ({ 'pl-4': !props.description && !slots.default, - 'mt-1': !!props.description || slots.default + 'mt-1': !!props.description || slots.default, })); return { @@ -188,9 +188,9 @@ export default defineComponent({ textSizeClass, descriptionColor, btnColor, - actionClasses + actionClasses, }; - } + }, }); diff --git a/src/components/_global/BalAsset/BalAsset.vue b/src/components/_global/BalAsset/BalAsset.vue index 637f38f2c8..3bc2f99200 100644 --- a/src/components/_global/BalAsset/BalAsset.vue +++ b/src/components/_global/BalAsset/BalAsset.vue @@ -18,7 +18,7 @@ const props = withDefaults(defineProps(), { address: '', iconURI: '', size: 24, - button: false + button: false, }); /** @@ -48,7 +48,7 @@ const iconSRC = computed(() => { const rootElement = computed(() => (props.button ? 'button' : 'div')); const rootElementAttrs = computed(() => ({ - 'aria-label': token.value?.symbol + 'aria-label': token.value?.symbol, })); /** @@ -64,7 +64,7 @@ watch(iconSRC, newURL => { class="bal-asset rounded-full inline-block leading-none shadow-sm" :style="{ width: `${size}px`, - height: `${size}px` + height: `${size}px`, }" :is="rootElement" v-bind="rootElementAttrs" @@ -81,7 +81,7 @@ watch(iconSRC, newURL => { class="rounded-full overflow-visible bg-gray-300 dark:bg-gray-700" :style="{ width: `${size}px`, - height: `${size}px` + height: `${size}px`, }" /> diff --git a/src/components/_global/BalAsset/BalAssetSet.vue b/src/components/_global/BalAsset/BalAssetSet.vue index 1284c960e5..8d334ac324 100644 --- a/src/components/_global/BalAsset/BalAssetSet.vue +++ b/src/components/_global/BalAsset/BalAssetSet.vue @@ -7,7 +7,7 @@ :class="['addresses-row', assetRowClasses]" :style="{ width: `${width}px`, - height: `${size}px` + height: `${size}px`, }" >
@@ -44,35 +44,35 @@ type BalAssetProps = { export default defineComponent({ components: { - BalAsset + BalAsset, }, emits: ['click'], props: { addresses: { - type: Array as PropType + type: Array as PropType, }, logoURIs: { - type: Array as PropType + type: Array as PropType, }, balAssetProps: { type: Object as PropType, - default: () => ({}) + default: () => ({}), }, width: { type: Number, - default: 200 + default: 200, }, size: { type: Number, - default: 26 + default: 26, }, maxAssetsPerLine: { type: Number, - default: 8 + default: 8, }, wrap: { - type: Boolean - } + type: Boolean, + }, }, setup(props) { @@ -107,7 +107,7 @@ export default defineComponent({ }); const assetRowClasses = computed(() => ({ - 'mb-3': assetChunks.value.length > 1 + 'mb-3': assetChunks.value.length > 1, })); const radius = computed(() => props.size / 2); @@ -142,9 +142,9 @@ export default defineComponent({ // methods leftOffsetFor, - assetAttrsFor + assetAttrsFor, }; - } + }, }); diff --git a/src/components/_global/BalBlankSlate/BalBlankSlate.vue b/src/components/_global/BalBlankSlate/BalBlankSlate.vue index 0545ef933b..2656516996 100644 --- a/src/components/_global/BalBlankSlate/BalBlankSlate.vue +++ b/src/components/_global/BalBlankSlate/BalBlankSlate.vue @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - name: 'BalBlankSlate' + name: 'BalBlankSlate', }); diff --git a/src/components/_global/BalBreakdown/BalBreakdown.vue b/src/components/_global/BalBreakdown/BalBreakdown.vue index b5d7b56cdc..ccfaffd27d 100644 --- a/src/components/_global/BalBreakdown/BalBreakdown.vue +++ b/src/components/_global/BalBreakdown/BalBreakdown.vue @@ -19,7 +19,7 @@ type Props = { const props = withDefaults(defineProps(), { title: 'Title', hideItems: false, - size: 'md' + size: 'md', }); /** diff --git a/src/components/_global/BalBtn/BalBtn.stories.ts b/src/components/_global/BalBtn/BalBtn.stories.ts index 0f4954762e..2d151675e0 100644 --- a/src/components/_global/BalBtn/BalBtn.stories.ts +++ b/src/components/_global/BalBtn/BalBtn.stories.ts @@ -6,7 +6,7 @@ export default { title: 'Components/BalBtn', parameters: { layout: 'centered', - actions: { handles: ['click'] } + actions: { handles: ['click'] }, }, args: { darkMode: false, @@ -14,31 +14,31 @@ export default { size: 'md', color: 'primary', label: '', - loadingLabel: 'Loading...' + loadingLabel: 'Loading...', }, argTypes: { tag: { type: { name: 'string', default: 'button' }, control: { type: 'select', - options: ['button', 'a', 'div'] - } + options: ['button', 'a', 'div'], + }, }, size: { type: { name: 'string', default: 'md' }, control: { type: 'select', - options: ['sm', 'md', 'lg'] - } + options: ['sm', 'md', 'lg'], + }, }, color: { type: { name: 'string', default: 'primary' }, control: { type: 'select', - options: ['primary', 'gradient', 'gray', 'red'] - } - } - } + options: ['primary', 'gradient', 'gray', 'red'], + }, + }, + }, }; type Props = { @@ -62,7 +62,7 @@ const Template = (args: Props) => ({ template: generateTemplate(` Action -`) +`), }); export const Primary = Template.bind({}); diff --git a/src/components/_global/BalBtn/BalBtn.vue b/src/components/_global/BalBtn/BalBtn.vue index 728aaccfa4..4a258ee99d 100644 --- a/src/components/_global/BalBtn/BalBtn.vue +++ b/src/components/_global/BalBtn/BalBtn.vue @@ -28,7 +28,7 @@ export default defineComponent({ name: 'BalBtn', components: { - BalLoadingIcon + BalLoadingIcon, }, props: { @@ -36,13 +36,13 @@ export default defineComponent({ type: String, default: 'button', validator: (val: string): boolean => - ['button', 'a', 'div', 'router-link'].includes(val) + ['button', 'a', 'div', 'router-link'].includes(val), }, size: { type: String, default: 'md', validator: (val: string): boolean => - ['xs', 'sm', 'md', 'lg'].includes(val) + ['xs', 'sm', 'md', 'lg'].includes(val), }, color: { type: String, @@ -56,8 +56,8 @@ export default defineComponent({ 'gray', 'red', 'white', - 'blue' - ].includes(val) + 'blue', + ].includes(val), }, label: { type: String, default: '' }, block: { type: Boolean, default: false }, @@ -67,7 +67,7 @@ export default defineComponent({ rounded: { type: Boolean, default: false }, loading: { type: Boolean, default: false }, loadingLabel: { type: String, default: 'loading...' }, - disabled: { type: Boolean, default: false } + disabled: { type: Boolean, default: false }, }, setup(props) { @@ -208,7 +208,7 @@ export default defineComponent({ [displayClasses.value]: true, [shapeClasses.value]: true, [shadowClasses.value]: true, - [cursorClasses.value]: true + [cursorClasses.value]: true, }; }); @@ -220,9 +220,9 @@ export default defineComponent({ return { btnClasses, - iconColor + iconColor, }; - } + }, }); diff --git a/src/components/_global/BalBtnGroup/BalBtnGroup.vue b/src/components/_global/BalBtnGroup/BalBtnGroup.vue index b0ff5316ac..46b6af0c12 100644 --- a/src/components/_global/BalBtnGroup/BalBtnGroup.vue +++ b/src/components/_global/BalBtnGroup/BalBtnGroup.vue @@ -33,7 +33,7 @@ export default defineComponent({ props: { modelValue: { type: [String, Number], required: true }, - options: { type: Array as PropType, required: true } + options: { type: Array as PropType, required: true }, }, setup(props, { emit, attrs }) { @@ -50,8 +50,8 @@ export default defineComponent({ attrs_, // methods - onSelect + onSelect, }; - } + }, }); diff --git a/src/components/_global/BalCard/BalCard.stories.ts b/src/components/_global/BalCard/BalCard.stories.ts index 1e87ca7357..9a30385e5d 100644 --- a/src/components/_global/BalCard/BalCard.stories.ts +++ b/src/components/_global/BalCard/BalCard.stories.ts @@ -8,17 +8,17 @@ export default { darkMode: false, title: '', titleTag: 'h3', - shadow: '' + shadow: '', }, argTypes: { titleTag: { control: { type: 'select', options: ['h1', 'h2', 'h3'] } }, shadow: { control: { type: 'select', - options: ['', 'none', 'sm', 'md', 'lg', 'xl', '2xl'] - } - } - } + options: ['', 'none', 'sm', 'md', 'lg', 'xl', '2xl'], + }, + }, + }, }; type Props = { @@ -37,7 +37,7 @@ const Template = (args: Props) => ({ template: generateTemplate(` content -`) +`), }); export const OnlyContent = Template.bind({}); @@ -57,7 +57,7 @@ export const WithFooter = (args: Props) => ({ -`) +`), }); export const Complete = WithFooter.bind({}); diff --git a/src/components/_global/BalCard/BalCard.vue b/src/components/_global/BalCard/BalCard.vue index 85c9362401..f6c6caf71a 100644 --- a/src/components/_global/BalCard/BalCard.vue +++ b/src/components/_global/BalCard/BalCard.vue @@ -3,7 +3,7 @@
@@ -59,10 +59,10 @@ export default defineComponent({ 'xl', '2xl', '3xl', - '4xl' + '4xl', ].includes(val); - } - } + }, + }, }, setup(props) { @@ -77,38 +77,38 @@ export default defineComponent({ [`bg-white dark:bg-gray-${props.darkBgColor}`]: true, [`shadow${props.shadow ? '-' : ''}${props.shadow}`]: true, [borderClasses.value]: !props.noBorder, - 'h-full': props.hFull + 'h-full': props.hFull, }; }); const headerClasses = computed(() => { return { - 'p-4 pb-0': !props.noPad + 'p-4 pb-0': !props.noPad, }; }); const headerContentClasses = computed(() => { return { - 'justify-end': props.rightAlignHeader + 'justify-end': props.rightAlignHeader, }; }); const contentClasses = computed(() => { return { 'p-4': !props.noPad && !props.noContentPad, - 'flex-grow': props.growContent + 'flex-grow': props.growContent, }; }); const footerClasses = computed(() => { return { 'rounded-b-lg': !props.square, - 'p-4 pt-0': !props.noPad + 'p-4 pt-0': !props.noPad, }; }); const featureStyles = computed(() => ({ - backgroundImage: `url('${props.imgSrc}')` + backgroundImage: `url('${props.imgSrc}')`, })); return { @@ -117,9 +117,9 @@ export default defineComponent({ headerClasses, headerContentClasses, footerClasses, - featureStyles + featureStyles, }; - } + }, }); diff --git a/src/components/_global/BalChart/BalChart.vue b/src/components/_global/BalChart/BalChart.vue index 2fb36cec29..df07912100 100644 --- a/src/components/_global/BalChart/BalChart.vue +++ b/src/components/_global/BalChart/BalChart.vue @@ -62,7 +62,7 @@ const emit = defineEmits([ 'periodSelected', 'setCurrentChartValue', 'mouseLeaveEvent', - 'mouseEnterEvent' + 'mouseEnterEvent', ]); const props = withDefaults(defineProps(), { @@ -76,7 +76,7 @@ const props = withDefaults(defineProps(), { axisLabelFormatter: () => ({}), showTooltip: true, showTooltipLayer: true, - useMinMax: false + useMinMax: false, }); const chartInstance = ref(); @@ -109,11 +109,11 @@ const chartConfig = computed(() => ({ textStyle: { color: darkMode.value ? tailwind.theme.colors.gray['100'] - : tailwind.theme.colors.gray['800'] + : tailwind.theme.colors.gray['800'], }, inactiveColor: darkMode.value ? tailwind.theme.colors.gray['700'] - : tailwind.theme.colors.gray['300'] + : tailwind.theme.colors.gray['300'], }, // controlling the display of the X-Axis xAxis: { @@ -121,26 +121,26 @@ const chartConfig = computed(() => ({ show: !props.hideXAxis, axisTick: { show: false }, axisLine: { - show: false + show: false, }, minInterval: props.xAxisMinInterval, axisLabel: { formatter: props.axisLabelFormatter.xAxis ? value => fNum2(value, props.axisLabelFormatter.xAxis) : undefined, - color: tailwind.theme.colors.gray['400'] + color: tailwind.theme.colors.gray['400'], }, splitArea: { show: false, areaStyle: { - color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] - } - } + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], + }, + }, }, // controlling the display of the Y-Axis yAxis: { axisLine: { - show: false + show: false, }, axisTick: { show: false }, min: props.useMinMax ? 'dataMin' : null, @@ -149,7 +149,7 @@ const chartConfig = computed(() => ({ show: !props.hideYAxis, splitNumber: 4, splitLine: { - show: false + show: false, }, position: 'left', axisLabel: { @@ -157,9 +157,9 @@ const chartConfig = computed(() => ({ formatter: props.axisLabelFormatter.yAxis ? value => fNum2(value, props.axisLabelFormatter.yAxis) : undefined, - color: tailwind.theme.colors.gray['400'] + color: tailwind.theme.colors.gray['400'], }, - nameGap: 25 + nameGap: 25, }, color: props.color, // Controls the boundaries of the chart from the HTML defined rectangle @@ -168,7 +168,7 @@ const chartConfig = computed(() => ({ right: 0, top: '10%', bottom: '5%', - containLabel: true + containLabel: true, }, tooltip: { show: props.showTooltip, @@ -178,8 +178,8 @@ const chartConfig = computed(() => ({ axisPointer: { type: 'shadow', label: { - show: false - } + show: false, + }, }, backgroundColor: darkMode.value ? tailwind.theme.colors.gray['800'] @@ -205,7 +205,7 @@ const chartConfig = computed(() => ({ .join('')}
`; - } + }, }, series: props.data.map((d, i) => ({ data: d.values, @@ -214,21 +214,21 @@ const chartConfig = computed(() => ({ showSymbol: false, name: d.name, silent: true, - animationEasing: function(k) { + animationEasing: function (k) { return k === 1 ? 1 : 1 - Math.pow(2, -10 * k); }, lineStyle: { - width: 2 + width: 2, }, areaStyle: props.areaStyle, itemStyle: { - borderRadius: 100 + borderRadius: 100, }, emphasis: { itemStyle: { color: props.hoverColor, - borderColor: props.hoverBorderColor - } + borderColor: props.hoverBorderColor, + }, }, // This is a retrofitted option to show the small pill with the // latest value of the series at the end of the line on the RHS @@ -237,7 +237,7 @@ const chartConfig = computed(() => ({ symbol: 'roundRect', symbolSize: 0, lineStyle: { - color: 'rgba(0, 0, 0, 0)' + color: 'rgba(0, 0, 0, 0)', }, precision: 5, label: { @@ -248,7 +248,7 @@ const chartConfig = computed(() => ({ return fNum2(params.data.yAxis, props.axisLabelFormatter.yAxis); }, color: '#FFF', - fontSize: 10 + fontSize: 10, }, data: props.isLastValueChipVisible ? [ @@ -257,13 +257,13 @@ const chartConfig = computed(() => ({ yAxis: props.data[i]?.values.length > 0 ? (last(props.data[i]?.values) || [])[1] - : 0 - } + : 0, + }, ] : [], - animation: false - } - })) + animation: false, + }, + })), })); const styleOverrides = computed(() => { @@ -299,7 +299,7 @@ function setCurrentValueToLatest(updateCurrentValue: boolean) { props.axisLabelFormatter.yAxis || { style: 'currency', currency: 'USD', - fixedFormat: true + fixedFormat: true, } ); const currentChartValue = props.data[0].values[0]; @@ -307,7 +307,7 @@ function setCurrentValueToLatest(updateCurrentValue: boolean) { if (currentChartValue) { emit('setCurrentChartValue', { chartDate: currentChartValue[0], - chartValue: currentChartValue[1] + chartValue: currentChartValue[1], }); } } @@ -354,7 +354,7 @@ const handleAxisMoved = ({ dataIndex, seriesIndex }: AxisMoveEvent) => { emit('setCurrentChartValue', { chartDate: currentChartValue[0], - chartValue: currentChartValue[1] + chartValue: currentChartValue[1], }); currentValue.value = fNum2( @@ -362,7 +362,7 @@ const handleAxisMoved = ({ dataIndex, seriesIndex }: AxisMoveEvent) => { props.axisLabelFormatter.yAxis || { style: 'currency', currency: 'USD', - fixedFormat: true + fixedFormat: true, } ); @@ -413,7 +413,7 @@ const handleAxisMoved = ({ dataIndex, seriesIndex }: AxisMoveEvent) => { :class="{ 'text-green-400': change >= 0, 'text-red-400': change < 0, - 'font-medium': true + 'font-medium': true, }" >{{ numeral(change).format('+0.0%') }} @@ -423,7 +423,7 @@ const handleAxisMoved = ({ dataIndex, seriesIndex }: AxisMoveEvent) => { :class="[ height && typeof (height === 'string') ? `h-${height}` : '', 'w-full', - chartClass + chartClass, ]" :option="chartConfig" autoresize diff --git a/src/components/_global/BalCheckbox/BalCheckbox.vue b/src/components/_global/BalCheckbox/BalCheckbox.vue index 2ca11059c6..fcb4a42d08 100644 --- a/src/components/_global/BalCheckbox/BalCheckbox.vue +++ b/src/components/_global/BalCheckbox/BalCheckbox.vue @@ -47,18 +47,18 @@ export default defineComponent({ noMargin: { type: Boolean, default: false }, rules: { type: Array as PropType, - default: () => [] + default: () => [], }, size: { type: String, default: 'md', - validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val) + validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val), }, color: { type: String, default: 'blue', - validator: (val: string): boolean => ['blue'].includes(val) - } + validator: (val: string): boolean => ['blue'].includes(val), + }, }, setup(props, { emit }) { @@ -107,20 +107,20 @@ export default defineComponent({ const wrapperClasses = computed(() => { return { - 'mb-5': !props.noMargin + 'mb-5': !props.noMargin, }; }); const inputClasses = computed(() => { return { [sizeClasses.value]: true, - [colorClasses.value]: true + [colorClasses.value]: true, }; }); const labelClasses = computed(() => { return { - [textSizeClass.value]: true + [textSizeClass.value]: true, }; }); @@ -131,9 +131,9 @@ export default defineComponent({ validate, hasError, errors, - onChange + onChange, }; - } + }, }); diff --git a/src/components/_global/BalChip/BalChip.stories.ts b/src/components/_global/BalChip/BalChip.stories.ts index 3d7cee20c3..77f1facee6 100644 --- a/src/components/_global/BalChip/BalChip.stories.ts +++ b/src/components/_global/BalChip/BalChip.stories.ts @@ -6,31 +6,31 @@ export default { title: 'Components/BalChip', parameters: { layout: 'centered', - actions: { handles: ['click .close'] } + actions: { handles: ['click .close'] }, }, args: { darkMode: false, label: 'tag', closeable: true, size: 'md', - color: 'gray' + color: 'gray', }, argTypes: { size: { type: { name: 'string', default: 'md' }, control: { type: 'select', - options: ['sm', 'md', 'lg'] - } + options: ['sm', 'md', 'lg'], + }, }, color: { type: { name: 'string', default: 'text' }, control: { type: 'select', - options: ['gray', 'gradient'] - } - } - } + options: ['gray', 'gradient'], + }, + }, + }, }; type Props = { @@ -45,7 +45,7 @@ const Template = (args: Props) => ({ }, template: generateTemplate(` -`) +`), }); export const Default = Template.bind({}); diff --git a/src/components/_global/BalChip/BalChip.vue b/src/components/_global/BalChip/BalChip.vue index 1fb293e0b3..b9e8aa9d60 100644 --- a/src/components/_global/BalChip/BalChip.vue +++ b/src/components/_global/BalChip/BalChip.vue @@ -2,7 +2,7 @@ import BalIcon from '../BalIcon/BalIcon.vue'; import { useChipClasses, - useCloseIconClasses + useCloseIconClasses, } from './composables/useChipStyles'; type Props = { @@ -23,7 +23,7 @@ const props = withDefaults(defineProps(), { size: 'md', color: 'gray', rounded: false, - outline: true + outline: true, }); const emit = defineEmits(['closed']); diff --git a/src/components/_global/BalChip/composables/useChipStyles.ts b/src/components/_global/BalChip/composables/useChipStyles.ts index b467b5a75f..afd1dfed7f 100644 --- a/src/components/_global/BalChip/composables/useChipStyles.ts +++ b/src/components/_global/BalChip/composables/useChipStyles.ts @@ -39,7 +39,7 @@ export function useChipClasses(props) { [sizeClasses()]: true, [bgColorClasses()]: true, [outlineClasses()]: true, - [shapeClasses()]: true + [shapeClasses()]: true, }; }); } @@ -50,7 +50,7 @@ export function useCloseIconClasses(props) { const classes = computed(() => { return { - [colorClass]: true + [colorClass]: true, }; }); diff --git a/src/components/_global/BalDropdown/BalDropdown.vue b/src/components/_global/BalDropdown/BalDropdown.vue index a9046e2867..bef70fc303 100644 --- a/src/components/_global/BalDropdown/BalDropdown.vue +++ b/src/components/_global/BalDropdown/BalDropdown.vue @@ -13,7 +13,7 @@ type Props = { * PROPS & EMITS */ const props = withDefaults(defineProps(), { - minWidth: 'auto' + minWidth: 'auto', }); const emit = defineEmits<{ @@ -29,7 +29,7 @@ const showDropdown = ref(false); * COMPUTED */ const dropdownClasses = computed(() => ({ - [`min-w-${props.minWidth}`]: true + [`min-w-${props.minWidth}`]: true, })); /** diff --git a/src/components/_global/BalFlexGrid/BalFlexGrid.vue b/src/components/_global/BalFlexGrid/BalFlexGrid.vue index e1c17ca58c..eef8fdf440 100644 --- a/src/components/_global/BalFlexGrid/BalFlexGrid.vue +++ b/src/components/_global/BalFlexGrid/BalFlexGrid.vue @@ -6,14 +6,14 @@ export default defineComponent({ props: { gap: { type: Number, default: 4 }, - flexWrap: { type: Boolean, default: false } + flexWrap: { type: Boolean, default: false }, }, setup(props, { slots }) { const spacing = computed((): string => (props.gap / 2).toString()); const flexClasses = computed(() => ({ - 'flex-wrap': props.flexWrap + 'flex-wrap': props.flexWrap, })); // @ts-ignore @@ -28,8 +28,8 @@ export default defineComponent({ 'div', { class: [`flex -mx-${props.gap}`, flexClasses.value] }, gridItems - ) + ), ]); - } + }, }); diff --git a/src/components/_global/BalForm/BalForm.vue b/src/components/_global/BalForm/BalForm.vue index 46838083c3..2f158791e3 100644 --- a/src/components/_global/BalForm/BalForm.vue +++ b/src/components/_global/BalForm/BalForm.vue @@ -55,7 +55,7 @@ function useFormValidations() { return { errors, validate, - validateInput + validateInput, }; } @@ -66,12 +66,12 @@ export default defineComponent({ props: { action: { type: String, default: '' }, - method: { type: String, default: 'post' } + method: { type: String, default: 'post' }, }, setup() { const { errors, validate, validateInput } = useFormValidations(); return { errors, validate, validateInput }; - } + }, }); diff --git a/src/components/_global/BalHorizSteps/BalHorizSteps.vue b/src/components/_global/BalHorizSteps/BalHorizSteps.vue index 210adf25de..26ddd430d6 100644 --- a/src/components/_global/BalHorizSteps/BalHorizSteps.vue +++ b/src/components/_global/BalHorizSteps/BalHorizSteps.vue @@ -24,9 +24,9 @@ withDefaults(defineProps(), { { tooltip: 'Wallet is tiggered', state: StepState.WalletOpen }, { tooltip: 'This is pending', state: StepState.Pending }, { tooltip: 'Do this now', state: StepState.Active }, - { tooltip: 'Do this next', state: StepState.Todo } + { tooltip: 'Do this next', state: StepState.Todo }, ], - spacerWidth: 16 + spacerWidth: 16, }); /** diff --git a/src/components/_global/BalIcon/BalIcon.stories.ts b/src/components/_global/BalIcon/BalIcon.stories.ts index a19d149e16..271e740118 100644 --- a/src/components/_global/BalIcon/BalIcon.stories.ts +++ b/src/components/_global/BalIcon/BalIcon.stories.ts @@ -5,22 +5,22 @@ export default { component: BalIcon, title: 'Components/BalIcon', parameters: { - layout: 'centered' + layout: 'centered', }, args: { darkMode: false, name: 'coffee', - size: 'md' + size: 'md', }, argTypes: { size: { type: { name: 'string', default: 'md' }, control: { type: 'select', - options: ['xs', 'sm', 'md', 'lg'] - } - } - } + options: ['xs', 'sm', 'md', 'lg'], + }, + }, + }, }; type Props = { @@ -35,7 +35,7 @@ const Template = (args: Props) => ({ }, template: generateTemplate(` -`) +`), }); export const Default = Template.bind({}); diff --git a/src/components/_global/BalIcon/BalIcon.vue b/src/components/_global/BalIcon/BalIcon.vue index c7a8c3be17..fb67271a27 100644 --- a/src/components/_global/BalIcon/BalIcon.vue +++ b/src/components/_global/BalIcon/BalIcon.vue @@ -18,7 +18,7 @@ type Props = { */ const props = withDefaults(defineProps(), { size: 'md', - filled: false + filled: false, }); /** diff --git a/src/components/_global/BalImage/BalImage.vue b/src/components/_global/BalImage/BalImage.vue index c1a85f2d45..24a29df550 100644 --- a/src/components/_global/BalImage/BalImage.vue +++ b/src/components/_global/BalImage/BalImage.vue @@ -12,7 +12,7 @@ type Props = { * PROPS & EMITS */ const props = withDefaults(defineProps(), { - noFade: false + noFade: false, }); /** @@ -30,7 +30,7 @@ const attrs = useAttrs(); */ const wrapperStyles = computed(() => ({ width: attrs?.width || 'auto', - height: attrs?.height || 'auto' + height: attrs?.height || 'auto', })); /** diff --git a/src/components/_global/BalInlineInput/BalInlineInput.vue b/src/components/_global/BalInlineInput/BalInlineInput.vue index 750a89faab..a855166ef5 100644 --- a/src/components/_global/BalInlineInput/BalInlineInput.vue +++ b/src/components/_global/BalInlineInput/BalInlineInput.vue @@ -1,7 +1,7 @@ @@ -52,7 +52,7 @@ const props = withDefaults(defineProps(), { inputAlignRight: false, decimalLimit: 18, validateOn: 'blur', - rules: () => [] + rules: () => [], }); const emit = defineEmits<{ @@ -85,7 +85,7 @@ const { inputClasses, prependClasses, appendClasses, - borderRadiusClasses + borderRadiusClasses, } = useInputStyles(props, isInvalid, attrs); const { onInput, onKeydown, onBlur } = useInputEvents(props, emit, validate); diff --git a/src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts b/src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts index 0262d75a38..52c5fb45e3 100644 --- a/src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts +++ b/src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts @@ -56,38 +56,38 @@ export default function useInputStyles(props, isInvalid: Ref, attrs) { const parentClasses = computed(() => attrs.class); const inputContainerClasses = computed(() => ({ - [extPaddingClass()]: true + [extPaddingClass()]: true, })); const inputGroupClasses = computed(() => ({ - [intPaddingClass()]: true + [intPaddingClass()]: true, })); const headerClasses = computed(() => ({ - [intPaddingClass()]: true + [intPaddingClass()]: true, })); const footerClasses = computed(() => ({ - [intPaddingClass()]: true + [intPaddingClass()]: true, })); const inputClasses = computed(() => ({ [inputHeightClass()]: true, [inputTextSize()]: true, 'text-right': props.inputAlignRight, - 'font-numeric': props.type === 'number' + 'font-numeric': props.type === 'number', })); const prependClasses = computed(() => ({ - [inputHeightClass()]: true + [inputHeightClass()]: true, })); const appendClasses = computed(() => ({ - [inputHeightClass()]: true + [inputHeightClass()]: true, })); const borderRadiusClasses = computed(() => ({ - 'rounded-lg': !props.noRadius + 'rounded-lg': !props.noRadius, })); return { @@ -99,6 +99,6 @@ export default function useInputStyles(props, isInvalid: Ref, attrs) { inputClasses, prependClasses, appendClasses, - borderRadiusClasses + borderRadiusClasses, }; } diff --git a/src/components/_global/BalLink/BalLink.vue b/src/components/_global/BalLink/BalLink.vue index 3214cfe59a..1bf8587936 100644 --- a/src/components/_global/BalLink/BalLink.vue +++ b/src/components/_global/BalLink/BalLink.vue @@ -1,6 +1,6 @@ @@ -26,7 +26,7 @@ const props = withDefaults(defineProps(), { tag: 'a', external: false, disabled: false, - noStyle: false + noStyle: false, }); /** @@ -44,7 +44,7 @@ const attrs_ = computed(() => { attrs_ = { ...attrs_, target: '_blank', - rel: 'noopener noreferrer' + rel: 'noopener noreferrer', }; } @@ -54,7 +54,7 @@ const attrs_ = computed(() => { const classes = computed(() => { return { link: !props.noStyle, - 'disabled-link': props.disabled + 'disabled-link': props.disabled, }; }); diff --git a/src/components/_global/BalLoadingBlock/BalLoadingBlock.vue b/src/components/_global/BalLoadingBlock/BalLoadingBlock.vue index be5b7f87ec..a3f3edf0f0 100644 --- a/src/components/_global/BalLoadingBlock/BalLoadingBlock.vue +++ b/src/components/_global/BalLoadingBlock/BalLoadingBlock.vue @@ -22,7 +22,7 @@ const props = withDefaults(defineProps(), { white: false, darker: false, square: false, - rounded: 'lg' + rounded: 'lg', }); /** @@ -44,7 +44,7 @@ const bgClass = computed(() => { const classes = computed(() => { return { [`rounded-${props.rounded}`]: !props.square, - [bgClass.value]: true + [bgClass.value]: true, }; }); diff --git a/src/components/_global/BalLoadingIcon/BalLoadingIcon.vue b/src/components/_global/BalLoadingIcon/BalLoadingIcon.vue index d9a6ab4ac1..d4f30062b6 100644 --- a/src/components/_global/BalLoadingIcon/BalLoadingIcon.vue +++ b/src/components/_global/BalLoadingIcon/BalLoadingIcon.vue @@ -15,13 +15,13 @@ export default defineComponent({ color: { type: String, default: 'gray', - validator: value => ['gray', 'primary', 'white'].includes(value) + validator: value => ['gray', 'primary', 'white'].includes(value), }, size: { type: String, default: 'md', - validator: value => ['xs', 'sm', 'md', 'lg'].includes(value) - } + validator: value => ['xs', 'sm', 'md', 'lg'].includes(value), + }, }, setup(props) { @@ -51,9 +51,9 @@ export default defineComponent({ return { sizeClasses, - colorClasses + colorClasses, }; - } + }, }); diff --git a/src/components/_global/BalLoadingNumber/BalLoadingNumber.vue b/src/components/_global/BalLoadingNumber/BalLoadingNumber.vue index 5cc423e13c..a558b001d3 100644 --- a/src/components/_global/BalLoadingNumber/BalLoadingNumber.vue +++ b/src/components/_global/BalLoadingNumber/BalLoadingNumber.vue @@ -23,7 +23,7 @@ type Props = { const props = withDefaults(defineProps(), { type: 'token', numberWidth: '3', - numberHeight: '5' + numberHeight: '5', }); /** @@ -39,7 +39,7 @@ const currencySymbol = computed(() => FiatSymbol[currency.value]); const blockClasses = computed(() => [ `w-${props.numberWidth}`, `h-${props.numberHeight}`, - 'mr-px' + 'mr-px', ]); diff --git a/src/components/_global/BalModal/BalModal.stories.ts b/src/components/_global/BalModal/BalModal.stories.ts index 186bc37679..ed3c8ab391 100644 --- a/src/components/_global/BalModal/BalModal.stories.ts +++ b/src/components/_global/BalModal/BalModal.stories.ts @@ -6,8 +6,8 @@ export default { title: 'Components/BalModal', args: { title: '', - darkMode: false - } + darkMode: false, + }, }; type Props = { @@ -24,7 +24,7 @@ const Template = (args: Props) => ({ template: generateTemplate(` content -`) +`), }); export const Primary = Template.bind({}); @@ -42,6 +42,6 @@ export const WithFooter = (args: Props) => ({ -`) +`), }); WithFooter.args = { title: 'A title', show: true }; diff --git a/src/components/_global/BalModal/BalModal.vue b/src/components/_global/BalModal/BalModal.vue index f5c0190d8f..4545e9c558 100644 --- a/src/components/_global/BalModal/BalModal.vue +++ b/src/components/_global/BalModal/BalModal.vue @@ -23,7 +23,7 @@ const props = withDefaults(defineProps(), { title: '', noPad: false, noContentPad: false, - fireworks: false + fireworks: false, }); defineEmits(['close']); diff --git a/src/components/_global/BalPopover/BalPopover.vue b/src/components/_global/BalPopover/BalPopover.vue index 57851071a4..ea3793117d 100644 --- a/src/components/_global/BalPopover/BalPopover.vue +++ b/src/components/_global/BalPopover/BalPopover.vue @@ -12,7 +12,7 @@ type Props = { const props = withDefaults(defineProps(), { trigger: 'click', align: 'right', - detached: false + detached: false, }); const emit = defineEmits<{ @@ -33,11 +33,11 @@ const popoverWrapperClasses = computed(() => ({ 'bal-popover-wrapper-visible': popoverOpened.value, [`${props.align}-0`]: !props.detached, 'align-center-transform': props.detached && props.align === 'center', - 'align-right-transform': props.detached && props.align === 'right' + 'align-right-transform': props.detached && props.align === 'right', })); const popoverActivatorWrapperClasses = computed(() => ({ - relative: !props.detached + relative: !props.detached, })); const activatorWidth = computed(() => activatorWrapper.value?.clientWidth || 0); diff --git a/src/components/_global/BalProgressBar/BalProgressBar.vue b/src/components/_global/BalProgressBar/BalProgressBar.vue index 0aa767e960..8d6c4e1674 100644 --- a/src/components/_global/BalProgressBar/BalProgressBar.vue +++ b/src/components/_global/BalProgressBar/BalProgressBar.vue @@ -16,7 +16,7 @@ type Props = { */ const props = withDefaults(defineProps(), { size: '1', - color: 'green' + color: 'green', }); /** @@ -24,20 +24,20 @@ const props = withDefaults(defineProps(), { */ const barClasses = computed(() => ({ [`h-${props.size}`]: true, - [`bg-${props.color}-400`]: true + [`bg-${props.color}-400`]: true, })); const bufferBarClasses = computed(() => ({ [`h-${props.size}`]: true, - [`bg-orange-500`]: true + [`bg-orange-500`]: true, })); const barStyles = computed(() => ({ - width: `${props.width}%` + width: `${props.width}%`, })); const bufferBarStyles = computed(() => ({ - width: `${props.bufferWidth}%` + width: `${props.bufferWidth}%`, })); diff --git a/src/components/_global/BalRadio/BalRadio.vue b/src/components/_global/BalRadio/BalRadio.vue index 158403d9a6..11f2ef0825 100644 --- a/src/components/_global/BalRadio/BalRadio.vue +++ b/src/components/_global/BalRadio/BalRadio.vue @@ -39,13 +39,13 @@ export default defineComponent({ size: { type: String, default: 'md', - validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val) + validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val), }, color: { type: String, default: 'blue', - validator: (val: string): boolean => ['blue'].includes(val) - } + validator: (val: string): boolean => ['blue'].includes(val), + }, }, setup(props, { emit }) { @@ -89,23 +89,23 @@ export default defineComponent({ return { [sizeClasses.value]: true, [colorClass.value]: true, - [cursrorClass.value]: true + [cursrorClass.value]: true, }; }); const labelClasses = computed(() => { return { [textSizeClass.value]: true, - [cursrorClass.value]: true + [cursrorClass.value]: true, }; }); return { onChange, inputClasses, - labelClasses + labelClasses, }; - } + }, }); diff --git a/src/components/_global/BalRangeInput/BalRangeInput.vue b/src/components/_global/BalRangeInput/BalRangeInput.vue index c9ab0d1c30..47cc27f2c0 100644 --- a/src/components/_global/BalRangeInput/BalRangeInput.vue +++ b/src/components/_global/BalRangeInput/BalRangeInput.vue @@ -37,7 +37,7 @@ export default defineComponent({ name: 'BalRangeInput', components: { - VueSlider + VueSlider, }, emits: ['change', 'update:modelValue', 'dragEnd'], @@ -45,7 +45,7 @@ export default defineComponent({ props: { modelValue: { type: [String, Number], default: '0' }, leftLabel: { type: String, default: '' }, - rightLabel: { type: String, default: '' } + rightLabel: { type: String, default: '' }, }, setup(props, { emit }) { @@ -68,19 +68,19 @@ export default defineComponent({ backgroundColor: colors.blue['500'], borderColor: colors.blue['500'], borderWidth: 0, - backgroundImage: `linear-gradient(to top right, ${colors.blue['500']}, ${colors.pink['500']})` + backgroundImage: `linear-gradient(to top right, ${colors.blue['500']}, ${colors.pink['500']})`, }; }); const railSyle = computed(() => { return { - background: darkMode.value ? colors.gray['900'] : colors.gray['100'] + background: darkMode.value ? colors.gray['900'] : colors.gray['100'], }; }); const proccessStyle = computed(() => { return { - backgroundImage: `linear-gradient(to top right, ${colors.blue['500']}, ${colors.pink['500']})` + backgroundImage: `linear-gradient(to top right, ${colors.blue['500']}, ${colors.pink['500']})`, }; }); @@ -98,9 +98,9 @@ export default defineComponent({ onDragEnd, dotStyle, railSyle, - proccessStyle + proccessStyle, }; - } + }, }); diff --git a/src/components/_global/BalSelectInput/BalSelectInput.stories.ts b/src/components/_global/BalSelectInput/BalSelectInput.stories.ts index 9dabd3d801..c55aacc9d2 100644 --- a/src/components/_global/BalSelectInput/BalSelectInput.stories.ts +++ b/src/components/_global/BalSelectInput/BalSelectInput.stories.ts @@ -10,17 +10,17 @@ export default { darkMode: false, name: 'input1', label: 'Withdrawal type', - size: 'md' + size: 'md', }, argTypes: { size: { type: { name: 'string', default: 'md' }, control: { type: 'select', - options: ['sm', 'md', 'lg'] - } - } - } + options: ['sm', 'md', 'lg'], + }, + }, + }, }; type Props = { @@ -40,12 +40,12 @@ const Template = (args: Props) => ({ v-model="args.modelValue" v-bind="args" /> -`) +`), }); export const Default = Template.bind({}); // @ts-ignore Default.args = { modelValue: 'Proportional', - options: ['Proportional', 'Custom'] + options: ['Proportional', 'Custom'], }; diff --git a/src/components/_global/BalSelectInput/BalSelectInput.vue b/src/components/_global/BalSelectInput/BalSelectInput.vue index 68a453935d..337c0c58a5 100644 --- a/src/components/_global/BalSelectInput/BalSelectInput.vue +++ b/src/components/_global/BalSelectInput/BalSelectInput.vue @@ -44,7 +44,7 @@ export default defineComponent({ emits: ['change', 'update:modelValue'], components: { - BalIcon + BalIcon, }, props: { @@ -58,12 +58,12 @@ export default defineComponent({ size: { type: String, default: 'md', - validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val) + validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val), }, rules: { type: Array as PropType, - default: () => [] - } + default: () => [], + }, }, setup(props, { emit }) { @@ -109,7 +109,7 @@ export default defineComponent({ return { [textSizeClasses.value]: true, [inputHeightClasses.value]: true, - 'mb-5': !props.noMargin + 'mb-5': !props.noMargin, }; }); @@ -119,7 +119,7 @@ export default defineComponent({ const labelClasses = computed(() => { return { - [labelSizeClasses.value]: true + [labelSizeClasses.value]: true, }; }); @@ -155,9 +155,9 @@ export default defineComponent({ textFor, validate, labelClasses, - onChange + onChange, }; - } + }, }); diff --git a/src/components/_global/BalStack/BalStack.spec.ts b/src/components/_global/BalStack/BalStack.spec.ts index 15ae4cf0f0..b20abeaea6 100644 --- a/src/components/_global/BalStack/BalStack.spec.ts +++ b/src/components/_global/BalStack/BalStack.spec.ts @@ -7,8 +7,8 @@ describe.only('BalStack', () => { it('should render items', () => { const { getByText } = render(BalStack, { slots: { - default: '
First
Second
Third
' - } + default: '
First
Second
Third
', + }, }); // check that elements are actually rendered as children @@ -20,11 +20,11 @@ describe.only('BalStack', () => { it('should render items horizontally when the horizontal prop is supplied', () => { const { getByText } = render(BalStack, { slots: { - default: '
First
Second
Third
' + default: '
First
Second
Third
', }, props: { - horizontal: true - } + horizontal: true, + }, }); // its fine to make this assumption here as we render the children without any wrappers @@ -35,11 +35,11 @@ describe.only('BalStack', () => { it('should render items verticlly if vertical prop is supplied', () => { const { getByText } = render(BalStack, { slots: { - default: '
First
Second
Third
' + default: '
First
Second
Third
', }, props: { - vertical: true - } + vertical: true, + }, }); // its fine to make this assumption here as we render the children without any wrappers @@ -50,11 +50,11 @@ describe.only('BalStack', () => { it('should render items with space between them', () => { const { getByText } = render(BalStack, { slots: { - default: '
First
Second
Third
' + default: '
First
Second
Third
', }, props: { - vertical: true - } + vertical: true, + }, }); // the default spacing unit (tailwind) is 4. So can be either mb-4 or mr-4 @@ -66,12 +66,12 @@ describe.only('BalStack', () => { it('should render items with a border between them if withBorder prop is supplied', () => { const { getByText } = render(BalStack, { slots: { - default: '
First
Second
Third
' + default: '
First
Second
Third
', }, props: { vertical: true, - withBorder: true - } + withBorder: true, + }, }); // the default spacing unit (tailwind) is 4. So can be either mb-4 or mr-4 diff --git a/src/components/_global/BalStack/BalStack.vue b/src/components/_global/BalStack/BalStack.vue index ef36b8e1bf..1e0e712b43 100644 --- a/src/components/_global/BalStack/BalStack.vue +++ b/src/components/_global/BalStack/BalStack.vue @@ -14,7 +14,7 @@ const SpacingMap: Record = { lg: 8, xl: 12, '2xl': 16, - none: 0 + none: 0, }; export default defineComponent({ @@ -29,26 +29,26 @@ export default defineComponent({ horizontal: { type: Boolean, default: () => false }, spacing: { type: String as PropType, - default: () => 'base' + default: () => 'base', }, /** * Show a hairline border after each stack element */ withBorder: { type: Boolean, - default: () => false + default: () => false, }, /** * Flex align prop */ align: { - type: String as PropType + type: String as PropType, }, /** * Flex justify prop */ justify: { - type: String as PropType + type: String as PropType, }, /** * Will cause children of the stack to occupy @@ -56,14 +56,14 @@ export default defineComponent({ */ expandChildren: { type: Boolean, - default: () => false - } + default: () => false, + }, }, setup(props, { slots, attrs }) { return { slotsWithContent: [], slots, - attrs + attrs, }; }, render() { @@ -97,20 +97,20 @@ export default defineComponent({ class: nestedChildIndex !== nonNullishChildren.length - 1 ? stackNodeClass - : null + : null, }); } ); return h( child, { - class: childIndex !== children.length - 1 ? stackNodeClass : null + class: childIndex !== children.length - 1 ? stackNodeClass : null, }, [styledNestedChildren] ); } return h(child, { - class: childIndex !== children.length - 1 ? stackNodeClass : null + class: childIndex !== children.length - 1 ? stackNodeClass : null, }); }); return h( @@ -129,12 +129,12 @@ export default defineComponent({ 'justify-center': this.justify === 'center', 'justify-start': this.justify === 'start', 'justify-end': this.justify === 'end', - 'justify-between': this.justify === 'between' - } - ] + 'justify-between': this.justify === 'between', + }, + ], }, [styledChildren] ); - } + }, }); diff --git a/src/components/_global/BalTable/BalTable.vue b/src/components/_global/BalTable/BalTable.vue index 29686acd06..91c3d82b58 100644 --- a/src/components/_global/BalTable/BalTable.vue +++ b/src/components/_global/BalTable/BalTable.vue @@ -77,12 +77,12 @@ const props = withDefaults(defineProps(), { link: () => null, initialState: () => ({ sortColumn: null, - sortDirection: null + sortDirection: null, }), skeletonClass: '', isLoading: false, isLoadingMore: false, - getTableRowClass: () => undefined + getTableRowClass: () => undefined, }); const stickyHeaderRef = ref(); @@ -223,7 +223,7 @@ watch(
@@ -249,7 +249,7 @@ watch( column.sortKey ? 'cursor-pointer' : '', currentSortColumn === column.id && currentSortDirection ? 'text-blue-600 hover:text-blue-500 focus:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:focus:text-blue-600 transition-colors' - : 'text-gray-800 hover:text-purple-600 focus:text-blue-500 dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 transition-colors' + : 'text-gray-800 hover:text-purple-600 focus:text-blue-500 dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 transition-colors', ]" :ref="setHeaderRef(columnIndex)" @click="handleSort(column.id)" @@ -270,7 +270,7 @@ watch( size="sm" v-if=" currentSortColumn === column.id && - currentSortDirection === 'asc' + currentSortDirection === 'asc' " class="ml-1 flex items-center" /> @@ -279,7 +279,7 @@ watch( size="sm" v-if=" currentSortColumn === column.id && - currentSortDirection === 'desc' + currentSortDirection === 'desc' " class="ml-1 flex items-center" /> @@ -318,7 +318,7 @@ watch( column.align === 'right' ? 'text-left' : 'text-right', getHorizontalStickyClass(columnIndex), isColumnStuck ? 'isSticky' : '', - 'bg-white dark:bg-gray-850 p-0 m-0 h-0' + 'bg-white dark:bg-gray-850 p-0 m-0 h-0', ]" > diff --git a/src/components/_global/BalTable/BalTableRow.vue b/src/components/_global/BalTable/BalTableRow.vue index 9f3307644e..d8acb4c7c7 100644 --- a/src/components/_global/BalTable/BalTableRow.vue +++ b/src/components/_global/BalTable/BalTableRow.vue @@ -39,8 +39,8 @@ function getHorizontalStickyClass(index: number) { 'bg-white z-10 row-bg group', { 'cursor-pointer': handleRowClick, - 'border-b dark:border-gray-700': pinned - } + 'border-b dark:border-gray-700': pinned, + }, ]" > @@ -66,7 +66,7 @@ function getHorizontalStickyClass(index: number) { compact([ 'px-6 py-4', column.align === 'right' ? 'text-right' : 'text-left', - column.cellClassName + column.cellClassName, ]) " > @@ -85,7 +85,7 @@ function getHorizontalStickyClass(index: number) { compact([ 'px-6 py-4', column.align === 'right' ? 'text-right' : 'text-left', - column.cellClassName + column.cellClassName, ]) " > diff --git a/src/components/_global/BalTable/TotalsRow.vue b/src/components/_global/BalTable/TotalsRow.vue index 3375163d1b..45b49acc80 100644 --- a/src/components/_global/BalTable/TotalsRow.vue +++ b/src/components/_global/BalTable/TotalsRow.vue @@ -33,12 +33,10 @@ function getHorizontalStickyClass(index: number) { :class="[ getHorizontalStickyClass(0), isColumnStuck ? 'isSticky' : '', - 'text-left p-6 bg-white dark:bg-gray-850 border-t dark:border-gray-900 align-top' + 'text-left p-6 bg-white dark:bg-gray-850 border-t dark:border-gray-900 align-top', ]" > - - Total - + Total diff --git a/src/components/_global/BalTabs/BalTabs.vue b/src/components/_global/BalTabs/BalTabs.vue index 54d1755fc0..408272aa8b 100644 --- a/src/components/_global/BalTabs/BalTabs.vue +++ b/src/components/_global/BalTabs/BalTabs.vue @@ -29,7 +29,7 @@ export default defineComponent({ props: { tabs: { type: Array as PropType, required: true }, modelValue: { type: String, default: '' }, - noPad: { type: Boolean, default: false } + noPad: { type: Boolean, default: false }, }, setup(props, { emit }) { @@ -47,18 +47,16 @@ export default defineComponent({ const containerClasses = computed(() => { return { - 'px-4': !props.noPad + 'px-4': !props.noPad, }; }); function stateClasses(tab: Tab): Record { return { - 'border-b-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:border-blue-500 font-semibold': isActiveTab( - tab - ), - 'hover:text-purple-600 dark:hover:text-yellow-500 dark:border-gray-700 transition-colors': !isActiveTab( - tab - ) + 'border-b-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:border-blue-500 font-semibold': + isActiveTab(tab), + 'hover:text-purple-600 dark:hover:text-yellow-500 dark:border-gray-700 transition-colors': + !isActiveTab(tab), }; } @@ -66,9 +64,9 @@ export default defineComponent({ activeTab, onClick, containerClasses, - stateClasses + stateClasses, }; - } + }, }); diff --git a/src/components/_global/BalTextInput/BalTextInput.stories.ts b/src/components/_global/BalTextInput/BalTextInput.stories.ts index 190554396d..1e695a6582 100644 --- a/src/components/_global/BalTextInput/BalTextInput.stories.ts +++ b/src/components/_global/BalTextInput/BalTextInput.stories.ts @@ -7,24 +7,24 @@ export default { args: { darkMode: false, inputAlignRight: false, - decimalLimit: 18 + decimalLimit: 18, }, argTypes: { size: { type: { name: 'string', default: 'md' }, control: { type: 'select', - options: ['sm', 'md', 'lg'] - } + options: ['sm', 'md', 'lg'], + }, }, type: { type: { name: 'string', default: 'text' }, control: { type: 'select', - options: ['text', 'number', 'password', 'email', 'date'] - } - } - } + options: ['text', 'number', 'password', 'email', 'date'], + }, + }, + }, }; const Template = args => ({ @@ -37,7 +37,7 @@ const Template = args => ({
-`) +`), }); export function isRequired() { @@ -52,5 +52,5 @@ Default.args = { name: 'input-1', label: 'A label', type: 'number', - rules: [isRequired()] + rules: [isRequired()], }; diff --git a/src/components/_global/BalTextInput/BalTextInput.vue b/src/components/_global/BalTextInput/BalTextInput.vue index 57e9e08bb4..be2c1ff031 100644 --- a/src/components/_global/BalTextInput/BalTextInput.vue +++ b/src/components/_global/BalTextInput/BalTextInput.vue @@ -1,7 +1,7 @@ @@ -60,7 +60,7 @@ const props = withDefaults(defineProps(), { noRadius: false, noShadow: false, noBorder: false, - autoFocus: false + autoFocus: false, }); const emit = defineEmits<{ @@ -92,7 +92,7 @@ const { onClick, onFocus, onMouseOver, - onMouseLeave + onMouseLeave, } = useInputEvents(props, emit, validate); const { parentClasses, @@ -103,7 +103,7 @@ const { inputClasses, prependClasses, appendClasses, - borderRadiusClasses + borderRadiusClasses, } = useInputStyles(props, isInvalid, isActive, isHover, attrs); /** diff --git a/src/components/_global/BalTextInput/composables/useInputEvents.ts b/src/components/_global/BalTextInput/composables/useInputEvents.ts index 10e9c71105..f5c66a7eb3 100644 --- a/src/components/_global/BalTextInput/composables/useInputEvents.ts +++ b/src/components/_global/BalTextInput/composables/useInputEvents.ts @@ -78,6 +78,6 @@ export default function useInputEvents(props, emit, validate) { onClick, onFocus, onMouseOver, - onMouseLeave + onMouseLeave, }; } diff --git a/src/components/_global/BalTextInput/composables/useInputStyles.ts b/src/components/_global/BalTextInput/composables/useInputStyles.ts index 38908486f1..4b19f75ace 100644 --- a/src/components/_global/BalTextInput/composables/useInputStyles.ts +++ b/src/components/_global/BalTextInput/composables/useInputStyles.ts @@ -61,7 +61,7 @@ export default function useInputStyles( const parentClasses = computed(() => ({ [attrs.class]: true, - 'shadow-lg rounded-lg': !props.noShadow + 'shadow-lg rounded-lg': !props.noShadow, })); const inputContainerClasses = computed(() => ({ @@ -72,19 +72,19 @@ export default function useInputStyles( 'border-blue-300 dark:border-blue-400': isActive.value && !isInvalid.value, 'hover:border-gray-300 dark:hover:border-gray-700': isHover.value && !isActive.value, - 'shadow-inner': !props.noShadow + 'shadow-inner': !props.noShadow, })); const inputGroupClasses = computed(() => ({ - [intPaddingClass()]: true + [intPaddingClass()]: true, })); const headerClasses = computed(() => ({ - [intPaddingClass()]: true + [intPaddingClass()]: true, })); const footerClasses = computed(() => ({ - [intPaddingClass()]: true + [intPaddingClass()]: true, })); const inputClasses = computed(() => ({ @@ -92,19 +92,19 @@ export default function useInputStyles( [inputTextSize()]: true, 'text-right': props.inputAlignRight, 'font-numeric': props.type === 'number', - 'text-red-500': isInvalid.value + 'text-red-500': isInvalid.value, })); const prependClasses = computed(() => ({ - [inputHeightClass()]: true + [inputHeightClass()]: true, })); const appendClasses = computed(() => ({ - [inputHeightClass()]: true + [inputHeightClass()]: true, })); const borderRadiusClasses = computed(() => ({ - 'rounded-lg': !props.noRadius + 'rounded-lg': !props.noRadius, })); return { @@ -116,6 +116,6 @@ export default function useInputStyles( inputClasses, prependClasses, appendClasses, - borderRadiusClasses + borderRadiusClasses, }; } diff --git a/src/components/_global/BalTextInput/composables/useInputValidation.ts b/src/components/_global/BalTextInput/composables/useInputValidation.ts index 668693c5b7..48444ed3ea 100644 --- a/src/components/_global/BalTextInput/composables/useInputValidation.ts +++ b/src/components/_global/BalTextInput/composables/useInputValidation.ts @@ -38,6 +38,6 @@ export default function useInputValidation(props, emit) { return { errors, isInvalid, - validate + validate, }; } diff --git a/src/components/_global/BalToggle/BalToggle.vue b/src/components/_global/BalToggle/BalToggle.vue index 4d30c221ec..1430f78c77 100644 --- a/src/components/_global/BalToggle/BalToggle.vue +++ b/src/components/_global/BalToggle/BalToggle.vue @@ -10,7 +10,7 @@ />
-
@@ -290,7 +288,7 @@ async function onChangeFeeController(val: string) { validateOn="blur" :rules="[ isRequired($t('A controller address')), - isValidAddress() + isValidAddress(), ]" name="customAddress" /> diff --git a/src/components/cards/CreatePool/PoolSummary.vue b/src/components/cards/CreatePool/PoolSummary.vue index 51540b581c..754d8316fe 100644 --- a/src/components/cards/CreatePool/PoolSummary.vue +++ b/src/components/cards/CreatePool/PoolSummary.vue @@ -19,7 +19,7 @@ const manualColorMap = { ETH: '#627EEA', WETH: '#627EEA', WBTC: '#F7931A', - BAL: '#00265A' + BAL: '#00265A', }; /** STATE */ @@ -35,7 +35,7 @@ const { updateTokenColors, totalLiquidity, tokensList, - hasRestoredFromSavedState + hasRestoredFromSavedState, } = usePoolCreation(); const { upToLargeBreakpoint } = useBreakpoints(); const { darkMode } = useDarkMode(); @@ -53,7 +53,7 @@ const chartConfig = computed(() => { tooltip: { show: true, borderRadius: 50, - confine: true + confine: true, }, legend: { show: true, @@ -67,8 +67,8 @@ const chartConfig = computed(() => { textStyle: { color: darkMode.value ? tailwind.theme.colors.gray['300'] - : tailwind.theme.colors.gray['850'] - } + : tailwind.theme.colors.gray['850'], + }, }, series: [ { @@ -83,14 +83,14 @@ const chartConfig = computed(() => { : '#fff', borderWidth: 5, borderCap: 'butt', - borderJoin: 'round' + borderJoin: 'round', }, label: { show: false, - position: 'center' + position: 'center', }, labelLine: { - show: false + show: false, }, top: -20, colors: colors.value, @@ -106,7 +106,7 @@ const chartConfig = computed(() => { value: t.weight, tooltip: { show: false, - borderWidth: '0' + borderWidth: '0', }, emphasis: { label: { @@ -115,25 +115,25 @@ const chartConfig = computed(() => { fontSize: '1rem', fontWeight: 'bold', backgroundColor: { - image: tokenLogoURI + image: tokenLogoURI, }, width: 48, height: 48, borderRadius: 48, - overflow: 'hidden' - } + overflow: 'hidden', + }, }, itemStyle: { color: t.tokenAddress === '' ? tailwind.theme.colors.gray[`${i + 1}00`] - : colors.value[i] - } + : colors.value[i], + }, }; - }) - ] - } - ] + }), + ], + }, + ], }; }); @@ -162,7 +162,7 @@ async function calculateColors() { const tokenLogoURI = resolve(token.logoURI || ''); const color = await prominent(tokenLogoURI, { amount: 2, - format: 'hex' + format: 'hex', }); if (manualColorMap[token.symbol]) { return manualColorMap[token.symbol]; diff --git a/src/components/cards/CreatePool/PreviewPool.vue b/src/components/cards/CreatePool/PreviewPool.vue index 02fe5a7eed..635420a74c 100644 --- a/src/components/cards/CreatePool/PreviewPool.vue +++ b/src/components/cards/CreatePool/PreviewPool.vue @@ -45,16 +45,11 @@ const { sortSeedTokens, getScaledAmounts, saveState, - getPoolSymbol + getPoolSymbol, } = usePoolCreation(); -const { - getToken, - priceFor, - nativeAsset, - wrappedNativeAsset, - balanceFor -} = useTokens(); +const { getToken, priceFor, nativeAsset, wrappedNativeAsset, balanceFor } = + useTokens(); const { fNum2 } = useNumbers(); const { t } = useI18n(); const { userNetworkConfig, account } = useWeb3(); @@ -169,7 +164,7 @@ function getSwapFeeManager() { function getInitialWeightHighlightClass(tokenAddress: string) { return { 'text-secondary': initialWeights[tokenAddress]?.gte(0.01), - 'text-orange-500': initialWeights[tokenAddress]?.lt(0.01) + 'text-orange-500': initialWeights[tokenAddress]?.lt(0.01), }; } @@ -226,7 +221,7 @@ function getInitialWeightHighlightClass(tokenAddress: string) { {{ initialWeightLabel }}: diff --git a/src/components/cards/CreatePool/SimilarPools.vue b/src/components/cards/CreatePool/SimilarPools.vue index e71723468c..e0a8cc9750 100644 --- a/src/components/cards/CreatePool/SimilarPools.vue +++ b/src/components/cards/CreatePool/SimilarPools.vue @@ -19,7 +19,7 @@ const { setStep, proceed, resetPoolCreationState, - goBack + goBack, } = usePoolCreation(); const { fNum2 } = useNumbers(); const { t } = useI18n(); @@ -79,7 +79,7 @@ function cancel() { - {{ + {{ $t('poolValue') }} {{ diff --git a/src/components/cards/CreatePool/TokenPrices.vue b/src/components/cards/CreatePool/TokenPrices.vue index a221547fd0..dc2b53a76b 100644 --- a/src/components/cards/CreatePool/TokenPrices.vue +++ b/src/components/cards/CreatePool/TokenPrices.vue @@ -83,8 +83,8 @@ const hasUnknownPrice = computed(() => 'mt-1', { 'text-red-500 hover:text-red-700': hasUnknownPrice, - 'hover:text-blue-500': !hasUnknownPrice - } + 'hover:text-blue-500': !hasUnknownPrice, + }, ]" v-for="token in unknownTokens" :key="`tokenPrice-unknown-${token}`" @@ -93,7 +93,7 @@ const hasUnknownPrice = computed(() => {{ getToken(token)?.symbol }} diff --git a/src/components/cards/CreatePool/WalletInitialLiquidity.vue b/src/components/cards/CreatePool/WalletInitialLiquidity.vue index 43e74f2e56..1ce5dad60b 100644 --- a/src/components/cards/CreatePool/WalletInitialLiquidity.vue +++ b/src/components/cards/CreatePool/WalletInitialLiquidity.vue @@ -11,12 +11,8 @@ import useTokens from '@/composables/useTokens'; * COMPOSABLES */ const { tokens } = useTokens(); -const { - seedTokens, - maxInitialLiquidity, - tokenColors, - getOptimisedLiquidity -} = usePoolCreation(); +const { seedTokens, maxInitialLiquidity, tokenColors, getOptimisedLiquidity } = + usePoolCreation(); const { fNum2 } = useNumbers(); const { upToLargeBreakpoint } = useBreakpoints(); @@ -35,7 +31,7 @@ const unallocatedTokenWeight = computed(() => const totalsClass = computed(() => ({ 'text-gray-700 ': maxInitialLiquidity.value >= 20000, - 'text-orange-500': maxInitialLiquidity.value < 20000 + 'text-orange-500': maxInitialLiquidity.value < 20000, })); const optimisedLiquidity = computed(() => getOptimisedLiquidity()); @@ -67,7 +63,7 @@ const optimisedLiquidity = computed(() => getOptimisedLiquidity()); v-for="(token, i) in allocatedTokenWeights" :key="token.tokenAddress" > -
+
getOptimisedLiquidity());
{{ fNum2(maxInitialLiquidity, FNumFormats.fiat) }} diff --git a/src/components/cards/CreatePool/WalletPoolTokens.vue b/src/components/cards/CreatePool/WalletPoolTokens.vue index e003425eab..9a7c18dae7 100644 --- a/src/components/cards/CreatePool/WalletPoolTokens.vue +++ b/src/components/cards/CreatePool/WalletPoolTokens.vue @@ -11,14 +11,14 @@ import useTokens from '@/composables/useTokens'; * STATIC */ const initialAnimateProps = { - opacity: 0 + opacity: 0, }; const entryAnimateProps = { - opacity: 1 + opacity: 1, }; const exitAnimateProps = { - opacity: 0 + opacity: 0, }; /** @@ -29,7 +29,7 @@ const { nativeAsset, wrappedNativeAsset, balanceFor, - priceFor + priceFor, } = useTokens(); const { tokensList } = usePoolCreation(); const { fNum2 } = useNumbers(); diff --git a/src/components/cards/MyPoolBalancesCard/MyPoolBalancesCard.vue b/src/components/cards/MyPoolBalancesCard/MyPoolBalancesCard.vue index 27e564df7a..7839bd29af 100644 --- a/src/components/cards/MyPoolBalancesCard/MyPoolBalancesCard.vue +++ b/src/components/cards/MyPoolBalancesCard/MyPoolBalancesCard.vue @@ -23,7 +23,7 @@ type Props = { * PROPS & EMITS */ const props = withDefaults(defineProps(), { - hideHeader: false + hideHeader: false, }); /** @@ -64,9 +64,7 @@ const propTokenAmounts = computed((): string[] => { const priceRate = props.pool.onchain.linearPools[address].priceRate; - return bnum(receive[i]) - .times(priceRate) - .toString(); + return bnum(receive[i]).times(priceRate).toString(); }); } @@ -85,11 +83,7 @@ const tokenAddresses = computed((): string[] => { const fiatTotal = computed(() => { const fiatValue = tokenAddresses.value .map((address, i) => toFiat(propTokenAmounts.value[i], address)) - .reduce((total, value) => - bnum(total) - .plus(value) - .toString() - ); + .reduce((total, value) => bnum(total).plus(value).toString()); return fNum2(fiatValue, FNumFormats.fiat); }); diff --git a/src/components/cards/MyPoolBalancesCard/components/AssetRow.vue b/src/components/cards/MyPoolBalancesCard/components/AssetRow.vue index 07f3941119..0af29f7f8e 100644 --- a/src/components/cards/MyPoolBalancesCard/components/AssetRow.vue +++ b/src/components/cards/MyPoolBalancesCard/components/AssetRow.vue @@ -42,7 +42,7 @@ const fiatLabel = computed(() => { {{ token.symbol }} - + {{ token.name }}
diff --git a/src/components/cards/MyWallet/MyWallet.vue b/src/components/cards/MyWallet/MyWallet.vue index 6933f5328c..953c7bcae8 100644 --- a/src/components/cards/MyWallet/MyWallet.vue +++ b/src/components/cards/MyWallet/MyWallet.vue @@ -10,11 +10,8 @@ import useTokens from '@/composables/useTokens'; import { configService } from '@/services/config/config.service'; import useWeb3 from '@/services/web3/useWeb3'; -const { - appNetworkConfig, - isWalletReady, - startConnectWithInjectedProvider -} = useWeb3(); +const { appNetworkConfig, isWalletReady, startConnectWithInjectedProvider } = + useWeb3(); const { upToLargeBreakpoint } = useBreakpoints(); const { setTokenInAddress } = useTradeState(); const { @@ -22,7 +19,7 @@ const { nativeAsset, balanceFor, balances, - dynamicDataLoading: isLoadingBalances + dynamicDataLoading: isLoadingBalances, } = useTokens(); const nativeCurrency = configService.network.nativeAsset.symbol; const networkName = configService.network.name; @@ -90,9 +87,7 @@ const tokensWithBalance = computed(() => { " icon-size="sm" :icon-name="'alert-triangle'" - :icon-class=" - 'text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors' - " + :icon-class="'text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors'" width="72" class="relative top-0.5" /> diff --git a/src/components/cards/MyWalletTokensCard/MyWalletTokensCard.vue b/src/components/cards/MyWalletTokensCard/MyWalletTokensCard.vue index 2e087e4bb3..7856133b4d 100644 --- a/src/components/cards/MyWalletTokensCard/MyWalletTokensCard.vue +++ b/src/components/cards/MyWalletTokensCard/MyWalletTokensCard.vue @@ -25,7 +25,7 @@ type Props = { * PROPS & EMITS */ const props = withDefaults(defineProps(), { - hideHeader: false + hideHeader: false, }); const emit = defineEmits<{ @@ -86,11 +86,7 @@ const fiatTotal = computed(() => { const tokenBalance = balanceFor(address); return toFiat(tokenBalance, address); }) - .reduce((total, value) => - bnum(total) - .plus(value) - .toString() - ); + .reduce((total, value) => bnum(total).plus(value).toString()); return fNum2(fiatValue, FNumFormats.fiat); }); diff --git a/src/components/cards/PairPriceGraph/PairPriceGraph.vue b/src/components/cards/PairPriceGraph/PairPriceGraph.vue index 70eee61051..49b91d216d 100644 --- a/src/components/cards/PairPriceGraph/PairPriceGraph.vue +++ b/src/components/cards/PairPriceGraph/PairPriceGraph.vue @@ -7,7 +7,7 @@ import { maxBy, minBy, pickBy, - toPairs + toPairs, } from 'lodash'; import { computed, reactive, ref } from 'vue'; import { useI18n } from 'vue-i18n'; @@ -64,7 +64,7 @@ async function getPairPriceData( const [inputAssetData, outputAssetData] = await Promise.all([ getInputAssetData, - getOutputAssetData + getOutputAssetData, ]); const calculatedPricing = mapValues(inputAssetData, (value, timestamp) => { @@ -72,9 +72,9 @@ async function getPairPriceData( return (1 / value[0]) * outputAssetData[timestamp][0]; }); - const calculatedPricingNoNulls = pickBy(calculatedPricing) as Dictionary< - number - >; + const calculatedPricingNoNulls = pickBy( + calculatedPricing + ) as Dictionary; const formatTimestamps = mapKeys( calculatedPricingNoNulls, @@ -88,24 +88,24 @@ async function getPairPriceData( const chartTimespans = [ { option: '1d', - value: 1 + value: 1, }, { option: '1w', - value: 7 + value: 7, }, { option: '1m', - value: 30 + value: 30, }, { option: '1y', - value: 365 + value: 365, }, { option: 'All', - value: 4000 - } + value: 4000, + }, ]; type Props = { @@ -149,7 +149,7 @@ const dataMax = computed(() => { const { isLoading: isLoadingPriceData, data: priceData, - error: failedToLoadPriceData + error: failedToLoadPriceData, } = useQuery( QUERY_KEYS.Tokens.PairPriceData( tokenInAddress, @@ -173,7 +173,7 @@ const { retry: false, // when refetch on window focus in enabled, it causes a flash // in the loading state of the card which is jarring. disabling it - refetchOnWindowFocus: false + refetchOnWindowFocus: false, }) ); @@ -182,7 +182,7 @@ const toggle = () => { }; const equivalentTokenPairs = [ - [appNetworkConfig.addresses.weth, appNetworkConfig.nativeAsset.address] + [appNetworkConfig.addresses.weth, appNetworkConfig.nativeAsset.address], ]; const allChartValuesEqual = computed(() => @@ -198,8 +198,8 @@ const chartData = computed(() => { return [ { name: `${outputSym.value}/${inputSym.value}`, - values: priceData.value || [] - } + values: priceData.value || [], + }, ]; }); @@ -235,7 +235,7 @@ const chartGrid = computed(() => { right: '0', top: '10%', bottom: '15%', - containLabel: false + containLabel: false, }; }); @@ -246,15 +246,15 @@ const chartGrid = computed(() => { '', { 'h-40 lg:h-56': !isModal, - 'h-full lg:h-full': isModal - } + 'h-full lg:h-full': isModal, + }, ]" > { 'flex flex-row lg:flex-col', { 'flex-row': !isModal, - 'flex-col': isModal - } + 'flex-col': isModal, + }, ]" :show-tooltip="!upToLargeBreakpoint || isModal" chart-type="line" @@ -339,8 +339,8 @@ const chartGrid = computed(() => { :class="[ 'w-full flex justify-between mt-6', { - 'flex-col': isModal - } + 'flex-col': isModal, + }, ]" v-if="isModal" > @@ -361,8 +361,8 @@ const chartGrid = computed(() => { isNegativeTrend && activeTimespan.value === timespan.value, 'hover:bg-red-200': isNegativeTrend, - 'hover:bg-green-200': !isNegativeTrend - } + 'hover:bg-green-200': !isNegativeTrend, + }, ]" > {{ timespan.option }} diff --git a/src/components/cards/StatCard/StatCard.spec.ts b/src/components/cards/StatCard/StatCard.spec.ts index 60fa42a056..03383c8d47 100644 --- a/src/components/cards/StatCard/StatCard.spec.ts +++ b/src/components/cards/StatCard/StatCard.spec.ts @@ -12,8 +12,8 @@ describe.only('StatCard', () => { const { getByText } = render(StatCard, { props: { label: 'Prop label', - value: '$10,000' - } + value: '$10,000', + }, }); // check that elements are actually rendered as children @@ -25,8 +25,8 @@ describe.only('StatCard', () => { const { getByText } = render(StatCard, { slots: { label: 'Slot label', - value: '$100,000' - } + value: '$100,000', + }, }); expect(getByText('Slot label')).toBeVisible(); diff --git a/src/components/cards/SuccessOverlay.vue b/src/components/cards/SuccessOverlay.vue index 2eaaf16959..cc221fa317 100644 --- a/src/components/cards/SuccessOverlay.vue +++ b/src/components/cards/SuccessOverlay.vue @@ -42,7 +42,7 @@ export default defineComponent({ title: { type: String, required: true }, description: { type: String, required: true }, closeLabel: { type: String, required: true }, - explorerLink: { type: String, required: true } - } + explorerLink: { type: String, required: true }, + }, }); diff --git a/src/components/cards/TradeCard/TradeCard.vue b/src/components/cards/TradeCard/TradeCard.vue index 011c3a1980..3ed7f9513e 100644 --- a/src/components/cards/TradeCard/TradeCard.vue +++ b/src/components/cards/TradeCard/TradeCard.vue @@ -88,13 +88,13 @@ import TradePair from '@/components/cards/TradeCard/TradePair.vue'; import TradeRoute from '@/components/cards/TradeCard/TradeRoute.vue'; import TradePreviewModal from '@/components/modals/TradePreviewModal.vue'; import TradeSettingsPopover, { - TradeSettingsContext + TradeSettingsContext, } from '@/components/popovers/TradeSettingsPopover.vue'; import useSor from '@/composables/trade/useSor'; import useTokenApproval from '@/composables/trade/useTokenApproval'; import { useTradeState } from '@/composables/trade/useTradeState'; import useValidation, { - TradeValidation + TradeValidation, } from '@/composables/trade/useValidation'; import useBreakpoints from '@/composables/useBreakpoints'; import useDarkMode from '@/composables/useDarkMode'; @@ -110,7 +110,7 @@ export default defineComponent({ TradePair, TradePreviewModal, TradeRoute, - TradeSettingsPopover + TradeSettingsPopover, }, setup() { @@ -130,7 +130,7 @@ export default defineComponent({ tokenInAmount, tokenOutAmount, setTokenInAddress, - setTokenOutAddress + setTokenOutAddress, } = useTradeState(); const { slippage } = useUserSettings(); @@ -190,7 +190,7 @@ export default defineComponent({ latestTxHash, pools, fetchPools, - poolsLoading + poolsLoading, } = useSor({ exactIn, tokenInAddressInput: tokenInAddress, @@ -200,7 +200,7 @@ export default defineComponent({ wrapType, tokenIn, tokenOut, - slippageBufferRate + slippageBufferRate, }); const { errorMessage } = useValidation( tokenInAddress, @@ -220,14 +220,14 @@ export default defineComponent({ return { header: t('highPriceImpact'), body: t('highPriceImpactDetailed'), - label: t('accept') + label: t('accept'), }; } switch (errorMessage.value) { case TradeValidation.NO_LIQUIDITY: return { header: t('insufficientLiquidity'), - body: t('insufficientLiquidityDetailed') + body: t('insufficientLiquidityDetailed'), }; default: return undefined; @@ -310,8 +310,8 @@ export default defineComponent({ bp, darkMode, tradeCardShadow, - explorer: explorerLinks + explorer: explorerLinks, }; - } + }, }); diff --git a/src/components/cards/TradeCard/TradePair.vue b/src/components/cards/TradeCard/TradePair.vue index 1af101d09e..b29eb87c81 100644 --- a/src/components/cards/TradeCard/TradePair.vue +++ b/src/components/cards/TradeCard/TradePair.vue @@ -80,15 +80,11 @@ const rateLabel = computed(() => { let rate, inSymbol, outSymbol; if (isInRate.value) { - rate = bnum(_tokenOutAmount.value) - .div(_tokenInAmount.value) - .toString(); + rate = bnum(_tokenOutAmount.value).div(_tokenInAmount.value).toString(); inSymbol = tokenIn.value.symbol; outSymbol = tokenOut.value.symbol; } else { - rate = bnum(_tokenInAmount.value) - .div(_tokenOutAmount.value) - .toString(); + rate = bnum(_tokenInAmount.value).div(_tokenOutAmount.value).toString(); inSymbol = tokenOut.value.symbol; outSymbol = tokenIn.value.symbol; } diff --git a/src/components/cards/TradeCard/TradePairToggle.vue b/src/components/cards/TradeCard/TradePairToggle.vue index 095453b780..dc444001db 100644 --- a/src/components/cards/TradeCard/TradePairToggle.vue +++ b/src/components/cards/TradeCard/TradePairToggle.vue @@ -40,9 +40,9 @@ export default defineComponent({ return { isRotated, - toggle + toggle, }; - } + }, });