remove unused imports, fix state update timestamps, bump versions, ad…

…d missing token error page

apps/landing/package.json

@@ -7,12 +7,12 @@
   "scripts": {
     "prod:build": "rm -rf dist && sass ./styles/index.scss ./dist/index.css && pnpm run autoprefix && pnpm run pack",
     "prod:build:apps": "pnpm run prod:build",
-    "prod:deploy": "dfx deploy msq_landing --no-asset-upgrade --network=ic",
+    "prod:deploy": "dfx deploy msq_landing --network=ic",
     "prod:deploy:frontend": "pnpm run prod:deploy",
     "prod:deploy:landing": "pnpm run prod:deploy",
     "dev:build": "pnpm run prod:build",
     "dev:build:apps": "pnpm run prod:build",
-    "dev:deploy": "dfx deploy msq_landing --no-asset-upgrade",
+    "dev:deploy": "dfx deploy msq_landing",
     "dev:deploy:frontend": "pnpm run dev:deploy",
     "dev:deploy:landing": "pnpm run dev:deploy",
     "watch": "sass --watch ./styles/index.scss ./dist/index.css",

apps/site/package.json

@@ -9,15 +9,15 @@
     "prod:build": "pnpm run propagateEnv && tsc && vite build",
     "prod:build:apps": "pnpm run prod:build",
     "prod:deploy": "dfx deploy --network=ic",
-    "prod:deploy:frontend": "dfx deploy msq_frontend --no-asset-upgrade --network=ic",
+    "prod:deploy:frontend": "dfx deploy msq_frontend --network=ic",
     "prod:deploy:site": "pnpm run prod:deploy:frontend",
     "prod:deploy:backend": "dfx deploy msq_statistics --network=ic",
     "dev:build": "pnpm run propagateEnv && tsc && vite build --mode dev",
     "dev:build:apps": "pnpm run dev:build",
     "dev": "pnpm run propagateEnv && vite --mode dev",
     "dev:gen": "dfx generate",
     "dev:deploy": "dfx deploy",
-    "dev:deploy:frontend": "dfx deploy msq_frontend --no-asset-upgrade",
+    "dev:deploy:frontend": "dfx deploy msq_frontend",
     "dev:deploy:site": "pnpm run dev:deploy:frontend",
     "dev:deploy:backend": "dfx deploy msq_statistics",
     "propagateEnv": "node ../../propagate-env.js",

apps/site/src/frontend/backend.ts

@@ -7,7 +7,6 @@ import type { _SERVICE as StatisticsBackend } from "../declarations/msq_statisti
 import { Principal } from "@dfinity/principal";
 import { ICP_INDEX_TOKEN_IDX, bytesToHex } from "@fort-major/msq-shared";
 import { AccountIdentifier } from "@dfinity/ledger-icp";
-import { DEFAULT_SUBACCOUNT } from "./utils";
 
 export const canisterId = import.meta.env.VITE_CANISTER_ID_MSQ_STATISTICS;
 

apps/site/src/frontend/components/account-card/style.ts

@@ -1,6 +1,5 @@
 import { css, styled } from "solid-styled-components";
 import {
-  BlinkAnimation,
   COLOR_CHARTREUSE,
   COLOR_BLACK,
   COLOR_GRAY_115,

apps/site/src/frontend/components/add-account-btn/index.tsx

@@ -2,7 +2,7 @@ import { styled } from "solid-styled-components";
 import { ANIM_DURATION, COLOR_GRAY_105, COLOR_GRAY_115, COLOR_GRAY_130, COLOR_WHITE } from "../../ui-kit";
 import { eventHandler, getClassName } from "../../utils";
 import { EIconKind, Icon } from "../../ui-kit/icon";
-import { Size16, Text, WeightSemiBold } from "../../ui-kit/typography";
+import { Text } from "../../ui-kit/typography";
 
 interface IAddAccountBtnProps {
   disabled?: boolean | undefined;

apps/site/src/frontend/components/add-new-mask-btn/index.tsx

@@ -1,7 +1,7 @@
 import { AddNewMaskBtnIconWrapper, AddNewMaskBtnText, AddNewMaskBtnWrapper } from "./style";
 import { eventHandler } from "../../utils";
 import { EIconKind, Icon } from "../../ui-kit/icon";
-import { Text, WeightSemiBold } from "../../ui-kit/typography";
+import { Text } from "../../ui-kit/typography";
 
 export interface IAddNewMaskBtnProps {
   onClick: () => void;

apps/site/src/frontend/components/add-new-mask-btn/style.ts

@@ -1,5 +1,5 @@
 import { css, styled } from "solid-styled-components";
-import { ANIM_DURATION, COLOR_BLACK, COLOR_GRAY_105, COLOR_GRAY_115, COLOR_WHITE } from "../../ui-kit";
+import { ANIM_DURATION, COLOR_GRAY_105, COLOR_GRAY_115, COLOR_WHITE } from "../../ui-kit";
 
 export const AddNewMaskBtnWrapper = styled.div`
   display: flex;

apps/site/src/frontend/components/cabinet-nav/index.tsx

@@ -2,7 +2,7 @@ import { useLocation, useNavigate } from "@solidjs/router";
 import { CabinetNavItem, CabinetNavItemDot, CabinetNavWrapper } from "./styles";
 import { For, Match, Switch } from "solid-js";
 import { eventHandler } from "../../utils";
-import { Size16, Text, WeightSemiBold } from "../../ui-kit/typography";
+import { Text } from "../../ui-kit/typography";
 
 interface IItemProps {
   title: string;

apps/site/src/frontend/components/cabinet-nav/styles.ts

@@ -1,12 +1,5 @@
 import { styled } from "solid-styled-components";
-import {
-  ANIM_DURATION,
-  BAR_HEIGHT,
-  COLOR_CHARTREUSE,
-  COLOR_GRAY_105,
-  COLOR_GRAY_115,
-  HEADER_HEIGHT,
-} from "../../ui-kit";
+import { ANIM_DURATION, COLOR_CHARTREUSE, COLOR_GRAY_105, COLOR_GRAY_115 } from "../../ui-kit";
 
 export const CabinetNavWrapper = styled.nav`
   display: flex;

apps/site/src/frontend/components/header/index.tsx

@@ -5,7 +5,7 @@ import { EIconKind, Icon } from "../../ui-kit/icon";
 import { Show } from "solid-js";
 import { useLocation, useNavigate } from "@solidjs/router";
 import { eventHandler } from "../../utils";
-import { Size18, Text, WeightSemiBold } from "../../ui-kit/typography";
+import { Text } from "../../ui-kit/typography";
 
 const HeaderDiv = styled.header`
   position: fixed;

apps/site/src/frontend/components/login-option/index.tsx

@@ -5,7 +5,7 @@ import { Show, createSignal } from "solid-js";
 import { eventHandler } from "../../utils";
 import { Input } from "../../ui-kit/input";
 import { EIconKind, Icon } from "../../ui-kit/icon";
-import { ColorGray140, Size12, Size16, Text, WeightSemiBold } from "../../ui-kit/typography";
+import { Text } from "../../ui-kit/typography";
 import { COLOR_GRAY_140 } from "../../ui-kit";
 
 export interface ILoginOptionProps {

apps/site/src/frontend/components/login-option/style.ts

@@ -1,5 +1,5 @@
 import { css, styled } from "solid-styled-components";
-import { ANIM_DURATION, COLOR_BLACK, COLOR_GRAY_105, COLOR_GRAY_115, COLOR_GRAY_140, COLOR_WHITE } from "../../ui-kit";
+import { ANIM_DURATION, COLOR_BLACK, COLOR_GRAY_105, COLOR_GRAY_140, COLOR_WHITE } from "../../ui-kit";
 
 export const LoginOptionWrapper = styled.div<{ editable?: boolean | undefined }>`
   display: flex;

apps/site/src/frontend/components/modal/index.tsx

@@ -1,7 +1,7 @@
 import { JSXElement, children, onCleanup, onMount } from "solid-js";
 import { Portal } from "solid-js/web";
 import { styled } from "solid-styled-components";
-import { disableScroll, enableScroll, eventHandler } from "../../utils";
+import { disableScroll, enableScroll } from "../../utils";
 
 export function Modal(props: { children: JSXElement }) {
   const c = children(() => props.children);

apps/site/src/frontend/components/notification-bar/index.tsx

@@ -1,4 +1,4 @@
-import { Size16, Text, WeightMedium } from "../../ui-kit/typography";
+import { Text } from "../../ui-kit/typography";
 import { NotificationBarWrapper } from "./style";
 
 export function NotificationBar() {

apps/site/src/frontend/components/notification-bar/style.ts

@@ -1,5 +1,5 @@
 import { styled } from "solid-styled-components";
-import { BAR_HEIGHT, COLOR_DARK_BLUE, COLOR_WHITE } from "../../ui-kit";
+import { BAR_HEIGHT, COLOR_DARK_BLUE } from "../../ui-kit";
 
 export const NotificationBarWrapper = styled.noindex`
   position: fixed;

apps/site/src/frontend/components/spoiler/index.tsx

@@ -1,6 +1,7 @@
 import { JSXElement, Match, Switch, children, createEffect, createSignal } from "solid-js";
 import { SpoilerChildren, SpoilerHeader, SpoilerWrapper } from "./style";
 import { EIconKind, Icon } from "../../ui-kit/icon";
+
 export interface ISpoilerProps {
   defaultOpen?: boolean | undefined;
   header: JSXElement;

apps/site/src/frontend/components/spoiler/style.ts

@@ -1,4 +1,4 @@
-import { css, styled } from "solid-styled-components";
+import { styled } from "solid-styled-components";
 import { COLOR_GRAY_140 } from "../../ui-kit";
 
 export const SpoilerWrapper = styled.div`

apps/site/src/frontend/components/txn-history-modal/index.tsx

@@ -9,13 +9,12 @@ import {
 } from "./style";
 import { Text } from "../../ui-kit/typography";
 import { COLOR_GRAY_140, COLOR_GRAY_190, COLOR_WHITE, FONT_WEIGHT_MEDIUM, FONT_WEIGHT_REGULAR } from "../../ui-kit";
-import { For, Match, Show, Switch, createSignal, onMount } from "solid-js";
+import { For, Match, Switch, createSignal, onMount } from "solid-js";
 import { TxnHistoryEntry } from "../txn-history-entry";
 import { Button, EButtonKind } from "../../ui-kit/button";
 import { eventHandler } from "../../utils";
 import { Modal } from "../modal";
 import { EIconKind, Icon } from "../../ui-kit/icon";
-import { useNavigate } from "@solidjs/router";
 
 export interface ITxnHistoryModalProps {
   tokenId: string;

apps/site/src/frontend/index.tsx

@@ -25,6 +25,7 @@ import { AssetsStore } from "./store/assets";
 import { OriginDataStore } from "./store/origins";
 import {
   Error404Page,
+  ErrorAssetNotFoundPage,
   ErrorEnableMsqPage,
   ErrorInstallMetaMaskPage,
   ErrorMSQConnectionRejectedPage,
@@ -70,6 +71,7 @@ export function App() {
                     <Route path="/enable-msq" component={ErrorEnableMsqPage} />
                     <Route path="/mobile-not-supported" component={ErrorMobileNotSupportedPage} />
                     <Route path="/connection-rejected" component={ErrorMSQConnectionRejectedPage} />
+                    <Route path="/token-not-found" component={ErrorAssetNotFoundPage} />
 
                     <Route path="/icrc-35" component={ICRC35Page} />
 

apps/site/src/frontend/pages/cabinet/my-assets/receive/index.tsx

@@ -1,14 +1,12 @@
 import { css, styled } from "solid-styled-components";
 import {
   ANIM_DURATION,
-  BAR_HEIGHT,
   COLOR_ACCENT,
   COLOR_BLACK,
   COLOR_GRAY_108,
   COLOR_GRAY_140,
   COLOR_GRAY_150,
   COLOR_WHITE,
-  HEADER_HEIGHT,
 } from "../../../../ui-kit";
 import { EIconKind, Icon } from "../../../../ui-kit/icon";
 import { H5, Text } from "../../../../ui-kit/typography";

apps/site/src/frontend/pages/cabinet/my-assets/send/style.ts

@@ -1,12 +1,5 @@
 import { css, styled } from "solid-styled-components";
-import {
-  BAR_HEIGHT,
-  COLOR_BLACK,
-  COLOR_GRAY_140,
-  COLOR_GRAY_190,
-  COLOR_WHITE,
-  HEADER_HEIGHT,
-} from "../../../../ui-kit";
+import { COLOR_BLACK, COLOR_GRAY_140, COLOR_GRAY_190, COLOR_WHITE } from "../../../../ui-kit";
 
 export const SendPageMixin = css`
   display: flex !important;

apps/site/src/frontend/pages/cabinet/my-assets/style.ts

@@ -1,7 +1,6 @@
 import { css, styled } from "solid-styled-components";
 import {
   ANIM_DURATION,
-  COLOR_CHARTREUSE,
   COLOR_ERROR_RED,
   COLOR_GRAY_115,
   COLOR_GRAY_130,

apps/site/src/frontend/pages/error/index.tsx

@@ -2,11 +2,11 @@ import { css, styled } from "solid-styled-components";
 import { EIconKind } from "../../ui-kit/icon";
 import { H2, Text } from "../../ui-kit/typography";
 import { Button, EButtonKind } from "../../ui-kit/button";
-import { Show, createEffect, onMount } from "solid-js";
+import { Show, createEffect } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import { ErrorSpoiler } from "../../components/error-spoiler";
 import { COLOR_GRAY_105, COLOR_GRAY_140, COLOR_GRAY_190 } from "../../ui-kit";
-import { DISCORD_LINK, METAMASK_LINK, delay } from "@fort-major/msq-shared";
+import { DISCORD_LINK, METAMASK_LINK } from "@fort-major/msq-shared";
 import isMobile from "ismobilejs";
 import { useMsqClient } from "../../store/global";
 
@@ -41,6 +41,22 @@ export function ErrorMobileNotSupportedPage() {
   );
 }
 
+export function ErrorAssetNotFoundPage() {
+  const navigate = useNavigate();
+
+  return (
+    <ErrorPage
+      header="Oops! Token not found."
+      text="The asset you're trying to access is not yet added to your whitelist. If this is your first time visiting MSQ, navigate to the main page to fix this problem automatically. Otherwise, consider adding this token manually via the special form at 'My Assets' section."
+      button={{
+        text: "Main Page",
+        icon: EIconKind.ArrowRightUp,
+        action: () => navigate('/'),
+      }}
+    />
+  );
+}
+
 export function ErrorMSQConnectionRejectedPage() {
   const navigate = useNavigate();
   const msq = useMsqClient();

apps/site/src/frontend/pages/index/index.tsx

@@ -2,7 +2,6 @@ import { Outlet, useLocation, useNavigate } from "@solidjs/router";
 import { ErrorPage } from "../error";
 import { EIconKind } from "../../ui-kit/icon";
 import { DISCORD_LINK, debugStringify, logError } from "@fort-major/msq-shared";
-import isMobile from "ismobilejs";
 import { createEffect } from "solid-js";
 
 export function IndexPage() {

apps/site/src/frontend/pages/integration/login/style.ts

@@ -1,5 +1,5 @@
 import { styled } from "solid-styled-components";
-import { ANIM_DURATION, COLOR_GRAY_130, COLOR_GRAY_140, COLOR_WHITE } from "../../../ui-kit";
+import { ANIM_DURATION, COLOR_GRAY_130, COLOR_WHITE } from "../../../ui-kit";
 
 export const LoginHeadingSection = styled.section`
   position: fixed;

apps/site/src/frontend/pages/integration/payment/checkout/style.ts

@@ -1,5 +1,5 @@
 import { css, styled } from "solid-styled-components";
-import { COLOR_ACCENT, COLOR_BLUE, COLOR_GRAY_110, COLOR_GRAY_130 } from "../../../../ui-kit";
+import { COLOR_ACCENT, COLOR_GRAY_110, COLOR_GRAY_130 } from "../../../../ui-kit";
 
 export const CheckoutPageWrapper = styled.div`
   position: relative;

apps/site/src/frontend/pages/statistics/index.tsx

@@ -5,7 +5,6 @@ import { Line } from "solid-chartjs";
 import { COLOR_ACCENT } from "../../ui-kit";
 import { Stat, StatsWrapper } from "./style";
 import { Text } from "../../ui-kit/typography";
-import { log } from "@fort-major/msq-shared";
 
 interface IStat {
   labels: string[];

apps/site/src/frontend/pages/txn/success.tsx

@@ -1,5 +1,5 @@
 import { styled } from "solid-styled-components";
-import { H3, Size16, Size20, Text, WeightSemiBold } from "../../ui-kit/typography";
+import { H3, Text } from "../../ui-kit/typography";
 import { AccountCard } from "../../components/account-card";
 import { Button, EButtonKind } from "../../ui-kit/button";
 import { onMount } from "solid-js";

apps/site/src/frontend/store/assets.tsx

@@ -1,6 +1,6 @@
 import { createStore, produce } from "solid-js/store";
 import { useMsqClient } from "./global";
-import { Accessor, Setter, createContext, createEffect, createSignal, onCleanup, onMount, useContext } from "solid-js";
+import { Accessor, Setter, createContext, createSignal, onCleanup, onMount, useContext } from "solid-js";
 import {
   DEFAULT_PRINCIPAL,
   IAssetMetadata,
@@ -19,6 +19,7 @@ import { AnonymousIdentity } from "@dfinity/agent";
 import { ISendPageProps } from "../pages/cabinet/my-assets/send";
 import { IPaymentCheckoutPageProps } from "../pages/integration/payment/checkout";
 import { ITxnHistoryPageProps } from "../pages/cabinet/my-assets/txn-history";
+import { useNavigate } from "@solidjs/router";
 
 export type IAssetDataExt = {
   accounts: {
@@ -114,6 +115,7 @@ export function AssetsStore(props: IChildren) {
   const [refreshPeriodically, setRefreshPeriodically] = createSignal(true);
   const [initialized, setInitialized] = createSignal(false);
   const _msq = useMsqClient();
+  const navigate = useNavigate();
 
   onMount(async () => {
     while (refreshPeriodically()) {
@@ -130,25 +132,42 @@ export function AssetsStore(props: IChildren) {
   const init = async () => {
     if (initialized()) return;
 
+    await addPredefinedAssets();
+
     await fetch();
     await refresh();
     setInitialized(true);
   };
 
-  const fetch = async (assetIds?: string[]): Promise<boolean[] | undefined> => {
+  const addPredefinedAssets = async () => {
     const msq = _msq()!;
 
-    let fetchedAllAssetData = await msq.getAllAssetData(assetIds);
+    let fetchedAllAssetData = await msq.getAllAssetData();
 
-    // CREATE PRE-DEFINED ASSETS
     const assetsToCreate = [];
+
     for (let asset of PRE_DEFINED_ASSETS) {
       if (fetchedAllAssetData[asset.assetId]) continue;
       assetsToCreate.push(asset);
     }
+
     if (assetsToCreate.length > 0) {
       await msq.addAsset({ assets: assetsToCreate });
-      fetchedAllAssetData = await msq.getAllAssetData(assetIds);
+    }
+  };
+
+  const fetch = async (assetIds?: string[]): Promise<boolean[] | undefined> => {
+    const msq = _msq()!;
+
+    let fetchedAllAssetData = await msq.getAllAssetData(assetIds);
+
+    // trap, if it is proposed for payment, but not listed in user's wallet
+    if (assetIds) {
+      for (let assetId of assetIds) {
+        if (fetchedAllAssetData[assetId]) continue;
+
+        navigate("/token-not-found");
+      }
     }
 
     const allAssetDataKeys = Object.keys(fetchedAllAssetData);

apps/site/src/frontend/ui-kit/icon.tsx

@@ -1,5 +1,5 @@
 import { Match, Switch } from "solid-js";
-import { COLOR_BLACK, COLOR_WHITE } from ".";
+import { COLOR_WHITE } from ".";
 import { IChildren, eventHandler } from "../utils";
 import { keyframes, styled } from "solid-styled-components";
 

apps/site/src/frontend/utils/index.ts

@@ -5,7 +5,6 @@ import {
   ErrorCode,
   IStatistics,
   PRE_LISTED_TOKENS,
-  Principal,
   TAccountId,
   debugStringify,
   err,
@@ -97,7 +96,7 @@ export async function makeAgent(identity?: Identity | undefined, host?: string):
     icHost = storedHost === null ? import.meta.env.VITE_MSQ_DFX_NETWORK_HOST : storedHost;
   }
 
-  const agent = new HttpAgent({ host: icHost, identity });
+  const agent = new HttpAgent({ host: icHost, identity, retryTimes: 10 });
 
   if (icHost) {
     await agent.fetchRootKey();