Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: pro banner gradient updated #47

Merged
merged 3 commits into from
Mar 18, 2024
Merged

fix: pro banner gradient updated #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1820ec9
fix: pro banner gradient updated
siandreev Mar 13, 2024
82f6c6d
feat: desktop pro layout added
siandreev Mar 14, 2024
a475da9
Fix imports
KuznetsovNikita Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 27 additions & 28 deletions apps/desktop/src/app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ import { Loading } from '@tonkeeper/uikit/dist/components/Loading';
import MemoryScroll from '@tonkeeper/uikit/dist/components/MemoryScroll';
import QrScanner from '@tonkeeper/uikit/dist/components/QrScanner';
import { SybHeaderGlobalStyle } from '@tonkeeper/uikit/dist/components/SubHeader';
import { AsideMenu } from '@tonkeeper/uikit/dist/components/aside/AsideMenu';
import { AsideMenu } from '@tonkeeper/uikit/dist/components/desktop/aside/AsideMenu';
import { DesktopHeader } from '@tonkeeper/uikit/dist/components/desktop/header/DesktopHeader';
import { WalletAsideMenu } from '@tonkeeper/uikit/dist/components/desktop/main-screen/WalletAsideMenu';
import ReceiveNotification from '@tonkeeper/uikit/dist/components/home/ReceiveNotification';
import NftNotification from '@tonkeeper/uikit/dist/components/nft/NftNotification';
import {
Expand All @@ -38,7 +40,6 @@ import Activity from '@tonkeeper/uikit/dist/pages/activity/Activity';
import Browser from '@tonkeeper/uikit/dist/pages/browser';
import Coin from '@tonkeeper/uikit/dist/pages/coin/Coin';
import DashboardPage from '@tonkeeper/uikit/dist/pages/dashboard';
import { MainColumn } from '@tonkeeper/uikit/dist/pages/home/MainColumn';
import { Unlock } from '@tonkeeper/uikit/dist/pages/home/Unlock';
import { UnlockNotification } from '@tonkeeper/uikit/dist/pages/home/UnlockNotification';
import ImportRouter from '@tonkeeper/uikit/dist/pages/import';
Expand Down Expand Up @@ -169,7 +170,6 @@ const Wrapper = styled.div`
width: 100%;
display: flex;
flex-direction: column;
min-height: var(--app-height);
background-color: ${props => props.theme.backgroundPage};
white-space: pre-wrap;
`;
Expand All @@ -187,21 +187,18 @@ const WideContent = styled.div`

const WalletLayout = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;

const FirstColumn = styled.div`
const WalletLayoutBody = styled.div`
flex: 1;
display: flex;
flex-basis: 40%;
overflow: auto;
flex-direction: column;
padding: 64px 16px 0;
flex-shrink: 0;
max-height: calc(100% - 69px);
`;

const SecondColumn = styled.div`
display: flex;
flex-grow: 1;
const WalletRoutingWrapper = styled.div`
flex: 1;
overflow: auto;
position: relative;
`;
Expand Down Expand Up @@ -341,23 +338,25 @@ export const Content: FC<{
const WalletContent = () => {
return (
<WalletLayout>
<FirstColumn>
<MainColumn />
</FirstColumn>
<SecondColumn>
<Routes>
<Route element={<OldAppRouting />}>
<Route path={AppRoute.activity} element={<Activity />} />
<Route path={any(AppRoute.browser)} element={<Browser />} />
<Route path={any(AppRoute.purchases)} element={<Purchases />} />
<Route path={any(AppRoute.settings)} element={<Settings />} />
<Route path={AppRoute.coins}>
<Route path=":name/*" element={<Coin />} />
<DesktopHeader />

<WalletLayoutBody>
<WalletAsideMenu />
<WalletRoutingWrapper>
<Routes>
<Route element={<OldAppRouting />}>
<Route path={AppRoute.activity} element={<Activity />} />
<Route path={any(AppRoute.browser)} element={<Browser />} />
<Route path={any(AppRoute.purchases)} element={<Purchases />} />
<Route path={any(AppRoute.settings)} element={<Settings />} />
<Route path={AppRoute.coins}>
<Route path=":name/*" element={<Coin />} />
</Route>
<Route path="*" element={<Tokens />} />
</Route>
<Route path="*" element={<Tokens />} />
</Route>
</Routes>
</SecondColumn>
</Routes>
</WalletRoutingWrapper>
</WalletLayoutBody>
</WalletLayout>
);
};
Expand Down
158 changes: 158 additions & 0 deletions packages/uikit/src/components/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -876,3 +876,161 @@ export const StatsIcon: FC<{ className?: string }> = ({ className }) => {
</svg>
);
};

export const CoinsIcon: FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
color={theme.iconSecondary}
className={className}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.63569 3.21983C3.77767 3.66927 3.5 4.15946 3.5 4.5C3.5 4.84054 3.77767 5.33073 4.63569 5.78017C5.45819 6.211 6.64642 6.5 8 6.5C9.35358 6.5 10.5418 6.211 11.3643 5.78017C12.2223 5.33073 12.5 4.84054 12.5 4.5C12.5 4.15946 12.2223 3.66927 11.3643 3.21983C10.5418 2.789 9.35358 2.5 8 2.5C6.64642 2.5 5.45819 2.789 4.63569 3.21983ZM12.5 6.85168C12.358 6.94438 12.2106 7.03018 12.0603 7.10892C10.9827 7.67339 9.54592 8 8 8C6.45408 8 5.01731 7.67339 3.93968 7.10892C3.78936 7.03018 3.64205 6.94438 3.5 6.85168V8C3.5 8.34054 3.77767 8.83073 4.63569 9.28017C5.45819 9.711 6.64642 10 8 10C9.35358 10 10.5418 9.711 11.3643 9.28017C12.2223 8.83073 12.5 8.34054 12.5 8V6.85168ZM14 8V4.5C14 3.32176 13.1024 2.43695 12.0603 1.89108C10.9827 1.32661 9.54592 1 8 1C6.45408 1 5.01731 1.32661 3.93968 1.89108C2.89758 2.43695 2 3.32176 2 4.5V8V11.5C2 12.6782 2.89758 13.5631 3.93968 14.1089C5.01731 14.6734 6.45408 15 8 15C9.54592 15 10.9827 14.6734 12.0603 14.1089C13.1024 13.5631 14 12.6782 14 11.5V8ZM12.5 10.3517C12.358 10.4444 12.2106 10.5302 12.0603 10.6089C10.9827 11.1734 9.54592 11.5 8 11.5C6.45408 11.5 5.01731 11.1734 3.93968 10.6089C3.78936 10.5302 3.64205 10.4444 3.5 10.3517V11.5C3.5 11.8405 3.77767 12.3307 4.63569 12.7802C5.45819 13.211 6.64642 13.5 8 13.5C9.35358 13.5 10.5418 13.211 11.3643 12.7802C12.2223 12.3307 12.5 11.8405 12.5 11.5V10.3517Z"
fill="currentColor"
/>
</svg>
);
};

export const SaleBadgeIcon: FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
color={theme.iconSecondary}
className={className}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.04155 1.00003L8.95378 1.00002C8.28542 0.999818 7.82282 0.999681 7.37995 1.10866C6.98863 1.20495 6.61538 1.3637 6.27457 1.57879C5.88888 1.8222 5.5681 2.15552 5.10465 2.63708L5.10464 2.63709L5.04377 2.70032L3.33599 4.47379L3.31387 4.49676L3.31387 4.49676C2.74067 5.092 2.27912 5.57129 1.93659 5.99001C1.58403 6.421 1.31556 6.8366 1.1662 7.31781C0.928137 8.08483 0.935893 8.90709 1.18839 9.66948C1.3468 10.1478 1.62305 10.5583 1.98368 10.9825C2.33405 11.3947 2.80457 11.8652 3.3889 12.4495L3.41144 12.4721L3.52804 12.5887L3.55059 12.6112C4.1349 13.1955 4.60541 13.6661 5.01759 14.0164C5.44185 14.3771 5.85231 14.6533 6.33062 14.8117C7.09301 15.0642 7.91528 15.072 8.6823 14.8339C9.16351 14.6845 9.57911 14.4161 10.0101 14.0635C10.4288 13.721 10.9081 13.2594 11.5033 12.6862L11.5263 12.6641L13.2998 10.9563L13.363 10.8955L13.363 10.8955C13.8446 10.432 14.1779 10.1112 14.4213 9.72553C14.6364 9.38473 14.7951 9.01148 14.8914 8.62015C15.0004 8.17728 15.0003 7.71468 15.0001 7.04632L15.0001 6.95855V5.75003V5.7186V5.71856C15.0001 5.04521 15.0001 4.49452 14.9635 4.04696C14.9257 3.5837 14.8449 3.16531 14.6458 2.77456C14.3343 2.16304 13.8371 1.66585 13.2255 1.35426C12.8348 1.15517 12.4164 1.07444 11.9531 1.03659C11.5056 1.00002 10.9549 1.00002 10.2815 1.00003L10.2501 1.00003H9.04155ZM7.73837 2.56521C7.98267 2.50509 8.25203 2.50003 9.04155 2.50003H10.2501C10.9625 2.50003 11.4517 2.50062 11.831 2.5316C12.2015 2.56187 12.4005 2.61738 12.5446 2.69077C12.8738 2.85855 13.1416 3.12627 13.3093 3.45555C13.3827 3.59959 13.4382 3.79861 13.4685 4.16911C13.4995 4.54837 13.5001 5.03759 13.5001 5.75003V6.95855C13.5001 7.74808 13.495 8.01743 13.4349 8.26173C13.3771 8.49653 13.2819 8.72048 13.1528 8.92496C13.0185 9.13772 12.828 9.3282 12.2593 9.87585L10.4859 11.5836C9.8623 12.1841 9.42645 12.603 9.06033 12.9025C8.70111 13.1964 8.45838 13.3328 8.23765 13.4013C7.76947 13.5466 7.26757 13.5419 6.80221 13.3878C6.58282 13.3151 6.3427 13.1741 5.98909 12.8735C5.62868 12.5672 5.20082 12.1401 4.5887 11.528L4.4721 11.4114C3.85999 10.7993 3.43293 10.3714 3.12658 10.011C2.82599 9.6574 2.68499 9.41729 2.61233 9.19789C2.45821 8.73254 2.45347 8.23063 2.59879 7.76245C2.6673 7.54172 2.80375 7.29899 3.09761 6.93977C3.3971 6.57365 3.81601 6.1378 4.41647 5.51425L6.12425 3.74079C6.6719 3.17208 6.86238 2.98156 7.07514 2.84729C7.27963 2.71823 7.50357 2.62299 7.73837 2.56521ZM10.875 6.25004C11.4963 6.25004 12 5.74636 12 5.12504C12 4.50372 11.4963 4.00004 10.875 4.00004C10.2537 4.00004 9.75001 4.50372 9.75001 5.12504C9.75001 5.74636 10.2537 6.25004 10.875 6.25004Z"
fill="currentColor"
/>
</svg>
);
};

export const ClockSmoothIcon: FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
color={theme.iconSecondary}
className={className}
>
<g clipPath="url(#clip0_28080_3060)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8ZM8.75 5C8.75 4.58579 8.41421 4.25 8 4.25C7.58579 4.25 7.25 4.58579 7.25 5V8C7.25 8.19891 7.32902 8.38968 7.46967 8.53033L8.96967 10.0303C9.26256 10.3232 9.73744 10.3232 10.0303 10.0303C10.3232 9.73744 10.3232 9.26256 10.0303 8.96967L8.75 7.68934V5Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_28080_3060">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);
};

export const SettingsSmoothIcon: FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
color={theme.iconSecondary}
className={className}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.00035 4.99998C6.3435 4.99998 5.00035 6.34313 5.00035 7.99998C5.00035 9.65684 6.3435 11 8.00035 11C9.65721 11 11.0004 9.65684 11.0004 7.99998C11.0004 6.34313 9.65721 4.99998 8.00035 4.99998ZM6.50035 7.99998C6.50035 7.17156 7.17192 6.49998 8.00035 6.49998C8.82878 6.49998 9.50035 7.17156 9.50035 7.99998C9.50035 8.82841 8.82878 9.49998 8.00035 9.49998C7.17192 9.49998 6.50035 8.82841 6.50035 7.99998Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.12318 0.99993C5.54131 0.999471 5.08414 0.999111 4.66252 1.13794C4.29185 1.25999 3.95141 1.45953 3.66381 1.7233C3.33668 2.02334 3.11362 2.4224 2.82971 2.93031L1.02354 6.1556C0.750737 6.64187 0.536328 7.02407 0.449711 7.44234C0.373534 7.8102 0.373534 8.18977 0.449711 8.55763C0.536329 8.9759 0.750738 9.35809 1.02354 9.84437L2.82971 13.0697C3.11362 13.5776 3.33668 13.9766 3.66381 14.2767C3.95141 14.5404 4.29185 14.74 4.66252 14.862C5.08414 15.0009 5.54131 15.0005 6.12319 15H9.8775C10.4594 15.0005 10.9166 15.0009 11.3382 14.862C11.7088 14.74 12.0493 14.5404 12.3369 14.2767C12.664 13.9766 12.8871 13.5776 13.171 13.0696L14.9771 9.84435C15.2499 9.35808 15.4643 8.97589 15.551 8.55762C15.6271 8.18977 15.6271 7.8102 15.551 7.44234C15.4643 7.02408 15.2499 6.64189 14.9771 6.15561L13.171 2.93032C12.8871 2.42241 12.664 2.02335 12.3369 1.72331C12.0493 1.45954 11.7088 1.25999 11.3382 1.13794C10.9166 0.999111 10.4594 0.999471 9.87751 0.99993H6.12318ZM5.13165 2.56269C5.29493 2.50893 5.49177 2.49998 6.22594 2.49998H9.77475C10.5089 2.49998 10.7058 2.50893 10.869 2.56269C11.0375 2.61817 11.1923 2.70887 11.323 2.82877C11.4497 2.94497 11.5537 3.11234 11.9124 3.75291L13.6204 6.80291C13.9638 7.4161 14.0485 7.58442 14.0821 7.74651C14.1167 7.91372 14.1167 8.08625 14.0821 8.25346C14.0485 8.41554 13.9638 8.58387 13.6204 9.19706L11.9124 12.2471C11.5537 12.8876 11.4497 13.055 11.323 13.1712C11.1923 13.2911 11.0375 13.3818 10.869 13.4373C10.7058 13.491 10.5089 13.5 9.77475 13.5H6.22594C5.49177 13.5 5.29493 13.491 5.13165 13.4373C4.96317 13.3818 4.80842 13.2911 4.67769 13.1712C4.551 13.055 4.44702 12.8876 4.0883 12.2471L2.38029 9.19707C2.0369 8.58387 1.95211 8.41555 1.91855 8.25346C1.88392 8.08625 1.88392 7.91372 1.91855 7.74651C1.95211 7.58442 2.0369 7.41609 2.38029 6.8029L4.0883 3.7529C4.44702 3.11233 4.551 2.94496 4.67769 2.82877C4.80842 2.70887 4.96317 2.61817 5.13165 2.56269Z"
fill="currentColor"
/>
</svg>
);
};

export const ArrowUpIcon: FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
color={theme.iconSecondary}
className={className}
>
<path
d="M8.75 13.25C8.75 13.6642 8.41421 14 8 14C7.58579 14 7.25 13.6642 7.25 13.25V4.56066L4.53033 7.28033C4.23744 7.57322 3.76256 7.57322 3.46967 7.28033C3.17678 6.98744 3.17678 6.51256 3.46967 6.21967L7.46967 2.21967C7.76256 1.92678 8.23744 1.92678 8.53033 2.21967L12.5303 6.21967C12.8232 6.51256 12.8232 6.98744 12.5303 7.28033C12.2374 7.57322 11.7626 7.57322 11.4697 7.28033L8.75 4.56066V13.25Z"
fill="currentColor"
/>
</svg>
);
};

export const ArrowDownIcon: FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
color={theme.iconSecondary}
className={className}
>
<path
d="M8.75 2.75C8.75 2.33578 8.41421 2 8 2C7.58579 2 7.25 2.33578 7.25 2.75V11.4393L4.53033 8.71967C4.23744 8.42678 3.76256 8.42678 3.46967 8.71967C3.17678 9.01256 3.17678 9.48744 3.46967 9.78033L7.46967 13.7803C7.76256 14.0732 8.23744 14.0732 8.53033 13.7803L12.5303 9.78033C12.8232 9.48744 12.8232 9.01256 12.5303 8.71967C12.2374 8.42678 11.7626 8.42678 11.4697 8.71967L8.75 11.4393V2.75Z"
fill="currentColor"
/>
</svg>
);
};

export const SwapIcon: FC<{ className?: string }> = ({ className }) => {
const theme = useTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
color={theme.iconSecondary}
className={className}
>
<path
d="M8.71967 6.28033C8.42678 5.98744 8.42678 5.51256 8.71967 5.21967L11.7197 2.21967C12.0126 1.92678 12.4874 1.92678 12.7803 2.21967L15.7803 5.21967C16.0732 5.51256 16.0732 5.98744 15.7803 6.28033C15.4874 6.57322 15.0126 6.57322 14.7197 6.28033L13 4.56066V12.75C13 13.1642 12.6642 13.5 12.25 13.5C11.8358 13.5 11.5 13.1642 11.5 12.75V4.56066L9.78033 6.28033C9.48744 6.57322 9.01256 6.57322 8.71967 6.28033Z"
fill="currentColor"
/>
<path
d="M7.28033 9.71967C7.57322 10.0126 7.57322 10.4874 7.28033 10.7803L4.28033 13.7803C4.13968 13.921 3.94891 14 3.75 14C3.55109 14 3.36032 13.921 3.21967 13.7803L0.21967 10.7803C-0.0732233 10.4874 -0.0732232 10.0126 0.21967 9.71967C0.512563 9.42678 0.987437 9.42678 1.28033 9.71967L3 11.4393V3.25C3 2.83579 3.33579 2.5 3.75 2.5C4.16421 2.5 4.5 2.83579 4.5 3.25V11.4393L6.21967 9.71967C6.51256 9.42678 6.98744 9.42678 7.28033 9.71967Z"
fill="currentColor"
/>
</svg>
);
};
56 changes: 56 additions & 0 deletions packages/uikit/src/components/desktop/aside/AsideHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import styled from 'styled-components';
import { FC } from 'react';
import { WalletEmoji } from '../../shared/emoji/WalletEmoji';
import { Body3, Label2 } from '../../Text';
import { useAppContext } from '../../../hooks/appContext';
import { useWalletState } from '../../../state/wallet';
import { useTranslation } from '../../../hooks/translation';
import { toShortValue } from '@tonkeeper/core/dist/utils/common';

const HeaderContainer = styled.div<{ width: number }>`
box-sizing: border-box;
width: ${p => p.width}px;
padding: 1rem;
display: flex;
gap: 10px;
align-items: center;
border-bottom: 1px solid ${p => p.theme.backgroundContentAttention};
background: ${p => p.theme.backgroundContent};
min-height: 68px;
justify-content: space-between;
`;

const TextContainer = styled.div`
overflow: hidden;

> * {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& > ${Body3} {
color: ${p => p.theme.textSecondary};
font-family: ${p => p.theme.fontMono};
}
`;

export const AsideHeader: FC<{ width: number }> = ({ width }) => {
const { t } = useTranslation();
const { account } = useAppContext();
const { data: wallet } = useWalletState(account.activePublicKey!);

return (
<HeaderContainer width={width}>
{wallet && (
<>
<TextContainer>
<Label2>{wallet.name || t('wallet_title')}</Label2>
<Body3>{toShortValue(wallet.active.friendlyAddress)}</Body3>
</TextContainer>
<WalletEmoji emoji={wallet.emoji} emojiSize="24px" containerSize="24px" />
</>
)}
</HeaderContainer>
);
};
Loading
Loading