Adds prettier to fix all identation and other linting issues

ProjectOpenSea · Mar 26, 2020 · 96d9c8d · 96d9c8d
1 parent 782b81b
commit 96d9c8d
Show file tree

Hide file tree

Showing 15 changed files with 1,022 additions and 859 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,2 +1,5 @@
 semi: false
-useTabs: false
+useTabs: false
+tabWidth: 2
+singleQuote: true
+bracketSpacing: true
diff --git a/dist/nft-card.min.js b/dist/nft-card.min.js
diff --git a/dist/nft-card.min.js.map b/dist/nft-card.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "dev:demo": "webpack-dev-server --config ./webpack.dev.config.js",
     "build": "webpack --config ./webpack.config.js",
     "lint": "tslint --project . 'src/**/*.ts'",
-    "lint:fix": "tslint --project . 'src/**/*.ts' --fix"
+    "lint:fix": "tslint --project . 'src/**/*.ts' --fix",
+    "tslint-check": "tslint-config-prettier-check ./tslint.json"
   },
   "repository": {
     "type": "git",
@@ -43,11 +44,13 @@
     "@webcomponents/webcomponentsjs": "^2.4.2",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^4.2.3",
-    "prettier": "^1.19.1",
+    "prettier": "1.19.1",
     "style-loader": "^1.1.3",
     "ts-loader": "^6.2.1",
     "tslint": "^6.1.0",
+    "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0",
+    "tslint-plugin-prettier": "^2.3.0",
     "typescript": "^3.8.3",
     "web3-typescript-typings": "^0.10.2",
     "webpack": "^4.42.0",

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,13 +1,14 @@
 import { ButtonType } from './types'
 
-export const NO_WEB3_ERROR: string = 'You need an Ethereum wallet to interact ' +
-    'with this marketplace. Unlock your wallet, get MetaMask.io or ' +
-    'Portis on desktop, or get Trust Wallet or Coinbase Wallet on mobile.'
+export const NO_WEB3_ERROR: string =
+  'You need an Ethereum wallet to interact ' +
+  'with this marketplace. Unlock your wallet, get MetaMask.io or ' +
+  'Portis on desktop, or get Trust Wallet or Coinbase Wallet on mobile.'
 
 export const BTN_TEXT: { [index: string]: string } = {
-    [ButtonType.Manage]: 'manage this item ❯',
-    [ButtonType.Buy]: 'buy this item ❯',
-    [ButtonType.View]: 'view on openSea ❯',
-    [ButtonType.SwitchNetwork]: 'switch to ',
-    [ButtonType.Unlock]: 'buy this item ❯'
+  [ButtonType.Manage]: 'manage this item ❯',
+  [ButtonType.Buy]: 'buy this item ❯',
+  [ButtonType.View]: 'view on openSea ❯',
+  [ButtonType.SwitchNetwork]: 'switch to ',
+  [ButtonType.Unlock]: 'buy this item ❯'
 }
diff --git a/src/info-button.ts b/src/info-button.ts
@@ -2,42 +2,40 @@ import { css, customElement, html, LitElement } from 'lit-element'
 
 @customElement('info-button')
 export class InfoButtonTemplate extends LitElement {
+  static get styles() {
+    return css`
+      .asset-action-info {
+        cursor: pointer;
+        transition: 200ms;
+        opacity: 0.4;
+        backface-visibility: hidden;
+      }
+      .asset-action-info #info-icon:hover {
+        opacity: 1;
+      }
+    `
+  }
 
-    static get styles() {
-        return css`
-            .asset-action-info {
-                cursor: pointer;
-                transition: 200ms;
-                opacity: 0.4;
-                backface-visibility: hidden;
-            }
-            .asset-action-info #info-icon:hover {
-                opacity: 1;
-            }
-        `
-    }
-
-    public render() {
-        return (html`
-        <div class="asset-action-info">
-          <svg
-            id="info-btn"
-            @click="${
-            (_e: any) => this.dispatchEvent(new CustomEvent('flip-event'))
-            }"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-          >
-            <path d="M0 0h24v24H0z" fill="transparent" />
-            <path
-              id="info-icon"
-              fill="rgb(82, 87, 89)"
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-            />
-          </svg>
-        </div>
-    `)
-    }
+  public render() {
+    return html`
+      <div class="asset-action-info">
+        <svg
+          id="info-btn"
+          @click="${(_e: any) =>
+            this.dispatchEvent(new CustomEvent('flip-event'))}"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <path d="M0 0h24v24H0z" fill="transparent" />
+          <path
+            id="info-icon"
+            fill="rgb(82, 87, 89)"
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+          />
+        </svg>
+      </div>
+    `
+  }
 }
diff --git a/src/loader.ts b/src/loader.ts
@@ -2,86 +2,87 @@ import { css, customElement, html, LitElement } from 'lit-element'
 
 @customElement('loader-element')
 export class Loader extends LitElement {
-    static get styles() {
-        return css`
-           @keyframes pulse-opacity {
-                0% {
-                    opacity: 1;
-                }
-                16.666% {
-                    opacity: 1;
-                }
-                100% {
-                    opacity: 0;
-                }
-            }
-            .Loading {
-                transform: translate(-50%,-50%) rotate(30deg);
-                height: 81px;
-                width: 90px;
-                position: absolute;
-                left: 50%;
-                top: 50%;
-            }
-            .Loading .tri.upwards {
-                border-top: 0;
-                border-bottom: 27px solid #fff;
-            }
-            .Loading .tri:first-child {
-                left: 15px;
-                border-bottom-color: #00c9a4;
-            }
-            .Loading .tri:nth-child(2) {
-                left: 30px;
-                animation-delay: .1s;
-                border-top-color: #00ffd0;
-            }
-            .Loading .tri:nth-child(3) {
-                left: 45px;
-                animation-delay: .2s;
-                border-bottom-color: #00d7d1;
-            }
-            .Loading .tri:nth-child(4) {
-                left: 45px;
-                top: 27px;
-                animation-delay: .3s;
-                border-top-color: #0095be;
-            }
-            .Loading .tri:nth-child(5) {
-                top: 27px;
-                left: 30px;
-                animation-delay: .4s;
-                border-bottom-color: #007296;
-            }
-             .Loading .tri:nth-child(6) {
-                top: 27px;
-                left: 15px;
-                animation-delay: .5s;
-                border-top-color: #1c1f27;
-            }
-            .Loading .tri, .Loading .tri.upwards {
-                border-left: 15px solid transparent;
-                border-right: 15px solid transparent;
-            }
-            .Loading .tri {
-                position: absolute;
-                opacity: 0;
-                animation: pulse-opacity .6s ease-in infinite;
-                border-top: 27px solid #fff;
-                border-bottom: 0;
-            }
-        `
-    }
-    public render() {
-        return (html`
-            <div class="Loading">
-                <div class="tri upwards"></div>
-                <div class="tri"></div>
-                <div class="tri upwards"></div>
-                <div class="tri"></div>
-                <div class="tri upwards"></div>
-                <div class="tri"></div>
-            </div>`
-        )
-    }
+  static get styles() {
+    return css`
+      @keyframes pulse-opacity {
+        0% {
+          opacity: 1;
+        }
+        16.666% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+      .Loading {
+        transform: translate(-50%, -50%) rotate(30deg);
+        height: 81px;
+        width: 90px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+      }
+      .Loading .tri.upwards {
+        border-top: 0;
+        border-bottom: 27px solid #fff;
+      }
+      .Loading .tri:first-child {
+        left: 15px;
+        border-bottom-color: #00c9a4;
+      }
+      .Loading .tri:nth-child(2) {
+        left: 30px;
+        animation-delay: 0.1s;
+        border-top-color: #00ffd0;
+      }
+      .Loading .tri:nth-child(3) {
+        left: 45px;
+        animation-delay: 0.2s;
+        border-bottom-color: #00d7d1;
+      }
+      .Loading .tri:nth-child(4) {
+        left: 45px;
+        top: 27px;
+        animation-delay: 0.3s;
+        border-top-color: #0095be;
+      }
+      .Loading .tri:nth-child(5) {
+        top: 27px;
+        left: 30px;
+        animation-delay: 0.4s;
+        border-bottom-color: #007296;
+      }
+      .Loading .tri:nth-child(6) {
+        top: 27px;
+        left: 15px;
+        animation-delay: 0.5s;
+        border-top-color: #1c1f27;
+      }
+      .Loading .tri,
+      .Loading .tri.upwards {
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+      }
+      .Loading .tri {
+        position: absolute;
+        opacity: 0;
+        animation: pulse-opacity 0.6s ease-in infinite;
+        border-top: 27px solid #fff;
+        border-bottom: 0;
+      }
+    `
+  }
+  public render() {
+    return html`
+      <div class="Loading">
+        <div class="tri upwards"></div>
+        <div class="tri"></div>
+        <div class="tri upwards"></div>
+        <div class="tri"></div>
+        <div class="tri upwards"></div>
+        <div class="tri"></div>
+      </div>
+    `
+  }
 }