From 13ab1a510fea7167fe45d80d6138c3ff0b9566ad Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 12 Mar 2024 13:36:34 +0200 Subject: [PATCH 1/6] Update ui for energy station page --- src/components/energy/Energy.module.sass | 87 +++++++++++++++++++++--- src/components/energy/EnergyForm.tsx | 3 +- src/components/energy/EnergyPage.tsx | 20 +++--- src/components/energy/EnergyStats.tsx | 37 ++++++++++ src/components/energy/Faq.tsx | 3 +- src/components/utils/cards/WithTitle.tsx | 12 +++- 6 files changed, 139 insertions(+), 23 deletions(-) create mode 100644 src/components/energy/EnergyStats.tsx diff --git a/src/components/energy/Energy.module.sass b/src/components/energy/Energy.module.sass index 0974791a3..1cb100911 100644 --- a/src/components/energy/Energy.module.sass +++ b/src/components/energy/Energy.module.sass @@ -1,5 +1,83 @@ @import 'src/styles/subsocial-vars.scss' +.EnergyStationLayout + display: flex + gap: $space_normal + +.LeftSideLayout + display: flex + flex-direction: column + gap: $space_normal + +.TitleSection + display: flex + flex-direction: column + gap: $space_small + + .Title + font-size: $font_big + line-height: 26px + font-weight: 700 + color: $color_font_normal + + .Description + font-size: $font_small + line-height: 22px + color: #64748B + +.FAQWrapper + margin: 0 !important + +.EnergyStatsSection + display: flex + gap: $space_normal + align-items: center + +.StatsCard + display: flex + gap: $space_tiny + flex-direction: column + width: 100% + border-radius: 20px + padding: $space_normal + background: white + + .StatsTitle + color: #64748B + font-size: $font_small + font-weight: 400 + line-height: 22px + + .StatsValue + display: flex + gap: $space_mini + align-items: center + + svg + color: rgba(100, 116, 139, 0.8) + font-size: 20px + + span + color: #0F172A + font-size: $space_large + font-weight: 600 + line-height: 32px + +.EnergyFormCard + border-radius: 20px + + :global(.ant-card-body) + padding: $space_normal + + + + + + + + + + .DropdownOverlay background-color: #fff width: 250px @@ -45,13 +123,6 @@ .EnergyIndicator display: flex -.Title - font-size: 44px - -.Intro - text-align: center - margin-bottom: 32px - .InfoSection border: 1px solid $color_light_border border-radius: $border_radius_normal @@ -61,7 +132,7 @@ .AmountFormInput label width: 100% - margin-bottom: $space_normal + margin-bottom: $space_normal .Faq \:global .ant-card-body diff --git a/src/components/energy/EnergyForm.tsx b/src/components/energy/EnergyForm.tsx index 8046f5735..6b6a64d65 100644 --- a/src/components/energy/EnergyForm.tsx +++ b/src/components/energy/EnergyForm.tsx @@ -20,6 +20,7 @@ import { } from 'antd' import { FormInstance } from 'antd/es/form/Form' import BigNumber from 'bignumber.js' +import clsx from 'clsx' import React, { useEffect, useState } from 'react' import { useMyAccount } from 'src/stores/my-account' import { useAuth } from '../auth/AuthContext' @@ -245,7 +246,7 @@ const EnergyForm = ({ forSelfOnly, subscribeValues, ...props }: EnergyFormProps) }, [disableSubscriber, amount]) return ( - +
{ return ( - -
-
Energy Station
+ +
+
+
Energy Station
+ {desc} +
+ +
-
- {desc} -
- ) diff --git a/src/components/energy/EnergyStats.tsx b/src/components/energy/EnergyStats.tsx new file mode 100644 index 000000000..92cbdf571 --- /dev/null +++ b/src/components/energy/EnergyStats.tsx @@ -0,0 +1,37 @@ +import { TiFlashOutline } from 'react-icons/ti' +import styles from './Energy.module.sass' + +const EnergyStats = () => { + const mockedData = [ + { title: 'Energy left', value: '1,240', withEnergyIcon: true }, + { title: 'Transactions left', value: '3,130', withEnergyIcon: false }, + ] + + return ( +
+ {mockedData.map((props, i) => ( + + ))} +
+ ) +} + +type StatsCardProps = { + title: string + value: string + withEnergyIcon: boolean +} + +const StatsCard = ({ title, value, withEnergyIcon }: StatsCardProps) => { + return ( +
+
{title}
+
+ {withEnergyIcon && } + {value} +
+
+ ) +} + +export default EnergyStats diff --git a/src/components/energy/Faq.tsx b/src/components/energy/Faq.tsx index 31cc61821..460cc7827 100644 --- a/src/components/energy/Faq.tsx +++ b/src/components/energy/Faq.tsx @@ -10,9 +10,10 @@ export const FaqSection = () => { } > - + What is energy?} key='1'>

