From 167221345a51486221709348e85919b6e43c270f Mon Sep 17 00:00:00 2001 From: Paul <108695806+pxrl@users.noreply.github.com> Date: Thu, 26 Oct 2023 22:10:06 +0200 Subject: [PATCH 1/6] fix(suggested-fees): Use dest provider for contract determination (#884) --- api/suggested-fees.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/api/suggested-fees.ts b/api/suggested-fees.ts index 6c7d7b13c..3c5397256 100644 --- a/api/suggested-fees.ts +++ b/api/suggested-fees.ts @@ -64,7 +64,7 @@ const handler = async ( let { amount: amountInput, token, - destinationChainId, + destinationChainId: _destinationChainId, originChainId, timestamp, skipAmountLimit, @@ -73,9 +73,10 @@ const handler = async ( message, } = query; - if (originChainId === destinationChainId) { + if (originChainId === _destinationChainId) { throw new InputError("Origin and destination chains cannot be the same"); } + const destinationChainId = Number(_destinationChainId); relayerAddress ??= sdk.constants.DEFAULT_SIMULATED_RELAYER_ADDRESS; recipientAddress ??= sdk.constants.DEFAULT_SIMULATED_RELAYER_ADDRESS; @@ -97,7 +98,7 @@ const handler = async ( } const isRecipientAContract = await sdk.utils.isContractDeployedToAddress( recipientAddress, - provider + getProvider(destinationChainId) ); if (!isRecipientAContract) { throw new InputError( @@ -111,7 +112,7 @@ const handler = async ( // of the `handleAcrossMessage` we will check that the balance of the relayer is sufficient to // support this deposit. const destinationToken = - sdk.utils.getL2TokenAddresses(l1Token)?.[Number(destinationChainId)]; + sdk.utils.getL2TokenAddresses(l1Token)?.[destinationChainId]; if (!sdk.utils.isDefined(destinationToken)) { throw new InputError( `Could not resolve token address on ${destinationChainId} for ${l1Token}` @@ -163,7 +164,7 @@ const handler = async ( const blockFinder = new BlockFinder(provider.getBlock.bind(provider)); const [{ number: blockTag }, routeEnabled] = await Promise.all([ blockFinder.getBlockForTimestamp(parsedTimestamp), - isRouteEnabled(computedOriginChainId, Number(destinationChainId), token), + isRouteEnabled(computedOriginChainId, destinationChainId, token), ]); if (!routeEnabled || disabledL1Tokens.includes(l1Token.toLowerCase())) @@ -174,7 +175,7 @@ const handler = async ( provider ); - const baseCurrency = destinationChainId === "137" ? "matic" : "eth"; + const baseCurrency = destinationChainId === 137 ? "matic" : "eth"; const [currentUt, nextUt, rateModel, tokenPrice] = await Promise.all([ hubPool.callStatic.liquidityUtilizationCurrent(l1Token, { @@ -189,7 +190,7 @@ const handler = async ( blockTag, }, computedOriginChainId, - Number(destinationChainId) + destinationChainId ), getCachedTokenPrice(l1Token, baseCurrency), ]); @@ -202,7 +203,7 @@ const handler = async ( l1Token, amount, computedOriginChainId, - Number(destinationChainId), + destinationChainId, recipientAddress, tokenPrice, message, From 95e89d56d14ad5d82734ca138c016c8c70a50c13 Mon Sep 17 00:00:00 2001 From: Paul <108695806+pxrl@users.noreply.github.com> Date: Fri, 27 Oct 2023 00:47:01 +0200 Subject: [PATCH 2/6] improve(suggested-fees): Filter underlying simulation reasons (#885) --- api/_utils.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/api/_utils.ts b/api/_utils.ts index 2d0d6948b..08d46c223 100644 --- a/api/_utils.ts +++ b/api/_utils.ts @@ -524,11 +524,9 @@ export const getRelayerFeeDetails = async ( relayerAddress, tokenPrice ); - } catch (_e: unknown) { - // Resolve and transform the error - const e = _e as Error; - // We want to mask this error as an Input error. - throw new InputError(e?.message); + } catch (err: unknown) { + const reason = resolveEthersError(err); + throw new InputError(`Relayer fill simulation failed - ${reason}`); } }; @@ -729,6 +727,15 @@ export function applyMapFilter( }, []); } +export function resolveEthersError(err: unknown): string { + // prettier-ignore + return sdk.typeguards.isEthersError(err) + ? `${err.reason}: ${err.code}` + : sdk.typeguards.isError(err) + ? err.message + : "unknown error"; +} + /** * Handles the recurring case of error handling * @param endpoint A string numeric to indicate to the logging utility where this error occurs From 7a244e4528d4f815867f245ae0190a138856f24a Mon Sep 17 00:00:00 2001 From: "James Morris, MS" <96435344+james-a-morris@users.noreply.github.com> Date: Fri, 27 Oct 2023 12:46:45 -0400 Subject: [PATCH 3/6] improve: more effectively estimate suggested fees quote (#887) * improve: use valid utils * chore: api endpoint * improve: pipe recipient address into suggested fees * fix: allow changed recipient --- api/suggested-fees.ts | 8 ++++++-- src/hooks/useBridgeFees.ts | 11 +++++++++-- src/utils/bridge.ts | 5 ++++- .../serverless-api/mocked/suggested-fees.mocked.ts | 3 ++- src/utils/serverless-api/prod/suggested-fees.prod.ts | 4 +++- src/utils/serverless-api/types.ts | 3 ++- src/views/Bridge/hooks/useTransferQuote.ts | 3 ++- src/views/Transactions/hooks/useSpeedUp.tsx | 3 ++- 8 files changed, 30 insertions(+), 10 deletions(-) diff --git a/api/suggested-fees.ts b/api/suggested-fees.ts index 3c5397256..f4737bbf2 100644 --- a/api/suggested-fees.ts +++ b/api/suggested-fees.ts @@ -6,7 +6,11 @@ import { BlockFinder } from "@uma/sdk"; import { VercelResponse } from "@vercel/node"; import { ethers } from "ethers"; import { type, assert, Infer, optional, string } from "superstruct"; -import { disabledL1Tokens, DEFAULT_QUOTE_TIMESTAMP_BUFFER } from "./_constants"; +import { + disabledL1Tokens, + DEFAULT_QUOTE_TIMESTAMP_BUFFER, + DEFAULT_SIMULATED_RECIPIENT_ADDRESS, +} from "./_constants"; import { TypedVercelRequest } from "./_types"; import { getLogger, @@ -79,7 +83,7 @@ const handler = async ( const destinationChainId = Number(_destinationChainId); relayerAddress ??= sdk.constants.DEFAULT_SIMULATED_RELAYER_ADDRESS; - recipientAddress ??= sdk.constants.DEFAULT_SIMULATED_RELAYER_ADDRESS; + recipientAddress ??= DEFAULT_SIMULATED_RECIPIENT_ADDRESS; token = ethers.utils.getAddress(token); const [latestBlock, tokenDetails] = await Promise.all([ diff --git a/src/hooks/useBridgeFees.ts b/src/hooks/useBridgeFees.ts index 4fb798d56..7cc54c444 100644 --- a/src/hooks/useBridgeFees.ts +++ b/src/hooks/useBridgeFees.ts @@ -15,11 +15,17 @@ export function useBridgeFees( amount: ethers.BigNumber, fromChainId?: ChainId, toChainId?: ChainId, - tokenSymbol?: string + tokenSymbol?: string, + recipientAddress?: string ) { const { block } = useBlock(toChainId); const enabledQuery = - !!toChainId && !!fromChainId && !!block && !!tokenSymbol && amount.gt(0); + !!toChainId && + !!fromChainId && + !!block && + !!tokenSymbol && + amount.gt(0) && + !!recipientAddress; const queryKey = enabledQuery ? bridgeFeesQueryKey( tokenSymbol, @@ -38,6 +44,7 @@ export function useBridgeFees( blockTimestamp: block!.timestamp, toChainId: toChainId!, fromChainId: fromChainId!, + recipientAddress: recipientAddress!, }); }, { diff --git a/src/utils/bridge.ts b/src/utils/bridge.ts index c6b669eaa..6976f8a7b 100644 --- a/src/utils/bridge.ts +++ b/src/utils/bridge.ts @@ -32,6 +32,7 @@ type GetBridgeFeesArgs = { blockTimestamp: number; fromChainId: ChainId; toChainId: ChainId; + recipientAddress: string; }; export type GetBridgeFeesResult = BridgeFees & { @@ -52,6 +53,7 @@ export async function getBridgeFees({ tokenSymbol, fromChainId, toChainId, + recipientAddress, }: GetBridgeFeesArgs): Promise { const timeBeforeRequests = Date.now(); const { @@ -66,7 +68,8 @@ export async function getBridgeFees({ amount, getConfig().getTokenInfoBySymbol(fromChainId, tokenSymbol).address, toChainId, - fromChainId + fromChainId, + recipientAddress ); const timeAfterRequests = Date.now(); diff --git a/src/utils/serverless-api/mocked/suggested-fees.mocked.ts b/src/utils/serverless-api/mocked/suggested-fees.mocked.ts index c5f2013fb..5fa235e71 100644 --- a/src/utils/serverless-api/mocked/suggested-fees.mocked.ts +++ b/src/utils/serverless-api/mocked/suggested-fees.mocked.ts @@ -14,7 +14,8 @@ export async function suggestedFeesMockedApiCall( _amount: ethers.BigNumber, _originToken: string, _toChainid: ChainId, - _fromChainid: ChainId + _fromChainid: ChainId, + _recipientAddress: string ): Promise { return { relayerFee: { diff --git a/src/utils/serverless-api/prod/suggested-fees.prod.ts b/src/utils/serverless-api/prod/suggested-fees.prod.ts index a348eb4e7..422afb17e 100644 --- a/src/utils/serverless-api/prod/suggested-fees.prod.ts +++ b/src/utils/serverless-api/prod/suggested-fees.prod.ts @@ -15,13 +15,15 @@ export async function suggestedFeesApiCall( amount: ethers.BigNumber, originToken: string, toChainid: ChainId, - fromChainid: ChainId + fromChainid: ChainId, + recipientAddress: string ): Promise { const response = await axios.get(`/api/suggested-fees`, { params: { token: originToken, destinationChainId: toChainid, originChainId: fromChainid, + recipientAddress, amount: amount.toString(), skipAmountLimit: true, }, diff --git a/src/utils/serverless-api/types.ts b/src/utils/serverless-api/types.ts index 9a5495978..f9c72f9db 100644 --- a/src/utils/serverless-api/types.ts +++ b/src/utils/serverless-api/types.ts @@ -56,7 +56,8 @@ export type SuggestedApiFeeType = ( amount: ethers.BigNumber, originToken: string, toChainid: ChainId, - fromChainid: ChainId + fromChainid: ChainId, + recipientAddress: string ) => Promise; export type RetrieveLinkedWalletType = ( diff --git a/src/views/Bridge/hooks/useTransferQuote.ts b/src/views/Bridge/hooks/useTransferQuote.ts index be997a2e3..187543b18 100644 --- a/src/views/Bridge/hooks/useTransferQuote.ts +++ b/src/views/Bridge/hooks/useTransferQuote.ts @@ -26,7 +26,8 @@ export function useTransferQuote( amountToBridge, selectedRoute.fromChain, selectedRoute.toChain, - selectedRoute.fromTokenSymbol + selectedRoute.fromTokenSymbol, + toAddress ); const limitsQuery = useBridgeLimits( selectedRoute.fromTokenSymbol, diff --git a/src/views/Transactions/hooks/useSpeedUp.tsx b/src/views/Transactions/hooks/useSpeedUp.tsx index 0274344b7..5b4c0b9b8 100644 --- a/src/views/Transactions/hooks/useSpeedUp.tsx +++ b/src/views/Transactions/hooks/useSpeedUp.tsx @@ -19,7 +19,8 @@ export function useSpeedUp(transfer: Deposit, token: Token) { BigNumber.from(transfer.amount), transfer.sourceChainId, transfer.destinationChainId, - token.symbol + token.symbol, + transfer.recipientAddr ); const [speedUpTxLink, setSpeedUpTxLink] = useState(""); From 2643dab58dd30c8382bbfd4ae2dd045dc8a8d9fc Mon Sep 17 00:00:00 2001 From: Paul <108695806+pxrl@users.noreply.github.com> Date: Mon, 30 Oct 2023 15:53:22 +0100 Subject: [PATCH 4/6] fix: Clarify misleading error message (#891) This often fails due to RPC provider issues and incorrectly reports that the route is disabled. --- api/limits.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/api/limits.ts b/api/limits.ts index a040435ba..c766de888 100644 --- a/api/limits.ts +++ b/api/limits.ts @@ -109,10 +109,13 @@ const handler = async ( ]); // If any of the above fails or the route is not enabled, we assume that the if ( - disabledL1Tokens.includes(l1Token.toLowerCase()) || tokenDetailsResult.status === "rejected" || - routeEnabledResult.status === "rejected" || - !routeEnabledResult.value + routeEnabledResult.status === "rejected" + ) { + throw new InputError(`Unable to query route.`); + } else if ( + !routeEnabledResult.value || + disabledL1Tokens.includes(l1Token.toLowerCase()) ) { throw new InputError(`Route is not enabled.`); } From 85c862142067491527493f3045180f335fcf1253 Mon Sep 17 00:00:00 2001 From: Paul <108695806+pxrl@users.noreply.github.com> Date: Mon, 30 Oct 2023 17:32:44 +0100 Subject: [PATCH 5/6] refactor: Align /suggested-fees inputs w/ SpokePool names (#890) To reduce misalignment between the SpokePool deposit() input parameters and the parameter names supplied to /suggested-fees, rename the following: recipientAddress -> recipient relayerAddress -> relayer This leaves only `token` as the variable name that differs. --- api/suggested-fees.ts | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/api/suggested-fees.ts b/api/suggested-fees.ts index f4737bbf2..2fc0b823d 100644 --- a/api/suggested-fees.ts +++ b/api/suggested-fees.ts @@ -39,8 +39,8 @@ const SuggestedFeesQueryParamsSchema = type({ timestamp: optional(positiveIntStr()), skipAmountLimit: optional(boolStr()), message: optional(string()), - recipientAddress: optional(validAddress()), - relayerAddress: optional(validAddress()), + recipient: optional(validAddress()), + relayer: optional(validAddress()), }); type SuggestedFeesQueryParams = Infer; @@ -72,8 +72,8 @@ const handler = async ( originChainId, timestamp, skipAmountLimit, - recipientAddress, - relayerAddress, + recipient, + relayer, message, } = query; @@ -82,8 +82,8 @@ const handler = async ( } const destinationChainId = Number(_destinationChainId); - relayerAddress ??= sdk.constants.DEFAULT_SIMULATED_RELAYER_ADDRESS; - recipientAddress ??= DEFAULT_SIMULATED_RECIPIENT_ADDRESS; + relayer ??= sdk.constants.DEFAULT_SIMULATED_RELAYER_ADDRESS; + recipient ??= DEFAULT_SIMULATED_RECIPIENT_ADDRESS; token = ethers.utils.getAddress(token); const [latestBlock, tokenDetails] = await Promise.all([ @@ -101,7 +101,7 @@ const handler = async ( throw new InputError("Message must be an even hex string"); } const isRecipientAContract = await sdk.utils.isContractDeployedToAddress( - recipientAddress, + recipient, getProvider(destinationChainId) ); if (!isRecipientAContract) { @@ -124,12 +124,13 @@ const handler = async ( } const balanceOfToken = await getCachedTokenBalance( destinationChainId, - relayerAddress, + relayer, destinationToken ); if (balanceOfToken.lt(amountInput)) { throw new InputError( - `Relayer Address (${relayerAddress}) doesn't have enough funds to support this deposit. For help, please reach out to https://discord.across.to` + `Relayer Address (${relayer}) doesn't have enough funds to support this deposit;` + + ` for help, please reach out to https://discord.across.to` ); } } @@ -208,10 +209,10 @@ const handler = async ( amount, computedOriginChainId, destinationChainId, - recipientAddress, + recipient, tokenPrice, message, - relayerAddress + relayer ); const skipAmountLimitEnabled = skipAmountLimit === "true"; From 23c2680f97eb417bef6d11c88638d6bad5391cec Mon Sep 17 00:00:00 2001 From: Dong-Ha Kim Date: Tue, 31 Oct 2023 09:47:44 +0100 Subject: [PATCH 6/6] refactor: align global css vars + remove some legacy code (#888) * refactor: remove legacy components * refactor: align global css vars with design tokens * fixup * refactor: COLORS constants * refactor: Text component to use COLORS constant * refactor: remove more legacy code * fix: ts errors * fixup * fixup * fixup --- src/components/Box/Box.tsx | 12 -- src/components/Box/index.ts | 1 - src/components/Buttons/BaseButton.tsx | 5 +- src/components/Dialog/Dialog.styles.tsx | 60 --------- src/components/Dialog/Dialog.tsx | 21 --- src/components/Dialog/index.ts | 2 - src/components/DotStepper/DotStepper.tsx | 36 ----- src/components/DotStepper/index.ts | 1 - src/components/GlobalStyles/GlobalStyles.tsx | 73 +++++----- .../InformationDialog/InformationDialog.tsx | 123 ----------------- src/components/InformationDialog/index.ts | 2 - src/components/Stepper/Stepper.styles.tsx | 49 ------- src/components/Stepper/Stepper.tsx | 21 --- src/components/Stepper/index.ts | 1 - src/components/Stepper/useStepper.tsx | 73 ---------- src/components/Tabs/Tab.tsx | 38 ------ src/components/Tabs/Tabs.styled.tsx | 34 ----- src/components/Tabs/Tabs.tsx | 47 ------- src/components/Tabs/index.ts | 1 - src/components/{TabsV2 => Tabs}/index.tsx | 0 src/components/Text/Text.tsx | 29 +--- src/components/Text/index.ts | 1 + src/components/index.ts | 4 - src/stories/DotStepper.stories.tsx | 58 -------- src/utils/constants.ts | 75 +++++------ src/views/Airdrop/components/BreakdownRow.tsx | 4 +- .../Airdrop/components/BreakdownStats.tsx | 2 +- src/views/Airdrop/components/InfoCardTop.tsx | 4 +- src/views/Airdrop/components/MoreInfoFlow.tsx | 4 +- src/views/Airdrop/components/SplashFlow.tsx | 2 +- src/views/Airdrop/components/StepCard.tsx | 2 +- src/views/Bridge/components/TokenFee.tsx | 4 +- src/views/LiquidityPool/LiquidityPool.tsx | 2 +- .../RewardBreakdown.styles.tsx | 127 ------------------ .../comp/RewardBreakdown/RewardBreakdown.tsx | 86 ------------ .../Referrals/comp/RewardBreakdown/index.ts | 1 - .../comp/RewardHero/RewardHero.styles.tsx | 44 ------ .../Referrals/comp/RewardHero/RewardHero.tsx | 23 ---- src/views/Referrals/comp/RewardHero/index.ts | 1 - src/views/Referrals/comp/index.ts | 2 - .../components/StakingForm/StakingForm.tsx | 8 +- .../StakingReward/StakingReward.tsx | 6 +- .../components/FillTxInfoModal.tsx | 4 +- .../components/FillTxsListModal.tsx | 4 +- 44 files changed, 98 insertions(+), 999 deletions(-) delete mode 100644 src/components/Box/Box.tsx delete mode 100644 src/components/Box/index.ts delete mode 100644 src/components/Dialog/Dialog.styles.tsx delete mode 100644 src/components/Dialog/Dialog.tsx delete mode 100644 src/components/Dialog/index.ts delete mode 100644 src/components/DotStepper/DotStepper.tsx delete mode 100644 src/components/DotStepper/index.ts delete mode 100644 src/components/InformationDialog/InformationDialog.tsx delete mode 100644 src/components/InformationDialog/index.ts delete mode 100644 src/components/Stepper/Stepper.styles.tsx delete mode 100644 src/components/Stepper/Stepper.tsx delete mode 100644 src/components/Stepper/index.ts delete mode 100644 src/components/Stepper/useStepper.tsx delete mode 100644 src/components/Tabs/Tab.tsx delete mode 100644 src/components/Tabs/Tabs.styled.tsx delete mode 100644 src/components/Tabs/Tabs.tsx delete mode 100644 src/components/Tabs/index.ts rename src/components/{TabsV2 => Tabs}/index.tsx (100%) delete mode 100644 src/stories/DotStepper.stories.tsx delete mode 100644 src/views/Referrals/comp/RewardBreakdown/RewardBreakdown.styles.tsx delete mode 100644 src/views/Referrals/comp/RewardBreakdown/RewardBreakdown.tsx delete mode 100644 src/views/Referrals/comp/RewardBreakdown/index.ts delete mode 100644 src/views/Referrals/comp/RewardHero/RewardHero.styles.tsx delete mode 100644 src/views/Referrals/comp/RewardHero/RewardHero.tsx delete mode 100644 src/views/Referrals/comp/RewardHero/index.ts diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx deleted file mode 100644 index defc66cb9..000000000 --- a/src/components/Box/Box.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from "@emotion/styled"; - -export const RoundBox = styled.div` - --radius: 30px; - border-radius: var(--radius); - padding: 15px 20px; - background-color: var(--color-gray-300); -`; -export const ErrorBox = styled(RoundBox)` - background-color: var(--color-error); - color: var(--color-gray); -`; diff --git a/src/components/Box/index.ts b/src/components/Box/index.ts deleted file mode 100644 index 2a063cc17..000000000 --- a/src/components/Box/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Box"; diff --git a/src/components/Buttons/BaseButton.tsx b/src/components/Buttons/BaseButton.tsx index 5b9df085e..c6daff7c5 100644 --- a/src/components/Buttons/BaseButton.tsx +++ b/src/components/Buttons/BaseButton.tsx @@ -1,5 +1,4 @@ import styled from "@emotion/styled"; -import { COLORS } from "utils"; export const BaseButton = styled.button` --radius: 30px; @@ -28,7 +27,7 @@ export const PrimaryButton = styled(BaseButton)` bottom: 0; opacity: 0; border-radius: var(--radius); - box-shadow: 0 0 16px hsla(${COLORS.primary[500]} / 0.55); + box-shadow: 0 0 16px hsla(var(--color-gray) / 0.55); transition: opacity 0.2s; } &:hover:not(:disabled) { @@ -50,7 +49,7 @@ export const SecondaryButton = styled(BaseButton)` bottom: 0; opacity: 0; border-radius: var(--radius); - box-shadow: 0 0 16px hsla(${COLORS.gray[500]} / 0.55); + box-shadow: 0 0 16px hsla(var(--color-gray) / 0.55); transition: opacity 0.2s; } &:hover:not(:disabled) { diff --git a/src/components/Dialog/Dialog.styles.tsx b/src/components/Dialog/Dialog.styles.tsx deleted file mode 100644 index 69adead06..000000000 --- a/src/components/Dialog/Dialog.styles.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import styled from "@emotion/styled"; -import { DialogContent, DialogOverlay } from "@reach/dialog"; -import { COLORS } from "utils"; - -export const Overlay = styled(DialogOverlay)` - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: hsla(${COLORS.gray[500]} / 0.9); - display: flex; - padding: 20px; -`; - -export const Content = styled.div` - padding: 10px 25px; - width: 100%; - overflow: auto; - - ::-webkit-scrollbar { - width: 6px; - } - - ::-webkit-scrollbar-track { - background-color: var(--color-primary); - } - - ::-webkit-scrollbar-thumb { - background-color: var(--color-gray-300); - border-radius: 5px; - box-shadow: inset 0 0 0 1px var(--color-primary); - } -`; - -export const Wrapper = styled(DialogContent)` - position: relative; - display: flex; - margin: auto; - padding: 10px 0; - background-color: var(--color-primary); - color: var(--color-gray); - outline: none; - border-radius: 12px; - max-width: 440px; - max-height: 100%; - min-width: min(440px, calc(100% - 20px)); -`; - -export const CloseButton = styled.button` - position: absolute; - top: 0; - right: 0; - color: var(--color-gray); - background-color: transparent; - padding: 8px; - border: none; - outline: none; - cursor: pointer; -`; diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx deleted file mode 100644 index 513731b28..000000000 --- a/src/components/Dialog/Dialog.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import { X } from "react-feather"; -import { Overlay, Wrapper, CloseButton, Content } from "./Dialog.styles"; - -type Props = { - isOpen: boolean; - onClose: () => void; -}; - -const Dialog: React.FC = ({ isOpen, onClose, children }) => ( - - - - - - {children} - - -); - -export default Dialog; diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts deleted file mode 100644 index 26f206f2b..000000000 --- a/src/components/Dialog/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import Dialog from "./Dialog"; -export default Dialog; diff --git a/src/components/DotStepper/DotStepper.tsx b/src/components/DotStepper/DotStepper.tsx deleted file mode 100644 index 67108cb2e..000000000 --- a/src/components/DotStepper/DotStepper.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { FC } from "react"; -import styled from "@emotion/styled"; - -interface Props { - numDots: number; - // Indexed at 1. - step: number; -} - -const DotsStepper: FC = ({ numDots, step }) => { - const numElements: JSX.Element[] = []; - for (let i = 0; i < numDots; i++) { - numElements.push( -
- ); - } - return {numElements.map((element) => element)}; -}; - -const DotWrapper = styled.div` - display: inline-flex; - - > div { - width: 8px; - height: 8px; - margin: 2px 4px; - border-radius: 50%; - background-color: #636a70; - opacity: 1; - &.current-step { - background-color: #6cf9d8; - } - } -`; - -export default DotsStepper; diff --git a/src/components/DotStepper/index.ts b/src/components/DotStepper/index.ts deleted file mode 100644 index f2f0c768a..000000000 --- a/src/components/DotStepper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./DotStepper"; diff --git a/src/components/GlobalStyles/GlobalStyles.tsx b/src/components/GlobalStyles/GlobalStyles.tsx index d34ef073b..a25bcaacb 100644 --- a/src/components/GlobalStyles/GlobalStyles.tsx +++ b/src/components/GlobalStyles/GlobalStyles.tsx @@ -1,6 +1,5 @@ import { Global, css } from "@emotion/react"; import { reset } from "./reset"; -import { COLORS } from "utils"; export const typography = css` /* only take latin chars to reduce bundle size */ @@ -37,44 +36,44 @@ export const typography = css` `; const variables = css` :root { - /* COLORS */ + --color-interface-red: #f96c6c; - --color-gray: hsl(${COLORS.gray[500]}); - --color-gray-600: hsla(${COLORS.gray[600]}); - --color-gray-550: hsla(${COLORS.gray[550]}); - --color-gray-500: hsla(${COLORS.gray[500]}); - --color-gray-300: hsla(${COLORS.gray[300]}); - --color-gray-250: hsla(${COLORS.gray[250]}); - --color-gray-200: hsla(${COLORS.gray[200]}); - --color-gray-175: hsla(${COLORS.gray[175]}); - --color-gray-160: hsla(${COLORS.gray[160]}); - --color-gray-150: hsla(${COLORS.gray[150]}); - --color-gray-100: hsla(${COLORS.gray[100]}); - --color-white: hsl(${COLORS.white}); - --color-black: hsl(${COLORS.black}); - --color-primary: hsl(${COLORS.primary[500]}); - --color-primary-dark: hsl(${COLORS.primary[700]}); - --color-primary-hover: hsla(${COLORS.primary[500]} / 0.15); - --color-pagination: hsl(${COLORS.primary[600]}); - --color-secondary: hsl(${COLORS.secondary[500]}); - --color-error: hsl(${COLORS.error[500]}); - --color-error-light: hsl(${COLORS.error[300]}); - --color-uma-red: hsl(${COLORS.umaRed}); - --color-purple: hsl(${COLORS.purple}); - --color-primary-transparent: hsla(${COLORS.primary[500]} / 0.4); - --color-black-transparent: hsla(${COLORS.black} / 0.75); - --color-white-transparent: hsla(${COLORS.white} / 0.75); - --color-gray-transparent: rgba(45, 46, 51, 0.1); - --color-gray-transparent-lighter: rgba(45, 46, 51, 0.65); - /* - Silence the warning about missing Reach Dialog styles - */ - --reach-dialog: 1; + --color-interface-yellow: #f9d26c; - /* - Keep a consistent width between the middle section and the headers - */ - --central-content: 500px; + --color-brand-aqua: #6cf9d8; + --color-interface-aqua: #6cf9d8; + --color-interface-aqua-15: #6cf9d826; + + --color-interface-teal: #44d2ff; + --color-interface-teal-5: #44d2ff0d; + --color-interface-teal-15: #44d2ff26; + + --color-interface-white: #ffffff; + + --color-neutrals-black-700: #34353b; + --color-neutrals-black-800: #2d2e33; + --color-neutrals-black-900: #202024; + + --color-neutrals-grey-400: #9daab3; + --color-neutrals-grey-500: #4c4e57; + --color-neutrals-grey-600: #3e4047; + + --color-neutrals-light-100: #ffffff; + --color-neutrals-light-200: #e0f3ff; + --color-neutrals-light-300: #c5d5e0; + + --tints-shades-white-70: #9daab2; + --tints-shades-white-88: #c5d5e0; + --tints-shades-white-100: #e0f3ff; + --tints-shades-white-200: #9daab2; + + /* Old variables kept until refactored */ + --color-primary: var(--color-interface-aqua); + --color-gray: var(--color-neutrals-black-800); + --color-black: var(--color-neutrals-black-900); + --color-pagination: var(--color-neutrals-grey-500); + --color-white: var(--color-interface-white); + --color-error: var(--color-interface-red); } `; diff --git a/src/components/InformationDialog/InformationDialog.tsx b/src/components/InformationDialog/InformationDialog.tsx deleted file mode 100644 index f1f1dcd39..000000000 --- a/src/components/InformationDialog/InformationDialog.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React from "react"; -import styled from "@emotion/styled"; -import Dialog from "../Dialog"; - -type Props = { - isOpen: boolean; - onClose: () => void; -}; - -const InformationDialog: React.FC = ({ isOpen, onClose }) => { - return ( - - Information - - Time to Destination - - The estimated amount of time expected to receive your funds. If you do - not receive your funds within the estimated amount of time, please - visit the ‘across-support’ channel within the{" "} - - Across Discord. - - - - - Destination Gas Fee - - In order for Across to deliver the tokens to the user on the - destination chain, a transaction needs to be submitted on behalf of - the user on the destination chain. The destination gas fee encompasses - the gas costs associated with this transaction. - - - - Bridge Fee - - The bridge fee paid by the user consists of two components:
{" "} -
- 1. LP fee: A fee that is paid to liquidity providers for providing - passive liquidity in the unified L1 pools
- 2. Relayer fee: A fee that is paid to bridge relayers to incentivize - them to promptly relay a bridge transaction - - - - -
  • - Click{" "} - - here - {" "} - to learn more about the role of relayers -
    • -
  • - Click{" "} - - here - {" "} - for more information about fees -
    • -
  • - Click{" "} - - here - {" "} - to learn more about gas fees -
    • -     -     - ); -}; -export default InformationDialog; - -const Title = styled.h1` - font-size: ${20 / 16}rem; - font-weight: bold; - margin-bottom: 25px; -`; - -const Info = styled.article` - margin-bottom: 20px; - font-size: ${14 / 16}rem; -`; - -const ArticleTitle = styled.h2` - font-weight: bold; - margin-bottom: 8px; -`; - -const Text = styled.p` - max-width: 65ch; -`; - -const Link = styled.a` - color: var(--color-secondary); - text-decoration: none; - transform: opacity 100ms linear; - - &:hover { - text-decoration: revert; - } -`; - -const List = styled.ul` - list-style: inside; - font-size: ${14 / 16}rem; -`; diff --git a/src/components/InformationDialog/index.ts b/src/components/InformationDialog/index.ts deleted file mode 100644 index 5e19a85a8..000000000 --- a/src/components/InformationDialog/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import InformationDialog from "./InformationDialog"; -export default InformationDialog; diff --git a/src/components/Stepper/Stepper.styles.tsx b/src/components/Stepper/Stepper.styles.tsx deleted file mode 100644 index 5f46673b2..000000000 --- a/src/components/Stepper/Stepper.styles.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import styled from "@emotion/styled"; - -export const Wrapper = styled.div` - display: flex; - align-items: center; - margin-top: 1rem; -`; - -export const StepItem = styled.div` - flex: 0 0 30px; - z-index: 5; - display: flex; - justify-content: center; - align-items: center; - color: #4c4e57; - width: 32px; - height: 32px; - padding: 10px; - border-radius: 10px; - background-color: #e0f3ff; - margin-bottom: 6px; - font-size: ${14 / 16}rem; - border: 1px solid #e0f3ff; - cursor: default; -`; - -export const Seperator = styled.div` - height: 2px; - flex: 1 1 0; - margin: 0 12px; - background-color: #4c4e57; -`; - -export const StepItemComplete = styled(StepItem)` - background-color: #3e4047; - path { - fill: #e0f3ff; - } -`; - -export const SeperatorComplete = styled(Seperator)` - background-color: #e0f3ff; -`; - -export const NextStepItem = styled(StepItem)` - background-color: #35343b; - color: #9daab2; - border: 1px solid #9daab2; -`; diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx deleted file mode 100644 index aab4d0607..000000000 --- a/src/components/Stepper/Stepper.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { cloneElement } from "react"; -import { Wrapper } from "./Stepper.styles"; - -import useStepper from "./useStepper"; -interface Props { - currentStep: number; - numSteps: number; -} - -const Stepper: React.FC = ({ currentStep, numSteps }) => { - const { stepItems } = useStepper(currentStep, numSteps); - return ( - - {stepItems.map((el, i) => { - return cloneElement(el, { key: i }); - })} - - ); -}; - -export default Stepper; diff --git a/src/components/Stepper/index.ts b/src/components/Stepper/index.ts deleted file mode 100644 index 7512bf9be..000000000 --- a/src/components/Stepper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./Stepper"; diff --git a/src/components/Stepper/useStepper.tsx b/src/components/Stepper/useStepper.tsx deleted file mode 100644 index f77a33d24..000000000 --- a/src/components/Stepper/useStepper.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { useState, useCallback, useEffect } from "react"; -import { - StepItem, - Seperator, - StepItemComplete, - SeperatorComplete, - NextStepItem, -} from "./Stepper.styles"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCheck } from "@fortawesome/free-solid-svg-icons"; - -export default function useStepper(currentStep: number, numSteps: number) { - const [stepItems, setStepItems] = useState([]); - const createStepsItems = useCallback(() => { - const items: JSX.Element[] = []; - for (let i = 1; i <= numSteps; i++) { - const completed = i < currentStep; - const current = i === currentStep; - let item: JSX.Element; - if (completed) { - item = ( - <> - - - - - - ); - } else if (current) { - if (currentStep === numSteps) { - item = ( - <> - {i} - - ); - } else { - item = ( - <> - {i} - - - ); - } - } else { - if (i === numSteps) { - item = ( - <> - {i} - - ); - } else { - item = ( - <> - {i} - - - ); - } - } - - items.push(item); - } - setStepItems(items); - }, [numSteps, currentStep]); - - useEffect(() => { - createStepsItems(); - }, [numSteps, createStepsItems]); - - return { - stepItems, - }; -} diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx deleted file mode 100644 index ceb89ae29..000000000 --- a/src/components/Tabs/Tab.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { FC } from "react"; -import { TabListItem } from "./Tabs.styled"; - -export interface TabProps { - activeTab: string; - "data-label": string; - onClick: (tab: string) => void; -} - -export interface ITab { - label: string; - element: JSX.Element; -} - -const Tab: FC = ({ onClick, "data-label": label, activeTab }) => { - const changeLabel = () => { - onClick(label); - }; - - let className = ""; - - if (activeTab === label) { - className = "tab-active"; - } - - return ( - - {label} - - ); -}; - -export default Tab; diff --git a/src/components/Tabs/Tabs.styled.tsx b/src/components/Tabs/Tabs.styled.tsx deleted file mode 100644 index 27c02ab6a..000000000 --- a/src/components/Tabs/Tabs.styled.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import styled from "@emotion/styled"; -import { COLORS } from "utils"; - -export const TabList = styled.ol` - margin-top: 10px; - padding-left: 0; - display: flex; - background-color: linear-gradient(#f5f5f5 86.46%, #eeeeee 100%); -`; - -export const TabListItem = styled.li` - flex-grow: 1; - list-style: none; - background-color: hsla(${COLORS.gray[500]} / 0.25); - text-align: center; - padding: 16px 0; - width: 50%; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - transition: background-color 100ms linear, opacity 100ms linear; - cursor: pointer; - &:last-of-type { - margin-left: 4px; - } - - &.tab-active { - background-color: var(--color-gray); - cursor: default; - } - - &:not(.tab-active):hover { - background-color: hsla(${COLORS.gray[500]} / 0.3); - } -`; diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx deleted file mode 100644 index c4cdfb364..000000000 --- a/src/components/Tabs/Tabs.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { FC, useState, ReactElement } from "react"; -import Tab from "./Tab"; -import { TabList } from "./Tabs.styled"; -import { TabProps } from "./Tab"; -interface Props { - children: Array>; - // If you need a default one on mount - defaultTab?: string; - // track default Tab if need be - changeDefaultTab?: (tab: string) => void; -} - -const Tabs: FC = ({ children, defaultTab, changeDefaultTab }) => { - const [activeTab, setActiveTab] = useState( - defaultTab ?? children[0].props["data-label"] - ); - - const onClickTabItem = (tab: string) => { - if (changeDefaultTab) changeDefaultTab(tab); - setActiveTab(tab); - }; - - return ( -
    - - {children.map((child) => { - return ( - - ); - })} - -
    - {children.map((child) => { - if (child.props["data-label"] !== activeTab) return undefined; - return child; - })} -
    -
    - ); -}; - -export default Tabs; diff --git a/src/components/Tabs/index.ts b/src/components/Tabs/index.ts deleted file mode 100644 index 9a31da7f1..000000000 --- a/src/components/Tabs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./Tabs"; diff --git a/src/components/TabsV2/index.tsx b/src/components/Tabs/index.tsx similarity index 100% rename from src/components/TabsV2/index.tsx rename to src/components/Tabs/index.tsx diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 4adadd5ec..39bcc6a39 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -1,6 +1,6 @@ import styled from "@emotion/styled"; -import { QUERIESV2 } from "utils"; +import { QUERIESV2, COLORS } from "utils"; type TextSize = | "4xl" @@ -70,40 +70,19 @@ const sizeMap: Record< }, }; -type TextColor = - | "white-100" - | "white-88" - | "white-70" - | "aqua" - | "error" - | "dark-grey" - | "warning" - | "grey-400" - | "teal"; - -const colorMap: Record = { - "white-100": "hsla(203, 100%, 94%)", // #E0F3FF - "white-88": "hsla(204, 30%, 83%)", // #C5D5E0 - "white-70": "hsla(203, 12%, 66%)", // "#9DAAB2" - "grey-400": "hsla(205, 13%, 66%, 1)", // "#9DAAB3" - aqua: "hsla(166, 92%, 70%)", // "#6CF9D8" - error: "hsla(0, 92%, 70%)", // "#f96c6c" - "dark-grey": "#2d2e33", - warning: "#f9d26c", - teal: "#44D2FF", -}; +export type TextColor = keyof typeof COLORS; type TextProps = { size?: TextSize; weight?: number; - color?: string; + color?: TextColor; casing?: TextCasing; }; export const Text = styled.div` font-style: normal; font-weight: ${({ weight = 400 }) => weight}; - color: ${({ color = "white-88" }) => colorMap[color as TextColor] || color}; + color: ${({ color = "white-88" }) => COLORS[color]}; font-size: ${({ size = "md" }) => `${sizeMap[size].fontSize / 16}rem`}; line-height: ${({ size = "md" }) => diff --git a/src/components/Text/index.ts b/src/components/Text/index.ts index 7afe56f37..c53caa876 100644 --- a/src/components/Text/index.ts +++ b/src/components/Text/index.ts @@ -1 +1,2 @@ export { Text } from "./Text"; +export type { TextColor } from "./Text"; diff --git a/src/components/index.ts b/src/components/index.ts index 25201c7af..9542c036c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,12 +1,9 @@ export { default as GlobalStyles } from "./GlobalStyles"; export { default as Header } from "./Header"; -export { default as Dialog } from "./Dialog"; export { default as SuperHeader } from "./SuperHeader"; -export { default as Stepper } from "./Stepper"; export { default as Banner } from "./Banner"; export { default as Sidebar } from "./Sidebar"; export { default as LayoutV2 } from "./LayoutV2"; -export { default as DotStepper } from "./DotStepper"; export { default as Modal } from "./Modal"; export { default as Alert } from "./Alert"; export { default as Selector } from "./Selector"; @@ -14,7 +11,6 @@ export { default as InputWithMaxButton } from "./InputWithMaxButton"; export { Text } from "./Text"; export { WrongNetworkHeader } from "./WrongNetworkHeader"; -export * from "./Box"; export * from "./Buttons"; export * from "./ExternalLink"; export * from "./ErrorBoundary"; diff --git a/src/stories/DotStepper.stories.tsx b/src/stories/DotStepper.stories.tsx deleted file mode 100644 index a329080b2..000000000 --- a/src/stories/DotStepper.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useState } from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; -import DotStepper from "components/DotStepper"; -import { ButtonV2 } from "components"; - -// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { - title: "DotStepper", - component: DotStepper, - argTypes: { - type: { - values: ["default", "big"], - control: { - type: "radio", - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => { - const [step, setStep] = useState(args.step); - const styles = { - display: "flex", - justifyContent: "center", - alignItems: "center", - width: "200px", - height: "60px", - }; - return ( -
    -
    - -
    -
    - - setStep((pv) => (pv >= args.numDots ? args.numDots : pv + 1)) - } - > - Increment - - setStep((pv) => (pv <= 1 ? 1 : pv - 1))} - > - Decrement - -
    -
    - ); -}; - -export const Default = Template.bind({}); -Default.args = { - numDots: 4, - step: 1, -}; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 015fdd7a1..ec04c6eba 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -67,49 +67,6 @@ export const QUERIES = { mobileAndDown: `(max-width: ${(BREAKPOINTS.tabletMin - 1) / 16}rem)`, }; -export const COLORS = { - gray: { - 100: "0deg 0% 89%", - // Hex: #F5F5F5 - 150: "0deg 0% 96%", - - // #2C2F33 - 160: "214.3deg 7.4% 18.6%", - // #27292c - 175: "216deg 6% 16.3%", - // hsl(214.3,7.4%,18.6%) - 200: "220deg 2% 72%", - // #2c2e32 - 250: "220deg 6.4% 18.4%", - 300: "240deg 4% 27%", - // #2d2e33 - 500: "230deg 6% 19%", - // #68686c - 550: "240deg 2% 42%", - // #4d4c53 - 600: "249deg 4% 31%", - }, - primary: { - // #6df8d8 - 500: "166deg 92% 70%", - // #565757 - 600: "180deg 0.6% 33.9%", - 700: "180deg 15% 25%", - }, - secondary: { - 500: "266deg 77% 62%", - }, - error: { - 500: "11deg 92% 70%", - 300: "11deg 93% 94%", - }, - // Hex: #ffffff - white: "0deg 100% 100%", - black: "0deg 0% 0%", - umaRed: "0deg 100% 65%", - purple: "267deg 77% 62%", -}; - export type ChainInfo = { name: string; fullName?: string; @@ -603,6 +560,38 @@ export const QUERIESV2 = { tb: breakpoint(BREAKPOINTS_V2.tb), }; +// See src/components/GlobalStyles/GlobalStyles.tsx for the CSS variables +export const COLORS = { + red: "var(--color-interface-red)", + yellow: "var(--color-interface-yellow)", + aqua: "var(--color-interface-aqua)", + "aqua-15": "var(--color-interface-aqua-15)", + teal: "var(--color-interface-teal)", + "teal-5": "var(--color-interface-teal-5)", + "teal-15": "var(--color-interface-teal-15)", + "black-700": "var(--color-neutrals-black-700)", + "black-800": "var(--color-neutrals-black-800)", + "black-900": "var(--color-neutrals-black-900)", + "grey-400": "var(--color-neutrals-grey-400)", + "grey-500": "var(--color-neutrals-grey-500)", + "grey-600": "var(--color-neutrals-grey-600)", + "light-100": "var(--color-neutrals-light-100)", + "light-200": "var(--color-neutrals-light-200)", + "light-300": "var(--color-neutrals-light-300)", + "white-70": "var(--tints-shades-white-70)", + "white-88": "var(--tints-shades-white-88)", + "white-100": "var(--tints-shades-white-100)", + "white-200": "var(--tints-shades-white-200)", + + // Aliases + primary: "var(--color-interface-aqua)", + brand: "var(--color-interface-aqua)", + error: "var(--color-interface-red)", + warning: "var(--color-interface-yellow)", + white: "var(--tints-shades-white-100)", + "dark-grey": "var(--color-neutrals-black-800)", +}; + export const insideStorybookRuntime = Boolean(process.env.STORYBOOK); export const rewardTiers = [ diff --git a/src/views/Airdrop/components/BreakdownRow.tsx b/src/views/Airdrop/components/BreakdownRow.tsx index 1e7f4a58d..295a8f739 100644 --- a/src/views/Airdrop/components/BreakdownRow.tsx +++ b/src/views/Airdrop/components/BreakdownRow.tsx @@ -1,14 +1,14 @@ import styled from "@emotion/styled"; import { BigNumber } from "ethers"; -import { Text } from "components/Text"; +import { Text, TextColor } from "components/Text"; import { formatUnits } from "utils/format"; type Props = { label: string | React.ReactElement; Icon?: React.ReactElement; amount?: string; - amountColor?: string; + amountColor?: TextColor; }; export const BreakdownRow = ({ diff --git a/src/views/Airdrop/components/BreakdownStats.tsx b/src/views/Airdrop/components/BreakdownStats.tsx index 7bfed7993..0f5eaf674 100644 --- a/src/views/Airdrop/components/BreakdownStats.tsx +++ b/src/views/Airdrop/components/BreakdownStats.tsx @@ -143,7 +143,7 @@ export function BreakdownStats({ Total reward - + {amount ? `${formatUnits(amount, 18)} ACX` : "-"} diff --git a/src/views/Airdrop/components/InfoCardTop.tsx b/src/views/Airdrop/components/InfoCardTop.tsx index 128004fde..10ade20b7 100644 --- a/src/views/Airdrop/components/InfoCardTop.tsx +++ b/src/views/Airdrop/components/InfoCardTop.tsx @@ -16,12 +16,12 @@ const InfoCardTop = ({ Icon, title, acxTokenAmount }: Props) => { {Icon} - + {title} - {acxTokenAmount} $ACX + {acxTokenAmount} $ACX diff --git a/src/views/Airdrop/components/MoreInfoFlow.tsx b/src/views/Airdrop/components/MoreInfoFlow.tsx index c72e56711..7b25195a1 100644 --- a/src/views/Airdrop/components/MoreInfoFlow.tsx +++ b/src/views/Airdrop/components/MoreInfoFlow.tsx @@ -22,11 +22,11 @@ export function MoreInfoFlow({ onClickBack }: Props) { {" "} - + Back - + Airdrop details diff --git a/src/views/Airdrop/components/SplashFlow.tsx b/src/views/Airdrop/components/SplashFlow.tsx index 10f36a7b8..3cc0f4f77 100644 --- a/src/views/Airdrop/components/SplashFlow.tsx +++ b/src/views/Airdrop/components/SplashFlow.tsx @@ -29,7 +29,7 @@ export const SplashFlow = ({ size="lg" disabled={isConnecting} > - + {isConnecting ? "Checking eligibility..." : "Connect to check eligibility"} diff --git a/src/views/Airdrop/components/StepCard.tsx b/src/views/Airdrop/components/StepCard.tsx index 5d359ecaa..6c698a697 100644 --- a/src/views/Airdrop/components/StepCard.tsx +++ b/src/views/Airdrop/components/StepCard.tsx @@ -47,7 +47,7 @@ export function StepCard(props: Props) { {props.showPill && ( - + {isStepCompleted ? "claimed" : props.isClaiming diff --git a/src/views/Bridge/components/TokenFee.tsx b/src/views/Bridge/components/TokenFee.tsx index 4a2bcbeb9..6c52faca3 100644 --- a/src/views/Bridge/components/TokenFee.tsx +++ b/src/views/Bridge/components/TokenFee.tsx @@ -1,12 +1,12 @@ import styled from "@emotion/styled"; -import { Text } from "components/Text"; +import { Text, TextColor } from "components/Text"; import { BigNumber } from "ethers"; import { formatUnits, TokenInfo } from "utils"; type TokenFeeProps = { token: TokenInfo; amount: BigNumber; - textColor?: string; + textColor?: TextColor; }; const TokenFee = ({ token, amount, textColor = "grey-400" }: TokenFeeProps) => ( diff --git a/src/views/LiquidityPool/LiquidityPool.tsx b/src/views/LiquidityPool/LiquidityPool.tsx index b650cc763..4c6740ccb 100644 --- a/src/views/LiquidityPool/LiquidityPool.tsx +++ b/src/views/LiquidityPool/LiquidityPool.tsx @@ -3,7 +3,7 @@ import { BigNumber, BigNumberish } from "ethers"; import { LayoutV2, WrongNetworkHeader } from "components"; import CardWrapper from "components/CardWrapper"; -import { Tabs, Tab } from "components/TabsV2"; +import { Tabs, Tab } from "components/Tabs"; import { formatNumberMaxFracDigits, formatUnits, diff --git a/src/views/Referrals/comp/RewardBreakdown/RewardBreakdown.styles.tsx b/src/views/Referrals/comp/RewardBreakdown/RewardBreakdown.styles.tsx deleted file mode 100644 index cdb686f4d..000000000 --- a/src/views/Referrals/comp/RewardBreakdown/RewardBreakdown.styles.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import styled from "@emotion/styled"; -import { ReactComponent as GithubLogo } from "assets/github-logo.svg"; -import { SecondaryButtonWithoutShadow } from "components/Buttons"; -import { QUERIES } from "utils"; - -export const RewardBreakdownSection = styled.section` - width: 100%; -`; - -export const RewardBlockWrapper = styled.div` - display: flex; - width: 100%; - gap: 24px; - flex-direction: row; - width: 100%; - justify-content: space-between; - @media ${QUERIES.tabletAndDown} { - flex-direction: column; - margin: 0 auto; - width: 95%; - } -`; - -export const RewardBlockItem = styled.div` - background-color: #3e4047; - flex-basis: 49%; - padding: 1rem 1.5rem; - @media ${QUERIES.tabletAndDown} { - flex-basis: 85%; - } -`; - -export const RewardsDollarSignLogo = styled(GithubLogo)` - height: 24px; - width: 24px; -`; - -export const RewardBlockItemTopRow = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - > div:first-of-type { - svg { - margin-bottom: -6px; - height: 26px; - width: 26px; - margin-right: 8px; - } - span { - display: inline-block; - height: 100%; - font-size: 1.125rem; - } - } -`; -export const BreakdownButton = styled(SecondaryButtonWithoutShadow)` - background-color: #34353b; - height: 40px; - display: flex; - align-items: center; - color: #c5d5e0; - font-size: 1rem; - svg { - margin-left: 12px; - height: 14px; - } - &:hover { - color: var(--color-white); - } -`; - -export const RewardBlockBottomRow = styled.div` - margin-top: 8px; - display: flex; - flex-direction: column; - column-gap: 10px; -`; - -export const RewardAmountLarge = styled.div` - font-size: 2rem; - color: var(--color-primary); -`; - -export const RewardAmountSmall = styled.div` - font-size: 1rem; - color: #9daab2; -`; - -export const InfoButtonRow = styled.div` - display: block; - overflow-x: scroll; - width: 100%; - white-space: nowrap; - - ::-webkit-scrollbar { - height: 6px; - } -`; - -export const InfoButton = styled(BreakdownButton)` - border: 1px solid #9daab2; - display: inline-block; - margin: 0 6px; - padding: 8px; - svg { - margin-left: 0; - margin-right: 8px; - } - &:hover { - span { - color: var(--color-white); - } - } -`; - -export const AllQuestionsButton = styled(BreakdownButton)` - border: 1px solid #9daab2; - display: inline-block; - margin: 0 6px; - padding: 8px; - - &:hover { - span { - color: var(--color-white); - } - } -`; diff --git a/src/views/Referrals/comp/RewardBreakdown/RewardBreakdown.tsx b/src/views/Referrals/comp/RewardBreakdown/RewardBreakdown.tsx deleted file mode 100644 index dc00e98cf..000000000 --- a/src/views/Referrals/comp/RewardBreakdown/RewardBreakdown.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { - RewardBreakdownSection, - RewardBlockWrapper, - RewardBlockItem, - RewardsDollarSignLogo, - BreakdownButton, - RewardBlockItemTopRow, - RewardBlockBottomRow, - RewardAmountLarge, - RewardAmountSmall, - InfoButtonRow, - InfoButton, - AllQuestionsButton, -} from "./RewardBreakdown.styles"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faChevronRight, - faInfoCircle, -} from "@fortawesome/free-solid-svg-icons"; - -const RewardBreakdown = () => { - return ( - <> - - - - -
    - ACX Rewards -
    -
    - -
    - Breakdown - -
    -     -
    -     - - $321.24 - 82.431 ACX - -     - - -
    - Staked LP Tokens -
    -
    - -
    -     - - $15.125.54 - - 12,142.24 USDC, 1.2424 ETH +1 - - -     -     -     - {/* Note: these will be links. Design / PM to provide links later. */} - - - - How do I earn more ACX? - - - - How do multipliers work? - - - - How is the reward APY calculated? - - - All questions - - - - - ); -}; - -export default RewardBreakdown; diff --git a/src/views/Referrals/comp/RewardBreakdown/index.ts b/src/views/Referrals/comp/RewardBreakdown/index.ts deleted file mode 100644 index a40302921..000000000 --- a/src/views/Referrals/comp/RewardBreakdown/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./RewardBreakdown"; diff --git a/src/views/Referrals/comp/RewardHero/RewardHero.styles.tsx b/src/views/Referrals/comp/RewardHero/RewardHero.styles.tsx deleted file mode 100644 index 3a490a1e7..000000000 --- a/src/views/Referrals/comp/RewardHero/RewardHero.styles.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import styled from "@emotion/styled"; -import { ReactComponent as GithubLogo } from "assets/github-logo.svg"; -import { SecondaryButtonWithoutShadow } from "components/Buttons"; -import { QUERIES } from "utils"; - -export const Wrapper = styled.div` - width: 100%; - background-color: var(--color-primary); - - @media ${QUERIES.tabletAndDown} { - } -`; - -export const GiftIcon = styled(GithubLogo)` - height: 32px; - width: 32px; - path { - fill: var(--color-gray); - } -`; - -export const Header = styled.h2` - color: var(--color-gray); - font-size: 1.5rem; - font-weight: 600; - margin-top: 1rem; -`; - -export const SubHeader = styled.h3` - color: var(--color-gray); - font-size: 1rem; - margin-top: 1rem; - font-weight: 400; -`; - -export const HeroButton = styled(SecondaryButtonWithoutShadow)` - background-color: #2d2e33; - color: var(--color-primary); - margin-top: 1.5rem; - margin-bottom: 1.5rem; - &:hover { - color: var(--color-white); - } -`; diff --git a/src/views/Referrals/comp/RewardHero/RewardHero.tsx b/src/views/Referrals/comp/RewardHero/RewardHero.tsx deleted file mode 100644 index c3304c371..000000000 --- a/src/views/Referrals/comp/RewardHero/RewardHero.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { - Wrapper, - GiftIcon, - Header, - SubHeader, - HeroButton, -} from "./RewardHero.styles"; - -const RewardHero = () => { - return ( - - -
    Across Airdrop
    - - If you've been a part of the the Across Community, -
    there's a chance that you're eligible for the airdrop. -     - Check eligibility -     - ); -}; - -export default RewardHero; diff --git a/src/views/Referrals/comp/RewardHero/index.ts b/src/views/Referrals/comp/RewardHero/index.ts deleted file mode 100644 index 20811f6c5..000000000 --- a/src/views/Referrals/comp/RewardHero/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./RewardHero"; diff --git a/src/views/Referrals/comp/index.ts b/src/views/Referrals/comp/index.ts index c0c11ed04..791ba4ecb 100644 --- a/src/views/Referrals/comp/index.ts +++ b/src/views/Referrals/comp/index.ts @@ -1,5 +1,3 @@ -export { default as RewardBreakdown } from "./RewardBreakdown"; -export { default as RewardHero } from "./RewardHero"; export { default as RewardTable } from "../../../components/RewardTable"; export { default as RewardReferral } from "./RewardReferral"; export { default as ConnectTableOverlay } from "./ConnectTableOverlay"; diff --git a/src/views/Staking/components/StakingForm/StakingForm.tsx b/src/views/Staking/components/StakingForm/StakingForm.tsx index 026f7671d..1905242e2 100644 --- a/src/views/Staking/components/StakingForm/StakingForm.tsx +++ b/src/views/Staking/components/StakingForm/StakingForm.tsx @@ -16,7 +16,7 @@ import { } from "./StakingForm.styles"; import { Tooltip } from "components/Tooltip"; -import { Tab, Tabs } from "components/TabsV2"; +import { Tab, Tabs } from "components/Tabs"; import StakingInputBlock from "../StakingInputBlock"; import { StakingFormPropType } from "../../types"; import { repeatableTernaryBuilder } from "utils/ternary"; @@ -82,7 +82,7 @@ export const StakingForm = ({ setIsPoolInfoVisible(false); }, [isConnected]); - const activeColor = "white-" + (amount && isAmountValid ? 100 : 70); + const activeColor = amount && isAmountValid ? "white-100" : "white-70"; const lpFmt = poolData.lpTokenFormatter; const isStakingPoolEnabled = poolData.poolEnabled; @@ -96,7 +96,7 @@ export const StakingForm = ({ > Stake @@ -107,7 +107,7 @@ export const StakingForm = ({ > Unstake diff --git a/src/views/Staking/components/StakingReward/StakingReward.tsx b/src/views/Staking/components/StakingReward/StakingReward.tsx index 908fbd686..f9d1efa97 100644 --- a/src/views/Staking/components/StakingReward/StakingReward.tsx +++ b/src/views/Staking/components/StakingReward/StakingReward.tsx @@ -16,8 +16,6 @@ export const StakingReward = ({ claimActionHandler, isMutating, }: StakingRewardPropType) => { - const activeColor = "white-" + (outstandingRewards.gt(0) ? 100 : 70); - const valueOrEmpty = repeatableTernaryBuilder( isConnected && BigNumber.from(outstandingRewards).gt(0), <>- @@ -37,7 +35,9 @@ export const StakingReward = ({ Claimable rewards {valueOrEmpty( - + {formatEther(outstandingRewards)} ACX )} diff --git a/src/views/Transactions/components/FillTxInfoModal.tsx b/src/views/Transactions/components/FillTxInfoModal.tsx index b21ee92d7..88e49df04 100644 --- a/src/views/Transactions/components/FillTxInfoModal.tsx +++ b/src/views/Transactions/components/FillTxInfoModal.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "@emotion/styled"; import { X } from "react-feather"; import { DialogContent, DialogOverlay } from "@reach/dialog"; -import { COLORS, QUERIES } from "utils"; +import { QUERIES } from "utils"; interface Props { isOpen: boolean; @@ -93,7 +93,7 @@ const Overlay = styled(DialogOverlay)` left: 0; right: 0; bottom: 0; - background-color: hsla(${COLORS.gray[500]} / 0.9); + background-color: hsla(var(--color-gray) / 0.9); display: flex; justify-content: center; align-items: flex-start; diff --git a/src/views/Transactions/components/FillTxsListModal.tsx b/src/views/Transactions/components/FillTxsListModal.tsx index 53eca2426..a7c111841 100644 --- a/src/views/Transactions/components/FillTxsListModal.tsx +++ b/src/views/Transactions/components/FillTxsListModal.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "@emotion/styled"; import { X } from "react-feather"; import { DialogContent, DialogOverlay } from "@reach/dialog"; -import { COLORS, QUERIES } from "utils"; +import { QUERIES } from "utils"; import { TxLink } from "../types"; @@ -104,7 +104,7 @@ const Overlay = styled(DialogOverlay)` left: 0; right: 0; bottom: 0; - background-color: hsla(${COLORS.gray[500]} / 0.9); + background-color: hsla(var(--color-gray) / 0.9); display: flex; justify-content: center; align-items: flex-start;