feat: make our lives easier

.eslintrc.yaml

@@ -0,0 +1,37 @@
+parser: '@typescript-eslint/parser'
+extends:
+  - eslint:recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:react/recommended
+  - plugin:react-hooks/recommended
+  - plugin:jsx-a11y/recommended
+  - prettier
+plugins:
+  - '@typescript-eslint'
+  - react
+  - react-hooks
+  - jsx-a11y
+
+env:
+  browser: true
+  node: true
+  es2021: true
+settings:
+  react:
+    version: detect
+rules:
+  react/react-in-jsx-scope: off
+  react/prop-types: off
+  react/jsx-uses-react: off
+  react/jsx-uses-vars: error
+  '@typescript-eslint/explicit-module-boundary-types': off
+  '@typescript-eslint/no-unused-vars':
+    - error
+    - argsIgnorePattern: '^_'
+      varsIgnorePattern: '^_'
+overrides:
+  - files: ['**/*.tsx']
+    rules:
+      react/jsx-filename-extension:
+        - error
+        - extensions: ['.tsx']

.github/actions/check-version-lock/check-version-lock.js

@@ -15,8 +15,8 @@ function containsIllegalChar(input) {
     const allPackages = [...Object.entries(dependencies), ...Object.entries(devDependencies)];
 
     const illegalPackages = allPackages
-      .filter(([package, version]) => containsIllegalChar(version))
-      .map(([package, version]) => ({ package, version }));
+      .filter(([name, version]) => containsIllegalChar(version))
+      .map(([name, version]) => ({ name, version }));
 
     if (illegalPackages.length > 0) {
       core.setFailed(`

.github/workflows/create-version.yml

@@ -48,8 +48,8 @@ jobs:
           yarn
           yarn add -ED @actions/core
 
-      - name: Lint eslint
-        run: yarn lint:eslint
+      - name: Lint code
+        run: yarn check:lint
 
       - name: Check exact versions
         uses: ./.github/actions/check-version-lock

.prettierignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+dll

.prettierrc.js

@@ -0,0 +1,13 @@
+const defaultConfig = require('@stacks/prettier-config');
+
+module.exports = {
+  ...defaultConfig,
+  importOrder: [
+    '^react',
+    '<THIRD_PARTY_MODULES>',
+    '^@(api|assets|components|constants|crypto|hooks|modals|models|models|store|utils)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};

app/api/api.ts

@@ -1,5 +1,5 @@
-import axios from 'axios';
-import urljoin from 'url-join';
+import packageJson from '../../package.json';
+import { features } from '@constants/index';
 import {
   AccountsApi,
   TransactionsApi,
@@ -19,9 +19,8 @@ import {
   NetworkBlockTimesResponse,
   AddressTransactionsWithTransfersListResponse,
 } from '@stacks/stacks-blockchain-api-types';
-
-import packageJson from '../../package.json';
-import { features } from '@constants/index';
+import axios from 'axios';
+import urljoin from 'url-join';
 
 const defaultHeaders = [
   { name: 'x-hiro-product', value: 'stacks-wallet-desktop' },

app/api/check-for-new-release.ts

@@ -1,7 +1,6 @@
-import axios from 'axios';
-import { Endpoints } from '@octokit/types';
-
 import { GITHUB_ORG, GITHUB_REPO } from '@constants/index';
+import { Endpoints } from '@octokit/types';
+import axios from 'axios';
 
 export type GithubReleases = Endpoints['GET /repos/{owner}/{repo}/releases']['response']['data'];
 

app/api/watch-contract-execution.ts

@@ -1,5 +1,5 @@
-import { safeAwait } from '@utils/safe-await';
 import { Api } from '@api/api';
+import { safeAwait } from '@utils/safe-await';
 
 const defaultErrorMsg = 'Stacking contract failed to execute';
 

app/api/watch-tx-to-appear-in-api.ts

@@ -1,6 +1,7 @@
-import { safeAwait } from '@stacks/ui';
 import { Api } from '@api/api';
+import { safeAwait } from '@stacks/ui';
 import { delay } from '@utils/delay';
+
 interface WatchForNewTxAppearArgs {
   nodeUrl: string;
   txId: string;

app/app-dev.html

@@ -15,7 +15,8 @@
           document.documentElement.classList.add(mode);
           var bgValue = getComputedStyle(document.documentElement).getPropertyValue('--colors-bg');
           document.documentElement.style.background = bgValue;
-        } finally {}
+        } finally {
+        }
       })();
     </script>
     <script>

app/app.html

@@ -19,7 +19,8 @@
           document.documentElement.classList.add(mode);
           var bgValue = getComputedStyle(document.documentElement).getPropertyValue('--colors-bg');
           document.documentElement.style.background = bgValue;
-        } finally {}
+        } finally {
+        }
       })();
     </script>
     <script nonce="6ca3c3e1fcd34bbc8cfaeceaa8106e37">

app/components/back-button.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
-import { ArrowIcon, ButtonProps, IconButton, color } from '@stacks/ui';
 import { useBack } from '@hooks/use-back-url';
+import { ArrowIcon, ButtonProps, IconButton, color } from '@stacks/ui';
+import React, { FC } from 'react';
 
 // Cannot use cursor pointer in top bar area of window
 // https://github.com/electron/electron/issues/5723

app/components/card.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Box, BoxProps, Text, Flex, color } from '@stacks/ui';
+import React from 'react';
 
 interface CardProps extends BoxProps {
   title?: string;

app/components/chart/percentage-circle.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Box, BoxProps } from '@stacks/ui';
+import * as React from 'react';
 
 export const blue = (alpha = 1, darker = false) =>
   `rgba(${darker ? '70,55,255' : '85,70,255'},${alpha})`;

app/components/chart/waffle-chart.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
 import { Box } from '@stacks/ui';
+import React, { FC } from 'react';
 import ReactCardFlip from 'react-card-flip';
 
 interface WaffleChartProps {

app/components/circle-button.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
 import { Box, BoxProps, color } from '@stacks/ui';
+import React, { FC } from 'react';
 
 type CircleButtonProps = BoxProps;
 

app/components/color-mode-button.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef, memo, Ref } from 'react';
 import { IconButton, IconButtonProps, useColorMode } from '@stacks/ui';
 import { IconSun, IconSunOff } from '@tabler/icons';
+import React, { forwardRef, Ref } from 'react';
 
-export const ColorModeButton = memo(
-  forwardRef((props: Omit<IconButtonProps, 'icon'>, ref: Ref<HTMLDivElement>) => {
+export const ColorModeButton = forwardRef(
+  (props: Omit<IconButtonProps, 'icon'>, ref: Ref<HTMLDivElement>) => {
     const { colorMode } = useColorMode();
     const Icon = colorMode === 'light' ? IconSun : IconSunOff;
     return (
@@ -27,5 +27,7 @@ export const ColorModeButton = memo(
         }}
       />
     );
-  })
+  }
 );
+
+ColorModeButton.displayName = 'ColorModeButton';

app/components/error-label.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Flex, Box, FlexProps } from '@stacks/ui';
-
 import { ExclamationMark } from './icons/exclamation-mark';
+import { Flex, Box, FlexProps } from '@stacks/ui';
+import React from 'react';
 
 interface ErrorLabelProps extends FlexProps {
   size?: 'sm' | 'md';

app/components/error-text.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Text, color } from '@stacks/ui';
 import type { BoxProps } from '@stacks/ui';
+import React from 'react';
 
 export const ErrorText: React.FC<BoxProps> = ({ children, ...rest }) => (
   <Text

app/components/external-link.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import { LegalDisclaimerTooltip } from './legal-disclaimer-tooltip';
 import { Box, Text, BoxProps, color } from '@stacks/ui';
 import { openExternalLink } from '@utils/external-links';
-import { LegalDisclaimerTooltip } from './legal-disclaimer-tooltip';
+import React, { FC } from 'react';
 
 interface ExternalLinkProps extends BoxProps {
   href: string;

app/components/home/balance-card.tsx

@@ -1,17 +1,15 @@
-import React, { FC, useState } from 'react';
-import { Box, Button, Text, ArrowIcon, EncryptionIcon, Flex, color } from '@stacks/ui';
-
-import { HomeSelectors } from 'app/tests/features/home.selectors';
+import { InternalLink } from '@components/internal-link';
+import { Title } from '@components/title';
 import { features, NETWORK } from '@constants/index';
-import { toHumanReadableStx } from '@utils/unit-convert';
-import { safeAwait } from '@utils/safe-await';
+import { useBalance } from '@hooks/use-balance';
+import { Box, Button, Text, ArrowIcon, EncryptionIcon, Flex, color } from '@stacks/ui';
 import { delay } from '@utils/delay';
-
-import { InternalLink } from '@components/internal-link';
 import { makeExplorerAddressLink } from '@utils/external-links';
 import { isTestnet } from '@utils/network-utils';
-import { useBalance } from '@hooks/use-balance';
-import { Title } from '@components/title';
+import { safeAwait } from '@utils/safe-await';
+import { toHumanReadableStx } from '@utils/unit-convert';
+import { HomeSelectors } from 'app/tests/features/home.selectors';
+import React, { FC, useState } from 'react';
 
 interface BalanceCardProps {
   address: string | null;
@@ -69,7 +67,7 @@ export const BalanceCard: FC<BalanceCardProps> = props => {
             mr="tight"
           />
           <Text>{toHumanReadableStx(lockedBalance.toString())} locked</Text>
-          <Text children="·" mx="base-tight" />
+          <Text mx="base-tight">·</Text>
           <Text>{toHumanReadableStx(availableBalance.toString())} available</Text>
         </Flex>
       )}