Add hint to enter tokent and select account

src/lib/NotConfiguredWrapper.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Loading from './Loading.svelte';
+  import { accountsState, selectedAccountId } from './store/accounts';
+  import { routes } from './store/routes';
+  import { token } from './store/token';
+  import { translate } from './translate';
+
+  export let loading: boolean;
+  export let checkSelectedAccount = true;
+</script>
+
+{#if !$token || $accountsState === 'error'}
+  <div class="not-configured">
+    <a href={routes['settings.token'].path}>{$translate('settings.enter_token')}</a>
+    {$translate('settings.for_data_access_in')}
+    <a href={routes.settings.path}>{$translate('settings.in_settings')}</a>
+  </div>
+{:else if checkSelectedAccount && !$selectedAccountId}
+  <div class="not-configured">
+    <a href={routes['settings.account'].path}>{$translate('settings.select_account')}</a>
+    {$translate('settings.for_data_access_in')}
+    <a href={routes.settings.path}>{$translate('settings.in_settings')}</a>
+  </div>
+{:else if loading}
+  <div class="not-configured">
+    <Loading />
+  </div>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  .not-configured {
+    text-align: center;
+    padding: 10px;
+  }
+</style>

src/lib/store/accounts.ts

@@ -5,14 +5,23 @@ import { storable } from './storable';
 
 export const accounts = writable<V1Account[]>([]);
 
+export const accountsState = writable<'initial' | 'loading' | 'success' | 'error'>('initial');
+
 initialised.subscribe(async (initialised) => {
   if (!initialised) return;
 
   try {
+    accountsState.set('loading');
     const result = await usersApi.usersServiceGetAccounts({});
-    accounts.set(result.data.accounts ?? []);
+    if (result.status === 200 && result.data.accounts) {
+      accountsState.set('success');
+      accounts.set(result.data.accounts ?? []);
+    } else {
+      accountsState.set('error');
+    }
   } catch (e) {
     console.error(e);
+    accountsState.set('error');
   }
 });
 

src/lib/translate/en.ts

@@ -27,6 +27,8 @@ export const enDict: Dictionary = {
   'settings.security': 'Security',
   'settings.token': 'API token',
   'settings.enter_token': 'Enter API token',
+  'settings.for_data_access_in': 'to get access for data in',
+  'settings.in_settings': 'Settings',
   'settings.token_description':
     'To access for your orders data app uses token, witch can be created in your account settings',
   'settings.portfolio': 'Portfolio',

src/lib/translate/ru.ts

@@ -29,6 +29,8 @@ export const ruDict: Dictionary = {
   'settings.security': 'Безопасность',
   'settings.token': 'API токен',
   'settings.enter_token': 'Введите API токен',
+  'settings.for_data_access_in': 'для доступа к данным в',
+  'settings.in_settings': 'Настройках',
   'settings.token_description':
     'Для доступа к данным о сделках используется токен, создать его можно в настройках личного кабинета',
   'settings.portfolio': 'Портфель',

src/lib/translate/types.ts

@@ -22,6 +22,8 @@ export type Messages =
   | 'settings.select_language'
   | 'settings.darkMode'
   | 'settings.security'
+  | 'settings.for_data_access_in'
+  | 'settings.in_settings'
   | 'settings.token'
   | 'settings.enter_token'
   | 'settings.token_description'

src/routes/fills/[id].svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import Loading from '$lib/Loading.svelte';
   import { OperationType } from '$lib/model';
+  import NotConfiguredWrapper from '$lib/NotConfiguredWrapper.svelte';
   import { fills as fillsByFigi } from '$lib/store/fills';
-  import { backLink, title } from '$lib/store/navigation';
+  import { title } from '$lib/store/navigation';
   import { positions } from '$lib/store/positions';
   import { routes } from '$lib/store/routes';
   import { translate } from '$lib/translate';
@@ -33,78 +33,80 @@
   );
 </script>
 
-<div class="container">
-  {#if !$positions.length || !$fillsByFigi}
-    <Loading />
-  {:else if !$figi || $fills.length === 0}
-    <div class="center">
-      <div>{$translate('fills.instrument_not_found')}</div>
-      <a href={routes.fills.path} on:click={() => backLink.set(null)}>
-        {$translate('fills.return_to_fills')}
-      </a>
-    </div>
-  {:else}
-    <table>
-      <tbody>
-        {#each Object.keys($groups) as date}
-          <tr class="table-group-title">
-            <td>{date}</td>
-          </tr>
-          {#each $groups[date] as fill, index}
-            <tr
-              class="fill-row"
-              class:first-row-in-group={index == 0}
-              class:last-row-in-group={index == $groups[date].length - 1}
-            >
-              <td>
-                <div class="secondary">
-                  {new Date(fill.date).toLocaleTimeString()}
-                </div>
-                <div class="description">
-                  {(fill.operationType === OperationType.Buy ? '+' : '-') + fill.quantityExecuted} •
-                  {printMoney(fill.price, fill.currency)}
-                </div>
-              </td>
-              <td>
-                <div class="secondary">
-                  {printMoney((fill.averagePrice ?? 0) * fill.currentQuantity, fill.currency)}
-                </div>
-                <div>
-                  {fill.currentQuantity}
-                  {#if fill.averagePrice}
-                    ~{printMoney(fill.averagePrice, fill.currency)}
-                  {/if}
-                </div>
-              </td>
-              <td class="right">
-                <span class:loss={(fill.fixedPnL ?? 0) < 0} class:profit={(fill.fixedPnL ?? 0) > 0}>
-                  {printMoney(fill.fixedPnL, fill.currency, true)}
-                </span>
-              </td>
+<NotConfiguredWrapper loading={!$positions.length || !$fillsByFigi}>
+  <div class="container">
+    {#if !$figi || $fills.length === 0}
+      <div class="center">
+        <div>{$translate('fills.instrument_not_found')}</div>
+        <a href={routes.fills.path}>{$translate('fills.return_to_fills')} </a>
+      </div>
+    {:else}
+      <table>
+        <tbody>
+          {#each Object.keys($groups) as date}
+            <tr class="table-group-title">
+              <td>{date}</td>
             </tr>
+            {#each $groups[date] as fill, index}
+              <tr
+                class="fill-row"
+                class:first-row-in-group={index == 0}
+                class:last-row-in-group={index == $groups[date].length - 1}
+              >
+                <td>
+                  <div class="secondary">
+                    {new Date(fill.date).toLocaleTimeString()}
+                  </div>
+                  <div class="description">
+                    {(fill.operationType === OperationType.Buy ? '+' : '-') + fill.quantityExecuted}
+                    •
+                    {printMoney(fill.price, fill.currency)}
+                  </div>
+                </td>
+                <td>
+                  <div class="secondary">
+                    {printMoney((fill.averagePrice ?? 0) * fill.currentQuantity, fill.currency)}
+                  </div>
+                  <div>
+                    {fill.currentQuantity}
+                    {#if fill.averagePrice}
+                      ~{printMoney(fill.averagePrice, fill.currency)}
+                    {/if}
+                  </div>
+                </td>
+                <td class="right">
+                  <span
+                    class:loss={(fill.fixedPnL ?? 0) < 0}
+                    class:profit={(fill.fixedPnL ?? 0) > 0}
+                  >
+                    {printMoney(fill.fixedPnL, fill.currency, true)}
+                  </span>
+                </td>
+              </tr>
+            {/each}
           {/each}
-        {/each}
-        <tr>
-          <td colspan="3" class="shown-count">
-            <div style="margin-bottom: 5px;">
-              {$translate('fills.shown_count', {
-                values: {
-                  count: $fills.length,
-                  total: $executedFills.length,
-                },
-              })}
-            </div>
-            {#if $hasMore}
-              <div class="show-more" on:click={showMore}>
-                {$translate('common.show_more')}
+          <tr>
+            <td colspan="3" class="shown-count">
+              <div style="margin-bottom: 5px;">
+                {$translate('fills.shown_count', {
+                  values: {
+                    count: $fills.length,
+                    total: $executedFills.length,
+                  },
+                })}
               </div>
-            {/if}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  {/if}
-</div>
+              {#if $hasMore}
+                <div class="show-more" on:click={showMore}>
+                  {$translate('common.show_more')}
+                </div>
+              {/if}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    {/if}
+  </div>
+</NotConfiguredWrapper>
 
 <style>
   .container {

src/routes/fills/index.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import Loading from '$lib/Loading.svelte';
+  import NotConfiguredWrapper from '$lib/NotConfiguredWrapper.svelte';
   import PositionAvatar from '$lib/PositionAvatar.svelte';
   import PositionTitle from '$lib/PositionTitle.svelte';
   import SettingsGroup from '$lib/SettingsGroup.svelte';
@@ -22,51 +22,47 @@
   backLink.set(null);
 </script>
 
-<div>
-  {#if !$positions.length}
-    <Loading />
-  {:else}
-    {#each $groups as group}
-      <SettingsGroup title={$printGroupName(group.id)}>
-        {#each $positions.filter((p) => p.instrumentType == group.id) as position}
-          <SettingsGroupItem>
-            <div
-              class="item-container"
-              on:click={() => {
-                backLink.set(routes.fills.path);
-                goto(`${routes.fills.path}/${position.ticker}`);
-              }}
-            >
-              <PositionAvatar {position} />
-              <div class="info">
-                <div class="row">
-                  <div class="left">
-                    <PositionTitle {position} />
-                    <div class="subtitle" style="margin-top: 2px;">
-                      {$translate('fills.position.fills_count', {
-                        values: {
-                          count: $fills[position.figi].filter((x) => x.quantityExecuted > 0).length,
-                        },
-                      })}
-                    </div>
-                  </div>
-                  <div class="right">
-                    <span
-                      class:loss={(position.fixedPnL ?? 0) < 0}
-                      class:profit={(position.fixedPnL ?? 0) > 0}
-                    >
-                      {printMoney(position.fixedPnL, position.currency, true)}
-                    </span>
+<NotConfiguredWrapper loading={!$positions.length}>
+  {#each $groups as group}
+    <SettingsGroup title={$printGroupName(group.id)}>
+      {#each $positions.filter((p) => p.instrumentType == group.id) as position}
+        <SettingsGroupItem>
+          <div
+            class="item-container"
+            on:click={() => {
+              backLink.set(routes.fills.path);
+              goto(`${routes.fills.path}/${position.ticker}`);
+            }}
+          >
+            <PositionAvatar {position} />
+            <div class="info">
+              <div class="row">
+                <div class="left">
+                  <PositionTitle {position} />
+                  <div class="subtitle" style="margin-top: 2px;">
+                    {$translate('fills.position.fills_count', {
+                      values: {
+                        count: $fills[position.figi].filter((x) => x.quantityExecuted > 0).length,
+                      },
+                    })}
                   </div>
                 </div>
+                <div class="right">
+                  <span
+                    class:loss={(position.fixedPnL ?? 0) < 0}
+                    class:profit={(position.fixedPnL ?? 0) > 0}
+                  >
+                    {printMoney(position.fixedPnL, position.currency, true)}
+                  </span>
+                </div>
               </div>
             </div>
-          </SettingsGroupItem>
-        {/each}
-      </SettingsGroup>
-    {/each}
-  {/if}
-</div>
+          </div>
+        </SettingsGroupItem>
+      {/each}
+    </SettingsGroup>
+  {/each}
+</NotConfiguredWrapper>
 
 <style>
   .item-container {