diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 8a0836ca..519d2bdf 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -6,6 +6,7 @@ import React, { useState } from 'react'; import { useIntl } from 'react-intl'; import { StylingConstants } from '../../modules/styles'; +import { PATH } from '../../modules/env'; import { SearchIcon, SearchInput } from './styled'; @@ -51,7 +52,7 @@ export const Search = () => { var address = await checkUD(search); if (address) router.push({ - pathname: '/', + pathname: PATH.EXPLORER, query: { bridge: chainBridge, type: address ? 'search' : '', @@ -60,7 +61,7 @@ export const Search = () => { }); else router.push({ - pathname: '/', + pathname: PATH.EXPLORER, query: { bridge: chainBridge, type: search ? 'search' : '', diff --git a/src/modules/hooks/useToggleMetanode/index.tsx b/src/modules/hooks/useToggleMetanode/index.tsx index 2f06a0bc..a2832759 100644 --- a/src/modules/hooks/useToggleMetanode/index.tsx +++ b/src/modules/hooks/useToggleMetanode/index.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; +import { stringifyUrl } from 'query-string'; import { Bridge, Mode, Node, useNodesDetailsQuery } from '../../../generated/graphql'; import { ENDPOINT_SKYBRIDGE_EXCHANGE, mode, PATH } from '../../env'; @@ -11,6 +12,7 @@ import { ILiquidityRatio, ILiquidityRatios, IReward, + IRewardV2, listHistory, } from '../../metanodes'; import { useInterval } from '../useInterval'; @@ -21,6 +23,7 @@ export const useToggleMetanode = (path: PATH) => { const [metanodes, setMetanodes] = useState(null); const [reward, setReward] = useState(null); + const [rewardV2, setRewardV2] = useState(null); const [liquidity, setLiquidity] = useState(null); const [churnTime, setChurnTime] = useState(null); const [bondHistories, setBondHistories] = useState(null); @@ -58,6 +61,16 @@ export const useToggleMetanode = (path: PATH) => { } }, [bridge, path]); + const getRewardsV2 = useCallback(async () => { + const rewardsUrl = stringifyUrl({ + url: `/api/v1/rewards-last-week`, + query: { bridge: 'btc_skypool' }, + }); + + const rewardData = await fetcher(rewardsUrl); + setRewardV2(rewardData); + }, []); + const getLiquidity = useCallback(async () => { if (bridge && path === PATH.METANODES) { const url = `${ENDPOINT_SKYBRIDGE_EXCHANGE}/${mode}/${bridge}/bond-to-liquidity`; @@ -97,7 +110,8 @@ export const useToggleMetanode = (path: PATH) => { (async () => { try { await Promise.all([ - getRewards(), + // getRewards(), + getRewardsV2(), getLiquidity(), getBondHistory(), getLiquidityRation(), @@ -110,10 +124,19 @@ export const useToggleMetanode = (path: PATH) => { setIsLoading(false); } })(); - }, [getBondHistory, getLiquidityRation, getChurnTime, getLiquidity, getRewards, getNodes]); + }, [ + getBondHistory, + getLiquidityRation, + getChurnTime, + getLiquidity, + getRewards, + getRewardsV2, + getNodes, + ]); useEffect(() => { setReward(null); + setRewardV2(null); setLiquidity(null); setChurnTime(null); setBondHistories(null); @@ -134,6 +157,7 @@ export const useToggleMetanode = (path: PATH) => { liquidityRatio, churnTime, reward, + rewardV2, isLoading, }; }; diff --git a/src/modules/links/index.tsx b/src/modules/links/index.tsx index c7bdcb05..38660de0 100644 --- a/src/modules/links/index.tsx +++ b/src/modules/links/index.tsx @@ -29,6 +29,7 @@ export const URL = { MigrateErc20: 'https://etherscan.io/token/0x8287c7b963b405b7b8d467db9d79eec40625b13a', MigrateIn: 'https://bscscan.com/address/0x640534D32D015e4C80318ad5256Ec7962fDB155f', MigrateOut: 'https://etherscan.io/address/0x640534D32D015e4C80318ad5256Ec7962fDB155f', + SetupNode: 'https://skybridge-docs.swingby.network/technical-details/the-swingby-node', }; export const Links = [ diff --git a/src/modules/metanodes/index.ts b/src/modules/metanodes/index.ts index 4831a649..616f0228 100644 --- a/src/modules/metanodes/index.ts +++ b/src/modules/metanodes/index.ts @@ -19,6 +19,12 @@ export interface IReward { stakingRewards: string; } +export interface IRewardV2 { + currency: string; + total: number; + totalSbBtc: number; +} + export interface IBridge { bridge: SkybridgeBridge; tabMenu: string; diff --git a/src/modules/scenes/Main/Metanodes/ActionButtonMetanodes/index.tsx b/src/modules/scenes/Main/Metanodes/ActionButtonMetanodes/index.tsx index cf55718a..12242e60 100644 --- a/src/modules/scenes/Main/Metanodes/ActionButtonMetanodes/index.tsx +++ b/src/modules/scenes/Main/Metanodes/ActionButtonMetanodes/index.tsx @@ -2,6 +2,8 @@ import { Tooltip, Text } from '@swingby-protocol/pulsar'; import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { URL } from '../../../../links'; + import { ActionButtonMetanodesContainer, RowText, @@ -9,6 +11,8 @@ import { TextTitle, TextSwapFee, InfoIcon, + ButtonSetupNode, + ButtonSetupNodeAnchor, } from './styled'; export const ActionButtonMetanodes = () => { @@ -41,6 +45,14 @@ export const ActionButtonMetanodes = () => { + +
+ + + + How to Setup Node + + ); diff --git a/src/modules/scenes/Main/Metanodes/ActionButtonMetanodes/styled.tsx b/src/modules/scenes/Main/Metanodes/ActionButtonMetanodes/styled.tsx index a8f54776..31a234e0 100644 --- a/src/modules/scenes/Main/Metanodes/ActionButtonMetanodes/styled.tsx +++ b/src/modules/scenes/Main/Metanodes/ActionButtonMetanodes/styled.tsx @@ -3,7 +3,7 @@ import { rem } from 'polished'; import styled from 'styled-components'; import { StylingConstants } from '../../../../styles'; -import { IconInfo } from '../../../Common'; +import { IconInfo, ButtonScale } from '../../../Common'; const { media } = StylingConstants; @@ -26,13 +26,27 @@ export const RowText = styled.div` @media (min-width: ${rem(media.sm)}) { align-items: center; flex-direction: row; - width: auto; + width: 100%; column-gap: ${({ theme }) => rem(theme.pulsar.size.box)}; } `; export const ButtonContainer = styled.div``; +export const ButtonSetupNode = styled(ButtonScale)` + width: 200px; +`; + +export const ButtonSetupNodeAnchor = styled.a` + display: flex; + align-items: center; + gap: ${({ theme }) => rem(theme.pulsar.size.room)}; + color: ${({ theme }) => theme.pulsar.color.text.normal}; + font-size: ${({ theme }) => rem(theme.pulsar.size.closet)}; + text-decoration: none; + cursor: pointer; +`; + export const TextTitle = styled(Text)` font-size: ${({ theme }) => rem(theme.pulsar.size.house)}; `; diff --git a/src/modules/scenes/Main/Metanodes/Earnings/index.tsx b/src/modules/scenes/Main/Metanodes/Earnings/index.tsx index 79c0497a..fa6dce21 100644 --- a/src/modules/scenes/Main/Metanodes/Earnings/index.tsx +++ b/src/modules/scenes/Main/Metanodes/Earnings/index.tsx @@ -2,13 +2,13 @@ import { getFiatAssetFormatter, Text, Tooltip } from '@swingby-protocol/pulsar'; import { FormattedMessage, useIntl } from 'react-intl'; import { Loader } from '../../../../../components/Loader'; -import { IReward } from '../../../../metanodes'; +import { IRewardV2 } from '../../../../metanodes'; import { IconInfo } from '../../../Common'; import { EarningsContainer, Row } from './styled'; interface Props { - reward: IReward | null; + reward: IRewardV2 | null; isLoading: boolean; } @@ -16,9 +16,7 @@ export const Earnings = (props: Props) => { const { locale } = useIntl(); const { reward, isLoading } = props; const rewardsTotal = reward ? reward.total : 0; - const rewardsSwingby = reward ? reward.stakingRewards : 0; - // const rewardsSbBtcUsd = reward ? reward.networkRewards : 0; - const rewardsAvgPerNode = reward ? reward.avgPerNode : 0; + const rewardsSbBtc = reward ? reward.totalSbBtc : 0; const earningTotal = getFiatAssetFormatter({ locale, @@ -27,27 +25,6 @@ export const Earnings = (props: Props) => { maximumFractionDigits: 0, }).format(Number(rewardsTotal)); - const earningSwingbyUsd = getFiatAssetFormatter({ - locale, - currency: 'USD', - minimumFractionDigits: 0, - maximumFractionDigits: 0, - }).format(Number(rewardsSwingby)); - - // const earningSbBtcUsd = getFiatAssetFormatter({ - // locale, - // currency: 'USD', - // minimumFractionDigits: 0, - // maximumFractionDigits: 0, - // }).format(Number(rewardsSbBtcUsd)); - - const earningAvr = getFiatAssetFormatter({ - locale, - currency: 'USD', - minimumFractionDigits: 0, - maximumFractionDigits: 0, - }).format(Number(rewardsAvgPerNode)); - const loader = ; return ( @@ -60,7 +37,7 @@ export const Earnings = (props: Props) => { content={ - +
{/* @@ -79,14 +56,7 @@ export const Earnings = (props: Props) => { {earningTotal}
- - - + {rewardsSbBtc.toFixed(6)} sbBTC
) : ( diff --git a/src/modules/scenes/Main/Metanodes/MeatanodeInfo/index.tsx b/src/modules/scenes/Main/Metanodes/MeatanodeInfo/index.tsx index a7dfa7a0..8fdb4ca0 100644 --- a/src/modules/scenes/Main/Metanodes/MeatanodeInfo/index.tsx +++ b/src/modules/scenes/Main/Metanodes/MeatanodeInfo/index.tsx @@ -5,6 +5,7 @@ import { useToggleMetanode } from '../../../../hooks'; import { ActionButtonMetanodes } from '../ActionButtonMetanodes'; import { BondToLiquidity } from '../BondToLiquidity'; import { Churning } from '../Churning'; +import { Earnings } from '../Earnings'; import { GeneralInfo } from '../GeneralInfo'; import { LiquidityRatio } from '../LiquidityRatio'; import { MetanodeList } from '../MetanodeList'; @@ -22,6 +23,7 @@ export const MetanodeInfo = () => { liquidity, liquidityRatio, churnTime, + rewardV2, isLoading, } = useToggleMetanode(PATH.METANODES); return ( @@ -39,6 +41,7 @@ export const MetanodeInfo = () => { + diff --git a/src/pages/api/v1/rewards-last-week.ts b/src/pages/api/v1/rewards-last-week.ts new file mode 100644 index 00000000..20dd53ae --- /dev/null +++ b/src/pages/api/v1/rewards-last-week.ts @@ -0,0 +1,56 @@ +import { SkybridgeBridge } from '@swingby-protocol/sdk'; +import { NextApiRequest, NextApiResponse } from 'next'; + +import { corsMiddleware, getParam } from '../../../modules/api'; +import { fetcher } from '../../../modules/fetch'; +import { skypoolsEnabled, ENDPOINT_SKYBRIDGE_EXCHANGE, mode } from '../../../modules/env'; + +const isBridgeEnabled = (bridge: SkybridgeBridge): boolean => { + switch (bridge) { + case 'btc_skypool': { + return skypoolsEnabled; + } + default: + return skypoolsEnabled; + } +}; + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse<{ currency: string; total: number; totalSbBtc: number; e?: string }>, +) { + await corsMiddleware({ req, res }); + const bridge = getParam({ req, name: 'bridge' }) as SkybridgeBridge; + let reward = { + currency: 'USD', + total: 0, + totalSbBtc: 0, + }; + + if (!isBridgeEnabled(bridge)) { + return res.status(200).json(reward); + } + + try { + const sbBtcPriceUrl = `${ENDPOINT_SKYBRIDGE_EXCHANGE}/${mode}/${bridge}/sbBTC/price`; + + const results = await Promise.all([ + fetcher<{ price: number; usdtPrice: number }>(sbBtcPriceUrl), + fetcher<{ result: { rows: { Amount: number }[] } }>( + `https://api.dune.com/api/v1/query/2364511/results?api_key=${process.env.DUNE_API_KEY}`, + ), + ]); + + const sbBtcUsdtPrice = results[0].usdtPrice; + const currentReward = results[1].result.rows.find((row) => row.Amount > 0); + if (currentReward) { + reward.totalSbBtc = currentReward.Amount; + reward.total = currentReward.Amount * sbBtcUsdtPrice; + } + + res.status(200).json(reward); + } catch (e) { + console.log(e); + res.status(500).json({ ...reward, e: e.message }); + } +}