Wallet: create main context mock to fix up delegation page stories

nym-wallet/.storybook/mocks/tauri/index.js

@@ -2,9 +2,27 @@
  * This is a mock for Tauri's API package (@tauri-apps/api), to prevent stories from being excluded, because they either use
  * or import dependencies that use Tauri.
  */
-
 module.exports = {
-  invoke: (operation) => {
+  invoke: (operation, args) => {
+    switch(operation) {
+      case 'get_balance': {
+        return {
+          amount: {
+            amount: '100',
+            denom: 'NYMT',
+          },
+          printable_balance: '100 NYMT',
+        }
+      }
+      case 'delegate_to_mixnode': {
+        return ({
+          logs_json: '[]',
+          data_json: '{}',
+          transaction_hash: '12345',
+        });
+      }
+    }
+
     console.error(`Tauri cannot be used in Storybook. The operation requested was "${operation}". You can add mock responses to "nym_wallet/.storybook/mocks/tauri.js" if you need. The default response is "void".`);
     return new Promise((resolve, reject) => {
       reject(new Error(`Tauri operation ${operation} not available in storybook.`));

nym-wallet/src/context/main.tsx

@@ -30,7 +30,7 @@ export const urls = (networkName?: Network) =>
 
 type TLoginType = 'mnemonic' | 'password';
 
-type TAppContext = {
+export type TAppContext = {
   mode: 'light' | 'dark';
   appEnv?: AppEnv;
   appVersion?: string;

nym-wallet/src/context/mocks/main.tsx

@@ -0,0 +1,56 @@
+import React, { FC, useMemo } from 'react';
+import type { TAppContext } from '../main';
+import { AppContext } from '../main';
+
+export const MockMainContextProvider: FC<{}> = ({ children }) => {
+  const memoizedValue = useMemo<TAppContext>(
+    () => ({
+      mode: 'light',
+      appEnv: {
+        ADMIN_ADDRESS: null,
+        SHOW_TERMINAL: null,
+      },
+      appVersion: 'mock',
+      isAdminAddress: false,
+      isLoading: false,
+      clientDetails: {
+        denom: 'NYMT',
+        client_address: '',
+        contract_address: '',
+      },
+      userBalance: {
+        balance: {
+          amount: {
+            amount: '100',
+            denom: 'NYMT',
+          },
+          printable_balance: '100 NYMT',
+        },
+        clearAll: () => undefined,
+        isLoading: false,
+        clearBalance: () => undefined,
+        fetchBalance: async () => undefined,
+        fetchTokenAllocation: async () => undefined,
+      },
+      showAdmin: false,
+      showTerminal: false,
+      showSettings: false,
+      network: 'SANDBOX',
+      loginType: 'mnemonic',
+      setIsLoading: () => undefined,
+      setError: () => undefined,
+      signInWithPassword: () => undefined,
+      switchNetwork: () => undefined,
+      getBondDetails: async () => undefined,
+      handleShowAdmin: () => undefined,
+      handleShowTerminal: () => undefined,
+      logIn: () => undefined,
+      logOut: () => undefined,
+      onAccountChange: () => undefined,
+      handleShowSettings: () => undefined,
+    }),
+    [],
+  );
+
+  return <AppContext.Provider value={memoizedValue}>{children}</AppContext.Provider>;
+};

nym-wallet/src/pages/delegation/DelegationPage.stories.tsx

@@ -2,15 +2,18 @@ import * as React from 'react';
 import { DelegationPage } from './index';
 import { MockDelegationContextProvider } from '../../context/mocks/delegations';
 import { MockRewardsContextProvider } from '../../context/mocks/rewards';
+import { MockMainContextProvider } from '../../context/mocks/main';
 
 export default {
   title: 'Delegation/Flows/Mock',
 };
 
 export const Default = () => (
-  <MockDelegationContextProvider>
-    <MockRewardsContextProvider>
-      <DelegationPage />
-    </MockRewardsContextProvider>
-  </MockDelegationContextProvider>
+  <MockMainContextProvider>
+    <MockDelegationContextProvider>
+      <MockRewardsContextProvider>
+        <DelegationPage />
+      </MockRewardsContextProvider>
+    </MockDelegationContextProvider>
+  </MockMainContextProvider>
 );