Update desktop layout and add swap button

.github/workflows/cd.yaml

@@ -21,6 +21,9 @@ jobs:
             REACT_APP_TG_BOT_ID: ${{ secrets.REACT_APP_TG_BOT_ID }}
             REACT_APP_TONCONSOLE_API: https://pro.tonconsole.com
             REACT_APP_TG_BOT_ORIGIN: https://tonkeeper.com
+            VITE_APP_APTABASE: ${{ secrets.VITE_APP_APTABASE }}
+            VITE_APP_APTABASE_HOST: https://anonymous-analytics.tonkeeper.com
+            REACT_APP_STONFI_REFERRAL_ADDRESS: ${{ secrets.REACT_APP_STONFI_REFERRAL_ADDRESS }}
             GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
             DEBUG: electron*
 

.github/workflows/pull-request.yaml

@@ -21,6 +21,9 @@ jobs:
             REACT_APP_TG_BOT_ID: ${{ secrets.REACT_APP_TG_BOT_ID }}
             REACT_APP_TONCONSOLE_API: https://pro.tonconsole.com
             REACT_APP_TG_BOT_ORIGIN: https://tonkeeper.com
+            VITE_APP_APTABASE: ${{ secrets.VITE_APP_APTABASE }}
+            VITE_APP_APTABASE_HOST: https://anonymous-analytics.tonkeeper.com
+            REACT_APP_STONFI_REFERRAL_ADDRESS: ${{ secrets.REACT_APP_STONFI_REFERRAL_ADDRESS }}
             DEBUG: electron*
 
         steps:

apps/desktop/.env.example

@@ -1,3 +1,4 @@
 REACT_APP_TONCONSOLE_API=https://dev-pro.tonconsole.com
 REACT_APP_TG_BOT_ID=6345183204
 REACT_APP_TG_BOT_ORIGIN=https://tonkeeper.com
+REACT_APP_STONFI_REFERRAL_ADDRESS=UQCthC8ICK7K8Hkfm9smblLFroKrYrEMwZuoD4Nbm5LswUnc

apps/desktop/package.json

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

apps/desktop/src/app/App.tsx

@@ -63,6 +63,7 @@ import { DesktopPurchases } from '@tonkeeper/uikit/dist/desktop-pages/purchases/
 import { DesktopTokens } from '@tonkeeper/uikit/dist/desktop-pages/tokens/DesktopTokens';
 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';
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -108,6 +109,7 @@ const listOfAuth: AuthState['kind'][] = ['keychain'];
 
 declare const REACT_APP_TONCONSOLE_API: string;
 declare const REACT_APP_TG_BOT_ID: string;
+declare const REACT_APP_STONFI_REFERRAL_ADDRESS: string;
 
 export const App = () => {
     const { t, i18n } = useTranslation();
@@ -275,7 +277,8 @@ export const Loader: FC = () => {
         experimental: true,
         ios: false,
         env: {
-            tgAuthBotId: REACT_APP_TG_BOT_ID
+            tgAuthBotId: REACT_APP_TG_BOT_ID,
+            stonfiReferralAddress: REACT_APP_STONFI_REFERRAL_ADDRESS
         }
     };
 
@@ -298,6 +301,7 @@ export const Loader: FC = () => {
 
 const usePrefetch = () => {
     useRecommendations();
+    useStonfiAssets();
 };
 
 export const Content: FC<{

apps/desktop/webpack.plugins.ts

@@ -15,6 +15,9 @@ export const plugins = [
         REACT_APP_AMPLITUDE: JSON.stringify(process.env.REACT_APP_AMPLITUDE),
         REACT_APP_TONCONSOLE_API: JSON.stringify(process.env.REACT_APP_TONCONSOLE_API),
         REACT_APP_TG_BOT_ID: JSON.stringify(process.env.REACT_APP_TG_BOT_ID),
-        REACT_APP_TG_BOT_ORIGIN: JSON.stringify(process.env.REACT_APP_TG_BOT_ORIGIN)
+        REACT_APP_TG_BOT_ORIGIN: JSON.stringify(process.env.REACT_APP_TG_BOT_ORIGIN),
+        REACT_APP_STONFI_REFERRAL_ADDRESS: JSON.stringify(
+            process.env.REACT_APP_STONFI_REFERRAL_ADDRESS
+        )
     })
 ];

apps/extension/package.json

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

apps/web/package.json

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

packages/core/src/service/stonfiService.ts

@@ -0,0 +1,29 @@
+export interface StonfiAsset {
+    contract_address: string;
+    blacklisted: boolean;
+}
+
+class StonfiApi {
+    public async fetchAssets(): Promise<StonfiAsset[]> {
+        try {
+            const response = await (
+                await fetch('https://app.ston.fi/rpc', {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        jsonrpc: '2.0',
+                        id: Date.now(),
+                        method: 'asset.list'
+                    }),
+                    headers: { 'content-type': 'application/json' }
+                })
+            ).json();
+
+            return response.result.assets;
+        } catch (e) {
+            console.log(e);
+            return [];
+        }
+    }
+}
+
+export const stonfiApi = new StonfiApi();

