Merge pull request #60 from tonkeeper/feature/pro-dashboard

Fix: Tonkeeper Pro UI fixes

apps/desktop/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tonkeeper/desktop",
     "license": "Apache-2.0",
-    "version": "3.9.1",
+    "version": "3.9.2",
     "description": "Your desktop wallet on The Open Network",
     "main": ".webpack/main",
     "repository": {

apps/desktop/src/app/App.tsx

@@ -64,6 +64,10 @@ import { DesktopTokens } from '@tonkeeper/uikit/dist/desktop-pages/tokens/Deskto
 import { DesktopCoinPage } from '@tonkeeper/uikit/dist/desktop-pages/coin/DesktopCoinPage';
 import { DesktopHistoryPage } from '@tonkeeper/uikit/dist/desktop-pages/history/DesktopHistoryPage';
 import { useStonfiAssets } from '@tonkeeper/uikit/dist/state/stonfi';
+import { PreferencesAsideMenu } from '@tonkeeper/uikit/dist/components/desktop/aside/PreferencesAsideMenu';
+import { DesktopPreferencesRouting } from '@tonkeeper/uikit/dist/desktop-pages/preferences/DesktopPreferencesRouting';
+import { DesktopWalletSettingsRouting } from '@tonkeeper/uikit/dist/desktop-pages/settings/DesktopWalletSettingsRouting';
+import { useUserFiat } from '@tonkeeper/uikit/dist/state/fiat';
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -152,7 +156,7 @@ export const App = () => {
 const ThemeAndContent = () => {
     const { data } = useProBackupState();
     return (
-        <UserThemeProvider displayType="full-width" isPro={data?.valid}>
+        <UserThemeProvider displayType="full-width" isPro={data?.valid} isProSupported>
             <DarkThemeContext.Provider value={!data?.valid}>
                 <GlobalStyle />
                 <HeaderGlobalStyle />
@@ -170,13 +174,8 @@ const FullSizeWrapper = styled(Container)`
     max-width: 800px;
 `;
 
-const Wrapper = styled.div<{ withPadding: boolean }>`
+const Wrapper = styled.div`
     box-sizing: border-box;
-    ${p =>
-        p.withPadding &&
-        css`
-            padding-top: 64px;
-        `}
 
     height: 100%;
     display: flex;
@@ -214,6 +213,17 @@ const WalletRoutingWrapper = styled.div`
     position: relative;
 `;
 
+const PreferencesLayout = styled.div`
+    height: 100%;
+    display: flex;
+`;
+
+const PreferencesRoutingWrapper = styled.div`
+    flex: 1;
+    overflow: auto;
+    position: relative;
+`;
+
 const FullSizeWrapperBounded = styled(FullSizeWrapper)`
     max-height: 100%;
     overflow: auto;
@@ -228,6 +238,7 @@ export const Loader: FC = () => {
     const { i18n } = useTranslation();
     const { data: account } = useAccountState();
     const { data: auth } = useAuthState();
+    const { data: fiat } = useUserFiat();
 
     const tonendpoint = useTonendpoint(
         TARGET_ENV,
@@ -258,12 +269,17 @@ export const Loader: FC = () => {
         window.backgroundApi.onRefresh(() => queryClient.invalidateQueries());
     }, []);
 
-    if (auth === undefined || account === undefined || config === undefined || lock === undefined) {
+    if (
+        auth === undefined ||
+        account === undefined ||
+        config === undefined ||
+        lock === undefined ||
+        fiat === undefined
+    ) {
         return <Loading />;
     }
 
     const network = activeWallet?.network ?? Network.MAINNET;
-    const fiat = activeWallet?.fiat ?? FiatCurrencies.USD;
     const context = {
         api: getApiConfig(config, network, REACT_APP_TONCONSOLE_API),
         auth,
@@ -346,6 +362,7 @@ export const Content: FC<{
                     <Routes>
                         <Route path={AppProRoute.dashboard} element={<DashboardPage />} />
                         <Route path={AppRoute.browser} element={<DesktopBrowser />} />
+                        <Route path={any(AppRoute.settings)} element={<PreferencesContent />} />
                         <Route path="*" element={<WalletContent />} />
                     </Routes>
                 </WideContent>
@@ -364,15 +381,16 @@ const WalletContent = () => {
                 <WalletAsideMenu />
                 <WalletRoutingWrapper className="hide-scrollbar">
                     <Routes>
-                        <Route element={<OldAppRouting withPadding />}>
-                            <Route path={any(AppRoute.settings)} element={<Settings />} />
-                        </Route>
                         <Route element={<OldAppRouting />}>
                             <Route path={AppRoute.activity} element={<DesktopHistoryPage />} />
                             <Route path={any(AppRoute.purchases)} element={<DesktopPurchases />} />
                             <Route path={AppRoute.coins}>
                                 <Route path=":name/*" element={<DesktopCoinPage />} />
                             </Route>
+                            <Route
+                                path={any(AppRoute.walletSettings)}
+                                element={<DesktopWalletSettingsRouting />}
+                            />
                             <Route path="*" element={<DesktopTokens />} />
                         </Route>
                     </Routes>
@@ -382,9 +400,20 @@ const WalletContent = () => {
     );
 };
 
-const OldAppRouting: FC<{ withPadding?: boolean }> = ({ withPadding }) => {
+const PreferencesContent = () => {
+    return (
+        <PreferencesLayout>
+            <PreferencesAsideMenu />
+            <PreferencesRoutingWrapper className="hide-scrollbar">
+                <DesktopPreferencesRouting />
+            </PreferencesRoutingWrapper>
+        </PreferencesLayout>
+    );
+};
+
+const OldAppRouting = () => {
     return (
-        <Wrapper withPadding={withPadding}>
+        <Wrapper>
             <Outlet />
             <MemoryScroll />
         </Wrapper>

apps/desktop/src/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Tonkeeper Desktop</title>
+    <title>Tonkeeper Pro</title>
 
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&amp;display=swap"

apps/desktop/src/index.ts

@@ -9,7 +9,7 @@ import {
 } from './electron/protocol';
 import { TonConnectSSE } from './electron/sseEvetns';
 
-app.setName('Tonkeeper Desktop Pro');
+app.setName('Tonkeeper Pro');
 
 log.initialize({ preload: true });
 log.info('Application start-up');

apps/desktop/webpack.main.config.ts

@@ -4,17 +4,17 @@ import { rules } from './webpack.rules';
 import { plugins } from './webpack.plugins';
 
 export const mainConfig: Configuration = {
-  /**
-   * This is the main entry point for your application, it's the first file
-   * that runs in the main process.
-   */
-  entry: './src/index.ts',
-  // Put your normal webpack config below here
-  module: {
-    rules,
-  },
-  plugins,
-  resolve: {
-    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
-  },
+    /**
+     * This is the main entry point for your application, it's the first file
+     * that runs in the main process.
+     */
+    entry: './src/index.ts',
+    // Put your normal webpack config below here
+    module: {
+        rules
+    },
+    plugins,
+    resolve: {
+        extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json']
+    }
 };

apps/extension/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tonkeeper/extension",
-    "version": "3.9.0",
+    "version": "3.9.2",
     "author": "Nikita Kuznetsov <nkuz915@gmail.com>",
     "description": "Your extension wallet on The Open Network",
     "dependencies": {

apps/extension/src/App.tsx

@@ -54,6 +54,7 @@ import { Notifications } from './components/Notifications';
 import { connectToBackground } from './event';
 import { ExtensionAppSdk } from './libs/appSdk';
 import { useAnalytics, useAppWidth } from './libs/hooks';
+import { useUserFiat } from "@tonkeeper/uikit/dist/state/fiat";
 
 const ImportRouter = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import'));
 const Settings = React.lazy(() => import('@tonkeeper/uikit/dist/pages/settings'));
@@ -164,6 +165,7 @@ const Wrapper = styled(FullSizeWrapper)<{
 
 export const Loader: FC = React.memo(() => {
     const { data: activeWallet } = useActiveWallet();
+    const { data: fiat } = useUserFiat();
 
     const lock = useLock(sdk);
     const { data: account } = useAccountState();
@@ -178,7 +180,7 @@ export const Loader: FC = React.memo(() => {
 
     const { data: tracker } = useAnalytics(sdk.storage, account, activeWallet, sdk.version);
 
-    if (!account || !auth || !config || lock === undefined) {
+    if (!account || !auth || !config || lock === undefined || fiat === undefined) {
         return (
             <FullSizeWrapper standalone={false}>
                 <Loading />
@@ -187,7 +189,6 @@ export const Loader: FC = React.memo(() => {
     }
 
     const network = activeWallet?.network ?? Network.MAINNET;
-    const fiat = activeWallet?.fiat ?? FiatCurrencies.USD;
 
     const context: IAppContext = {
         api: getApiConfig(config, network),

apps/twa/src/App.tsx

@@ -58,6 +58,7 @@ import { TwaNftNotification } from './components/nft/NftNotification';
 import { TwaSendNotification } from './components/transfer/SendNotifications';
 import { TwaAppSdk } from './libs/appSdk';
 import { useAnalytics, useTwaAppViewport } from './libs/hooks';
+import { useUserFiat } from "@tonkeeper/uikit/dist/state/fiat";
 
 const Initialize = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import/Initialize'));
 const ImportRouter = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import'));
@@ -210,6 +211,7 @@ const seeIfShowQrScanner = (platform: TwaPlatform): boolean => {
 export const Loader: FC<{ sdk: IAppSdk }> = ({ sdk }) => {
     const { data: activeWallet } = useActiveWallet();
     const webApp = useWebApp();
+    const { data: fiat } = useUserFiat();
 
     const lock = useLock(sdk);
     const { data: account } = useAccountState();
@@ -226,14 +228,13 @@ export const Loader: FC<{ sdk: IAppSdk }> = ({ sdk }) => {
     const navigate = useNavigate();
     const { data: tracker } = useAnalytics(account, activeWallet);
 
-    if (auth === undefined || account === undefined || config === undefined || lock === undefined) {
+    if (auth === undefined || account === undefined || config === undefined || lock === undefined || fiat === undefined) {
         return <Loading />;
     }
 
     const showQrScan = seeIfShowQrScanner(webApp.platform);
 
     const network = activeWallet?.network ?? Network.MAINNET;
-    const fiat = activeWallet?.fiat ?? FiatCurrencies.USD;
     const context: IAppContext = {
         api: getApiConfig(config, network),
         auth,

apps/web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tonkeeper/web",
-    "version": "3.9.0",
+    "version": "3.9.2",
     "author": "Nikita Kuznetsov <nkuz915@gmail.com>",
     "description": "Your web wallet on The Open Network",
     "dependencies": {

apps/web/src/App.tsx

@@ -1,5 +1,4 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { FiatCurrencies } from '@tonkeeper/core/dist/entries/fiat';
 import { localizationText } from '@tonkeeper/core/dist/entries/language';
 import { Network, getApiConfig } from '@tonkeeper/core/dist/entries/network';
 import { WalletState } from '@tonkeeper/core/dist/entries/wallet';
@@ -49,6 +48,7 @@ import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-ro
 import styled, { css } from 'styled-components';
 import { BrowserAppSdk } from './libs/appSdk';
 import { useAnalytics, useAppHeight, useAppWidth } from './libs/hooks';
+import { useUserFiat } from "@tonkeeper/uikit/dist/state/fiat";
 
 const ImportRouter = React.lazy(() => import('@tonkeeper/uikit/dist/pages/import'));
 const Settings = React.lazy(() => import('@tonkeeper/uikit/dist/pages/settings'));
@@ -164,6 +164,7 @@ const Wrapper = styled(FullSizeWrapper)<{ standalone: boolean }>`
 
 export const Loader: FC = () => {
     const { data: activeWallet } = useActiveWallet();
+    const { data: fiat } = useUserFiat();
 
     const [ios, standalone] = useMemo(() => {
         return [sdk.isIOs(), sdk.isStandalone()] as const;
@@ -199,12 +200,11 @@ export const Loader: FC = () => {
         }
     }, [activeWallet, i18n]);
 
-    if (auth === undefined || account === undefined || config === undefined || lock === undefined) {
+    if (auth === undefined || account === undefined || config === undefined || lock === undefined || fiat === undefined) {
         return <Loading />;
     }
 
     const network = activeWallet?.network ?? Network.MAINNET;
-    const fiat = activeWallet?.fiat ?? FiatCurrencies.USD;
     const context = {
         api: getApiConfig(config, network),
         auth,

packages/core/src/Keys.ts

@@ -5,6 +5,7 @@ export enum AppKey {
 
     THEME = 'theme',
     UI_PREFERENCES = 'ui_preferences',
+    FIAT = 'fiat',
 
     PASSWORD = 'password',
     LOCK = 'lock',

packages/core/src/entries/wallet.ts

@@ -72,7 +72,6 @@ export interface WalletState {
     orderJettons?: string[];
 
     lang?: Language;
-    fiat?: FiatCurrencies;
     theme?: string;
 
     proxy?: WalletProxy;

packages/core/src/service/walletService.ts

@@ -150,7 +150,6 @@ export const updateWalletProperty = async (
             | 'shownJettons'
             | 'orderJettons'
             | 'lang'
-            | 'fiat'
             | 'network'
             | 'emoji'
         >

packages/core/src/tonkeeperApi/tonendpoint.ts

@@ -36,6 +36,7 @@ export interface TonendpointConfig {
     neocryptoWebView?: string;
 
     directSupportUrl?: string;
+    faq_url?: string;
 
     accountExplorer?: string;
     transactionExplorer?: string;

packages/core/src/utils/common.ts

@@ -1,6 +1,7 @@
 import { Address } from '@ton/core';
 import { decodeBase58, sha256 } from 'ethers';
 import { Network } from '../entries/network';
+import { CryptoCurrency } from '../entries/crypto';
 
 export const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
@@ -53,9 +54,13 @@ export const areEqAddresses = (address1: string, address2: string) => {
     }
 };
 
+export const isTonAddress = (address: string) => {
+    return address.toLowerCase() === CryptoCurrency.TON.toLowerCase();
+};
+
 export const toShortValue = (value: string, length = 4): string => {
     if (value.length > length * 2) {
-        return value.slice(0, length) + '...' + value.slice(-length);
+        return value.slice(0, length) + '…' + value.slice(-length);
     } else {
         return value;
     }

packages/locales/src/tonkeeper-web/en.json

@@ -57,6 +57,11 @@
   "Password" : "Password",
   "PasswordChanged" : "Password Changed",
   "PasswordDoNotMatch" : "Passwords do not match.",
+  "preferences_aside_dev_menu" : "Dev Menu",
+  "preferences_aside_faq" : "FAQ",
+  "preferences_aside_sign_out" : "Sign Out",
+  "preferences_aside_sign_out_all" : "Sign Out of all Accounts",
+  "preferences_aside_theme" : "Theme",
   "pro_banner_buy" : "Buy Pro",
   "pro_banner_days_left" : "Trial ends in %days%",
   "pro_banner_start_trial" : "Try Pro for Free",