From 38ac646a250e82638e6bd972008942eb63d445cd Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Wed, 14 Aug 2024 17:38:28 +0700 Subject: [PATCH 01/23] chore: remove ldo stats code --- consts/metrics.ts | 1 - global.d.ts | 1 - next.config.mjs | 1 - pages/api/ldo-stats.ts | 49 ++---------------------------------- pages/api/lido-stats.ts | 46 ++------------------------------- pages/api/lidostats.ts | 22 ++-------------- utilsApi/getLdoStats.ts | 31 ----------------------- utilsApi/getLidoStats.ts | 29 --------------------- utilsApi/gone.ts | 6 +++++ utilsApi/index.ts | 4 +-- utilsApi/metrics/metrics.ts | 2 -- utilsApi/metrics/subgraph.ts | 22 ---------------- yarn.lock | 7 ++++++ 13 files changed, 21 insertions(+), 200 deletions(-) delete mode 100644 utilsApi/getLdoStats.ts delete mode 100644 utilsApi/getLidoStats.ts create mode 100644 utilsApi/gone.ts delete mode 100644 utilsApi/metrics/subgraph.ts diff --git a/consts/metrics.ts b/consts/metrics.ts index 5e1ac3074..574e821f1 100644 --- a/consts/metrics.ts +++ b/consts/metrics.ts @@ -3,6 +3,5 @@ export const METRICS_PREFIX = 'eth_stake_widget_ui_'; export const enum METRIC_NAMES { REQUESTS_TOTAL = 'requests_total', API_RESPONSE = 'api_response', - SUBGRAPHS_RESPONSE = 'subgraphs_response', ETH_CALL_ADDRESS_TO = 'eth_call_address_to', } diff --git a/global.d.ts b/global.d.ts index efc35a096..6210ca609 100644 --- a/global.d.ts +++ b/global.d.ts @@ -28,7 +28,6 @@ declare module 'next/config' { rpcUrls_1: string | undefined; rpcUrls_17000: string | undefined; rpcUrls_11155111: string | undefined; - ethplorerApiKey: string | undefined; cspTrustedHosts: string | undefined; cspReportUri: string | undefined; diff --git a/next.config.mjs b/next.config.mjs index b2ef406ef..9cd936eb3 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -146,7 +146,6 @@ export default withBundleAnalyzer({ rpcUrls_1: process.env.EL_RPC_URLS_1, rpcUrls_17000: process.env.EL_RPC_URLS_17000, rpcUrls_11155111: process.env.EL_RPC_URLS_11155111, - ethplorerApiKey: process.env.ETHPLORER_API_KEY, cspTrustedHosts: process.env.CSP_TRUSTED_HOSTS, cspReportUri: process.env.CSP_REPORT_URI, diff --git a/pages/api/ldo-stats.ts b/pages/api/ldo-stats.ts index 42555b972..d3a86b023 100644 --- a/pages/api/ldo-stats.ts +++ b/pages/api/ldo-stats.ts @@ -1,52 +1,7 @@ -import { Cache } from 'memory-cache'; import { wrapRequest as wrapNextRequest } from '@lidofinance/next-api-wrapper'; - -import { config } from 'config'; - -import { API_DEFAULT_SUNSET_TIMESTAMP, API_ROUTES } from 'consts/api'; -import { - getLdoStats, - errorAndCacheDefaultWrappers, - responseTimeMetric, - rateLimit, - sunsetBy, - httpMethodGuard, - HttpMethod, - cors, -} from 'utilsApi'; -import Metrics from 'utilsApi/metrics'; -import { API } from 'types'; - -const cache = new Cache(); - -// Proxy for third-party API. -// Returns LDO token information -// DEPRECATED: In future will be delete!!! -const ldoStats: API = async (req, res) => { - const cachedLidoStats = cache.get(config.CACHE_LDO_STATS_KEY); - - if (cachedLidoStats) { - res.json(cachedLidoStats); - } else { - const ldoStats = await getLdoStats(); - - cache.put( - config.CACHE_LDO_STATS_KEY, - { data: ldoStats }, - config.CACHE_LDO_STATS_TTL, - ); - - res.json({ data: ldoStats }); - } -}; +import { httpMethodGuard, HttpMethod, cors, gone } from 'utilsApi'; export default wrapNextRequest([ httpMethodGuard([HttpMethod.GET]), cors({ origin: ['*'], methods: [HttpMethod.GET] }), - rateLimit, - responseTimeMetric(Metrics.request.apiTimings, API_ROUTES.LDO_STATS), - sunsetBy({ - sunsetTimestamp: API_DEFAULT_SUNSET_TIMESTAMP, - }), - ...errorAndCacheDefaultWrappers, -])(ldoStats); +])(gone); diff --git a/pages/api/lido-stats.ts b/pages/api/lido-stats.ts index e1213de4c..e1d18a4ca 100644 --- a/pages/api/lido-stats.ts +++ b/pages/api/lido-stats.ts @@ -1,50 +1,8 @@ -import { Cache } from 'memory-cache'; import { wrapRequest as wrapNextRequest } from '@lidofinance/next-api-wrapper'; -import { config } from 'config'; -import { API_DEFAULT_SUNSET_TIMESTAMP, API_ROUTES } from 'consts/api'; -import { - getLidoStats, - errorAndCacheDefaultWrappers, - responseTimeMetric, - rateLimit, - sunsetBy, - httpMethodGuard, - HttpMethod, - cors, -} from 'utilsApi'; -import Metrics from 'utilsApi/metrics'; -import { API } from 'types'; - -const cache = new Cache(); - -// Proxy for third-party API. -// Returns steth token information -// DEPRECATED: In future will be delete!!! -export const lidoStats: API = async (req, res) => { - const cachedLidoStats = cache.get(config.CACHE_LIDO_STATS_KEY); - - if (cachedLidoStats) { - res.json(cachedLidoStats); - } else { - const lidoStats = await getLidoStats(); - cache.put( - config.CACHE_LIDO_STATS_KEY, - { data: lidoStats }, - config.CACHE_LIDO_STATS_TTL, - ); - - res.json({ data: lidoStats }); - } -}; +import { httpMethodGuard, HttpMethod, cors, gone } from 'utilsApi'; export default wrapNextRequest([ httpMethodGuard([HttpMethod.GET]), cors({ origin: ['*'], methods: [HttpMethod.GET] }), - rateLimit, - responseTimeMetric(Metrics.request.apiTimings, API_ROUTES.LIDO_STATS), - sunsetBy({ - sunsetTimestamp: API_DEFAULT_SUNSET_TIMESTAMP, - }), - ...errorAndCacheDefaultWrappers, -])(lidoStats); +])(gone); diff --git a/pages/api/lidostats.ts b/pages/api/lidostats.ts index 1d3055943..e1d18a4ca 100644 --- a/pages/api/lidostats.ts +++ b/pages/api/lidostats.ts @@ -1,26 +1,8 @@ import { wrapRequest as wrapNextRequest } from '@lidofinance/next-api-wrapper'; -import { API_DEFAULT_SUNSET_TIMESTAMP, API_ROUTES } from 'consts/api'; -import { - responseTimeMetric, - errorAndCacheDefaultWrappers, - rateLimit, - sunsetBy, - httpMethodGuard, - HttpMethod, - cors, -} from 'utilsApi'; -import Metrics from 'utilsApi/metrics'; -import lidoStats from './lido-stats'; +import { httpMethodGuard, HttpMethod, cors, gone } from 'utilsApi'; -// Mirror for /lido-stats export default wrapNextRequest([ httpMethodGuard([HttpMethod.GET]), cors({ origin: ['*'], methods: [HttpMethod.GET] }), - rateLimit, - responseTimeMetric(Metrics.request.apiTimings, API_ROUTES.LIDOSTATS), - sunsetBy({ - sunsetTimestamp: API_DEFAULT_SUNSET_TIMESTAMP, - }), - ...errorAndCacheDefaultWrappers, -])(lidoStats); +])(gone); diff --git a/utilsApi/getLdoStats.ts b/utilsApi/getLdoStats.ts deleted file mode 100644 index 577b9c15e..000000000 --- a/utilsApi/getLdoStats.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { getTokenAddress, TOKENS } from '@lido-sdk/constants'; - -import { secretConfig } from 'config'; -import { ETHPLORER_TOKEN_ENDPOINT } from 'consts/api'; -import { CHAINS } from 'consts/chains'; -import { standardFetcher } from 'utils/standardFetcher'; -import { responseTimeExternalMetricWrapper } from 'utilsApi'; - -type GetLdoStats = () => Promise; - -// DEPRECATED: In future will be delete!!! Because we don't want to use https://api.ethplorer.io/ -export const getLdoStats: GetLdoStats = async () => { - console.debug('Fetching LDO stats...'); - // IMPORTANT: ETHPLORER_TOKEN_ENDPOINT (api.ethplorer.io) works only with Mainnet chain! - const api = `${ETHPLORER_TOKEN_ENDPOINT}${getTokenAddress( - CHAINS.Mainnet as number, - TOKENS.LDO, - )}`; - const query = new URLSearchParams({ - apiKey: secretConfig.ethplorerApiKey ?? '', - }); - const url = `${api}?${query.toString()}`; - - const ldoStats = await responseTimeExternalMetricWrapper({ - payload: ETHPLORER_TOKEN_ENDPOINT, - request: () => standardFetcher(url), - }); - console.debug('LDO stats: ' + ldoStats); - - return ldoStats; -}; diff --git a/utilsApi/getLidoStats.ts b/utilsApi/getLidoStats.ts deleted file mode 100644 index d0f0598d8..000000000 --- a/utilsApi/getLidoStats.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { TOKENS, getTokenAddress, CHAINS } from '@lido-sdk/constants'; - -import { secretConfig } from 'config'; -import { ETHPLORER_TOKEN_ENDPOINT } from 'consts/api'; -import { standardFetcher } from 'utils/standardFetcher'; -import { responseTimeExternalMetricWrapper } from 'utilsApi'; - -type GetLidoStats = () => Promise; - -// DEPRECATED: In future will be delete!!! Because we don't want to use https://api.ethplorer.io/ -export const getLidoStats: GetLidoStats = async () => { - console.debug('[getLidoStats] Started fetching...'); - // IMPORTANT: ETHPLORER_TOKEN_ENDPOINT (api.ethplorer.io) works only with Mainnet chain! - const api = `${ETHPLORER_TOKEN_ENDPOINT}${getTokenAddress( - CHAINS.Mainnet, - TOKENS.STETH, - )}`; - const query = new URLSearchParams({ - apiKey: secretConfig.ethplorerApiKey ?? '', - }); - const url = `${api}?${query.toString()}`; - - const lidoStats = await responseTimeExternalMetricWrapper({ - payload: ETHPLORER_TOKEN_ENDPOINT, - request: () => standardFetcher(url), - }); - console.debug('[getLidoStats] Lido stats:', lidoStats); - return lidoStats; -}; diff --git a/utilsApi/gone.ts b/utilsApi/gone.ts new file mode 100644 index 000000000..6b872e985 --- /dev/null +++ b/utilsApi/gone.ts @@ -0,0 +1,6 @@ +import { API } from 'types/api.js'; + +export const gone: API = async (_, res) => { + res.status(410); + res.end(); +}; diff --git a/utilsApi/index.ts b/utilsApi/index.ts index de210ed39..a98b393ff 100644 --- a/utilsApi/index.ts +++ b/utilsApi/index.ts @@ -1,4 +1,4 @@ -export * from './getLdoStats'; -export * from './getLidoStats'; export * from './nextApiWrappers'; export * from './fetchApiWrapper'; +export * from './cached-proxy'; +export * from './gone'; diff --git a/utilsApi/metrics/metrics.ts b/utilsApi/metrics/metrics.ts index 18d00cb51..3c5b2337e 100644 --- a/utilsApi/metrics/metrics.ts +++ b/utilsApi/metrics/metrics.ts @@ -6,13 +6,11 @@ import { METRICS_PREFIX } from 'consts/metrics'; import buildInfoJson from 'build-info.json'; import { RequestMetrics } from './request'; -import { SubgraphMetrics } from './subgraph'; class Metrics { registry = new Registry(); // compositions of metric types - subgraph = new SubgraphMetrics(this.registry); request = new RequestMetrics(this.registry); constructor() { diff --git a/utilsApi/metrics/subgraph.ts b/utilsApi/metrics/subgraph.ts deleted file mode 100644 index fef942f47..000000000 --- a/utilsApi/metrics/subgraph.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Histogram, Registry } from 'prom-client'; -import { METRICS_PREFIX, METRIC_NAMES } from 'consts/metrics'; - -export class SubgraphMetrics { - subgraphsResponseTime: Histogram<'subgraphs'>; - - constructor(public registry: Registry) { - this.subgraphsResponseTime = this.subgraphsResponseTimeInit(); - } - - subgraphsResponseTimeInit() { - const subgraphsResponseTimeName = - METRICS_PREFIX + METRIC_NAMES.SUBGRAPHS_RESPONSE; - - return new Histogram({ - name: subgraphsResponseTimeName, - help: 'Subgraphs response time seconds', - buckets: [0.1, 0.2, 0.3, 0.6, 1, 1.5, 2, 5], - registers: [this.registry], - }); - } -} diff --git a/yarn.lock b/yarn.lock index 9f1bb5b2a..6bb8dd6f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1005,6 +1005,13 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== +"@babel/runtime@^7.12.5": + version "7.25.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb" + integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.19.4", "@babel/runtime@^7.21.0": version "7.24.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12" From 67443ac1197c2ef89649fa60182e4f919622f8ab Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 14 Aug 2024 13:00:40 +0300 Subject: [PATCH 02/23] feat(stake): round up gas limit and change fallback ref address --- config/groups/stake.ts | 5 ++--- features/stake/stake-form/use-stake.ts | 13 ++----------- features/stake/stake-form/utils.ts | 13 ------------- utils/apply-round-up-gas-limit.ts | 8 ++++++++ utils/send-tx.ts | 7 +++++++ 5 files changed, 19 insertions(+), 27 deletions(-) create mode 100644 utils/apply-round-up-gas-limit.ts diff --git a/config/groups/stake.ts b/config/groups/stake.ts index f687764cb..ebebb908a 100644 --- a/config/groups/stake.ts +++ b/config/groups/stake.ts @@ -1,6 +1,5 @@ import { BigNumber } from 'ethers'; import { parseEther } from '@ethersproject/units'; -import { AddressZero } from '@ethersproject/constants'; import { StakeSwapDiscountIntegrationKey } from 'features/stake/swap-discount-banner'; @@ -26,11 +25,11 @@ export const STAKE_GASLIMIT_FALLBACK = BigNumber.from( ), ); -export const STAKE_WIDGET_METRIC_SUFFIX = '01'; +export const LIDO_ADDRESS = '0x11D00000000000000000000000000000000011D0'; export const STAKE_FALLBACK_REFERRAL_ADDRESS = preConfig.ipfsMode ? IPFS_REFERRAL_ADDRESS - : AddressZero; + : LIDO_ADDRESS; export const STAKE_SWAP_INTEGRATION: StakeSwapDiscountIntegrationKey = 'one-inch'; diff --git a/features/stake/stake-form/use-stake.ts b/features/stake/stake-form/use-stake.ts index 092272289..a772a63f5 100644 --- a/features/stake/stake-form/use-stake.ts +++ b/features/stake/stake-form/use-stake.ts @@ -14,11 +14,7 @@ import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc import { isContract } from 'utils/isContract'; import { runWithTransactionLogger } from 'utils'; -import { - MockLimitReachedError, - getAddress, - applyCalldataSuffix, -} from './utils'; +import { MockLimitReachedError, getAddress } from './utils'; import { useTxModalStagesStake } from './hooks/use-tx-modal-stages-stake'; import { sendTx } from 'utils/send-tx'; @@ -41,9 +37,6 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { const { providerWeb3 } = useSDK(); const { txModalStages } = useTxModalStagesStake(); - // temporary disable until Ledger is fixed - const shouldApplyCalldataSuffix = false; - return useCallback( async ({ amount, referral }: StakeArguments): Promise => { try { @@ -77,14 +70,13 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { }, ); - if (shouldApplyCalldataSuffix) applyCalldataSuffix(tx); - return sendTx({ tx, isMultisig, staticProvider: staticRpcProvider, walletProvider: providerWeb3, shouldApplyGasLimitRatio: true, + shouldRoundUpGasLimit: true, }); }; @@ -128,7 +120,6 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { staticRpcProvider, stethContract, onConfirm, - shouldApplyCalldataSuffix, onRetry, ], ); diff --git a/features/stake/stake-form/utils.ts b/features/stake/stake-form/utils.ts index 7ebb9daf8..5f256852a 100644 --- a/features/stake/stake-form/utils.ts +++ b/features/stake/stake-form/utils.ts @@ -1,10 +1,6 @@ -import type { PopulatedTransaction } from 'ethers'; import { isAddress } from 'ethers/lib/utils'; import type { BaseProvider } from '@ethersproject/providers'; -import { config } from 'config'; -import invariant from 'tiny-invariant'; - export const getAddress = async ( input: string, providerRpc: BaseProvider, @@ -20,15 +16,6 @@ export const getAddress = async ( throw new ReferralAddressError(); }; -// adds metrics indicator for widget tx -export const applyCalldataSuffix = (tx: PopulatedTransaction) => { - if (!config.ipfsMode) { - invariant(tx.data, 'transaction must have calldata'); - tx.data = tx.data + config.STAKE_WIDGET_METRIC_SUFFIX; - } - return tx; -}; - export class ReferralAddressError extends Error { reason: string; constructor() { diff --git a/utils/apply-round-up-gas-limit.ts b/utils/apply-round-up-gas-limit.ts new file mode 100644 index 000000000..73ab28773 --- /dev/null +++ b/utils/apply-round-up-gas-limit.ts @@ -0,0 +1,8 @@ +import { BigNumber } from 'ethers'; + +export const applyRoundUpGasLimit = (number: BigNumber): BigNumber => { + const bn1000 = BigNumber.from(1000); + + // 94567 -> 94 -> 94000 -> 94999 + return number.div(bn1000).mul(bn1000).add(BigNumber.from(999)); +}; diff --git a/utils/send-tx.ts b/utils/send-tx.ts index a7c003a70..3b56366c6 100644 --- a/utils/send-tx.ts +++ b/utils/send-tx.ts @@ -7,6 +7,7 @@ import type { PopulatedTransaction } from 'ethers'; import { getFeeData } from './getFeeData'; import { estimateGas } from './estimate-gas'; import { applyGasLimitRatio } from 'utils/apply-gas-limit-ratio'; +import { applyRoundUpGasLimit } from 'utils/apply-round-up-gas-limit'; export type SendTxOptions = { tx: PopulatedTransaction; @@ -14,6 +15,7 @@ export type SendTxOptions = { walletProvider: Web3Provider; staticProvider: JsonRpcBatchProvider; shouldApplyGasLimitRatio?: boolean; + shouldRoundUpGasLimit?: boolean; }; export const sendTx = async ({ @@ -22,6 +24,7 @@ export const sendTx = async ({ staticProvider, walletProvider, shouldApplyGasLimitRatio = false, + shouldRoundUpGasLimit = false, }: SendTxOptions) => { if (!isMultisig) { const { maxFeePerGas, maxPriorityFeePerGas } = @@ -35,6 +38,10 @@ export const sendTx = async ({ tx.gasLimit = shouldApplyGasLimitRatio ? applyGasLimitRatio(gasLimit) : gasLimit; + + tx.gasLimit = shouldRoundUpGasLimit + ? applyRoundUpGasLimit(tx.gasLimit) + : gasLimit; } return walletProvider.getSigner().sendUncheckedTransaction(tx); }; From b4cf798ff9c5fcaf10812e5837c2836f5ab56ef6 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 15 Aug 2024 11:58:29 +0300 Subject: [PATCH 03/23] refactor: small optimization --- utils/apply-round-up-gas-limit.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/utils/apply-round-up-gas-limit.ts b/utils/apply-round-up-gas-limit.ts index 73ab28773..f8dc52ad3 100644 --- a/utils/apply-round-up-gas-limit.ts +++ b/utils/apply-round-up-gas-limit.ts @@ -1,8 +1,9 @@ import { BigNumber } from 'ethers'; -export const applyRoundUpGasLimit = (number: BigNumber): BigNumber => { - const bn1000 = BigNumber.from(1000); +const bn1000 = BigNumber.from(1000); +const bn999 = BigNumber.from(999); +export const applyRoundUpGasLimit = (number: BigNumber): BigNumber => { // 94567 -> 94 -> 94000 -> 94999 - return number.div(bn1000).mul(bn1000).add(BigNumber.from(999)); + return number.div(bn1000).mul(bn1000).add(bn999); }; From 2c9bd52e03cd1c6f3df63e4a0f8b8329c79b487a Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 15 Aug 2024 11:59:16 +0300 Subject: [PATCH 04/23] refactor: small optimization --- utils/apply-round-up-gas-limit.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/utils/apply-round-up-gas-limit.ts b/utils/apply-round-up-gas-limit.ts index f8dc52ad3..d578ba994 100644 --- a/utils/apply-round-up-gas-limit.ts +++ b/utils/apply-round-up-gas-limit.ts @@ -3,7 +3,6 @@ import { BigNumber } from 'ethers'; const bn1000 = BigNumber.from(1000); const bn999 = BigNumber.from(999); -export const applyRoundUpGasLimit = (number: BigNumber): BigNumber => { - // 94567 -> 94 -> 94000 -> 94999 - return number.div(bn1000).mul(bn1000).add(bn999); -}; +// 94567 -> 94 -> 94000 -> 94999 +export const applyRoundUpGasLimit = (number: BigNumber): BigNumber => + number.div(bn1000).mul(bn1000).add(bn999); From ff44324894161a3daf6910548dccd68b9c2571b3 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 15 Aug 2024 11:59:40 +0300 Subject: [PATCH 05/23] chore: comments --- utils/apply-round-up-gas-limit.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/apply-round-up-gas-limit.ts b/utils/apply-round-up-gas-limit.ts index d578ba994..74d05d234 100644 --- a/utils/apply-round-up-gas-limit.ts +++ b/utils/apply-round-up-gas-limit.ts @@ -3,6 +3,6 @@ import { BigNumber } from 'ethers'; const bn1000 = BigNumber.from(1000); const bn999 = BigNumber.from(999); -// 94567 -> 94 -> 94000 -> 94999 export const applyRoundUpGasLimit = (number: BigNumber): BigNumber => + // 94567 -> 94 -> 94000 -> 94999 number.div(bn1000).mul(bn1000).add(bn999); From cb95171c4d24526c11fb7af02d2b3c0f2d41f089 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 15 Aug 2024 14:31:49 +0300 Subject: [PATCH 06/23] feat: revert moduleResolution to node --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 5a7ebf58b..e27e264f0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "nodenext", + "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", From d7d66b90e5c7d3d0f9dc9860fc30c3d4a82fae88 Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Mon, 19 Aug 2024 14:10:59 +0700 Subject: [PATCH 07/23] chore: comment --- pages/api/ldo-stats.ts | 1 + pages/api/lido-stats.ts | 1 + pages/api/lidostats.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/pages/api/ldo-stats.ts b/pages/api/ldo-stats.ts index d3a86b023..b214aa172 100644 --- a/pages/api/ldo-stats.ts +++ b/pages/api/ldo-stats.ts @@ -1,6 +1,7 @@ import { wrapRequest as wrapNextRequest } from '@lidofinance/next-api-wrapper'; import { httpMethodGuard, HttpMethod, cors, gone } from 'utilsApi'; +// TODO: delete after all other endpoints are deprecated on 9th september 2024 export default wrapNextRequest([ httpMethodGuard([HttpMethod.GET]), cors({ origin: ['*'], methods: [HttpMethod.GET] }), diff --git a/pages/api/lido-stats.ts b/pages/api/lido-stats.ts index e1d18a4ca..5344b09d0 100644 --- a/pages/api/lido-stats.ts +++ b/pages/api/lido-stats.ts @@ -2,6 +2,7 @@ import { wrapRequest as wrapNextRequest } from '@lidofinance/next-api-wrapper'; import { httpMethodGuard, HttpMethod, cors, gone } from 'utilsApi'; +// TODO: delete after all other endpoints are deprecated on 9th september 24 export default wrapNextRequest([ httpMethodGuard([HttpMethod.GET]), cors({ origin: ['*'], methods: [HttpMethod.GET] }), diff --git a/pages/api/lidostats.ts b/pages/api/lidostats.ts index e1d18a4ca..b71f23a6f 100644 --- a/pages/api/lidostats.ts +++ b/pages/api/lidostats.ts @@ -2,6 +2,7 @@ import { wrapRequest as wrapNextRequest } from '@lidofinance/next-api-wrapper'; import { httpMethodGuard, HttpMethod, cors, gone } from 'utilsApi'; +// TODO: delete after all other endpoints are deprecated on 9th september 2024 export default wrapNextRequest([ httpMethodGuard([HttpMethod.GET]), cors({ origin: ['*'], methods: [HttpMethod.GET] }), From 5721885f45142bd2461e009561158375c69b3df7 Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Mon, 19 Aug 2024 14:55:48 +0700 Subject: [PATCH 08/23] chore: remove old example envs --- .env.example | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/.env.example b/.env.example index 7377b198e..48520aad5 100644 --- a/.env.example +++ b/.env.example @@ -21,32 +21,18 @@ SUPPORTED_CHAINS=1,17000,11155111 # this chain uses when a wallet is not connected DEFAULT_CHAIN=1 -# api key for ethplorer for token data -ETHPLORER_API_KEY=freekey # comma-separated trusted hosts for Content Security Policy # e.g. http://localhost:PORT for local development CSP_TRUSTED_HOSTS=https://*.lido.fi - # put "true" enable report only mode for CSP CSP_REPORT_ONLY=true - # api endpoint for reporting csp violations CSP_REPORT_URI=https://stake.lido.fi/api/csp-report -# Subgraph endpoint -SUBGRAPH_MAINNET=https://gateway-arbitrum.network.thegraph.com/api/[api-key]/subgraphs/id/Sxx812XgeKyzQPaBpR5YZWmGV5fZuBaPdh7DFhzSwiQ -SUBGRAPH_HOLESKY= -SUBGRAPH_SEPOLIA= - -SUBGRAPH_REQUEST_TIMEOUT=5000 - # allow some state overrides from browser console for QA ENABLE_QA_HELPERS=false -# 1inch API token to power /api/oneinch-rate -ONE_INCH_API_KEY= - REWARDS_BACKEND=http://127.0.0.1:4000 # rate limit From 683474fd81e6916c75eb192f56ba25e3c80ba60e Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 19 Aug 2024 18:06:52 +0700 Subject: [PATCH 09/23] feat: dvv banner --- assets/dvv-banner/dvv-banner-lido-logo.svg | 14 ++++ .../dvv-banner/dvv-banner-partners-loogo.svg | 72 +++++++++++++++++++ .../hooks/use-tx-modal-stages-stake.tsx | 16 +++++ features/stake/stake-form/stake-form.tsx | 4 +- .../hooks/use-tx-modal-stages-unwrap.tsx | 2 + .../wrap/hooks/use-tx-modal-stages-wrap.tsx | 2 + shared/banners/dvv-banner/dvv-banner.tsx | 71 ++++++++++++++++++ shared/banners/dvv-banner/index.ts | 1 + shared/banners/dvv-banner/styles.ts | 66 +++++++++++++++++ .../banners/shared-banner-partials/index.ts | 1 + .../shared-banner-partials.ts | 22 ++++++ shared/banners/vaults-banner-info/styles.ts | 15 ++-- .../vaults-banner-info/vaults-banner-info.tsx | 29 +++++--- ...-stage-operation-succeed-balance-shown.tsx | 5 +- 14 files changed, 298 insertions(+), 22 deletions(-) create mode 100644 assets/dvv-banner/dvv-banner-lido-logo.svg create mode 100644 assets/dvv-banner/dvv-banner-partners-loogo.svg create mode 100644 shared/banners/dvv-banner/dvv-banner.tsx create mode 100644 shared/banners/dvv-banner/index.ts create mode 100644 shared/banners/dvv-banner/styles.ts create mode 100644 shared/banners/shared-banner-partials/index.ts create mode 100644 shared/banners/shared-banner-partials/shared-banner-partials.ts diff --git a/assets/dvv-banner/dvv-banner-lido-logo.svg b/assets/dvv-banner/dvv-banner-lido-logo.svg new file mode 100644 index 000000000..beaf454fe --- /dev/null +++ b/assets/dvv-banner/dvv-banner-lido-logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/dvv-banner/dvv-banner-partners-loogo.svg b/assets/dvv-banner/dvv-banner-partners-loogo.svg new file mode 100644 index 000000000..dbcd4e875 --- /dev/null +++ b/assets/dvv-banner/dvv-banner-partners-loogo.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx b/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx index 270430088..44f00cb8e 100644 --- a/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx +++ b/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx @@ -4,11 +4,16 @@ import { } from 'shared/transaction-modal/hooks/use-transaction-modal-stage'; import { getGeneralTransactionModalStages } from 'shared/transaction-modal/hooks/get-general-transaction-modal-stages'; +import { Button, Link } from '@lidofinance/lido-ui'; +import { VaultsBannerInfo } from 'shared/banners/vaults-banner-info'; import { TxStageSignOperationAmount } from 'shared/transaction-modal/tx-stages-composed/tx-stage-amount-operation'; import { TxStageOperationSucceedBalanceShown } from 'shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown'; import type { BigNumber } from 'ethers'; +const LINK_EXPLORE_STRATEGIES = + 'https://lido.fi/?pk_vid=6c467e14095d5ea11723712888b1fe5f#defi-strategies'; + const STAGE_OPERATION_ARGS = { token: 'ETH', willReceiveToken: 'stETH', @@ -45,6 +50,17 @@ const getTxModalStagesStake = (transitStage: TransactionModalTransitStage) => ({ balance={balance} balanceToken={'stETH'} operationText={'Staking'} + footer={ + <> + +
+ + + + + } />, { isClosableOnLedger: true, diff --git a/features/stake/stake-form/stake-form.tsx b/features/stake/stake-form/stake-form.tsx index 18330f4e8..c83eecaff 100644 --- a/features/stake/stake-form/stake-form.tsx +++ b/features/stake/stake-form/stake-form.tsx @@ -8,7 +8,7 @@ import { StakeSubmitButton } from './controls/stake-submit-button'; import { StakeFormInfo } from './stake-form-info'; import { SwapDiscountBanner } from '../swap-discount-banner'; import { StakeBlock, FormControllerStyled } from './styles'; -import { VaultsBannerInfo } from 'shared/banners/vaults-banner-info'; +import { DVVBanner } from 'shared/banners/dvv-banner'; export const StakeForm: FC = memo(() => { return ( @@ -19,7 +19,7 @@ export const StakeForm: FC = memo(() => { - + diff --git a/features/wsteth/unwrap/hooks/use-tx-modal-stages-unwrap.tsx b/features/wsteth/unwrap/hooks/use-tx-modal-stages-unwrap.tsx index 3d56a8dc4..570585e29 100644 --- a/features/wsteth/unwrap/hooks/use-tx-modal-stages-unwrap.tsx +++ b/features/wsteth/unwrap/hooks/use-tx-modal-stages-unwrap.tsx @@ -4,6 +4,7 @@ import { } from 'shared/transaction-modal/hooks/use-transaction-modal-stage'; import { getGeneralTransactionModalStages } from 'shared/transaction-modal/hooks/get-general-transaction-modal-stages'; +import { VaultsBannerStrategies } from 'shared/banners/vaults-banner-strategies'; import { TxStageSignOperationAmount } from 'shared/transaction-modal/tx-stages-composed/tx-stage-amount-operation'; import { TxStageOperationSucceedBalanceShown } from 'shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown'; @@ -47,6 +48,7 @@ const getTxModalStagesUnwrap = ( balance={balance} balanceToken={STAGE_OPERATION_ARGS.willReceiveToken} operationText={'Unwrapping'} + footer={} />, { isClosableOnLedger: true, diff --git a/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx b/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx index b01d7698b..c942d33c8 100644 --- a/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx +++ b/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx @@ -4,6 +4,7 @@ import { } from 'shared/transaction-modal/hooks/use-transaction-modal-stage'; import { getGeneralTransactionModalStages } from 'shared/transaction-modal/hooks/get-general-transaction-modal-stages'; +import { VaultsBannerStrategies } from 'shared/banners/vaults-banner-strategies'; import { TxStageSignOperationAmount } from 'shared/transaction-modal/tx-stages-composed/tx-stage-amount-operation'; import { TxStageOperationSucceedBalanceShown } from 'shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown'; @@ -82,6 +83,7 @@ const getTxModalStagesWrap = (transitStage: TransactionModalTransitStage) => ({ balance={balance} balanceToken={'wstETH'} operationText={'Wrapping'} + footer={} />, { isClosableOnLedger: true, diff --git a/shared/banners/dvv-banner/dvv-banner.tsx b/shared/banners/dvv-banner/dvv-banner.tsx new file mode 100644 index 000000000..0be41bcd2 --- /dev/null +++ b/shared/banners/dvv-banner/dvv-banner.tsx @@ -0,0 +1,71 @@ +import { BannerTitleText } from '../shared-banner-partials'; +import { Button, Link } from '@lidofinance/lido-ui'; +import { + Wrap, + Description, + Partners, + PartnerItem, + PartnerImage, + PartnerText, + PartnerSeparator, + Footer, + FooterText, + FooterAction, +} from './styles'; + +import { ReactComponent as IconLidoLogo } from 'assets/dvv-banner/dvv-banner-lido-logo.svg'; +import { ReactComponent as IconPartnersLogo } from 'assets/dvv-banner/dvv-banner-partners-loogo.svg'; + +const LINK_DVV_VAULT = + 'https://blog.lido.fi/decentralized-validator-vault-mellow-obol-ssv/'; +const LINK_PROCEED_BUTTON = + 'https://app.mellow.finance/vaults/ethereum-dvsteth'; + +export const DVVBanner = () => { + return ( + + New way to support decentralization + + + You can stake ETH in the DVV vault to + get stETH rewards, gain points through Obol, SSV, and Mellow, and help + to decentralize the Lido Protocol. + + + + + + + + + stETH APR + + + + + + + + + + Obol + SSV + Mellow Points + + + + +
+ + Not financial advice. Info and APR are illustrative, actual rewards + may vary. Vaults use carries risk. By proceeding, you'll be + redirected to a third-party site. + + + + + + +
+ + ); +}; diff --git a/shared/banners/dvv-banner/index.ts b/shared/banners/dvv-banner/index.ts new file mode 100644 index 000000000..e85526fe9 --- /dev/null +++ b/shared/banners/dvv-banner/index.ts @@ -0,0 +1 @@ +export * from './dvv-banner'; diff --git a/shared/banners/dvv-banner/styles.ts b/shared/banners/dvv-banner/styles.ts new file mode 100644 index 000000000..b9dd05823 --- /dev/null +++ b/shared/banners/dvv-banner/styles.ts @@ -0,0 +1,66 @@ +import styled from 'styled-components'; +import { BannerWrap } from '../shared-banner-partials'; + +export const Wrap = styled(BannerWrap)` + background: radial-gradient(25% 100% at 60% 10%, #ecf2ff 0%, #ebedff 100%); + color: var(--lido-color-text); +`; + +export const Description = styled.div` + margin-top: 5px; + margin-bottom: 10px; + font-size: 14px; + font-weight: 400; + line-height: 24px; +`; + +export const Partners = styled.div` + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 10px; +`; + +export const PartnerItem = styled.div` + display: flex; + align-items: center; + gap: 6px; + + @media (max-width: 520px) { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + } +`; + +export const PartnerImage = styled.div` + svg { + display: block; + } +`; + +export const PartnerText = styled.div``; + +export const PartnerSeparator = styled.div` + font-weight: 700; +`; + +export const Footer = styled.div` + display: flex; + align-items: flex-end; + gap: 10px; + + ${({ theme }) => theme.mediaQueries.md} { + flex-direction: column; + } +`; + +export const FooterText = styled.div` + color: var(--lido-color-textSecondary); +`; + +export const FooterAction = styled.div` + ${({ theme }) => theme.mediaQueries.md} { + width: 100%; + } +`; diff --git a/shared/banners/shared-banner-partials/index.ts b/shared/banners/shared-banner-partials/index.ts new file mode 100644 index 000000000..0e906c3fd --- /dev/null +++ b/shared/banners/shared-banner-partials/index.ts @@ -0,0 +1 @@ +export * from './shared-banner-partials'; diff --git a/shared/banners/shared-banner-partials/shared-banner-partials.ts b/shared/banners/shared-banner-partials/shared-banner-partials.ts new file mode 100644 index 000000000..60938450d --- /dev/null +++ b/shared/banners/shared-banner-partials/shared-banner-partials.ts @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +export const BannerWrap = styled.div` + position: relative; + text-align: left; + padding: 16px; + border-radius: 16px; + background-color: ${({ theme }) => + theme.name === 'dark' ? '#28282f' : '#f2f3fc'}; +`; + +export const BannerTitleText = styled.div` + font-size: 20px; + line-height: 28px; + font-weight: 700; + color: var(--lido-color-text); + + ${({ theme }) => theme.mediaQueries.md} { + font-size: 16px; + line-height: 24px; + } +`; diff --git a/shared/banners/vaults-banner-info/styles.ts b/shared/banners/vaults-banner-info/styles.ts index baff3cffc..0121913f9 100644 --- a/shared/banners/vaults-banner-info/styles.ts +++ b/shared/banners/vaults-banner-info/styles.ts @@ -1,17 +1,12 @@ import styled from 'styled-components'; -export const Wrap = styled.div` - position: relative; - padding: 16px; - border-radius: 16px; - background-color: ${({ theme }) => - theme.name === 'dark' ? '#28282f' : '#f2f3fc'}; -`; - +type TitleProps = { + isCompact?: boolean; +}; export const Title = styled.div` margin-bottom: 8px; - font-size: 20px; - line-height: 20px; + font-size: ${({ isCompact }: TitleProps) => (isCompact ? '16px' : '20px')}; + line-height: 1; font-weight: 700; color: var(--lido-color-text); `; diff --git a/shared/banners/vaults-banner-info/vaults-banner-info.tsx b/shared/banners/vaults-banner-info/vaults-banner-info.tsx index 52b7763d1..71a1dd554 100644 --- a/shared/banners/vaults-banner-info/vaults-banner-info.tsx +++ b/shared/banners/vaults-banner-info/vaults-banner-info.tsx @@ -15,18 +15,29 @@ import { config } from 'config'; import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; import { BannerLinkButton } from '../banner-link-button'; -import { Wrap, Title, Description, Footer, Logos } from './styles'; +import { BannerWrap } from '../shared-banner-partials'; +import { Title, Description, Footer, Logos } from './styles'; const LINK_LEARN_MORE = `${config.rootOrigin}/#defi-strategies`; const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.vaultsBannerLearnMore); -export const VaultsBannerInfo = () => { +type VaultsBannerInfoProps = { + isTitleCompact?: boolean; + showLearnMoreButton?: boolean; +}; + +export const VaultsBannerInfo = ({ + isTitleCompact, + showLearnMoreButton = true, +}: VaultsBannerInfoProps) => { const { themeName } = useThemeToggle(); return ( - - Explore and participate in DeFi strategies + + + Explore and participate in DeFi strategies + Use stETH to unlock rewards through a set of carefully curated vaults @@ -41,10 +52,12 @@ export const VaultsBannerInfo = () => { {themeName === 'dark' ? : } {themeName === 'dark' ? : } - - Learn more - + {showLearnMoreButton && ( + + Learn more + + )} - + ); }; diff --git a/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx b/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx index 5106ccd5b..0f03692dd 100644 --- a/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx +++ b/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { useTokenAddress } from '@lido-sdk/react'; import { TOKENS } from '@lido-sdk/constants'; import { InlineLoader } from '@lidofinance/lido-ui'; -import { VaultsBannerStrategies } from 'shared/banners/vaults-banner-strategies'; import { TxAmount } from '../tx-stages-parts/tx-amount'; import { SuccessText } from '../tx-stages-parts/success-text'; import { TxStageSuccess } from '../tx-stages-basic'; @@ -28,6 +27,7 @@ type TxStageOperationSucceedBalanceShownProps = { balanceToken: string; operationText: string; txHash?: string; + footer?: React.ReactNode; }; export const TxStageOperationSucceedBalanceShown = ({ @@ -35,6 +35,7 @@ export const TxStageOperationSucceedBalanceShown = ({ balanceToken, operationText, txHash, + footer, }: TxStageOperationSucceedBalanceShownProps) => { const stethAddress = useTokenAddress(TOKENS.STETH); const wstethAddress = useTokenAddress(TOKENS.WSTETH); @@ -64,7 +65,7 @@ export const TxStageOperationSucceedBalanceShown = ({ } showEtherscan={false} - footer={} + footer={footer} /> ); }; From c6837f945deb35d3931d0901b275f4fd8e95abac Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 20 Aug 2024 10:00:42 +0300 Subject: [PATCH 10/23] refactor: rewards stats under wallet --- features/rewards/components/stats/Item.tsx | 17 ---- features/rewards/components/stats/Stat.tsx | 20 ---- features/rewards/components/stats/Stats.tsx | 96 ------------------- features/rewards/components/stats/Title.tsx | 21 ---- .../components/stats/average-apr-block.tsx | 39 ++++++++ .../components/stats/components/item.tsx | 51 ++++++++++ .../components/stats/components/styles.tsx | 59 ++++++++++++ features/rewards/components/stats/index.ts | 5 +- features/rewards/components/stats/stats.tsx | 17 ++++ .../components/stats/steth-balance-block.tsx | 39 ++++++++ .../components/stats/steth-price-block.tsx | 43 +++++++++ .../components/stats/steth-rewarded-block.tsx | 42 ++++++++ features/rewards/features/top-card/wallet.tsx | 61 +----------- 13 files changed, 295 insertions(+), 215 deletions(-) delete mode 100644 features/rewards/components/stats/Item.tsx delete mode 100644 features/rewards/components/stats/Stat.tsx delete mode 100644 features/rewards/components/stats/Stats.tsx delete mode 100644 features/rewards/components/stats/Title.tsx create mode 100644 features/rewards/components/stats/average-apr-block.tsx create mode 100644 features/rewards/components/stats/components/item.tsx create mode 100644 features/rewards/components/stats/components/styles.tsx create mode 100644 features/rewards/components/stats/stats.tsx create mode 100644 features/rewards/components/stats/steth-balance-block.tsx create mode 100644 features/rewards/components/stats/steth-price-block.tsx create mode 100644 features/rewards/components/stats/steth-rewarded-block.tsx diff --git a/features/rewards/components/stats/Item.tsx b/features/rewards/components/stats/Item.tsx deleted file mode 100644 index 057337509..000000000 --- a/features/rewards/components/stats/Item.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Box } from '@lidofinance/lido-ui'; - -type BoxProps = React.ComponentProps; - -// TODO: refactoring to style files -export const Item = ({ children, ...rest }: BoxProps) => ( - - {children} - -); diff --git a/features/rewards/components/stats/Stat.tsx b/features/rewards/components/stats/Stat.tsx deleted file mode 100644 index f290a1376..000000000 --- a/features/rewards/components/stats/Stat.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Box } from '@lidofinance/lido-ui'; - -type BoxProps = React.ComponentProps; - -// TODO: refactoring to style files -export const Stat = ({ children, ...rest }: BoxProps) => ( - - {children} - -); diff --git a/features/rewards/components/stats/Stats.tsx b/features/rewards/components/stats/Stats.tsx deleted file mode 100644 index ca0a18a01..000000000 --- a/features/rewards/components/stats/Stats.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { Box, Link } from '@lidofinance/lido-ui'; - -import { config } from 'config'; -import { useRewardsHistory } from 'features/rewards/hooks'; -import NumberFormat from 'features/rewards/components/NumberFormat'; -import { useStethEthRate } from 'features/rewards/hooks/use-steth-eth-rate'; -import { useDappStatus } from 'shared/hooks/use-dapp-status'; - -import { Item } from './Item'; -import { Stat } from './Stat'; -import { Title } from './Title'; - -// TODO: refactoring to style files -export const Stats: React.FC = () => { - const { - currencyObject: currency, - data, - initialLoading: pending, - } = useRewardsHistory(); - const stEthEth = useStethEthRate(); - const { isDappActive } = useDappStatus(); - - return ( - <> - - stETH rewarded - - - - stETH - - - - <Box display="inline-block" pr={'3px'}> - {currency.symbol} - </Box> - <NumberFormat - number={isDappActive ? data?.totals.currencyRewards : undefined} - currency - pending={pending} - /> - - - - Average APR - - {parseFloat(data?.averageApr || '0') ? ( - - ) : ( - '-' - )} - - % - - - - <Link href={`${config.rootOrigin}/ethereum#apr`}> - <Box data-testid="moreInfo">More info</Box> - </Link> - - - - stETH price - - - {currency.symbol} - - - - - <NumberFormat - number={isDappActive ? stEthEth?.toString() : undefined} - StEthEth - pending={pending} - /> - <Box display="inline-block" pl={'3px'}> - ETH - </Box> - - - - ); -}; diff --git a/features/rewards/components/stats/Title.tsx b/features/rewards/components/stats/Title.tsx deleted file mode 100644 index 8e1269c24..000000000 --- a/features/rewards/components/stats/Title.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Box } from '@lidofinance/lido-ui'; - -type BoxProps = React.ComponentProps; -type TitleProps = BoxProps & { - hideMobile?: boolean; -}; - -// TODO: refactoring to style files -export const Title = ({ children, hideMobile, ...rest }: TitleProps) => ( - - {children} - -); diff --git a/features/rewards/components/stats/average-apr-block.tsx b/features/rewards/components/stats/average-apr-block.tsx new file mode 100644 index 000000000..d325775d5 --- /dev/null +++ b/features/rewards/components/stats/average-apr-block.tsx @@ -0,0 +1,39 @@ +import { FC } from 'react'; +import { Box, Link } from '@lidofinance/lido-ui'; + +import { config } from 'config'; + +import NumberFormat from 'features/rewards/components/NumberFormat'; +import { useRewardsHistory } from 'features/rewards/hooks'; + +import { Item } from './components/item'; + +export const AverageAprBlock: FC = () => { + const { data, initialLoading: loading } = useRewardsHistory(); + + return ( + + {parseFloat(data?.averageApr || '0') ? ( + + ) : ( + '-' + )} + + % + + + } + valueDataTestId="averageApr" + underValue={ + + More info + + } + /> + ); +}; diff --git a/features/rewards/components/stats/components/item.tsx b/features/rewards/components/stats/components/item.tsx new file mode 100644 index 000000000..8a2b79809 --- /dev/null +++ b/features/rewards/components/stats/components/item.tsx @@ -0,0 +1,51 @@ +import { FC, ReactNode } from 'react'; + +import { + Block, + Title, + Value, + ValueGreen, + UnderValue, + InlineLoader, +} from './styles'; + +type ItemProps = { + dataTestId: string; + title: string; + + value: ReactNode | ReactNode[]; + valueDataTestId: string; + valueGreenText?: boolean | undefined; + + underValue: ReactNode | ReactNode[]; + underValueDataTestId?: string | undefined; + + loading: boolean; +}; + +export const Item: FC = (props) => { + const { + dataTestId, + title, + value, + valueDataTestId, + valueGreenText, + underValue, + underValueDataTestId, + loading, + } = props; + + const _Value = valueGreenText ? ValueGreen : Value; + + return ( + + {title} + <_Value data-testid={valueDataTestId}> + {!loading ? value : } + + + {!loading ? underValue : } + + + ); +}; diff --git a/features/rewards/components/stats/components/styles.tsx b/features/rewards/components/stats/components/styles.tsx new file mode 100644 index 000000000..bbfbf71f2 --- /dev/null +++ b/features/rewards/components/stats/components/styles.tsx @@ -0,0 +1,59 @@ +import styled from 'styled-components'; +import { Box, InlineLoader as InlineLoaderLidoUI } from '@lidofinance/lido-ui'; + +export const Block = styled(Box)` + flex-grow: 1; + + ${({ theme }) => theme.mediaQueries.md} { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 6px; + } +`; + +export const Title = styled(Box)` + display: flex; + height: 20px; + line-height: 20px; + margin-bottom: 6px; + + font-size: 12px; + font-style: normal; + font-weight: normal; +`; + +export const Value = styled(Box)` + display: flex; + height: 20px; + line-height: 20px; + margin-bottom: 6px; + + color: var(--lido-color-text); + font-style: normal; + font-weight: 600; + font-size: 16px; + + ${({ theme }) => theme.mediaQueries.md} { + font-weight: unset; + font-size: 12px; + } +`; + +export const ValueGreen = styled(Value)` + color: #61b75f; +`; + +export const UnderValue = styled(Title)` + ${({ theme }) => theme.mediaQueries.md} { + display: none; + } +`; + +export const InlineLoader = styled(InlineLoaderLidoUI)` + width: 114px; + + ${({ theme }) => theme.mediaQueries.lg} { + width: 60px; + } +`; diff --git a/features/rewards/components/stats/index.ts b/features/rewards/components/stats/index.ts index 9f5965efe..c7e87e1f9 100644 --- a/features/rewards/components/stats/index.ts +++ b/features/rewards/components/stats/index.ts @@ -1,4 +1 @@ -export * from './Item'; -export * from './Stat'; -export * from './Title'; -export * from './Stats'; +export * from './stats'; diff --git a/features/rewards/components/stats/stats.tsx b/features/rewards/components/stats/stats.tsx new file mode 100644 index 000000000..ca31a059e --- /dev/null +++ b/features/rewards/components/stats/stats.tsx @@ -0,0 +1,17 @@ +import { FC } from 'react'; + +import { StEthBalanceBlock } from './steth-balance-block'; +import { StEthRewardedBlock } from './steth-rewarded-block'; +import { AverageAprBlock } from './average-apr-block'; +import { StEthPriceBlock } from './steth-price-block'; + +export const Stats: FC = () => { + return ( + <> + + + + + + ); +}; diff --git a/features/rewards/components/stats/steth-balance-block.tsx b/features/rewards/components/stats/steth-balance-block.tsx new file mode 100644 index 000000000..cf1e6299e --- /dev/null +++ b/features/rewards/components/stats/steth-balance-block.tsx @@ -0,0 +1,39 @@ +import { FC } from 'react'; +import { Box } from '@lidofinance/lido-ui'; + +import NumberFormat from 'features/rewards/components/NumberFormat'; +import { useRewardsHistory } from 'features/rewards/hooks'; +import { useRewardsBalanceData } from 'features/rewards/hooks/use-rewards-balance-data'; + +import { Item } from './components/item'; + +export const StEthBalanceBlock: FC = () => { + const { data: balanceData } = useRewardsBalanceData(); + const { currencyObject: currency, loading } = useRewardsHistory(); + + return ( + + + + stETH + + + } + valueDataTestId="stEthBalance" + underValue={ + <> + + {currency.symbol} + + + + } + underValueDataTestId="stEthBalanceIn$" + /> + ); +}; diff --git a/features/rewards/components/stats/steth-price-block.tsx b/features/rewards/components/stats/steth-price-block.tsx new file mode 100644 index 000000000..a51bd8487 --- /dev/null +++ b/features/rewards/components/stats/steth-price-block.tsx @@ -0,0 +1,43 @@ +import { FC } from 'react'; +import { Box } from '@lidofinance/lido-ui'; + +import NumberFormat from 'features/rewards/components/NumberFormat'; +import { useRewardsHistory } from 'features/rewards/hooks'; +import { useStethEthRate } from 'features/rewards/hooks/use-steth-eth-rate'; + +import { Item } from './components/item'; + +export const StEthPriceBlock: FC = () => { + const { + currencyObject: currency, + data, + initialLoading: loading, + } = useRewardsHistory(); + const stEthEth = useStethEthRate(); + + return ( + + + {currency.symbol} + + + + } + valueDataTestId="stEthPrice" + underValue={ + <> + + + ETH + + + } + underValueDataTestId="ethRate" + /> + ); +}; diff --git a/features/rewards/components/stats/steth-rewarded-block.tsx b/features/rewards/components/stats/steth-rewarded-block.tsx new file mode 100644 index 000000000..a00c03296 --- /dev/null +++ b/features/rewards/components/stats/steth-rewarded-block.tsx @@ -0,0 +1,42 @@ +import { FC } from 'react'; +import { Box } from '@lidofinance/lido-ui'; + +import { useRewardsHistory } from 'features/rewards/hooks'; +import NumberFormat from 'features/rewards/components/NumberFormat'; + +import { Item } from './components/item'; + +export const StEthRewardedBlock: FC = () => { + const { + currencyObject: currency, + data, + initialLoading: loading, + } = useRewardsHistory(); + + return ( + + + + stETH + + + } + valueDataTestId="stEthRewardedIn$" + valueGreenText={true} + underValue={ + <> + + {currency.symbol} + + + + } + underValueDataTestId="stEthBalanceIn$" + /> + ); +}; diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx index 061a6ac3b..1e2e131ea 100644 --- a/features/rewards/features/top-card/wallet.tsx +++ b/features/rewards/features/top-card/wallet.tsx @@ -1,71 +1,18 @@ import { FC } from 'react'; -import { Box, ThemeProvider, themeDark } from '@lidofinance/lido-ui'; - -import NumberFormat from 'features/rewards/components/NumberFormat'; -import { Title } from 'features/rewards/components/stats/Title'; -import { useRewardsHistory } from 'features/rewards/hooks'; -import { useRewardsBalanceData } from 'features/rewards/hooks/use-rewards-balance-data'; -import { FlexCenter } from 'features/stake/stake-form/wallet/styles'; -import { CardBalance } from 'shared/wallet'; -import { useWalletModal } from 'shared/wallet/wallet-modal/use-wallet-modal'; +import { ThemeProvider, themeDark } from '@lidofinance/lido-ui'; import { WalletStyle, WalletContentStyle, - WalletContentAddressBadgeStyle, - WalletContentRowStyle, + // WalletContentAddressBadgeStyle, + // WalletContentRowStyle, } from './styles'; export const Wallet: FC = () => { - const { data: balanceData } = useRewardsBalanceData(); - const { currencyObject: currency, address, loading } = useRewardsHistory(); - const { openModal } = useWalletModal(); - return ( - - - - stETH balance - - } - loading={loading} - value={ -
- - - stETH - -
- } - > - - <Box display="inline-block" pr={'3px'}> - {currency.symbol} - </Box> - <NumberFormat - number={balanceData?.stEthCurrencyBalance} - currency - pending={loading} - /> - - - - openModal({})} - /> - - + 123 ); From d4a3714d1e010a9dd06c583262f237fa712194ad Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Tue, 20 Aug 2024 15:59:10 +0700 Subject: [PATCH 11/23] feat: obol banner dark theme and matomo events --- .../dvv-banner/dvv-banner-lido-logo-dark.svg | 1 + .../dvv-banner/dvv-banner-lido-logo-light.svg | 1 + assets/dvv-banner/dvv-banner-lido-logo.svg | 14 ---- .../dvv-banner-partners-logo-dark.svg | 1 + .../dvv-banner-partners-logo-light.svg | 1 + .../dvv-banner/dvv-banner-partners-loogo.svg | 72 ------------------- consts/matomo-click-events.ts | 18 +++++ .../hooks/use-tx-modal-stages-stake.tsx | 11 ++- shared/banners/dvv-banner/dvv-banner.tsx | 34 ++++++--- shared/banners/dvv-banner/styles.ts | 7 +- 10 files changed, 63 insertions(+), 97 deletions(-) create mode 100644 assets/dvv-banner/dvv-banner-lido-logo-dark.svg create mode 100644 assets/dvv-banner/dvv-banner-lido-logo-light.svg delete mode 100644 assets/dvv-banner/dvv-banner-lido-logo.svg create mode 100644 assets/dvv-banner/dvv-banner-partners-logo-dark.svg create mode 100644 assets/dvv-banner/dvv-banner-partners-logo-light.svg delete mode 100644 assets/dvv-banner/dvv-banner-partners-loogo.svg diff --git a/assets/dvv-banner/dvv-banner-lido-logo-dark.svg b/assets/dvv-banner/dvv-banner-lido-logo-dark.svg new file mode 100644 index 000000000..213010aec --- /dev/null +++ b/assets/dvv-banner/dvv-banner-lido-logo-dark.svg @@ -0,0 +1 @@ + diff --git a/assets/dvv-banner/dvv-banner-lido-logo-light.svg b/assets/dvv-banner/dvv-banner-lido-logo-light.svg new file mode 100644 index 000000000..7b8a0392a --- /dev/null +++ b/assets/dvv-banner/dvv-banner-lido-logo-light.svg @@ -0,0 +1 @@ + diff --git a/assets/dvv-banner/dvv-banner-lido-logo.svg b/assets/dvv-banner/dvv-banner-lido-logo.svg deleted file mode 100644 index beaf454fe..000000000 --- a/assets/dvv-banner/dvv-banner-lido-logo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/assets/dvv-banner/dvv-banner-partners-logo-dark.svg b/assets/dvv-banner/dvv-banner-partners-logo-dark.svg new file mode 100644 index 000000000..e4c997e01 --- /dev/null +++ b/assets/dvv-banner/dvv-banner-partners-logo-dark.svg @@ -0,0 +1 @@ + diff --git a/assets/dvv-banner/dvv-banner-partners-logo-light.svg b/assets/dvv-banner/dvv-banner-partners-logo-light.svg new file mode 100644 index 000000000..653fcb552 --- /dev/null +++ b/assets/dvv-banner/dvv-banner-partners-logo-light.svg @@ -0,0 +1 @@ + diff --git a/assets/dvv-banner/dvv-banner-partners-loogo.svg b/assets/dvv-banner/dvv-banner-partners-loogo.svg deleted file mode 100644 index dbcd4e875..000000000 --- a/assets/dvv-banner/dvv-banner-partners-loogo.svg +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/consts/matomo-click-events.ts b/consts/matomo-click-events.ts index 2183b84ab..076cb60c3 100644 --- a/consts/matomo-click-events.ts +++ b/consts/matomo-click-events.ts @@ -15,6 +15,9 @@ export const enum MATOMO_CLICK_EVENTS_TYPES { lidoOnLidoMultichainOpportunities = 'lidoOnLidoMultichainOpportunities', vaultsBannerLearnMore = 'vaultsBannerLearnMore', vaultsBannerExploreAll = 'vaultsBannerExploreAll', + obolBannerProceed = 'obolBannerProceed', + obolBannerDVVLink = 'obolBannerDVVLink', + exploreAllStrategiesAfterStake = 'exploreAllStrategiesAfterStake', // FAQ faqSafeWorkWithLidoAudits = 'faqSafeWorkWithLidoAudits', faqLidoEthAprEthLandingPage = 'faqLidoEthAprEthLandingPage', @@ -129,6 +132,21 @@ export const MATOMO_CLICK_EVENTS: Record< 'Push "Explore all strategies"', 'eth_widget_explore_all_strategies', ], + [MATOMO_CLICK_EVENTS_TYPES.obolBannerProceed]: [ + 'Ethereum_Staking_Widget', + 'Push "Proceed" Obol SSV', + 'eth_widget_proceed_obol_ssv', + ], + [MATOMO_CLICK_EVENTS_TYPES.obolBannerDVVLink]: [ + 'Ethereum_Staking_Widget', + 'Push "the DVV Vault" link on Obol SSV banner', + 'eth_widget_the_dvv_vault_link_obol_ssv', + ], + [MATOMO_CLICK_EVENTS_TYPES.exploreAllStrategiesAfterStake]: [ + 'Ethereum_Staking_Widget', + 'Push "Explore all strategies" after staking', + 'eth_widget_explore_all_strategies_after_staking', + ], // FAQ [MATOMO_CLICK_EVENTS_TYPES.faqSafeWorkWithLidoAudits]: [ 'Ethereum_Staking_Widget', diff --git a/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx b/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx index 44f00cb8e..8b7eeafc9 100644 --- a/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx +++ b/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx @@ -10,6 +10,8 @@ import { TxStageSignOperationAmount } from 'shared/transaction-modal/tx-stages-c import { TxStageOperationSucceedBalanceShown } from 'shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown'; import type { BigNumber } from 'ethers'; +import { trackEvent } from '@lidofinance/analytics-matomo'; +import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; const LINK_EXPLORE_STRATEGIES = 'https://lido.fi/?pk_vid=6c467e14095d5ea11723712888b1fe5f#defi-strategies'; @@ -54,7 +56,14 @@ const getTxModalStagesStake = (transitStage: TransactionModalTransitStage) => ({ <>
- + + trackEvent( + ...MATOMO_CLICK_EVENTS.exploreAllStrategiesAfterStake, + ) + } + > diff --git a/shared/banners/dvv-banner/dvv-banner.tsx b/shared/banners/dvv-banner/dvv-banner.tsx index 0be41bcd2..756eb90e0 100644 --- a/shared/banners/dvv-banner/dvv-banner.tsx +++ b/shared/banners/dvv-banner/dvv-banner.tsx @@ -1,5 +1,5 @@ import { BannerTitleText } from '../shared-banner-partials'; -import { Button, Link } from '@lidofinance/lido-ui'; +import { Button, Link, useThemeToggle } from '@lidofinance/lido-ui'; import { Wrap, Description, @@ -13,8 +13,13 @@ import { FooterAction, } from './styles'; -import { ReactComponent as IconLidoLogo } from 'assets/dvv-banner/dvv-banner-lido-logo.svg'; -import { ReactComponent as IconPartnersLogo } from 'assets/dvv-banner/dvv-banner-partners-loogo.svg'; +import { ReactComponent as IconLidoLogoLight } from 'assets/dvv-banner/dvv-banner-lido-logo-light.svg'; +import { ReactComponent as IconPartnersLogoLight } from 'assets/dvv-banner/dvv-banner-partners-logo-light.svg'; +import { ReactComponent as IconLidoLogoDark } from 'assets/dvv-banner/dvv-banner-lido-logo-dark.svg'; +import { ReactComponent as IconPartnersLogoDark } from 'assets/dvv-banner/dvv-banner-partners-logo-dark.svg'; + +import { trackEvent } from '@lidofinance/analytics-matomo'; +import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; const LINK_DVV_VAULT = 'https://blog.lido.fi/decentralized-validator-vault-mellow-obol-ssv/'; @@ -22,20 +27,28 @@ const LINK_PROCEED_BUTTON = 'https://app.mellow.finance/vaults/ethereum-dvsteth'; export const DVVBanner = () => { + const { themeName } = useThemeToggle(); + const isDarkTheme = themeName === 'dark'; return ( New way to support decentralization - You can stake ETH in the DVV vault to - get stETH rewards, gain points through Obol, SSV, and Mellow, and help - to decentralize the Lido Protocol. + You can stake ETH in{' '} + trackEvent(...MATOMO_CLICK_EVENTS.obolBannerDVVLink)} + > + the DVV vault + {' '} + to get stETH rewards, gain points and help to decentralize the Lido + Protocol - + {isDarkTheme ? : } stETH APR @@ -44,7 +57,7 @@ export const DVVBanner = () => { + - + {isDarkTheme ? : } Obol + SSV + Mellow Points @@ -59,7 +72,10 @@ export const DVVBanner = () => { redirected to a third-party site. - + trackEvent(...MATOMO_CLICK_EVENTS.obolBannerProceed)} + > diff --git a/shared/banners/dvv-banner/styles.ts b/shared/banners/dvv-banner/styles.ts index b9dd05823..f1cf0a2d2 100644 --- a/shared/banners/dvv-banner/styles.ts +++ b/shared/banners/dvv-banner/styles.ts @@ -2,7 +2,10 @@ import styled from 'styled-components'; import { BannerWrap } from '../shared-banner-partials'; export const Wrap = styled(BannerWrap)` - background: radial-gradient(25% 100% at 60% 10%, #ecf2ff 0%, #ebedff 100%); + background: ${({ theme }) => + theme.name === 'dark' + ? '#28282F' + : 'radial-gradient(25% 100% at 60% 10%, #ecf2ff 0%, #ebedff 100%)'}; color: var(--lido-color-text); `; @@ -57,6 +60,8 @@ export const Footer = styled.div` export const FooterText = styled.div` color: var(--lido-color-textSecondary); + font-size: 11px; + opacity: ${({ theme }) => (theme.name === 'dark' ? '0.5' : '1')}; `; export const FooterAction = styled.div` From 365ec7926f1975750c944a76c522b578f10db5b8 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 20 Aug 2024 12:30:49 +0300 Subject: [PATCH 12/23] revert: rewards input address --- .../address-input/address-input.tsx | 38 +++++++++++++++++ .../rewards/components/address-input/index.ts | 1 + .../rewards/components/address-input/types.ts | 7 ++++ .../components/stats/steth-rewarded-block.tsx | 2 +- .../features/top-card/connect-wallet.tsx | 11 ----- features/rewards/features/top-card/styles.tsx | 41 +------------------ .../rewards/features/top-card/top-card.tsx | 8 +--- features/rewards/features/top-card/wallet.tsx | 28 +++++++++---- 8 files changed, 71 insertions(+), 65 deletions(-) create mode 100644 features/rewards/components/address-input/address-input.tsx create mode 100644 features/rewards/components/address-input/index.ts create mode 100644 features/rewards/components/address-input/types.ts delete mode 100644 features/rewards/features/top-card/connect-wallet.tsx diff --git a/features/rewards/components/address-input/address-input.tsx b/features/rewards/components/address-input/address-input.tsx new file mode 100644 index 000000000..88bfd0022 --- /dev/null +++ b/features/rewards/components/address-input/address-input.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react'; +import { Input, Loader, Identicon } from '@lidofinance/lido-ui'; +import CopyAddressUrl from 'features/rewards/components/CopyAddressUrl'; +import { isValidAnyAddress } from 'features/rewards/utils'; + +import { AddressInputProps } from './types'; + +export const AddressInput: FC = (props) => { + const { + inputValue, + isAddressResolving, + handleInputChange, + address, + addressError, + } = props; + + return ( + handleInputChange(e.target.value)} + placeholder="Ethereum address" + leftDecorator={ + isAddressResolving ? ( + + ) : address ? ( + + ) : null + } + rightDecorator={address ? : null} + spellCheck="false" + error={ + (inputValue.length > 0 && !isValidAnyAddress(inputValue)) || + addressError + } + /> + ); +}; diff --git a/features/rewards/components/address-input/index.ts b/features/rewards/components/address-input/index.ts new file mode 100644 index 000000000..bca21a4fc --- /dev/null +++ b/features/rewards/components/address-input/index.ts @@ -0,0 +1 @@ +export * from './address-input'; diff --git a/features/rewards/components/address-input/types.ts b/features/rewards/components/address-input/types.ts new file mode 100644 index 000000000..063bc0b23 --- /dev/null +++ b/features/rewards/components/address-input/types.ts @@ -0,0 +1,7 @@ +export type AddressInputProps = { + inputValue: string; + isAddressResolving: boolean; + handleInputChange: (value: string) => void; + address: string; + addressError: string; +}; diff --git a/features/rewards/components/stats/steth-rewarded-block.tsx b/features/rewards/components/stats/steth-rewarded-block.tsx index a00c03296..2c80a66a1 100644 --- a/features/rewards/components/stats/steth-rewarded-block.tsx +++ b/features/rewards/components/stats/steth-rewarded-block.tsx @@ -20,7 +20,7 @@ export const StEthRewardedBlock: FC = () => { title="stETH rewarded" value={ <> - + stETH diff --git a/features/rewards/features/top-card/connect-wallet.tsx b/features/rewards/features/top-card/connect-wallet.tsx deleted file mode 100644 index 93cff8b22..000000000 --- a/features/rewards/features/top-card/connect-wallet.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FC } from 'react'; - -import { ConnectWalletStyle } from './styles'; - -export const ConnectWallet: FC = () => { - return ( - -

Connect your wallet to view your staking rewards

- - ); -}; diff --git a/features/rewards/features/top-card/styles.tsx b/features/rewards/features/top-card/styles.tsx index 7ba12c78e..c4e456033 100644 --- a/features/rewards/features/top-card/styles.tsx +++ b/features/rewards/features/top-card/styles.tsx @@ -1,48 +1,11 @@ -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { WalletCardStyle } from 'shared/wallet/card/styles'; -import { AddressBadge } from 'shared/wallet/components/address-badge/address-badge'; export const WalletStyle = styled(WalletCardStyle)` - background: linear-gradient( - 52.01deg, - #37394a 0%, - #363749 0.01%, - #40504f 100% - ); + background: linear-gradient(61.64deg, #413e58 17.53%, #30363f 100%); padding: 0 0 24px 0; `; export const WalletContentStyle = styled.div` padding: ${({ theme }) => theme.spaceMap.xxl}px; `; - -export const WalletContentRowStyle = styled.div` - display: flex; - flex-wrap: nowrap; - flex-direction: row; - align-items: center; - justify-content: space-between; - - color: var(--lido-color-text); -`; - -export const WalletContentAddressBadgeStyle = styled(AddressBadge)` - background: #00000033; - cursor: pointer; -`; - -export const ConnectWalletStyle = styled(WalletCardStyle)` - padding: 27px 27px 47px 27px; - text-align: center; - - ${({ theme }) => - theme.name === 'dark' - ? css` - color: var(--lido-color-text); - background: linear-gradient(48.34deg, #46464f -5.55%, #3b3b47 100%); - ` - : css` - color: var(--lido-color-secondary); - background: linear-gradient(48.34deg, #d2ddff -5.55%, #e6e6e6 100%); - `} -`; diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index 267522a8f..8db0e8d5d 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -3,14 +3,12 @@ import { FC, useEffect, useState } from 'react'; import { StatsWrapper } from 'features/rewards/components/statsWrapper'; import { Stats } from 'features/rewards/components/stats'; import { useDappStatus } from 'shared/hooks/use-dapp-status'; -import { Fallback } from 'shared/wallet'; import { Wallet } from './wallet'; -import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { const [visible, setVisible] = useState(false); - const { isWalletConnected, isDappActive } = useDappStatus(); + const { isDappActive } = useDappStatus(); // fix flash after reload page useEffect(() => { @@ -19,10 +17,6 @@ export const TopCard: FC = () => { return !visible ? null : ( <> - {!isWalletConnected && } - - {!isDappActive && } - {isDappActive && } diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx index 1e2e131ea..4e46fc283 100644 --- a/features/rewards/features/top-card/wallet.tsx +++ b/features/rewards/features/top-card/wallet.tsx @@ -1,18 +1,32 @@ import { FC } from 'react'; import { ThemeProvider, themeDark } from '@lidofinance/lido-ui'; -import { - WalletStyle, - WalletContentStyle, - // WalletContentAddressBadgeStyle, - // WalletContentRowStyle, -} from './styles'; +import { useRewardsHistory } from 'features/rewards/hooks'; +import { AddressInput } from 'features/rewards/components/address-input'; + +import { WalletContentStyle, WalletStyle } from './styles'; export const Wallet: FC = () => { + const { + address, + addressError, + isAddressResolving, + inputValue, + setInputValue, + } = useRewardsHistory(); + return ( - 123 + + + ); From 62a54eff635dcec51c68bba103bc5fe6c6078f71 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 20 Aug 2024 12:56:39 +0300 Subject: [PATCH 13/23] refactor: texts --- .../rewards/components/errorBlocks/ErrorBlockServer.tsx | 2 +- .../components/rewardsListContent/RewardsListsEmpty.tsx | 4 +++- features/rewards/components/stats/steth-price-block.tsx | 6 +++++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/features/rewards/components/errorBlocks/ErrorBlockServer.tsx b/features/rewards/components/errorBlocks/ErrorBlockServer.tsx index 4fdcba322..633267a66 100644 --- a/features/rewards/components/errorBlocks/ErrorBlockServer.tsx +++ b/features/rewards/components/errorBlocks/ErrorBlockServer.tsx @@ -3,6 +3,6 @@ import { ErrorBlockBase } from './ErrorBlockBase'; export const ErrorBlockServer = () => ( ); diff --git a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx b/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx index 1e8d5b9e7..78baeb4ce 100644 --- a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx +++ b/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx @@ -29,7 +29,9 @@ export const RewardsListsEmpty: FC = () => { <> -

Connect your wallet to view your staking rewards

+

+ Connect your wallet or enter your Ethereum address to see the stats. +

{isWalletConnected ? null : ( + + + } />, { isClosableOnLedger: true, diff --git a/shared/banners/vaults-banner-info/const.ts b/shared/banners/vaults-banner-info/const.ts new file mode 100644 index 000000000..23bf77f87 --- /dev/null +++ b/shared/banners/vaults-banner-info/const.ts @@ -0,0 +1,2 @@ +export const LINK_EXPLORE_STRATEGIES = + 'https://lido.fi/?pk_vid=6c467e14095d5ea11723712888b1fe5f#defi-strategies'; From 09dfbab5fca6c1c0fbed28e83204bdd26aa41cdf Mon Sep 17 00:00:00 2001 From: DiRaiks Date: Tue, 20 Aug 2024 18:57:58 +0300 Subject: [PATCH 23/23] fix: code style. landing link --- .../stake-form/hooks/use-tx-modal-stages-stake.tsx | 2 +- .../wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx | 12 +++++++----- shared/banners/vaults-banner-info/const.ts | 3 +-- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx b/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx index b3c9b18d2..81ed26b40 100644 --- a/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx +++ b/features/stake/stake-form/hooks/use-tx-modal-stages-stake.tsx @@ -12,7 +12,7 @@ import { TxStageOperationSucceedBalanceShown } from 'shared/transaction-modal/tx import type { BigNumber } from 'ethers'; import { trackEvent } from '@lidofinance/analytics-matomo'; import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; -import { LINK_EXPLORE_STRATEGIES } from '../../../../shared/banners/vaults-banner-info/const'; +import { LINK_EXPLORE_STRATEGIES } from 'shared/banners/vaults-banner-info/const'; const STAGE_OPERATION_ARGS = { token: 'ETH', diff --git a/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx b/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx index 7a5156eeb..94517dfd0 100644 --- a/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx +++ b/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx @@ -1,3 +1,6 @@ +import { Button, Link } from '@lidofinance/lido-ui'; +import { trackEvent } from '@lidofinance/analytics-matomo'; + import { TransactionModalTransitStage, useTransactionModalStage, @@ -6,15 +9,14 @@ import { getGeneralTransactionModalStages } from 'shared/transaction-modal/hooks import { TxStageSignOperationAmount } from 'shared/transaction-modal/tx-stages-composed/tx-stage-amount-operation'; import { TxStageOperationSucceedBalanceShown } from 'shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown'; +import { LINK_EXPLORE_STRATEGIES } from 'shared/banners/vaults-banner-info/const'; import { getTokenDisplayName } from 'utils/getTokenDisplayName'; import type { BigNumber } from 'ethers'; import type { TokensWrappable } from 'features/wsteth/shared/types'; -import { VaultsBannerInfo } from '../../../../shared/banners/vaults-banner-info'; -import { Button, Link } from '@lidofinance/lido-ui'; -import { trackEvent } from '@lidofinance/analytics-matomo'; -import { MATOMO_CLICK_EVENTS } from '../../../../consts/matomo-click-events'; -import { LINK_EXPLORE_STRATEGIES } from '../../../../shared/banners/vaults-banner-info/const'; +import { VaultsBannerInfo } from 'shared/banners/vaults-banner-info'; + +import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; const STAGE_APPROVE_ARGS = { willReceiveToken: 'wstETH', diff --git a/shared/banners/vaults-banner-info/const.ts b/shared/banners/vaults-banner-info/const.ts index 23bf77f87..90e7c7247 100644 --- a/shared/banners/vaults-banner-info/const.ts +++ b/shared/banners/vaults-banner-info/const.ts @@ -1,2 +1 @@ -export const LINK_EXPLORE_STRATEGIES = - 'https://lido.fi/?pk_vid=6c467e14095d5ea11723712888b1fe5f#defi-strategies'; +export const LINK_EXPLORE_STRATEGIES = 'https://lido.fi/#defi-strategies';