packages/uikit/src/components/desktop/DesktopViewLayout.tsx

@@ -1,22 +1,37 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import React, { FC, ReactNode, useCallback } from 'react';
 import { useAppSdk } from '../../hooks/appSdk';
 import { useNavigate } from 'react-router-dom';
 import { useNativeBackButton } from '../BackButton';
 import { ArrowLeftIcon } from '../Icon';
 import { IconButton } from '../fields/IconButton';
 
-export const DesktopViewPageLayout = styled.div`
-    padding-top: 0.5rem;
+export const DesktopViewPageLayout = styled.div<{ borderBottom?: boolean }>`
     overflow: auto;
 `;
 
-export const DesktopViewHeaderStyled = styled.div<{ withBackButton?: boolean }>`
-    padding: 0 1rem 0 ${props => (props.withBackButton ? '0' : '1rem')};
-    height: 36px;
+export const DesktopViewHeaderStyled = styled.div<{
+    withBackButton?: boolean;
+    borderBottom?: boolean;
+}>`
+    padding: 1rem 1rem 1rem ${props => (props.withBackButton ? '0' : '1rem')};
+    height: 20px;
     display: flex;
     align-items: center;
-    box-sizing: border-box;
+    box-sizing: content-box;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: ${p => p.theme.backgroundPage};
+
+    border-bottom: 1px solid transparent;
+    transition: border-bottom-color 0.2s ease-in-out;
+
+    ${props =>
+        props.borderBottom &&
+        css`
+            border-bottom-color: ${props.theme.separatorCommon};
+        `};
 `;
 
 const IconButtonStyled = styled(IconButton)`
@@ -58,9 +73,14 @@ export const DesktopViewHeader: FC<{
     children: ReactNode;
     backButton?: boolean;
     className?: string;
-}> = ({ children, backButton, className }) => {
+    borderBottom?: boolean;
+}> = ({ children, backButton, borderBottom, className }) => {
     return (
-        <DesktopViewHeaderStyled withBackButton={backButton} className={className}>
+        <DesktopViewHeaderStyled
+            withBackButton={backButton}
+            className={className}
+            borderBottom={borderBottom}
+        >
             {backButton && <BackButtonStyled />}
             {children}
         </DesktopViewHeaderStyled>

packages/uikit/src/components/desktop/aside/WalletAsideMenu.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { AsideMenuItem } from '../../shared/AsideItem';
 import { Label2 } from '../../Text';
 import { ClockSmoothIcon, CoinsIcon, SaleBadgeIcon } from '../../Icon';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { AppRoute } from '../../../libs/routes';
 import { useTranslation } from '../../../hooks/translation';
 
@@ -24,11 +24,15 @@ const AsideMenuItemStyled = styled(AsideMenuItem)`
 
 export const WalletAsideMenu = () => {
     const { t } = useTranslation();
+    const location = useLocation();
+
+    const isCoinPageOpened = location.pathname.startsWith(AppRoute.coins);
+
     return (
         <WalletAsideContainer>
             <NavLink to={AppRoute.home}>
                 {({ isActive }) => (
-                    <AsideMenuItemStyled isSelected={isActive}>
+                    <AsideMenuItemStyled isSelected={isActive || isCoinPageOpened}>
                         <CoinsIcon />
                         <Label2>{t('wallet_aside_tokens')}</Label2>
                     </AsideMenuItemStyled>

packages/uikit/src/components/desktop/header/DesktopHeader.tsx

@@ -12,10 +12,10 @@ import React from 'react';
 import { BuyNotification } from '../../home/BuyAction';
 import { useDisclosure } from '../../../hooks/useDisclosure';
 import { useTonendpointBuyMethods } from '../../../state/tonendpoint';
-import { DesktopExternalLinks } from '../../../libs/externalLinks';
 import { usePreFetchRates } from '../../../state/rates';
 import { IconButton } from '../../fields/IconButton';
 import { useTranslation } from '../../../hooks/translation';
+import { useStonfiSwapLink } from '../../../state/stonfi';
 
 const DesktopHeaderStyled = styled.div`
     padding-left: 1rem;
@@ -90,6 +90,7 @@ export const DesktopHeader = () => {
     const { isOpen, onClose, onOpen } = useDisclosure();
     const { data: buy } = useTonendpointBuyMethods();
     const { t } = useTranslation();
+    const swapLink = useStonfiSwapLink('ton');
 
     return (
         <DesktopHeaderStyled>
@@ -130,10 +131,7 @@ export const DesktopHeader = () => {
                     </ButtonStyled>
                 </ButtonsContainer>
                 <ButtonsContainer>
-                    <ButtonStyled
-                        size="small"
-                        onClick={() => sdk.openPage(DesktopExternalLinks.Swap)}
-                    >
+                    <ButtonStyled size="small" onClick={() => sdk.openPage(swapLink)}>
                         <SwapIcon />
                         {t('wallet_swap')}
                     </ButtonStyled>

packages/uikit/src/components/desktop/history/DesktopHistory.tsx

@@ -8,7 +8,7 @@ import { ActionData, ActivityNotification } from '../../activity/ton/ActivityNot
 
 const HistoryEventsGrid = styled.div<{ withBorder?: boolean }>`
     display: grid;
-    grid-template-columns: 124px fit-content(256px) fit-content(256px) minmax(40px, 1fr);
+    grid-template-columns: 132px fit-content(256px) fit-content(256px) minmax(40px, 1fr);
     column-gap: 8px;
     padding: 0 1rem;
 `;

packages/uikit/src/components/desktop/history/ton/HistoryCell.tsx

@@ -171,7 +171,7 @@ export const HistoryCellAmount: FC<{
 
     return (
         <HistoryCellAmountStyled color={finalColor}>
-            {isNegative ? '−' : '+'}
+            {isNegative ? '−' : '+'}&nbsp;
             {format(amount, decimals)}&nbsp;{symbol}
         </HistoryCellAmountStyled>
     );

packages/uikit/src/components/desktop/history/ton/JettonDesktopActions.tsx

@@ -88,6 +88,7 @@ export const JettonTransferDesktopAction: FC<{
                         symbol={jettonTransfer.jetton.symbol}
                         decimals={jettonTransfer.jetton.decimals}
                         isFailed={action.status === 'failed'}
+                        isNegative
                     />
                 </ActionRow>
             </>

packages/uikit/src/components/desktop/history/ton/TonTransferDesktopAction.tsx

@@ -54,6 +54,7 @@ export const TonTransferDesktopAction: FC<{
                     symbol={CryptoCurrency.TON}
                     decimals={9}
                     isFailed={action.status === 'failed'}
+                    isNegative
                 />
             </ActionRow>
         </>

packages/uikit/src/desktop-pages/coin/DesktopCoinPage.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from '../../hooks/translation';
 import { useAppContext } from '../../hooks/appContext';
 import { useFetchNext } from '../../hooks/useFetchNext';
 import {
-    DesktopViewDivider,
     DesktopViewHeader,
     DesktopViewPageLayout
 } from '../../components/desktop/DesktopViewLayout';
@@ -20,14 +19,14 @@ import BigNumber from 'bignumber.js';
 import { eqAddresses } from '@tonkeeper/core/dist/utils/address';
 import { Button } from '../../components/fields/Button';
 import { ArrowDownIcon, ArrowUpIcon, PlusIcon, SwapIcon } from '../../components/Icon';
-import { DesktopExternalLinks } from '../../libs/externalLinks';
 import { useAppSdk } from '../../hooks/appSdk';
 import { BuyNotification } from '../../components/home/BuyAction';
 import { useDisclosure } from '../../hooks/useDisclosure';
 import { useTonendpointBuyMethods } from '../../state/tonendpoint';
 import { useFetchFilteredActivity } from '../../state/activity';
 import { DesktopHistory } from '../../components/desktop/history/DesktopHistory';
 import { getMixedActivity } from '../../state/mixedActivity';
+import { useIsStonfiAsset, useStonfiSwapLink } from '../../state/stonfi';
 
 export const DesktopCoinPage = () => {
     const navigate = useNavigate();
@@ -46,12 +45,9 @@ export const DesktopCoinPage = () => {
     return <CoinPage token={token} />;
 };
 
-const DesktopViewHeaderStyled = styled(DesktopViewHeader)`
-    margin-bottom: 0.5rem;
-`;
-
-const CoinPageBody = styled.div`
+const CoinHeaderStyled = styled.div`
     padding: 0 1rem;
+    border-bottom: 1px solid ${p => p.theme.separatorCommon};
 `;
 
 const HeaderButtonsContainer = styled.div`
@@ -72,12 +68,15 @@ const ButtonStyled = styled(Button)`
 const CoinHeader: FC<{ token: string }> = ({ token }) => {
     const { t } = useTranslation();
     const { isOpen, onClose, onOpen } = useDisclosure();
+
     const { data: buy } = useTonendpointBuyMethods();
     const canBuy = token === CryptoCurrency.TON;
+    const { data: canSwap } = useIsStonfiAsset(token);
+    const swapLink = useStonfiSwapLink(canSwap ? token : undefined);
 
     const sdk = useAppSdk();
     return (
-        <>
+        <CoinHeaderStyled>
             <CoinInfo token={token} />
             <HeaderButtonsContainer>
                 <ButtonStyled
@@ -105,10 +104,12 @@ const CoinHeader: FC<{ token: string }> = ({ token }) => {
                     <ArrowDownIcon />
                     {t('wallet_receive')}
                 </ButtonStyled>
-                <ButtonStyled size="small" onClick={() => sdk.openPage(DesktopExternalLinks.Swap)}>
-                    <SwapIcon />
-                    {t('wallet_swap')}
-                </ButtonStyled>
+                {canSwap && (
+                    <ButtonStyled size="small" onClick={() => swapLink && sdk.openPage(swapLink)}>
+                        <SwapIcon />
+                        {t('wallet_swap')}
+                    </ButtonStyled>
+                )}
                 {canBuy && (
                     <ButtonStyled size="small" onClick={onOpen}>
                         <PlusIcon />
@@ -117,7 +118,7 @@ const CoinHeader: FC<{ token: string }> = ({ token }) => {
                 )}
             </HeaderButtonsContainer>
             <BuyNotification buy={buy} open={isOpen} handleClose={onClose} />
-        </>
+        </CoinHeaderStyled>
     );
 };
 
@@ -209,6 +210,12 @@ const CoinInfo: FC<{ token: string }> = ({ token }) => {
     );
 };
 
+const HistorySubheader = styled(Label2)`
+    display: block;
+    padding: 0.5rem 1rem;
+    margin-top: 0.5rem;
+`;
+
 export const CoinPage: FC<{ token: string }> = ({ token }) => {
     const { t } = useTranslation();
     const ref = useRef<HTMLDivElement>(null);
@@ -239,14 +246,12 @@ export const CoinPage: FC<{ token: string }> = ({ token }) => {
 
     return (
         <DesktopViewPageLayout ref={ref}>
-            <DesktopViewHeaderStyled backButton>
+            <DesktopViewHeader backButton borderBottom={true}>
                 <Label2>{assetSymbol || 'Unknown asset'}</Label2>
-            </DesktopViewHeaderStyled>
-            <DesktopViewDivider />
-            <CoinPageBody>
-                <CoinHeader token={token} />
-                <DesktopHistory isFetchingNextPage={isFetchingNextPage} activity={activity} />
-            </CoinPageBody>
+            </DesktopViewHeader>
+            <CoinHeader token={token} />
+            <HistorySubheader>{t('page_header_history')}</HistorySubheader>
+            <DesktopHistory isFetchingNextPage={isFetchingNextPage} activity={activity} />
         </DesktopViewPageLayout>
     );
 };