Energy can be used to perform actions on the network, instead of SUB tokens. Energy can diff --git a/src/components/utils/cards/WithTitle.tsx b/src/components/utils/cards/WithTitle.tsx index 63c99a240..afd7b0612 100644 --- a/src/components/utils/cards/WithTitle.tsx +++ b/src/components/utils/cards/WithTitle.tsx @@ -1,15 +1,23 @@ import { Card } from 'antd' +import clsx from 'clsx' import React, { FC } from 'react' export type CardWithTitleProps = { title: React.ReactNode icon: React.ReactNode cardClassName?: string + className?: string } -export const CardWithTitle: FC = ({ children, title, icon, cardClassName }) => { +export const CardWithTitle: FC = ({ + children, + title, + icon, + cardClassName, + className, +}) => { return ( -

+

{icon} {title} From c903d7581ae52845341a4ca6e4db4596c72f0d75 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 13 Mar 2024 14:02:17 +0200 Subject: [PATCH 2/6] Fix energy station styles --- src/components/auth/AuthContext.tsx | 8 +- src/components/energy/Energy.module.sass | 181 ++++++++++++++++++++-- src/components/energy/EnergyForm.tsx | 99 ++++++------ src/components/energy/EnergyPage.tsx | 6 +- src/components/energy/EnergyStats.tsx | 45 +++++- src/components/energy/Faq.tsx | 18 +-- src/components/energy/QuestionSection.tsx | 16 ++ src/components/energy/utils.ts | 2 + src/components/utils/TokenBalance.tsx | 52 +++++++ src/stores/analytics.ts | 2 +- src/styles/subsocial-vars.scss | 34 ++-- 11 files changed, 356 insertions(+), 107 deletions(-) create mode 100644 src/components/energy/QuestionSection.tsx create mode 100644 src/components/utils/TokenBalance.tsx diff --git a/src/components/auth/AuthContext.tsx b/src/components/auth/AuthContext.tsx index b77325b37..d3c0405c9 100644 --- a/src/components/auth/AuthContext.tsx +++ b/src/components/auth/AuthContext.tsx @@ -1,6 +1,7 @@ import { u128 } from '@polkadot/types' import { CodecMap } from '@polkadot/types/codec' import { isStr } from '@subsocial/utils' +import BigNumber from 'bignumber.js' import BN from 'bn.js' import { useRouter } from 'next/router' import React, { createContext, useContext, useEffect, useState } from 'react' @@ -55,7 +56,12 @@ export type AuthContextProps = { setEmail: React.Dispatch> } -const energyStub: EnergyState = { status: 'normal', transactionsCount: 0, coefficient: 1 } +const energyStub: EnergyState = { + energyBalance: new BigNumber(0), + status: 'normal', + transactionsCount: 0, + coefficient: 1, +} const contextStub: AuthContextProps = { state: { diff --git a/src/components/energy/Energy.module.sass b/src/components/energy/Energy.module.sass index 1cb100911..cf29ae6de 100644 --- a/src/components/energy/Energy.module.sass +++ b/src/components/energy/Energy.module.sass @@ -9,6 +9,15 @@ flex-direction: column gap: $space_normal + width: 70% + +.RightSideLayout + display: flex + flex-direction: column + gap: $space_normal + + width: 30% + .TitleSection display: flex flex-direction: column @@ -25,9 +34,6 @@ line-height: 22px color: #64748B -.FAQWrapper - margin: 0 !important - .EnergyStatsSection display: flex gap: $space_normal @@ -66,17 +72,173 @@ .EnergyFormCard border-radius: 20px - :global(.ant-card-body) + background-color: #fff + box-shadow: 0px 4px 10.9px 0px #edf2f6a1 + + padding: $space_normal + display: flex + flex-direction: column + gap: $space_normal + +.EnergyFormTitle + font-size: $font_large + font-weight: 700 + line-height: 26px + color: $color_font_normal + +.EnergyForm + display: flex + flex-direction: column + gap: $space_normal + + :global(.ant-form-item) + margin-bottom: 0 + +.AmountFormInput + :global(.ant-form-item-label) + padding: 0 + + label + width: 100% + margin-bottom: 0 + line-height: 26px + +.InfoSection + display: flex + gap: $space_small + align-items: center + + .Divider + color: #64748B + + .InfoSectionItem + width: 100% + background: #F8FAFC + border-radius: 20px padding: $space_normal + display: flex + flex-direction: column + gap: $space_tiny + + .ItemTitle + font-size: $font_small + font-weight: 400 + line-height: 22px + color: #64748B + + .ItemValue + font-size: $font_large + font-weight: 600 + line-height: 32px + color: #0F172A + +.EnergyFormButton + height: 46px !important + + &:disabled + background-color: rgba(235, 47, 149, 0.5) !important + color: white + + &:hover + color: white + +.FAQWrapper + background: white + border-radius: 20px + padding: $space_normal + + display: flex + flex-direction: column + gap: $space_normal + + .FAQTitleSection + display: flex + align-items: center + justify-content: space-between + gap: $space_tiny + + .Title + font-size: $font_large + font-weight: 700 + line-height: 26px + color: $color_font_normal + + :global(.ant-collapse) + display: flex + flex-direction: column + gap: $space_normal + + :global(.ant-collapse-content-box) + padding: $space_small $space_big 0 $space_big !important + + p + color: #64748B + margin-bottom: 0 + + :global(.ant-collapse-header) + padding: 0 !important + padding-left: $space_large !important + + color: $color_font_normal !important + font-size: $font_small !important + line-height: 22px !important + b + font-weight: 500 !important + + :global(.ant-collapse-arrow) + left: 0 !important + top: 11px !important + +.QuestionWrapper + display: flex + flex-direction: column + gap: $space_normal + + background: white + border-radius: 20px + padding: $space_normal + + margin-bottom: $space_normal + + button + width: fit-content + .QuestionTitle + font-size: $font_large + font-weight: 700 + line-height: 26px + color: $color_font_normal +@media (max-width: 875px) + .EnergyStationLayout + flex-direction: column + .LeftSideLayout + width: 100% + + .RightSideLayout + width: 100% +@media (max-width: 560px) + .InfoSection + flex-direction: column + .EnergyStatsSection + flex-direction: column +.FormAlert + border-radius: 12px +.RecipientInput + :global(.ant-form-item-label) + padding: 0 + + label + width: 100% + margin-bottom: 0 + line-height: 26px .DropdownOverlay background-color: #fff @@ -123,17 +285,6 @@ .EnergyIndicator display: flex -.InfoSection - border: 1px solid $color_light_border - border-radius: $border_radius_normal - padding: $space_normal - margin-top: $space_normal - -.AmountFormInput - label - width: 100% - margin-bottom: $space_normal - .Faq \:global .ant-card-body padding: 12px diff --git a/src/components/energy/EnergyForm.tsx b/src/components/energy/EnergyForm.tsx index 6b6a64d65..f3f321218 100644 --- a/src/components/energy/EnergyForm.tsx +++ b/src/components/energy/EnergyForm.tsx @@ -5,19 +5,7 @@ import { isDefined, nonEmptyStr, } from '@subsocial/utils' -import { - Alert, - Button, - Card, - CardProps, - Checkbox, - Col, - Divider, - Form, - Input, - Row, - Tooltip, -} from 'antd' +import { Alert, Button, CardProps, Checkbox, Col, Form, Input, Row, Tooltip } from 'antd' import { FormInstance } from 'antd/es/form/Form' import BigNumber from 'bignumber.js' import clsx from 'clsx' @@ -28,7 +16,8 @@ import { FormatBalance } from '../common/balances' import { useSubstrate } from '../substrate' import { AccountInputField } from '../utils/forms/AccountInputField' import { createFieldNameFn } from '../utils/forms/utils' -import { MutedDiv, MutedSpan } from '../utils/MutedText' +import { MutedSpan } from '../utils/MutedText' +import TokenBalance from '../utils/TokenBalance' import TxButton from '../utils/TxButton' import styles from './Energy.module.sass' import { EnergySuccessModal } from './SuccessModal' @@ -151,39 +140,37 @@ const EnergyInfoSection = ({ amount }: EnergyInfoSectionProps) => { const txsCount = amount ? calculateTransactionCount(amount, coefficient, tokenDecimal) : 0 return (
- - -
- - Transactions with SUB{' '} - - - - -
~ {(txsCount / coefficient).toFixed(0)}
-
- - - - - Transactions with energy{' '} - - - - -
~ {txsCount.toFixed(0)}
- - +
+
+ Transactions with SUB{' '} + + + +
+
+ ~ {} +
+
+
VS
+
+
+ Transactions with energy{' '} + + + +
+
~ {}
+
) } @@ -199,7 +186,7 @@ export interface EnergyFormProps extends CardProps { setIsDisabled: (disabled: boolean) => void } } -const EnergyForm = ({ forSelfOnly, subscribeValues, ...props }: EnergyFormProps) => { +const EnergyForm = ({ forSelfOnly, subscribeValues, className }: EnergyFormProps) => { const [form] = Form.useForm() const [amount, setAmount] = useState() const [amountWithoutValidation, setAmountWithoutValidation] = useState() @@ -246,8 +233,9 @@ const EnergyForm = ({ forSelfOnly, subscribeValues, ...props }: EnergyFormProps) }, [disableSubscriber, amount]) return ( - - +
+
Get more energy!
+ - +
)} {!isAnotherRecipient && hasProxy && ( )} @@ -275,8 +263,8 @@ const EnergyForm = ({ forSelfOnly, subscribeValues, ...props }: EnergyFormProps) name={fieldName('recipient')} onBlur={subscribeAddress} size='large' - className='mt-3' label='Address of the recipient' + className={styles.RecipientInput} /> )} @@ -284,8 +272,8 @@ const EnergyForm = ({ forSelfOnly, subscribeValues, ...props }: EnergyFormProps) {!subscribeValues?.noButton && ( setSuccess(true)} + className={styles.EnergyFormButton} /> )} setSuccess(false)} /> - +

) } diff --git a/src/components/energy/EnergyPage.tsx b/src/components/energy/EnergyPage.tsx index a72ff02e3..72b8758b9 100644 --- a/src/components/energy/EnergyPage.tsx +++ b/src/components/energy/EnergyPage.tsx @@ -5,6 +5,7 @@ import styles from './Energy.module.sass' import EnergyForm from './EnergyForm' import EnergyStats from './EnergyStats' import { FaqSection } from './Faq' +import QuestionSection from './QuestionSection' const desc = 'Energy allows you to use Subsocial. You can create energy here by burning SUB, and see the approximate number of transactions it will allow you to complete.' @@ -26,7 +27,10 @@ export const EnergyPage = () => {
- +
+ + +
) } diff --git a/src/components/energy/EnergyStats.tsx b/src/components/energy/EnergyStats.tsx index 92cbdf571..6e85a408d 100644 --- a/src/components/energy/EnergyStats.tsx +++ b/src/components/energy/EnergyStats.tsx @@ -1,15 +1,40 @@ +import { QuestionCircleOutlined } from '@ant-design/icons' +import { convertToBalanceWithDecimal } from '@subsocial/utils' +import { Tooltip } from 'antd' +import BN from 'bignumber.js' import { TiFlashOutline } from 'react-icons/ti' +import { useAuth } from '../auth/AuthContext' +import { useSubstrate } from '../substrate' +import TokenBalance from '../utils/TokenBalance' import styles from './Energy.module.sass' const EnergyStats = () => { - const mockedData = [ - { title: 'Energy left', value: '1,240', withEnergyIcon: true }, - { title: 'Transactions left', value: '3,130', withEnergyIcon: false }, + const { + energy: { transactionsCount, energyBalance }, + } = useAuth() + const { tokenDecimal } = useSubstrate() + + const energyBalanceWithDecimal = + energyBalance && tokenDecimal + ? convertToBalanceWithDecimal(energyBalance.toString(), tokenDecimal) + : new BN(0) + + const energyLeft = + const transactionsLeft = + + const data = [ + { title: 'Energy left', value: energyLeft, withEnergyIcon: true, tooltipText: 'blabla' }, + { + title: 'Transactions left', + value: transactionsLeft, + withEnergyIcon: false, + tooltipText: 'blabla', + }, ] return (
- {mockedData.map((props, i) => ( + {data.map((props, i) => ( ))}
@@ -18,14 +43,20 @@ const EnergyStats = () => { type StatsCardProps = { title: string - value: string + value: React.ReactNode withEnergyIcon: boolean + tooltipText: string } -const StatsCard = ({ title, value, withEnergyIcon }: StatsCardProps) => { +const StatsCard = ({ title, value, withEnergyIcon, tooltipText }: StatsCardProps) => { return (
-
{title}
+
+ {title}{' '} + + + +
{withEnergyIcon && } {value} diff --git a/src/components/energy/Faq.tsx b/src/components/energy/Faq.tsx index 460cc7827..a6237a84f 100644 --- a/src/components/energy/Faq.tsx +++ b/src/components/energy/Faq.tsx @@ -1,19 +1,17 @@ import { Collapse } from 'antd' -import { LocalIcon } from 'src/components/utils' -import { CardWithTitle } from '../utils/cards/WithTitle' +import ExternalLink from '../spaces/helpers/ExternalLink' import styles from './Energy.module.sass' const { Panel } = Collapse export const FaqSection = () => { return ( - } - > - +
+
+
FAQ
+ +
+ What is energy?} key='1'>

Energy can be used to perform actions on the network, instead of SUB tokens. Energy can @@ -40,6 +38,6 @@ export const FaqSection = () => {

- +
) } diff --git a/src/components/energy/QuestionSection.tsx b/src/components/energy/QuestionSection.tsx new file mode 100644 index 000000000..739957b11 --- /dev/null +++ b/src/components/energy/QuestionSection.tsx @@ -0,0 +1,16 @@ +import { Button } from 'antd' +import styles from './Energy.module.sass' + +const QuestionSection = () => { + return ( +
+
Still have questions?
+ + +
+ ) +} + +export default QuestionSection diff --git a/src/components/energy/utils.ts b/src/components/energy/utils.ts index 65027d10d..43f1e053f 100644 --- a/src/components/energy/utils.ts +++ b/src/components/energy/utils.ts @@ -8,6 +8,7 @@ export type EnergyState = { status: EnergyStatus transactionsCount: number coefficient: number + energyBalance: BN } export const getEnergyCoef = async (api: ApiPromise) => { @@ -51,5 +52,6 @@ export const calculateEnergyState = ( coefficient, transactionsCount, status, + energyBalance, } } diff --git a/src/components/utils/TokenBalance.tsx b/src/components/utils/TokenBalance.tsx new file mode 100644 index 000000000..2dee11dc6 --- /dev/null +++ b/src/components/utils/TokenBalance.tsx @@ -0,0 +1,52 @@ +type TokenBalanceProps = { + value: string + defaultMaximumFractionDigits?: number + symbol?: string + startFromSymbol?: boolean +} + +type FormatBalance = { + value: string + defaultMaximumFractionDigits?: number +} + +export const formatBalance = ({ value, defaultMaximumFractionDigits = 2 }: FormatBalance) => { + const [intPart, decimalPart] = value.split('.') + + let maximumFractionDigits = defaultMaximumFractionDigits + + if (intPart === '0' && Number(decimalPart) > 0) { + const firstNonZeroIndex = decimalPart.split('').findIndex(char => char !== '0') + 1 + + if (firstNonZeroIndex > 5) { + maximumFractionDigits = defaultMaximumFractionDigits + } else { + maximumFractionDigits = firstNonZeroIndex + } + } + + return Number(value).toLocaleString('en-US', { + minimumFractionDigits: 0, + maximumFractionDigits, + }) +} + +const TokenBalance = ({ + value, + defaultMaximumFractionDigits, + startFromSymbol: startFromSybmol, + symbol, +}: TokenBalanceProps) => { + const formattedValue = formatBalance({ + value: value, + defaultMaximumFractionDigits, + }) + + const formattedValueWithSymbol = startFromSybmol + ? `${symbol}${formattedValue}` + : `${formattedValue} ${symbol}` + + return <>{symbol ? formattedValueWithSymbol : formattedValue} +} + +export default TokenBalance diff --git a/src/stores/analytics.ts b/src/stores/analytics.ts index 9d7f82306..d39387fb1 100644 --- a/src/stores/analytics.ts +++ b/src/stores/analytics.ts @@ -1,5 +1,5 @@ import { createInstance } from '@amplitude/analytics-browser' -import { type BaseEvent, type BrowserClient } from '@amplitude/analytics-types' +import type { BaseEvent, BrowserClient } from '@amplitude/analytics-types' import Router from 'next/router' import { createUserId } from 'src/components/utils/OffchainUtils' import { ampId } from 'src/config/env' diff --git a/src/styles/subsocial-vars.scss b/src/styles/subsocial-vars.scss index f579b90ba..09bdcb9c3 100644 --- a/src/styles/subsocial-vars.scss +++ b/src/styles/subsocial-vars.scss @@ -1,12 +1,12 @@ /*-------------Font Size-----------*/ -$font_tiny: 0.75rem; -$font_small: 0.875rem; -$font_normal: 1rem; -$font_semilarge: 1.125rem; -$font_large: 1.25rem; -$font_big: 1.5rem; -$font_huge: 2rem; +$font_tiny: 0.75rem; // 12px +$font_small: 0.875rem; // 14px +$font_normal: 1rem; // 16px +$font_semilarge: 1.125rem; // 18px +$font_large: 1.25rem; // 20px +$font_big: 1.5rem; // 24px +$font_huge: 2rem; // 32px /*-------------Font Weight-----------*/ @@ -17,16 +17,16 @@ $font_weight_bold: 700; /*----------Space Size-------------*/ -$space_mini: 0.25rem; -$space_semitiny: 0.375rem; -$space_tiny: 0.5rem; -$space_semismall: 0.625rem; -$space_small: 0.75rem; -$space_normal: 1rem; -$space_semilarge: 1.125rem; -$space_large: 1.25rem; -$space_big: 1.5rem; -$space_huge: 2rem; +$space_mini: 0.25rem; // 4px +$space_semitiny: 0.375rem; // 6px +$space_tiny: 0.5rem; // 8px +$space_semismall: 0.625rem; // 10px +$space_small: 0.75rem; // 12px +$space_normal: 1rem; // 16px +$space_semilarge: 1.125rem; // 18px +$space_large: 1.25rem; // 20px +$space_big: 1.5rem; // 24px +$space_huge: 2rem; // 32px /*-------------Colors----------*/ From f24d1c5795d37da075939b36aab934058172c675 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 13 Mar 2024 14:07:32 +0200 Subject: [PATCH 3/6] Add link for ask question button --- src/components/energy/Energy.module.sass | 5 ++++- src/components/energy/QuestionSection.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/energy/Energy.module.sass b/src/components/energy/Energy.module.sass index cf29ae6de..5bb70fbd4 100644 --- a/src/components/energy/Energy.module.sass +++ b/src/components/energy/Energy.module.sass @@ -201,8 +201,11 @@ margin-bottom: $space_normal - button + a width: fit-content + display: flex + align-items: center + justify-content: center .QuestionTitle font-size: $font_large diff --git a/src/components/energy/QuestionSection.tsx b/src/components/energy/QuestionSection.tsx index 739957b11..2b174ae17 100644 --- a/src/components/energy/QuestionSection.tsx +++ b/src/components/energy/QuestionSection.tsx @@ -6,7 +6,7 @@ const QuestionSection = () => {
Still have questions?
-
From 41943219d228d7abbf30a43b77ed72f9616f40cb Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 13 Mar 2024 14:11:45 +0200 Subject: [PATCH 4/6] Remove unused file --- src/components/energy/Energy.module.sass | 56 ------------ src/components/energy/index.tsx | 107 ----------------------- 2 files changed, 163 deletions(-) delete mode 100644 src/components/energy/index.tsx diff --git a/src/components/energy/Energy.module.sass b/src/components/energy/Energy.module.sass index 5bb70fbd4..ff6b2edf6 100644 --- a/src/components/energy/Energy.module.sass +++ b/src/components/energy/Energy.module.sass @@ -242,59 +242,3 @@ width: 100% margin-bottom: 0 line-height: 26px - -.DropdownOverlay - background-color: #fff - width: 250px - box-shadow: $shadow - -.DropdownOverlayContent - padding: $space_normal $space_big 0 $space_big - -.OverlayCollapse - padding-bottom: $space_normal - - \:global .ant-collapse-header - padding: 0 !important - padding-left: 3rem !important - - \:global .ant-collapse-arrow - left: $space_big !important - font-size: $font_normal !important - - \:global .ant-collapse-content-box - padding: $space_small $space_big 0 $space_big !important - -.QuestionCircle - color: $color_primary - -.OnlyProgress - cursor: pointer - -.CallsValue - font-size: 19px -.CallsLowValue - color: $color_gold -.CallsZeroValue - color: $color_error - -.Warning - background-color: #FFFBE6 - padding: $space_normal $space_big $space_small $space_big - -.Error - background-color: #F9D8D8 - -.EnergyIndicator - display: flex - -.Faq - \:global .ant-card-body - padding: 12px - -.FontSmall - font-size: $font_small - -.EnergyIcon - path - stroke-width: 36px diff --git a/src/components/energy/index.tsx b/src/components/energy/index.tsx deleted file mode 100644 index 990160edb..000000000 --- a/src/components/energy/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { Collapse, Divider, Dropdown } from 'antd' -import clsx from 'clsx' -import { IoFlashOutline } from 'react-icons/io5' -import { useAuth } from '../auth/AuthContext' -import { ButtonLink } from '../utils/CustomLinks' -import { MutedDiv } from '../utils/MutedText' -import { BareProps } from '../utils/types' -import styles from './Energy.module.sass' -import { EnergyStatus } from './utils' - -export type CommonEnergyProps = { - status: EnergyStatus -} - -const energyColors: { [key in EnergyStatus]: string } = { - low: '#E89C29', - normal: '#94A3B8', - zero: '#F5222D', -} - -export const EnergyIndicator = ({ status }: CommonEnergyProps & BareProps) => ( -
- -
-) - -const { Panel } = Collapse - -const DropdownOverlay = () => { - const { - energy: { transactionsCount, coefficient, status }, - } = useAuth() - - return ( -
-
-
- Transactions left: -
- - {transactionsCount === 0 - ? transactionsCount.toString() - : `~ ${transactionsCount.toFixed(0)}`} - -
-
-
- Energy coefficient: -
x{coefficient}
-
- - Get more energy - -
- - - - - - - Energy lets you use Subsocial to make posts, follow your friends, like their content, - etc. NRG can be created by burning SUB tokens, and enables you to perform {coefficient}x - more actions than if you used SUB. - - - -
- ) -} - -const EnergyDropdown = () => { - const { - energy: { status }, - } = useAuth() - - return ( - <> - } - placement={'bottomCenter'} - trigger={['hover', 'click']} - > -
- -
- - - ) -} - -export default EnergyDropdown From b9aec5f5ede2c703dde8ad37d7013fd89c983b3f Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 13 Mar 2024 17:57:25 +0200 Subject: [PATCH 5/6] Fix colors of texts --- src/components/energy/Energy.module.sass | 5 ++++- src/components/energy/EnergyForm.tsx | 4 ++-- src/components/energy/EnergyPage.tsx | 13 +++++++------ src/components/energy/EnergyStats.tsx | 11 +++++++++-- 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/energy/Energy.module.sass b/src/components/energy/Energy.module.sass index ff6b2edf6..cd2e5133b 100644 --- a/src/components/energy/Energy.module.sass +++ b/src/components/energy/Energy.module.sass @@ -170,7 +170,7 @@ gap: $space_normal :global(.ant-collapse-content-box) - padding: $space_small $space_big 0 $space_big !important + padding: $space_small 0 0 $space_large !important p color: #64748B @@ -224,6 +224,9 @@ width: 100% + .QuestionWrapper + align-items: center + @media (max-width: 560px) .InfoSection flex-direction: column diff --git a/src/components/energy/EnergyForm.tsx b/src/components/energy/EnergyForm.tsx index f3f321218..f20b17dfb 100644 --- a/src/components/energy/EnergyForm.tsx +++ b/src/components/energy/EnergyForm.tsx @@ -149,7 +149,7 @@ const EnergyInfoSection = ({ amount }: EnergyInfoSectionProps) => { 'The approximate number of transactions you can complete by using this many SUB tokens' } > - +
@@ -166,7 +166,7 @@ const EnergyInfoSection = ({ amount }: EnergyInfoSectionProps) => { 'The approximate number of transactions you can complete by using energy, which will be created by burning this many SUB tokens' } > - +
~ {}
diff --git a/src/components/energy/EnergyPage.tsx b/src/components/energy/EnergyPage.tsx index 72b8758b9..b800ecfce 100644 --- a/src/components/energy/EnergyPage.tsx +++ b/src/components/energy/EnergyPage.tsx @@ -1,6 +1,5 @@ -import clsx from 'clsx' +import { useMyAddress } from '../auth/MyAccountsContext' import { HeadMetaProps, PageContent } from '../main/PageWrapper' -import { MutedDiv } from '../utils/MutedText' import styles from './Energy.module.sass' import EnergyForm from './EnergyForm' import EnergyStats from './EnergyStats' @@ -17,14 +16,16 @@ const meta: HeadMetaProps = { } export const EnergyPage = () => { + const myAddress = useMyAddress() + return ( - +
-
Energy Station
- {desc} +
Energy Station
+
{desc}
- + {myAddress && }
diff --git a/src/components/energy/EnergyStats.tsx b/src/components/energy/EnergyStats.tsx index 6e85a408d..e8ca2c114 100644 --- a/src/components/energy/EnergyStats.tsx +++ b/src/components/energy/EnergyStats.tsx @@ -23,12 +23,19 @@ const EnergyStats = () => { const transactionsLeft = const data = [ - { title: 'Energy left', value: energyLeft, withEnergyIcon: true, tooltipText: 'blabla' }, + { + title: 'Energy left', + value: energyLeft, + withEnergyIcon: true, + tooltipText: + 'The amount of energy you have left. Please generate more energy before this reaches 0.', + }, { title: 'Transactions left', value: transactionsLeft, withEnergyIcon: false, - tooltipText: 'blabla', + tooltipText: + 'How many transactions you can do with your remaining energy. Please generate more energy before this reaches 0.', }, ] From d3d9f25df010b85d495437e018771a6fa570fc11 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 14 Mar 2024 17:18:20 +0200 Subject: [PATCH 6/6] Change import --- src/stores/analytics.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/analytics.ts b/src/stores/analytics.ts index d39387fb1..46d75ad29 100644 --- a/src/stores/analytics.ts +++ b/src/stores/analytics.ts @@ -1,5 +1,5 @@ import { createInstance } from '@amplitude/analytics-browser' -import type { BaseEvent, BrowserClient } from '@amplitude/analytics-types' +import { BaseEvent, BrowserClient } from '@amplitude/analytics-types' import Router from 'next/router' import { createUserId } from 'src/components/utils/OffchainUtils' import { ampId } from 'src/config/env'