From 3cc3c8b698e82b2eecb3308db8dfa8cba85249da Mon Sep 17 00:00:00 2001 From: sokolova-an Date: Wed, 6 Dec 2023 18:43:58 +0100 Subject: [PATCH 1/2] feat: dashboard layout --- package.json | 3 +- public/images/Buy.svg | 25 ++++ public/images/{dot-icon.svg => DOT.svg} | 0 public/images/KSM.svg | 11 ++ public/images/Receive.svg | 24 ++++ public/images/Send.svg | 24 ++++ public/images/WND.svg | 11 ++ public/images/settings.svg | 9 ++ src/common/chainRegistry/types/index.ts | 8 ++ src/common/providers/contextProvider.tsx | 19 +++ src/common/utils/balance.ts | 130 ++++++++++++++++++ src/common/wallet/store.ts | 4 +- src/components/AssetsList/Asset.tsx | 30 ++++ src/components/AssetsList/AssetsList.tsx | 21 +++ src/components/Icon/Icon.tsx | 18 ++- src/components/Icon/types.ts | 8 +- src/components/PasswordForm/PasswordForm.tsx | 11 +- src/components/Plate/Plate.test.tsx | 22 +++ src/components/Plate/Plate.tsx | 13 ++ src/components/Price/Price.tsx | 21 +++ .../Typography/components/CaptionText.tsx | 2 +- .../Typography/components/FootnoteText.tsx | 2 +- src/components/index.ts | 31 +++++ src/pages/_app.tsx | 6 +- src/pages/dashboard/index.tsx | 9 +- src/pages/globals.css | 9 +- src/pages/index.tsx | 8 +- src/pages/onboarding/create-wallet/index.tsx | 24 ++-- src/pages/onboarding/index.tsx | 6 +- src/pages/onboarding/password/index.tsx | 8 +- src/screens/dashboard/main/DashboardMain.tsx | 83 ++++++++--- tailwind.config.ts | 1 + tw-config-consts/font-sizes.ts | 6 +- yarn.lock | 7 +- 34 files changed, 550 insertions(+), 64 deletions(-) create mode 100644 public/images/Buy.svg rename public/images/{dot-icon.svg => DOT.svg} (100%) create mode 100644 public/images/KSM.svg create mode 100644 public/images/Receive.svg create mode 100644 public/images/Send.svg create mode 100644 public/images/WND.svg create mode 100644 public/images/settings.svg create mode 100644 src/common/providers/contextProvider.tsx create mode 100644 src/common/utils/balance.ts create mode 100644 src/components/AssetsList/Asset.tsx create mode 100644 src/components/AssetsList/AssetsList.tsx create mode 100644 src/components/Plate/Plate.test.tsx create mode 100644 src/components/Plate/Plate.tsx create mode 100644 src/components/Price/Price.tsx create mode 100644 src/components/index.ts diff --git a/package.json b/package.json index d1e740d7..fbe019a3 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@polkadot/util": "^12.2.1", "@polkadot/util-crypto": "^12.2.1", "autoprefixer": "10.4.15", + "bignumber.js": "^9.1.2", "classnames": "^2.3.2", "crypto-js": "^4.2.0", "framer-motion": "^10.16.5", @@ -34,7 +35,7 @@ }, "devDependencies": { "@testing-library/jest-dom": "^6.1.3", - "@testing-library/react": "^14.0.0", + "@testing-library/react": "^14.1.2", "@types/crypto-js": "^4.1.3", "@types/jest": "^29.5.6", "@types/node": "20.6.2", diff --git a/public/images/Buy.svg b/public/images/Buy.svg new file mode 100644 index 00000000..90d519a8 --- /dev/null +++ b/public/images/Buy.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/dot-icon.svg b/public/images/DOT.svg similarity index 100% rename from public/images/dot-icon.svg rename to public/images/DOT.svg diff --git a/public/images/KSM.svg b/public/images/KSM.svg new file mode 100644 index 00000000..4af21788 --- /dev/null +++ b/public/images/KSM.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/Receive.svg b/public/images/Receive.svg new file mode 100644 index 00000000..869236b5 --- /dev/null +++ b/public/images/Receive.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/Send.svg b/public/images/Send.svg new file mode 100644 index 00000000..961d3be5 --- /dev/null +++ b/public/images/Send.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/WND.svg b/public/images/WND.svg new file mode 100644 index 00000000..3fe2f0e7 --- /dev/null +++ b/public/images/WND.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/settings.svg b/public/images/settings.svg new file mode 100644 index 00000000..ed044e81 --- /dev/null +++ b/public/images/settings.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/common/chainRegistry/types/index.ts b/src/common/chainRegistry/types/index.ts index b8cb16ed..235ece40 100644 --- a/src/common/chainRegistry/types/index.ts +++ b/src/common/chainRegistry/types/index.ts @@ -9,6 +9,14 @@ export type Asset = { precision: number; }; +export type AssetWithBalance = Asset & { + name: string; + balance: string; + assetId: number; + symbol: string; + precision: number; +}; + export type Chain = { chainId: ChainId; name: string; diff --git a/src/common/providers/contextProvider.tsx b/src/common/providers/contextProvider.tsx new file mode 100644 index 00000000..c4a3787a --- /dev/null +++ b/src/common/providers/contextProvider.tsx @@ -0,0 +1,19 @@ +import React, { createContext, useContext, useState } from 'react'; +import { HexString } from '../types'; + +export interface IContext { + publicKey?: HexString; + setPublicKey: React.Dispatch>; +} + +export const GlobalContext = createContext({ setPublicKey: () => {} }); + +export const GlobalStateProvider = ({ children }: { children: React.ReactNode }) => { + const [publicKey, setPublicKey] = useState(); + + const value = { publicKey, setPublicKey }; + + return {children}; +}; + +export const useGlobalContext = () => useContext(GlobalContext); diff --git a/src/common/utils/balance.ts b/src/common/utils/balance.ts new file mode 100644 index 00000000..d21be489 --- /dev/null +++ b/src/common/utils/balance.ts @@ -0,0 +1,130 @@ +import BigNumber from 'bignumber.js'; + +const ZERO_BALANCE = '0'; + +type FormattedBalance = { + formattedValue: string; + suffix: string; + decimalPlaces: number; +}; + +const enum Suffix { + MILLIONS = 'M', + BILLIONS = 'B', + TRILLIONS = 'T', +} + +export const enum Decimal { + SMALL_NUMBER = 5, + BIG_NUMBER = 2, +} + +// format balance from spektr + +export const formatBalance = (balance = '0', precision = 0): FormattedBalance => { + const BNWithConfig = BigNumber.clone(); + BNWithConfig.config({ + // HOOK: for divide with decimal part + DECIMAL_PLACES: precision || Decimal.SMALL_NUMBER, + ROUNDING_MODE: BNWithConfig.ROUND_DOWN, + FORMAT: { + decimalSeparator: '.', + groupSeparator: '', + }, + }); + const TEN = new BNWithConfig(10); + const bnPrecision = new BNWithConfig(precision); + const bnBalance = new BNWithConfig(balance).div(TEN.pow(bnPrecision)); + let divider = new BNWithConfig(1); + let decimalPlaces = 0; + let suffix = ''; + + if (bnBalance.lt(1)) { + decimalPlaces = Math.max(precision - balance.toString().length + 1, 5); + } else if (bnBalance.lt(10)) { + decimalPlaces = Decimal.SMALL_NUMBER; + } else if (bnBalance.lt(1_000_000)) { + decimalPlaces = Decimal.BIG_NUMBER; + } else if (bnBalance.lt(1_000_000_000)) { + decimalPlaces = Decimal.BIG_NUMBER; + divider = TEN.pow(new BNWithConfig(6)); + suffix = Suffix.MILLIONS; + } else if (bnBalance.lt(1_000_000_000_000)) { + decimalPlaces = Decimal.BIG_NUMBER; + divider = TEN.pow(new BNWithConfig(9)); + suffix = Suffix.BILLIONS; + } else { + decimalPlaces = Decimal.BIG_NUMBER; + divider = TEN.pow(new BNWithConfig(12)); + suffix = Suffix.TRILLIONS; + } + console.log( + 1, + decimalPlaces, + suffix, + new BNWithConfig(bnBalance).div(divider).decimalPlaces(decimalPlaces).toFormat(), + ); + + return { + formattedValue: new BNWithConfig(bnBalance).div(divider).decimalPlaces(decimalPlaces).toFormat(), + suffix, + decimalPlaces, + }; +}; + +const getDecimalPlaceForFirstNonZeroChar = (value: string, nonZeroDigits = 3) => { + const decimalPart = value.toString().split('.')[1]; + + return Math.max((decimalPart || '').search(/[1-9]/) + nonZeroDigits, 5); +}; + +export const formatFiatBalance = (balance = '0', precision = 0): FormattedBalance => { + if (Number(balance) === 0 || isNaN(Number(balance))) { + return { formattedValue: ZERO_BALANCE, suffix: '', decimalPlaces: 0 }; + } + const BNWithConfig = BigNumber.clone(); + BNWithConfig.config({ + ROUNDING_MODE: BNWithConfig.ROUND_DOWN, + FORMAT: { + decimalSeparator: '.', + groupSeparator: '', + }, + }); + + const bnPrecision = new BNWithConfig(precision); + const TEN = new BNWithConfig(10); + const bnBalance = new BNWithConfig(balance).div(TEN.pow(bnPrecision)); + + let divider = new BNWithConfig(1); + let suffix = ''; + let decimalPlaces: number; + + if (bnBalance.lt(1)) { + // if number has more than 7 digits in decimal part BigNumber.toString returns number in scientific notation + decimalPlaces = getDecimalPlaceForFirstNonZeroChar(bnBalance.toFixed()); + } else if (bnBalance.lt(10)) { + decimalPlaces = Decimal.SMALL_NUMBER; + } else if (bnBalance.lt(1_000_000)) { + decimalPlaces = Decimal.BIG_NUMBER; + } else if (bnBalance.lt(1_000_000_000)) { + decimalPlaces = Decimal.BIG_NUMBER; + divider = TEN.pow(new BNWithConfig(6)); + suffix = Suffix.MILLIONS; + } else if (bnBalance.lt(1_000_000_000_000)) { + decimalPlaces = Decimal.BIG_NUMBER; + divider = TEN.pow(new BNWithConfig(9)); + suffix = Suffix.BILLIONS; + } else { + decimalPlaces = Decimal.BIG_NUMBER; + divider = TEN.pow(new BNWithConfig(12)); + suffix = Suffix.TRILLIONS; + } + + const bnFiatBalance = new BNWithConfig(bnBalance).div(divider).decimalPlaces(decimalPlaces).toFormat(); + + return { + formattedValue: bnFiatBalance, + suffix, + decimalPlaces, + }; +}; diff --git a/src/common/wallet/store.ts b/src/common/wallet/store.ts index 5d8ffa90..4fec8014 100644 --- a/src/common/wallet/store.ts +++ b/src/common/wallet/store.ts @@ -28,13 +28,15 @@ export const generateWalletMnemonic = (): string => { return mnemonicGenerate(); }; -export const createWallet = (mnemonic: string): void => { +export const createWallet = (mnemonic: string): HexString => { const seed = mnemonicToMiniSecret(mnemonic); const keypair = sr25519PairFromSeed(seed); const publicKey: HexString = u8aToHex(keypair.publicKey); localStorage.setItem(PUBLIC_KEY_STORE, publicKey); secureLocalStorage.setItem(MNEMONIC_STORE, mnemonic); + + return publicKey; }; export const backupMnemonic = (mnemonic: string, password: string): void => { diff --git a/src/components/AssetsList/Asset.tsx b/src/components/AssetsList/Asset.tsx new file mode 100644 index 00000000..0afbfea6 --- /dev/null +++ b/src/components/AssetsList/Asset.tsx @@ -0,0 +1,30 @@ +import { cnTw } from '@/common/utils/twMerge'; +import { formatBalance } from '@/common/utils/balance'; +import Icon from '../Icon/Icon'; +import { CaptionText } from '../Typography'; + +type Props = { + value: string; + asset: any; + className?: string; + showIcon?: boolean; + imgClassName?: string; + wrapperClassName?: string; +}; + +export const AssetBalance = ({ value, asset, className, imgClassName }: Props) => { + const { precision, symbol } = asset; + const { formattedValue, suffix } = formatBalance(value, precision); + + console.log(suffix, formattedValue); + + return ( + + + {symbol} + + {formattedValue} {suffix} + + + ); +}; diff --git a/src/components/AssetsList/AssetsList.tsx b/src/components/AssetsList/AssetsList.tsx new file mode 100644 index 00000000..f09e582d --- /dev/null +++ b/src/components/AssetsList/AssetsList.tsx @@ -0,0 +1,21 @@ +import { AssetWithBalance } from '@/common/chainRegistry/types'; +import { AssetBalance } from './Asset'; + +type Props = { + assets: AssetWithBalance[]; +}; + +const AssetsList = ({ assets }: Props) => ( +
+ {assets.map((asset) => ( + + ))} +
+); + +export default AssetsList; diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index e1f830c9..b5c8b10d 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -1,3 +1,4 @@ +import { FootnoteText } from '../Typography'; import AllIcons, { IconNames } from './types'; import Image from 'next/image'; @@ -6,9 +7,10 @@ type Props = { size?: number; className?: string; alt?: string; + text?: string; }; -const Icon = ({ name, size = 24, className, alt = '' }: Props) => { +const Icon = ({ name, size = 24, className, text, alt = '' }: Props) => { let iconPath = AllIcons[name]; if (!iconPath) { @@ -17,7 +19,19 @@ const Icon = ({ name, size = 24, className, alt = '' }: Props) => { return
; } - return ( + return text ? ( +
+ {alt} + {text} +
+ ) : ( setIsConfirmPasswordValid(confirmPassword === password)} onValueChange={setConfirmPassword} onClear={() => setConfirmPassword('')} diff --git a/src/components/Plate/Plate.test.tsx b/src/components/Plate/Plate.test.tsx new file mode 100644 index 00000000..cea96133 --- /dev/null +++ b/src/components/Plate/Plate.test.tsx @@ -0,0 +1,22 @@ +import { render, screen } from '@testing-library/react'; + +import Plate from './Plate'; + +describe('ui/Plate', () => { + test('should render component', () => { + const content = 'This is simple content'; + render({content}); + + const children = screen.getByText(content); + expect(children).toBeInTheDocument(); + }); + + test('should render as custom tag', () => { + const content = 'Custom tag'; + render({content}); + + const children = screen.getByText(content); + expect(children).toBeInTheDocument(); + expect(children.nodeName.toLowerCase()).toEqual('section'); + }); +}); diff --git a/src/components/Plate/Plate.tsx b/src/components/Plate/Plate.tsx new file mode 100644 index 00000000..0365a615 --- /dev/null +++ b/src/components/Plate/Plate.tsx @@ -0,0 +1,13 @@ +import { ElementType, PropsWithChildren } from 'react'; +import { cnTw } from '@/common/utils/twMerge'; + +type Props = { + as?: ElementType; + className?: string; +}; + +const Plate = ({ as: Tag = 'div', className, children }: PropsWithChildren) => ( + {children} +); + +export default Plate; diff --git a/src/components/Price/Price.tsx b/src/components/Price/Price.tsx new file mode 100644 index 00000000..107a9d67 --- /dev/null +++ b/src/components/Price/Price.tsx @@ -0,0 +1,21 @@ +import { formatFiatBalance } from '@/common/utils/balance'; +import { LargeTitleText } from '../Typography'; + +type Props = { + amount: string; + symbol?: string; +}; + +const Price = ({ amount, symbol = '$' }: Props) => { + const { formattedValue, suffix } = formatFiatBalance(amount); + + return ( + <> + + {symbol} + {formattedValue} {suffix} + + + ); +}; +export default Price; diff --git a/src/components/Typography/components/CaptionText.tsx b/src/components/Typography/components/CaptionText.tsx index b769678f..a85c67b8 100644 --- a/src/components/Typography/components/CaptionText.tsx +++ b/src/components/Typography/components/CaptionText.tsx @@ -3,5 +3,5 @@ import { TypographyProps } from '../common/types'; import TextBase from '../common/TextBase'; export const CaptionText = ({ className, ...props }: TypographyProps) => ( - + ); diff --git a/src/components/Typography/components/FootnoteText.tsx b/src/components/Typography/components/FootnoteText.tsx index 40bbf151..d67fe9f2 100644 --- a/src/components/Typography/components/FootnoteText.tsx +++ b/src/components/Typography/components/FootnoteText.tsx @@ -3,5 +3,5 @@ import { TypographyProps } from '../common/types'; import TextBase from '../common/TextBase'; export const FootnoteText = ({ className, ...props }: TypographyProps) => ( - + ); diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 00000000..0117744a --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,31 @@ +import { + LargeTitleText, + TitleText, + CaptionText, + HeadlineText, + BodyText, + FootnoteText, + LabelText, + HelpText, +} from './Typography'; +import Icon from './Icon/Icon'; +import Price from './Price/Price'; +import AssetsList from './AssetsList/AssetsList'; +import Plate from './Plate/Plate'; +import PasswordForm from './PasswordForm/PasswordForm'; + +export { + FootnoteText, + BodyText, + TitleText, + CaptionText, + LargeTitleText, + HeadlineText, + LabelText, + HelpText, + Icon, + Price, + AssetsList, + Plate, + PasswordForm, +}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 098bea2a..f2c2146f 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,7 +2,7 @@ import { AppProps } from 'next/app'; import { useEffect, useState } from 'react'; import { NextUIProvider } from '@nextui-org/react'; import { TelegramProvider } from '@common/providers/telegramProvider'; -import { ExtrinsicProvider } from '@common/extrinsicService/ExtrinsicProvider'; +import { GlobalStateProvider } from '@/common/providers/contextProvider'; import './globals.css'; const App = ({ Component, pageProps }: AppProps) => { @@ -11,13 +11,13 @@ const App = ({ Component, pageProps }: AppProps) => { return ( - + {render && ( )} - + ); }; diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index ee3fdbc5..71ff3bfb 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -1,13 +1,16 @@ import { BalanceProvider } from '@/common/balances/BalanceProvider'; import { ChainRegistry } from '@/common/chainRegistry'; +import { ExtrinsicProvider } from '@/common/extrinsicService/ExtrinsicProvider'; import { DashboardMain } from '@/screens/dashboard'; export default function DashboardMainPage() { return ( - - - + + + + + ); } diff --git a/src/pages/globals.css b/src/pages/globals.css index de4d139a..8770a9cf 100644 --- a/src/pages/globals.css +++ b/src/pages/globals.css @@ -7,6 +7,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: var(--gray-gray50); } /* Scrollbar for Firefox */ @@ -47,9 +48,6 @@ body { } :root { - --foreground-rgb: 0, 0, 0; - --background-rgb: 255, 255, 255; - /* color pallete */ --gray-gray900: #444651; --gray-gray800: #595b6a; @@ -100,9 +98,4 @@ body { --white-white900: #ffffff; --pink-pink600: #ff007a; -} - -body { - color: rgb(var(--foreground-rgb)); - background-color: rgb(var(--background-rgb)); } \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f512c4b5..8a61225b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,10 +1,16 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { getWallet } from '@common/wallet'; import OnboardingStartPage from './onboarding'; import DashboardMainPage from './dashboard'; +import { useGlobalContext } from '@/common/providers/contextProvider'; export default function App() { + const { setPublicKey } = useGlobalContext(); const wallet = getWallet(); + useEffect(() => { + setPublicKey(wallet?.publicKey); + }, [wallet]); + return wallet ? : ; } diff --git a/src/pages/onboarding/create-wallet/index.tsx b/src/pages/onboarding/create-wallet/index.tsx index bc2c705c..da4f0586 100644 --- a/src/pages/onboarding/create-wallet/index.tsx +++ b/src/pages/onboarding/create-wallet/index.tsx @@ -3,7 +3,7 @@ import { useRouter } from 'next/router'; import ConfettiExplosion from 'react-confetti-explosion'; import { useTelegram } from '@/common/providers/telegramProvider'; -import { getWallet } from '@common/wallet'; +import { useGlobalContext } from '@/common/providers/contextProvider'; import { completeOnboarding } from '@common/telegram'; import { BodyText, TitleText } from '@/components/Typography'; import { Paths } from '@/common/routing'; @@ -12,40 +12,42 @@ import Icon from '@/components/Icon/Icon'; export default function CreateWalletPage() { const router = useRouter(); const { MainButton, webApp } = useTelegram(); + const { publicKey } = useGlobalContext(); const [isLoading, setIsLoading] = useState(true); useEffect(() => { - const wallet = getWallet(); - if (!wallet) { + if (!publicKey) { console.error("Can't create wallet"); return; } - completeOnboarding(wallet.publicKey, webApp); + completeOnboarding(publicKey, webApp); + + MainButton?.onClick(() => { + router.push(Paths.DASHBOARD); + }); + setTimeout(() => { setIsLoading(false); MainButton?.show(); MainButton?.setText('Get started'); MainButton?.hideProgress(); - MainButton?.onClick(() => { - router.push(Paths.DASHBOARD); - }); }, 2000); return () => { - MainButton?.hide(); MainButton?.setText('Continue'); + MainButton?.hide(); MainButton?.hideProgress(); }; - }, [MainButton]); + }, []); return isLoading ? ( -
+
Creating your wallet
) : ( -
+
diff --git a/src/pages/onboarding/index.tsx b/src/pages/onboarding/index.tsx index 3745688f..f271ad11 100644 --- a/src/pages/onboarding/index.tsx +++ b/src/pages/onboarding/index.tsx @@ -25,7 +25,7 @@ export default function OnboardingStartPage() { }, [MainButton]); return ( -
+
Welcome to Nova Wallet! @@ -33,7 +33,7 @@ export default function OnboardingStartPage() { management!
- +
Easy crypto operations @@ -42,7 +42,7 @@ export default function OnboardingStartPage() {
- +
Easy crypto operations diff --git a/src/pages/onboarding/password/index.tsx b/src/pages/onboarding/password/index.tsx index 817265a7..1f6eda89 100644 --- a/src/pages/onboarding/password/index.tsx +++ b/src/pages/onboarding/password/index.tsx @@ -3,6 +3,7 @@ import { useRouter } from 'next/router'; import { Avatar } from '@nextui-org/react'; import { useTelegram } from '@/common/providers/telegramProvider'; +import { useGlobalContext } from '@/common/providers/contextProvider'; import { Paths } from '@/common/routing'; import { createWallet, generateWalletMnemonic, backupMnemonic } from '@common/wallet'; import { BodyText, TitleText } from '@/components/Typography'; @@ -10,6 +11,7 @@ import PasswordForm from '@/components/PasswordForm/PasswordForm'; export default function PasswordPage() { const { user, MainButton } = useTelegram(); + const { setPublicKey } = useGlobalContext(); const router = useRouter(); MainButton?.disable(); @@ -20,13 +22,15 @@ export default function PasswordPage() { router.push(Paths.ONBOARDING_CREATE_WALLET); const mnemonic = generateWalletMnemonic(); - createWallet(mnemonic); + const publicKey = createWallet(mnemonic); + + setPublicKey(publicKey); backupMnemonic(mnemonic, password); }); }; return ( -
+
Hey {user?.first_name}! Let’s secure your new wallet diff --git a/src/screens/dashboard/main/DashboardMain.tsx b/src/screens/dashboard/main/DashboardMain.tsx index e5fc1ea8..4b868dbf 100644 --- a/src/screens/dashboard/main/DashboardMain.tsx +++ b/src/screens/dashboard/main/DashboardMain.tsx @@ -1,33 +1,61 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useEffect } from 'react'; import { useRouter } from 'next/router'; import { encodeAddress } from '@polkadot/util-crypto'; -import { Wallet, getWallet, resetWallet } from '@common/wallet'; -import { useChainRegistry } from '@common/chainRegistry'; +import { Avatar } from '@nextui-org/react'; + +import { resetWallet } from '@common/wallet'; import { useBalances } from '@common/balances/BalanceProvider'; +import { useChainRegistry } from '@common/chainRegistry'; import { ChainAssetAccount } from '@common/types'; import { IAssetBalance } from '@common/balances/types'; import { polkadot } from '@common/chainRegistry/knownChains'; import { useExtrinsicProvider } from '@common/extrinsicService/ExtrinsicProvider'; import { Paths } from '@/common/routing'; +import { useGlobalContext } from '@/common/providers/contextProvider'; +import { useTelegram } from '@/common/providers/telegramProvider'; +import { BodyText, CaptionText, Icon, AssetsList, Plate, Price } from '@/components'; + +// temp mock +const mockAssets = [ + { + name: 'polkadot', + symbol: 'DOT', + balance: '0', + assetId: 123, + precision: 10, + }, + { + name: 'kusama', + symbol: 'KSM', + balance: '0', + assetId: 234, + precision: 5, + }, + { + name: 'westend', + symbol: 'WND', + balance: '0', + assetId: 345, + precision: 10, + }, +]; export const DashboardMain = () => { - const [wallet, setWallet] = useState(null); + const router = useRouter(); const { getAllChains } = useChainRegistry(); const { subscribeBalance } = useBalances(); const extrinsicService = useExtrinsicProvider(); - const router = useRouter(); + const { publicKey } = useGlobalContext(); + const { user, MainButton } = useTelegram(); useEffect(() => { - const wallet = getWallet(); - setWallet(wallet); - }, [setWallet]); + MainButton?.hide(); + console.log(publicKey); - useEffect(() => { - if (!wallet) { + if (!publicKey) { return; } - (async () => { const chains = await getAllChains(); console.info(`All chains ${chains}`); @@ -36,16 +64,17 @@ export const DashboardMain = () => { const account: ChainAssetAccount = { chainId: chain.chainId, assetId: chain.assets[0].assetId, - publicKey: wallet.publicKey, + publicKey: publicKey, }; - const address = encodeAddress(wallet.publicKey, chain.addressPrefix); + const address = encodeAddress(publicKey, chain.addressPrefix); + console.log(publicKey, account, address); subscribeBalance(account, (balance: IAssetBalance) => { console.log(`Balance ${address} => ${balance.total().toString()}`); }); } })(); - }, [wallet]); + }, []); function clearWallet() { resetWallet(); @@ -86,17 +115,35 @@ export const DashboardMain = () => { } return ( -
- +
+
+ + Good morning, {user?.first_name || 'friend'} + +
+ + Total balance + +
+ + + +
+ + + Assets + + + - + */}
); }; diff --git a/tailwind.config.ts b/tailwind.config.ts index 13307db2..c8e3cd46 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -9,6 +9,7 @@ export default { mode: 'jit', content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', + './src/screens/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}', ], diff --git a/tw-config-consts/font-sizes.ts b/tw-config-consts/font-sizes.ts index 0f03e78c..4a1052da 100644 --- a/tw-config-consts/font-sizes.ts +++ b/tw-config-consts/font-sizes.ts @@ -2,20 +2,18 @@ import type { Config } from 'tailwindcss'; const fontSizes: Required['theme']['fontSize'] = { // EXTRA BOLD - 'large-title': ['1.625rem', { lineHeight: '2rem', letterSpacing: '-0.02em', fontWeight: 700 }], + 'large-title': ['2.5rem', { lineHeight: '2.5rem', letterSpacing: '-0.5px', fontWeight: 700 }], title: ['1.25rem', { lineHeight: '1.375rem', letterSpacing: '-0.013em', fontWeight: 700 }], 'medium-title': ['1.0625rem', { lineHeight: '1.5rem', letterSpacing: '-0.016em', fontWeight: 700 }], - 'small-title': ['0.875rem', { lineHeight: '1.125rem', letterSpacing: '-0.013em', fontWeight: 700 }], - // SEMI BOLD caption: ['1rem', { lineHeight: '1.5rem', letterSpacing: '-0.02px', fontWeight: 600 }], + footnote: ['0.8125rem', { lineHeight: '1.25rem', letterSpacing: '-0.01em', fontWeight: 600 }], 'button-large': ['0.875rem', { lineHeight: '1.125rem', letterSpacing: '-0.01em', fontWeight: 600 }], 'button-small': ['0.75rem', { lineHeight: '1.125rem', letterSpacing: '-0.01em', fontWeight: 600 }], // MEDIUM headline: ['0.9375rem', { lineHeight: '1.375rem', letterSpacing: '-0.01em', fontWeight: 500 }], body: ['0.875rem', { lineHeight: '1.25rem', letterSpacing: '-0.154px', fontWeight: 500 }], - footnote: ['0.75rem', { lineHeight: '1.125rem', letterSpacing: '-0.01em', fontWeight: 500 }], 'help-text': ['0.625rem', { lineHeight: '0.875rem', letterSpacing: '-0.01em', fontWeight: 500 }], }; diff --git a/yarn.lock b/yarn.lock index 2140372d..5ccb0c51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2822,7 +2822,7 @@ lodash "^4.17.15" redent "^3.0.0" -"@testing-library/react@^14.0.0": +"@testing-library/react@^14.1.2": version "14.1.2" resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.1.2.tgz#a2b9e9ee87721ec9ed2d7cfc51cc04e474537c32" integrity sha512-z4p7DVBTPjKM5qDZ0t5ZjzkpSNb+fZy1u6bzO7kk8oeGagpPCAtgh4cx1syrfp7a+QWkM021jGqjJaxJJnXAZg== @@ -3450,6 +3450,11 @@ big-integer@^1.6.44: resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85" integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg== +bignumber.js@^9.1.2: + version "9.1.2" + resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c" + integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug== + binary-extensions@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" From bf2b840da4b40f1a52dad65b18459b502219098e Mon Sep 17 00:00:00 2001 From: sokolova-an Date: Wed, 6 Dec 2023 18:46:48 +0100 Subject: [PATCH 2/2] remove typo --- src/common/utils/balance.ts | 6 ------ src/screens/dashboard/main/DashboardMain.tsx | 3 --- 2 files changed, 9 deletions(-) diff --git a/src/common/utils/balance.ts b/src/common/utils/balance.ts index d21be489..91ec151a 100644 --- a/src/common/utils/balance.ts +++ b/src/common/utils/balance.ts @@ -58,12 +58,6 @@ export const formatBalance = (balance = '0', precision = 0): FormattedBalance => divider = TEN.pow(new BNWithConfig(12)); suffix = Suffix.TRILLIONS; } - console.log( - 1, - decimalPlaces, - suffix, - new BNWithConfig(bnBalance).div(divider).decimalPlaces(decimalPlaces).toFormat(), - ); return { formattedValue: new BNWithConfig(bnBalance).div(divider).decimalPlaces(decimalPlaces).toFormat(), diff --git a/src/screens/dashboard/main/DashboardMain.tsx b/src/screens/dashboard/main/DashboardMain.tsx index 4b868dbf..c45b8ca6 100644 --- a/src/screens/dashboard/main/DashboardMain.tsx +++ b/src/screens/dashboard/main/DashboardMain.tsx @@ -51,8 +51,6 @@ export const DashboardMain = () => { useEffect(() => { MainButton?.hide(); - console.log(publicKey); - if (!publicKey) { return; } @@ -68,7 +66,6 @@ export const DashboardMain = () => { }; const address = encodeAddress(publicKey, chain.addressPrefix); - console.log(publicKey, account, address); subscribeBalance(account, (balance: IAssetBalance) => { console.log(`Balance ${address} => ${balance.total().toString()}`); });