chore: Enable TS strict mode (#184)

* chore: enable strict mode * fix: crash on logout * fix: blank page after logout * fix: duplicate and wrong dripshub abi * fix: DripsUpdatedEvent typings * style: use if statement * style: use if statement * chore: enable curly lint rule * style: ?? * style: run eslint --fix * fix: avatar not displaying in bottom nav
radicle-dev · Sep 8, 2022 · eb99fb6 · eb99fb6 · vercel · Sep 8, 2022
1 parent 166be9e
commit eb99fb6
Show file tree

Hide file tree

Showing 53 changed files with 515 additions and 434 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -24,5 +24,6 @@ module.exports = {
   rules: {
     'no-console': 'error',
     '@typescript-eslint/no-unused-vars': 'error',
+    curly: ['error', 'multi-line', 'consistent']
   }
 };
diff --git a/graphql-schema.json b/graphql-schema.json
@@ -15140,11 +15140,7 @@
         "name": "skip",
         "description": null,
         "isRepeatable": false,
-        "locations": [
-          "FIELD",
-          "FRAGMENT_SPREAD",
-          "INLINE_FRAGMENT"
-        ],
+        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
         "args": [
           {
             "name": "if",
@@ -15168,11 +15164,7 @@
         "name": "include",
         "description": null,
         "isRepeatable": false,
-        "locations": [
-          "FIELD",
-          "FRAGMENT_SPREAD",
-          "INLINE_FRAGMENT"
-        ],
+        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
         "args": [
           {
             "name": "if",
@@ -15196,18 +15188,14 @@
         "name": "entity",
         "description": "Marks the GraphQL type as indexable entity.  Each type that should be an entity is required to be annotated with this directive.",
         "isRepeatable": false,
-        "locations": [
-          "OBJECT"
-        ],
+        "locations": ["OBJECT"],
         "args": []
       },
       {
         "name": "subgraphId",
         "description": "Defined a Subgraph ID for an object type",
         "isRepeatable": false,
-        "locations": [
-          "OBJECT"
-        ],
+        "locations": ["OBJECT"],
         "args": [
           {
             "name": "id",
@@ -15231,9 +15219,7 @@
         "name": "derivedFrom",
         "description": "creates a virtual field on the entity that may be queried but cannot be set manually through the mappings API.",
         "isRepeatable": false,
-        "locations": [
-          "FIELD_DEFINITION"
-        ],
+        "locations": ["FIELD_DEFINITION"],
         "args": [
           {
             "name": "field",
@@ -15255,4 +15241,4 @@
       }
     ]
   }
-}
+}
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -2,20 +2,20 @@ module.exports = {
   // https://github.com/facebook/jest/issues/11617
   maxWorkers: 1,
   transform: {
-    "^.+\\.svelte$": [
-      "svelte-jester",
-      { preprocess: "./svelte.config.test.cjs" },
+    '^.+\\.svelte$': [
+      'svelte-jester',
+      { preprocess: './svelte.config.test.cjs' }
     ],
-    "^.+\\.ts$": "ts-jest",
-    "^.+\\.js$": "ts-jest",
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.js$': 'ts-jest'
   },
-  moduleFileExtensions: ["js", "ts", "svelte"],
+  moduleFileExtensions: ['js', 'ts', 'svelte'],
   moduleNameMapper: {
-    "^\\$lib(.*)$": "<rootDir>/src/lib$1",
-    "^\\$app(.*)$": [
-      "<rootDir>/.svelte-kit/dev/runtime/app$1",
-      "<rootDir>/.svelte-kit/build/runtime/app$1",
-    ],
+    '^\\$lib(.*)$': '<rootDir>/src/lib$1',
+    '^\\$app(.*)$': [
+      '<rootDir>/.svelte-kit/dev/runtime/app$1',
+      '<rootDir>/.svelte-kit/build/runtime/app$1'
+    ]
   },
-  collectCoverageFrom: ["src/**/*.{ts,tsx,svelte,js,jsx}"],
+  collectCoverageFrom: ['src/**/*.{ts,tsx,svelte,js,jsx}']
 };
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
+    "format": "eslint --fix && prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
     "prepare": "husky install",
     "postinstall": "svelte-kit sync && scripts/install-twemoji-assets.sh && scripts/install-design-system-static-assets.sh",
     "apollo:update-schema": "npx apollo service:download --endpoint=https://api.thegraph.com/subgraphs/name/gh0stwheel/drips-on-ethereum graphql-schema.json",

diff --git a/src/lib/api/gnosis/index.ts b/src/lib/api/gnosis/index.ts
@@ -13,5 +13,5 @@ export async function getSafesForAddress(chainId: number, address: string) {
   );
   const ownedSafesRes = await ownedSafesReq.json();
 
-  return ownedSafesRes?.safes || [];
+  return ownedSafesRes?.safes ?? [];
 }
diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
@@ -18,7 +18,7 @@
       scale: 16
     }).toDataURL();
 
-  $: url = $ensNames[address]?.pic || blockyUrl;
+  $: url = $ensNames[address]?.pic ?? blockyUrl;
 </script>
 
 <img

diff --git a/src/lib/components/BalanceButton.svelte b/src/lib/components/BalanceButton.svelte
@@ -29,7 +29,8 @@
     withdrawable &&
     currentCycleBalanceEstimate &&
     currencyFormat(
-      $drips.collectable.wei + $estimates.earnedInCurrentCycle.wei
+      ($drips.collectable?.wei ?? BigInt(0)) +
+        ($estimates.earnedInCurrentCycle?.wei ?? BigInt(0))
     );
 
   $: formattedCycleEnd = $drips.cycle && {
@@ -87,7 +88,7 @@
         </div>
         <div class="title-value balance">
           <p class="typo-text title">
-            Withdrawable {formattedCycleEnd?.date || '...'}
+            Withdrawable {formattedCycleEnd?.date ?? '...'}
           </p>
           <h2 class="value">
             {#if currentCycleBalanceEstimate}

diff --git a/src/lib/components/Connect/Button.svelte b/src/lib/components/Connect/Button.svelte
@@ -16,7 +16,7 @@
   import cupertinoPane from '$lib/stores/cupertinoPane';
   import MobileAccountSheet from '../MobileAccountSheet/MobileAccountSheet.svelte';
 
-  export let onClick: () => void | undefined = undefined;
+  export let onClick: (() => void) | undefined = undefined;
 
   let locked: boolean;
 
@@ -39,7 +39,9 @@
 
     if ($walletStore.ready) {
       const { provider: localProvider, safe } = $walletStore;
-      const provider = safe?.provider || localProvider;
+      const provider = safe?.provider ?? localProvider;
+
+      if (!provider) throw new Error('Unable to get provider');
 
       await connectStores(provider);
     }
@@ -65,7 +67,7 @@
   {#if $walletStore.ready}
     {#if hover && !$isMobile.isMobile}
       <div
-        on:click={onClick || logOut}
+        on:click={onClick ?? logOut}
         transition:fade={{ duration: 100 }}
         class="log-out-overlay"
       >

diff --git a/src/lib/components/Connect/steps/ChooseWallet.svelte b/src/lib/components/Connect/steps/ChooseWallet.svelte
@@ -13,7 +13,13 @@
     dispatch('awaitPending', {
       promise: async () => {
         await walletStore.connect(method);
-        await connectStores(get(walletStore).provider);
+
+        const { provider } = get(walletStore);
+        if (!provider) {
+          throw new Error('No provider available after connection');
+        }
+
+        await connectStores(provider);
       },
       message: 'Please connect your wallet and sign the login message…'
     });
@@ -34,7 +40,7 @@
   <div
     class="option"
     class:disabled={metaMaskInstalled === false}
-    on:click={metaMaskInstalled && (() => connect('metamask'))}
+    on:click={() => connect('metamask')}
   >
     <img src="/assets/MetaMask-icon.svg" class="icon" alt="MetaMask logo" />
     <h3>MetaMask</h3>

diff --git a/src/lib/components/Connect/steps/LinkSafe.svelte b/src/lib/components/Connect/steps/LinkSafe.svelte
@@ -24,17 +24,18 @@
   let selectedSafeAddress: string;
 
   onMount(async () => {
-    const ownedSafes = await getSafesForAddress(
-      $walletStore.network.chainId,
-      $walletStore.address
-    );
+    const { network, address } = $walletStore;
+
+    if (!network || !address) throw new Error('Ensure a wallet is connected');
+
+    const ownedSafes = await getSafesForAddress(network.chainId, address);
 
     if (!ownedSafes || ownedSafes.length === 0) {
       return modal.hide();
     }
 
     safeAddresses = ownedSafes;
-    selectedSafeAddress = safeAddresses[0];
+    selectedSafeAddress = ownedSafes[0];
   });
 
   function linkSafe(address: string) {

diff --git a/src/lib/components/CreateModal.svelte b/src/lib/components/CreateModal.svelte
@@ -34,7 +34,7 @@
   let durationUnit: string = durationOptions[1].value;
   let description: string;
   let assignee: string;
-  let assigneeAddress: string;
+  let assigneeAddress: string | undefined;
 
   $: streamRate =
     parseInt(total) / (parseInt(duration) * parseInt(durationUnit));
@@ -65,6 +65,7 @@
           type: 'invalid',
           message: 'Unable to resolve ENS name.'
         };
+        return;
       }
 
       if (address.toLowerCase() === $walletStore.address) {
@@ -110,14 +111,18 @@
     const weiPerDay = utils.parseUnits(daiPerDay.toString());
     const weiPerSecond = weiPerDay.div(86400);
 
+    const chainId = $walletStore.network?.chainId;
+
+    if (!chainId) throw new Error('Unable to determine chain ID');
+
     let input: WorkstreamInput = {
       ratePerSecond: {
         currency: Currency.DAI,
         wei: weiPerSecond.toString()
       },
       title,
       desc: description,
-      chainId: $walletStore.network.chainId,
+      chainId,
       durationDays: parseInt(duration) * parseInt(durationUnit),
       assignTo: assigneeAddress,
       state: WorkstreamState.ACTIVE

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -34,7 +34,7 @@
           y: $scroll.direction === 'up' ? -args.y : args.y,
           duration: 300
         })
-      : undefined;
+      : {};
 </script>
 
 <header class:hide class:withShadow={scrolledDown && !hide}>

diff --git a/src/lib/components/History/EarnedInbetweenDropdown/index.svelte b/src/lib/components/History/EarnedInbetweenDropdown/index.svelte
@@ -21,6 +21,8 @@
   $: useModal = $isMobile.isMobile;
 
   onMount(() => {
+    if (!hoverElem) throw new Error('Hover Element not found');
+
     const spaceOnRight =
       window.innerWidth - hoverElem.getBoundingClientRect().right;
     if (spaceOnRight < convertRemToPixels(33)) {

diff --git a/src/lib/components/History/HistoryItem.svelte b/src/lib/components/History/HistoryItem.svelte
@@ -141,10 +141,12 @@
     </h4>
     <p class="date">{formatDate(historyItem.timestamp)}</p>
     <p class="potential amount typo-text-mono-bold">
-      <Rate
-        ratePerSecond={historyItem.meta.workstream.onChainData.amtPerSec}
-        total={historyItem.meta.workstream.data.total}
-      />
+      {#if historyItem.meta.workstream.onChainData}
+        <Rate
+          ratePerSecond={historyItem.meta.workstream.onChainData.amtPerSec}
+          total={historyItem.meta.workstream.data.total}
+        />
+      {/if}
     </p>
   </div>
 {/if}

diff --git a/src/lib/components/MobileAccountSheet/MobileAccountSheet.svelte b/src/lib/components/MobileAccountSheet/MobileAccountSheet.svelte
@@ -25,6 +25,8 @@
 
   $: withdrawable = $drips.collectable && currencyFormat($drips.collectable);
 
+  $: address = $walletStore.address;
+
   async function logOut() {
     await walletStore.disconnect();
     clearStores();
@@ -44,11 +46,13 @@
 
 <div class="items">
   <AccountSheetItem
-    title={$ensNames[$walletStore.address]?.name ||
-      formatAddress($walletStore.address) ||
+    title={(address && $ensNames[address]?.name) ??
+      (address && formatAddress(address)) ??
       '...'}
   >
-    <Avatar slot="left" address={$walletStore.address} rem={3} />
+    <div slot="left">
+      {#if address}<Avatar {address} rem={3} />{/if}
+    </div>
     <Button variant="outline" slot="right" on:click={() => closeAnd(logOut)}
       >Sign out</Button
     >

diff --git a/src/lib/components/MobileAccountSheet/components/AccountSheetItem.svelte b/src/lib/components/MobileAccountSheet/components/AccountSheetItem.svelte
@@ -12,7 +12,7 @@
 <div
   class:disabled
   class="account-sheet-item-wrapper"
-  on:click={!disabled && (() => onClick())}
+  on:click={() => !disabled && onClick()}
 >
   <slot name="left">
     <div class="icon-wrapper">

diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let style: string = undefined;
+  export let style: string | undefined = undefined;
 </script>
 
 <div class="modal" {style}>

diff --git a/src/lib/components/SetUpPaymentSteps/steps/ConfirmValues.svelte b/src/lib/components/SetUpPaymentSteps/steps/ConfirmValues.svelte
@@ -23,10 +23,11 @@
   let totalAmount: number = weiToDai(workstream.total);
 
   $: topUpExceedsBalance =
-    daiBalance < utils.parseUnits((topUpAmount || 0).toString()).toBigInt();
+    (daiBalance ?? BigInt(0)) <
+    utils.parseUnits((topUpAmount ?? 0).toString()).toBigInt();
 
   $: weiPerDay =
-    utils.parseUnits((totalAmount || 0).toString()).toBigInt() /
+    utils.parseUnits((totalAmount ?? 0).toString()).toBigInt() /
     BigInt(workstream.durationDays);
   $: daiPerDay = currencyFormat(weiPerDay);
   $: totalWei = weiPerDay * BigInt(workstream.durationDays);
@@ -50,8 +51,15 @@
         throw new Error('Unable to find Drips account ID for workstream.');
       }
 
+      const { acceptedApplication } = workstream;
+      if (!acceptedApplication) {
+        throw new Error(
+          'An accepted application is required to set up payment'
+        );
+      }
+
       const createDripCall = await drips.createDrip(
-        workstream.acceptedApplication,
+        acceptedApplication,
         {
           currency: Currency.DAI,
           wei: weiPerDay / BigInt(86400)
@@ -64,8 +72,7 @@
         const receipt = await createDripCall.tx.wait(1);
 
         if (receipt.status === 0) {
-          console.error(receipt);
-          return;
+          throw new Error('Call failed');
         }
 
         await invalidate(
@@ -123,7 +130,9 @@
           validationState={topUpExceedsBalance
             ? {
                 type: 'invalid',
-                message: `You only have ${currencyFormat(daiBalance)} DAI`
+                message: `You only have ${
+                  (daiBalance && currencyFormat(daiBalance)) ?? '...'
+                } DAI`
               }
             : { type: 'valid' }}
         />