[DDW 944][DEBT] Remove SASS ts-ignore (#2870)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: renanvalentin

.github/workflows/chromatic.yml

@@ -28,10 +28,12 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           exitZeroOnChanges: true
+          buildScriptName: 'storybook:build:chromatic'
       - name: Publish to Chromatic and auto accept changes
         if: github.ref == 'refs/heads/develop'
         uses: chromaui/action@v1
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           autoAcceptChanges: true
+          buildScriptName: 'storybook:build:chromatic'

.gitignore

@@ -119,3 +119,6 @@ Debug
 /cardano-cli
 /cardano-wallet
 .vscode
+
+# Typescript
+*.scss.d.ts

CHANGELOG.md

@@ -18,6 +18,9 @@
 
 - Fixed Daedalus menu in Storybook used for theme and language selection ([PR 2886](https://github.com/input-output-hk/daedalus/pull/2886))
 
+### Chores
+- Removed SASS ts-lint ignore comments ([PR 2870](https://github.com/input-output-hk/daedalus/pull/2870))
+
 ## 4.9.0-FC1
 
 ### Features

gulpfile.js

@@ -171,6 +171,8 @@ gulp.task(
   )
 );
 
+gulp.task('typedef:sass', shell.task('yarn typedef:sass --watch'));
+
 gulp.task(
   'build:watch',
   gulp.series(
@@ -206,7 +208,10 @@ gulp.task(
 
 gulp.task(
   'dev',
-  gulp.series('server:create:dev', 'build:watch', 'server:start')
+  gulp.parallel(
+    gulp.series('server:create:dev', 'build:watch', 'server:start'),
+    gulp.series('typedef:sass')
+  )
 );
 
 gulp.task(

package.json

@@ -35,6 +35,7 @@
     "cleanup": "mop -v",
     "lint": "eslint --format=node_modules/eslint-formatter-pretty source storybook utils  --ext .ts,.tsx",
     "compile": "tsc --noEmit",
+    "precompile": "yarn typedef:sass",
     "prettier": "./node_modules/.bin/prettier \"**/*.*\"",
     "prettier:check": "yarn prettier --check",
     "prettier:format": "yarn prettier --write --loglevel warn",
@@ -43,6 +44,7 @@
     "manage:translations": "gulp purge:translations && gulp clear:cache && gulp build && ts-node ./translations/translation-runner.ts",
     "storybook": "start-storybook -p 6006 -c storybook --ci /",
     "storybook:build": "build-storybook -c storybook -o dist/storybook",
+    "storybook:build:chromatic": "build-storybook -c storybook",
     "themes:check:createTheme": "gulp build:themes && ts-node -r esm ./dist/scripts/check.js",
     "themes:update": "gulp build:themes && ts-node -r esm ./dist/scripts/update.js && yarn prettier --loglevel warn --write source/renderer/app/themes/daedalus/*.ts",
     "themes:copy": "ts-node -r @babel/register -r @babel/polyfill source/renderer/app/themes/utils/copyTheme.ts && yarn prettier --loglevel warn --write source/renderer/app/themes/daedalus/*.ts",
@@ -62,7 +64,8 @@
     "yoroi:wallet:importer": "ts-node utils/api-importer/yoroi-wallet-importer.ts",
     "create-news-verification-hashes": "ts-node utils/create-news-verification-hashes/index.ts",
     "lockfile:check": "ts-node utils/lockfile-checker/index.ts --check",
-    "lockfile:fix": "ts-node utils/lockfile-checker/index.ts --fix"
+    "lockfile:fix": "ts-node utils/lockfile-checker/index.ts --fix",
+    "typedef:sass": "typed-scss-modules source/renderer/app"
   },
   "bin": {
     "electron": "./node_modules/.bin/electron"
@@ -148,12 +151,12 @@
     "mini-css-extract-plugin": "0.12.0",
     "minimist": "1.2.5",
     "mobx-react-devtools": "6.1.1",
-    "node-forge": "0.10.0",
+    "node-forge": "1.0.0",
     "node-libs-browser": "2.2.1",
     "node-sass": "4.14.1",
     "nodemon": "2.0.4",
     "npmlog": "4.1.2",
-    "postcss": "7.0.39",
+    "postcss": "8.2.13",
     "postcss-modules": "1.5.0",
     "prettier": "2.1.2",
     "pretty-quick": "3.0.2",
@@ -175,6 +178,7 @@
     "timemachine": "0.3.2",
     "transform-loader": "0.2.4",
     "ts-node": "^10.4.0",
+    "typed-scss-modules": "5.0.0",
     "typescript": "^4.5.5",
     "url-loader": "2.0.1",
     "utf-8-validate": "5.0.2",
@@ -232,6 +236,7 @@
     "mobx-react-form": "2.0.8",
     "mobx-react-router": "4.1.0",
     "moment": "2.29.0",
+    "nanoid": "3.2.0",
     "node-downloader-helper": "1.0.18",
     "omit-deep-lodash": "1.1.5",
     "pbkdf2": "3.0.17",

source/renderer/app/components/appUpdate/AppUpdateOverlay.tsx

@@ -13,13 +13,10 @@ import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import { ButtonSpinnerSkin } from 'react-polymorph/lib/skins/simple/ButtonSpinnerSkin';
 import ReactMarkdown from 'react-markdown';
 import News from '../../domains/News';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module './AppUpdateOverlay.scss' or it... Remove this comment to see the full error message
 import styles from './AppUpdateOverlay.scss';
 import DialogCloseButton from '../widgets/DialogCloseButton';
 import ProgressBarLarge from '../widgets/ProgressBarLarge';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../assets/images/link-ic.in... Remove this comment to see the full error message
 import externalLinkIcon from '../../assets/images/link-ic.inline.svg';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../assets/images/close-cros... Remove this comment to see the full error message
 import closeCrossThin from '../../assets/images/close-cross-thin.inline.svg';
 
 const messages = defineMessages({
@@ -209,7 +206,6 @@ class AppUpdateOverlay extends Component<Props, State> {
     const buttonStyles = classnames([
       styles.button,
       isButtonDisabled ? styles.disabled : null,
-      isWaitingToQuitDaedalus ? styles.installing : null,
     ]);
     const buttonLabel = isLinux
       ? messages.buttonInstallUpdateLabel

source/renderer/app/components/assets/Asset.tsx

@@ -4,13 +4,10 @@ import classnames from 'classnames';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import { defineMessages, intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module './Asset.scss' or its correspon... Remove this comment to see the full error message
 import styles from './Asset.scss';
 import { ellipsis } from '../../utils/strings';
 import AssetContent from './AssetContent';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../assets/images/asset-toke... Remove this comment to see the full error message
 import settingsIcon from '../../assets/images/asset-token-settings-ic.inline.svg';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../assets/images/asset-toke... Remove this comment to see the full error message
 import warningIcon from '../../assets/images/asset-token-warning-ic.inline.svg';
 import { ASSET_TOKEN_DISPLAY_DELAY } from '../../config/timingConfig';
 import type { Asset as AssetProps } from '../../api/assets/types';
@@ -250,7 +247,6 @@ class Asset extends Component<Props, State> {
             '--rp-pop-over-box-shadow':
               '0 5px 20px 0 var(--theme-widgets-asset-token-box-shadow)',
           }}
-          contentClassName={styles.popOver}
           content={popOverContent}
           visible={isPillPopOverVisible}
           appendTo="parent"
@@ -288,7 +284,6 @@ class Asset extends Component<Props, State> {
     return (
       <button className={styles.settingsButton} onClick={onClickSettingsBind}>
         <PopOver
-          className={styles.test}
           content={intl.formatMessage(messages.settingsCogPopOver)}
           visible={isSettingsPopOverVisible}
         >

source/renderer/app/components/assets/AssetAmount.tsx

@@ -5,7 +5,6 @@ import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import { defineMessages, FormattedHTMLMessage } from 'react-intl';
 import { observer } from 'mobx-react';
 import { discreetWalletTokenAmount } from '../../features/discreet-mode/replacers/discreetWalletTokenAmount';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module './AssetAmount.scss' or its cor... Remove this comment to see the full error message
 import styles from './AssetAmount.scss';
 import type { AssetMetadata } from '../../api/assets/types';
 import { useDiscreetModeFeature } from '../../features/discreet-mode';

source/renderer/app/components/assets/AssetContent.scss

@@ -109,7 +109,7 @@
   flex-direction: column;
   width: 100%;
 
-  .assetASCIIName {
+  .assetAsciiName {
     opacity: 0.5;
   }
 }

source/renderer/app/components/assets/AssetContent.tsx

@@ -4,12 +4,9 @@ import classnames from 'classnames';
 import { defineMessages, intlShape, injectIntl } from 'react-intl';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { observer } from 'mobx-react';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module './AssetContent.scss' or its co... Remove this comment to see the full error message
 import styles from './AssetContent.scss';
 import { hexToString } from '../../utils/strings';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../assets/images/copy-asset... Remove this comment to see the full error message
 import copyIcon from '../../assets/images/copy-asset.inline.svg';
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../assets/images/check-w.in... Remove this comment to see the full error message
 import copyCheckmarkIcon from '../../assets/images/check-w.inline.svg';
 import { ASSET_TOKEN_ID_COPY_FEEDBACK } from '../../config/timingConfig';
 import type { Asset as AssetProps } from '../../api/assets/types';
@@ -123,7 +120,7 @@ const AssetContent = observer((props: Props) => {
             <SVGInline svg={icon} className={iconClassnames} />
           </div>
           {assetId === 'assetName' && (
-            <div className={styles.assetASCIIName}>
+            <div className={styles.assetAsciiName}>
               (ASCII: {hexToString(value)})
             </div>
           )}