update all files to work with svelte-check (#201)

## Goal

The goal of this PR is to add svelte-check to the github workflows and
resolve errors.

Closes #200 

## Checklist

- [x] PR Self-Review and Commenting
- [ ] Docs updated
- [ ] Tests added

## How To Test the Changes

1. Clone the pr branch
2. ...

---------

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>

.github/workflows/svelte-check.yml

@@ -0,0 +1,29 @@
+# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json
+name: Svelte Check
+on:
+  push:
+    branches: ['main', 'feat/svelte-app']
+  pull_request:
+    branches: ['main', 'feat/svelte-app']
+
+jobs:
+  prettier:
+    name: Svelte Check
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Check svelte/ts with svelte-check
+        run: npm run check

.prettierrc.json

@@ -3,7 +3,7 @@
   "bracketSpacing": true,
   "endOfLine": "auto",
   "jsxSingleQuote": false,
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"],
   "printWidth": 120,
   "proseWrap": "always",
   "quoteProps": "as-needed",

package.json

@@ -18,8 +18,8 @@
     "lint": "npx eslint src test",
     "lint:fix": "npx eslint --fix src test",
     "format": "npm run prettier && npm run lint:fix",
-    "prettier": "npx prettier --write --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss test src",
-    "prettier:check:ci": "npx prettier --check --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss test src"
+    "prettier": "npx prettier --write --plugin prettier-plugin-tailwindcss --plugin prettier-plugin-svelte test src",
+    "prettier:check:ci": "npx prettier --check --plugin prettier-plugin-tailwindcss --plugin prettier-plugin-svelte test src"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/components/AddAccountId.svelte

@@ -19,7 +19,7 @@
 
   let { isOpen, close }: Props = $props();
 
-  let selectedAccount: Account | null = $state();
+  let selectedAccount: Account | null | undefined = $state();
 
   let isSubmitDisabled = $derived(selectedAccount?.injectedAccount == null);
 
@@ -47,13 +47,11 @@
 </script>
 
 <Modal id="add-account-id" {isOpen} close={onCancel}>
-  {#snippet title()}
-    <span>
-      Add an Account Id to MSA (<span class="font-light">{$user.msaId}</span>)
-    </span>
-  {/snippet}
+  <span slot="title">
+    Add an Account Id to MSA (<span class="font-light">{$user.msaId}</span>)
+  </span>
 
-  {#snippet body()}
+  <div slot="body">
     <form class="column">
       <DropDownMenu
         id="AddAccountId"
@@ -80,5 +78,5 @@
     <span class="border-1 border-b border-divider"></span>
 
     <AddKeyRequirements />
-  {/snippet}
+  </div>
 </Modal>

src/components/Button.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
-
   interface Props {
     title?: string;
     action?: () => void;
     [key: string]: unknown;
   }
 
   let { title = '', action = () => {}, ...rest }: Props = $props();
+
+  function handleOnClick(e: Event) {
+    e.preventDefault();
+    action();
+  }
 </script>
 
-<button onclick={preventDefault(action)} class="btn-primary" {...rest}>{title}</button>
+<button onclick={handleOnClick} class="btn-primary" {...rest}>{title}</button>

src/components/Header.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Logo from './Logo.svelte';
   import ConnectionStatus from './ConnectionStatus.svelte';
 </script>

src/components/SelectNetworkAndAccount.svelte

@@ -98,9 +98,10 @@
   }
 
   const onSelectNetworkChanged = () => {
-    isCustomNetwork = selectedNetwork?.id === NetworkType.CUSTOM;
+    if (!selectedNetwork) return;
+    isCustomNetwork = selectedNetwork.id === NetworkType.CUSTOM;
     if (!isCustomNetwork) {
-      if (selectedNetwork?.endpoint && isValidURL(selectedNetwork!.endpoint.toString())) {
+      if (selectedNetwork.endpoint && isValidURL(selectedNetwork.endpoint.toString())) {
         const join = $page.url.pathname === '/become-a-provider' ? '/' : '';
         goto([$page.url.toString(), selectedNetwork.pathName].join(join));
         networkChanged();
@@ -140,7 +141,7 @@
 {:else}
   <p class="flex justify-between">
     <span class="text-teal">Connected to {selectedNetwork?.name || 'Custom'}</span>
-    <span onclick={resetState} class="btn-no-fill cursor-pointer"> Change networks </span>
+    <button onclick={resetState} class="btn-no-fill cursor-pointer">Change networks</button>
   </p>
 {/if}
 {#if isCustomNetwork}
@@ -169,7 +170,7 @@
     disabled={accounts.size === 0 || isLoading}
   />
   {#if selectedAccount?.address}
-    <AddToClipboard copyValue={selectedAccount?.address} />
+    <AddToClipboard copyValue={selectedAccount?.address || ''} />
   {/if}
 </div>
 <div id="controlkey-error-msg" class="text-sm text-error">{controlKeysErrorMsg}</div>

src/components/Stake.svelte

@@ -13,10 +13,9 @@
 </script>
 
 <Modal id="stake-to-provider" {isOpen} {close}>
-  {#snippet title()}
-    <span>Stake to Provider</span>
-  {/snippet}
-  {#snippet body()}
+  <span slot="title">Stake to Provider</span>
+
+  <div slot="body">
     <StakeForm {close} {stakeAmount} />
 
     <span class="min-w-full border-b border-b-divider"></span>
@@ -29,5 +28,5 @@
         <li>This will require 1 signature to send the transaction.</li>
       </ol>
     </div>
-  {/snippet}
+  </div>
 </Modal>

src/lib/connections.ts

@@ -1,13 +1,14 @@
+import '@frequency-chain/api-augment';
 import type { ApiPromise } from '@polkadot/api/promise';
 
 import type { KeyringPair } from '@polkadot/keyring/types';
 import type { InjectedExtension } from '@polkadot/extension-inject/types';
 import { isFunction, u8aToHex, u8aWrapBytes } from '@polkadot/util';
 import type { SignerPayloadRaw, SignerResult } from '@polkadot/types/types';
 import type { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import type { PalletMsaAddKeyData } from '@polkadot/types/lookup';
 import type { Account } from './stores/accountsStore';
 import { handleResult, handleTxnError } from './stores/activityLogStore';
+import type { PalletMsaAddKeyData } from '@polkadot/types/lookup';
 
 interface AddKeyData {
   msaId: string;
@@ -50,19 +51,14 @@ export async function submitAddAccountId(
       newPublicKey: newAccount.address,
     };
 
-    const newKeyPayload = api.registry.createType('PalletMsaAddKeyData', rawPayload);
+    const newKeyPayload = api.registry.createType('PalletMsaAddKeyData', rawPayload) as unknown as PalletMsaAddKeyData;
 
     const ownerKeySignature = await signPayload(newKeyPayload, signingAccount, extension);
     const newKeySignature = await signPayload(newKeyPayload, newAccount, extension);
 
     const ownerKeyProof = { Sr25519: ownerKeySignature };
     const newKeyProof = { Sr25519: newKeySignature };
-    const extrinsic = api.tx.msa.addPublicKeyToMsa(
-      signingAccount.address,
-      ownerKeyProof,
-      newKeyProof,
-      newKeyPayload as PalletMsaAddKeyData
-    );
+    const extrinsic = api.tx.msa.addPublicKeyToMsa(signingAccount.address, ownerKeyProof, newKeyProof, newKeyPayload);
     submitExtinsic(extrinsic, signingAccount, extension);
   } else {
     console.debug('api is not available.');

src/lib/utils.ts

@@ -76,7 +76,7 @@ export function formatAccount(account: Account): string {
 // create a URL-encoded mailto URL string using the provided parameters.
 export function createMailto(to: string, subject?: string, body?: string): string {
   // this regex is not at all rigourous, it's just for preventing blatant errors
-  const emailRegex = /^[\w\-.]+@([\w-]+\.)+[\w-]{2,}$/; // eslint-disable-line no-useless-escape
+  const emailRegex = /^[\w\-.]+@([\w-]+\.)+[\w-]{2,}$/;
   const matches = to.match(emailRegex);
   if (matches === null) {
     throw `to is not an email address: ${to}`;

src/routes/become-a-provider/+layout.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import BecomeAProvider from '$components/BecomeAProvider.svelte';
+  let { children } = $props();
 </script>
 
-<slot />
+<div>
+  {@render children()}
+</div>

src/routes/become-a-provider/[[network=networks]]/+layout.svelte

@@ -1,5 +1,5 @@
-<script>
-  let { data, children } = $props();
+<script lang="ts">
+  let { children } = $props();
 </script>
 
 <div>

src/routes/become-a-provider/[[network=networks]]/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import BecomeAProvider from '$components/BecomeAProvider.svelte';
 </script>
 

src/routes/faq/+page.svelte

@@ -3,38 +3,38 @@
   import HowToTransact from '$components/HowToTransact.svelte';
 </script>
 
+{#snippet question1()}
+  <span>What is the difference between Mainnet and Testnets?</span>
+{/snippet}
+
+{#snippet answer1()}
+  <div class="column">
+    <p>
+      The Frequency Mainnet is the production Frequency blockchain network. The Frequency Testnet, which works with the
+      Polkadot Paseo Testnet relay chain, are for developers to test and debug applications without risking real assets.
+    </p>
+    <p>What about the other options?</p>
+    <ul class="unordered-list">
+      <li>To connect to a node running on your desktop, choose Localhost.</li>
+      <li>
+        To connect to a node that is not in the list, choose Other, then type the desired WebSocket address in the text
+        field.
+      </li>
+    </ul>
+  </div>
+{/snippet}
+
+{#snippet question2()}
+  <span>How do I transact on Frequency as a provider?</span>
+{/snippet}
+{#snippet answer2()}
+  <HowToTransact />
+{/snippet}
+
 <div class="content-block w-single-block text-left text-base">
   <h2 class="section-title">FAQ's</h2>
 
-  <FAQItem>
-    {#snippet question()}
-      <span>What is the difference between Mainnet and Testnets?</span>
-    {/snippet}
-    {#snippet answer()}
-      <div class="column">
-        <p>
-          The Frequency Mainnet is the production Frequency blockchain network. The Frequency Testnet, which works with
-          the Polkadot Paseo Testnet relay chain, are for developers to test and debug applications without risking real
-          assets.
-        </p>
-        <p>What about the other options?</p>
-        <ul class="unordered-list">
-          <li>To connect to a node running on your desktop, choose Localhost.</li>
-          <li>
-            To connect to a node that is not in the list, choose Other, then type the desired WebSocket address in the
-            text field.
-          </li>
-        </ul>
-      </div>
-    {/snippet}
-  </FAQItem>
+  <FAQItem question={question1} answer={answer1} />
 
-  <FAQItem>
-    {#snippet question()}
-      <span>How do I transact on Frequency as a provider?</span>
-    {/snippet}
-    {#snippet answer()}
-      <HowToTransact />
-    {/snippet}
-  </FAQItem>
+  <FAQItem question={question2} answer={answer2} />
 </div>

test/__mocks__/navigation.js

@@ -1,3 +1,4 @@
 // stores.js for Vitest
+import { vi } from 'vitest';
 
 vi.mock('$app/navigation');