From 91f7cc852fb6ef2523f3ac6a39e31b1c1ada6094 Mon Sep 17 00:00:00 2001 From: pociej Date: Tue, 6 Feb 2024 07:19:21 +0100 Subject: [PATCH 1/3] feat: add animated text component --- frontend/src/app/app.tsx | 3 + .../components/atoms/translation/Trans.tsx | 26 ++--- .../molecules/animateText/AnimatedText.tsx | 96 +++++++++++++++++++ .../onboarding/steps/SwapTokens.step.tsx | 2 +- .../onboarding/steps/Welcome.step.tsx | 6 ++ .../organisms/tooltip/InfoTooltip.tsx | 2 +- .../pages/onboarding/getStepRenderDetails.tsx | 16 +++- .../pages/onboarding/onboarding.tsx | 1 - .../pages/playground/Playground.tsx | 49 ++++++++++ .../themes/defaultTheme/Step.template.tsx | 72 +++++++++++--- .../defaultTheme/step.template.module.css | 1 + frontend/src/i18n/en/connectWallet.step.json | 10 +- frontend/src/i18n/en/welcome.step.json | 34 +++---- 13 files changed, 258 insertions(+), 60 deletions(-) create mode 100644 frontend/src/components/molecules/animateText/AnimatedText.tsx create mode 100644 frontend/src/components/pages/playground/Playground.tsx diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx index 602a804..f96a438 100644 --- a/frontend/src/app/app.tsx +++ b/frontend/src/app/app.tsx @@ -16,6 +16,8 @@ import { import { OnboardingPage } from 'components/pages' import { TooltipProvider } from 'components/providers/Tooltip.provider' import { useRouteControl } from 'hooks/useRouteControl' +import { AnimatedText } from 'components/molecules/animateText/AnimatedText' +import { Playground } from 'components/pages/playground/Playground' const Onboarding = () => { const location = useLocation() @@ -48,6 +50,7 @@ const Onboarding = () => { } > + } /> ) diff --git a/frontend/src/components/atoms/translation/Trans.tsx b/frontend/src/components/atoms/translation/Trans.tsx index cd252cd..384fdfc 100644 --- a/frontend/src/components/atoms/translation/Trans.tsx +++ b/frontend/src/components/atoms/translation/Trans.tsx @@ -1,5 +1,5 @@ import { Trans as TransComponent } from 'react-i18next' -import { ComponentProps, PropsWithChildren } from 'react' +import { ComponentProps } from 'react' import { EthereumIcon, GolemSmallIcon, @@ -12,26 +12,15 @@ import { import { UniswapIcon } from '../icons/uniswap.icon' import { WalletIcon } from 'components/molecules/walletIcon/WalletIcon' -export const LinkText = ( - props: PropsWithChildren<{ to: string; title: string }> -) => { - return ( - - {props.children} - - ) -} - -export const Trans = (props: ComponentProps) => { +export const Trans = ({ + components, + ...rest +}: ComponentProps) => { return ( , b: , red:
, @@ -57,7 +46,6 @@ export const Trans = (props: ComponentProps) => { ), UniswapIcon: , RampIcon: , - ...props.components, Heart: , walletIcon: , }} diff --git a/frontend/src/components/molecules/animateText/AnimatedText.tsx b/frontend/src/components/molecules/animateText/AnimatedText.tsx new file mode 100644 index 0000000..472a47e --- /dev/null +++ b/frontend/src/components/molecules/animateText/AnimatedText.tsx @@ -0,0 +1,96 @@ +import { Trans as TransComponent } from 'components/atoms/translation/Trans' +import i18next from 'i18next' +import { + ComponentProps, + MutableRefObject, + PropsWithChildren, + useEffect, + useLayoutEffect, + useRef, +} from 'react' +import { motion, useAnimation } from 'framer-motion' + +i18next.use({ + type: 'postProcessor', + name: 'wrapWords', + process: function (value: string) { + const regex = + /(?<=\s|^)([a-zA-Z0-9]+(?:[.,']?[a-zA-Z0-9]+)*[.,?!]?)(?=\s|$)/g + + let index = 0 + return value.replace(regex, (match) => { + return match + .split('') + .map((x) => { + return `${x}` + }) + .join('') + }) + }, +}) + +const itemVariants = { + hidden: (delayRef: MutableRefObject) => ({ + opacity: 0, + scale: 0, + transition: { delay: delayRef.current, duration: 0.5 }, + }), + visible: (delayRef: MutableRefObject) => ({ + opacity: 1, + scale: 1, + transition: { delay: delayRef.current, duration: 0.5 }, + }), +} + +const Word = function Word({ + children, + originIndex, + originOffset, +}: PropsWithChildren<{ + originIndex: number + originOffset: MutableRefObject<{ top: number; left: number; count: number }> +}>) { + const delayRef = useRef(Math.random() * 0.5) + const ref = useRef(null) + + return ( + + {children} + + ) +} +export const AnimatedText = ( + props: ComponentProps & { + visibility: 'visible' | 'hidden' + } +) => { + const originOffset = useRef({ top: 0, left: 0, count: 0 }) + const controls = useAnimation() + + useEffect(() => { + if (props.visibility === 'visible') { + controls.start('visible') + } else if (props.visibility === 'hidden') { + controls.start('hidden') + } + }, [props.visibility]) + + return ( + + + ), + }} + /> + + ) +} diff --git a/frontend/src/components/organisms/onboarding/steps/SwapTokens.step.tsx b/frontend/src/components/organisms/onboarding/steps/SwapTokens.step.tsx index eebd06c..8ea3e7e 100644 --- a/frontend/src/components/organisms/onboarding/steps/SwapTokens.step.tsx +++ b/frontend/src/components/organisms/onboarding/steps/SwapTokens.step.tsx @@ -7,7 +7,7 @@ import { useEffect, useState } from 'react' import { useNetwork } from 'hooks/useNetwork' import { useSwapEthForGlm } from 'hooks/useSwapEthForGlm' import { formatEther } from 'utils/formatEther' -import { parseEther, parseUnits } from 'viem' +import { parseUnits } from 'viem' import { TooltipProvider } from 'components/providers/Tooltip.provider' import { IconInput } from 'components/atoms/iconInput/IconInput' import { MaticCoinIcon } from 'components/atoms/icons' diff --git a/frontend/src/components/organisms/onboarding/steps/Welcome.step.tsx b/frontend/src/components/organisms/onboarding/steps/Welcome.step.tsx index 6d90553..87fc42e 100644 --- a/frontend/src/components/organisms/onboarding/steps/Welcome.step.tsx +++ b/frontend/src/components/organisms/onboarding/steps/Welcome.step.tsx @@ -50,11 +50,14 @@ const RecommendationCards = [ const WelcomePresentational = ({ setIsCompleted, shouldCheckLegal, + goToNextStep, }: { setIsCompleted: (isCompleted: boolean) => void shouldCheckLegal: boolean + goToNextStep: () => void }) => { const { state, send } = useOnboarding() + window.gtns = goToNextStep return ( <> @@ -88,14 +91,17 @@ const WelcomePresentational = ({ } export const Welcome = ({ + goToNextStep, setIsCompleted, isNextCalled, }: { + goToNextStep: () => void setIsCompleted: (isCompleted: boolean) => void isNextCalled: boolean }) => { return ( diff --git a/frontend/src/components/organisms/tooltip/InfoTooltip.tsx b/frontend/src/components/organisms/tooltip/InfoTooltip.tsx index 615a3fb..01f5961 100644 --- a/frontend/src/components/organisms/tooltip/InfoTooltip.tsx +++ b/frontend/src/components/organisms/tooltip/InfoTooltip.tsx @@ -37,7 +37,7 @@ export const InfoTooltipTrigger = ({ return (
{ appearance === 'primary' ? tooltip.toggle?.() : '' }} diff --git a/frontend/src/components/pages/onboarding/getStepRenderDetails.tsx b/frontend/src/components/pages/onboarding/getStepRenderDetails.tsx index 790709c..87b5b87 100644 --- a/frontend/src/components/pages/onboarding/getStepRenderDetails.tsx +++ b/frontend/src/components/pages/onboarding/getStepRenderDetails.tsx @@ -17,6 +17,7 @@ import { TokensOrnament } from 'components/atoms/ornaments/tokens' import { WalletIconGreen } from 'components/atoms/ornaments/walletIconGreen' import { StepWithProgress } from 'components/templates/themes/defaultTheme/StepWithProgress' import { StepTemplate } from 'components/templates/themes/defaultTheme/Step.template' +import { motion } from 'framer-motion' const componentByStep: Record< StepType, @@ -41,7 +42,20 @@ const componentByStep: Record< [Step.CONNECT_WALLET]: { component: ConnectWallet, placement: 'inside', - ornament: TokensOrnament, + ornament: () => { + return ( + + + + ) + }, }, [Step.CHOOSE_NETWORK]: { component: ChooseNetwork, diff --git a/frontend/src/components/pages/onboarding/onboarding.tsx b/frontend/src/components/pages/onboarding/onboarding.tsx index ba63d78..e6a245b 100644 --- a/frontend/src/components/pages/onboarding/onboarding.tsx +++ b/frontend/src/components/pages/onboarding/onboarding.tsx @@ -8,7 +8,6 @@ export const OnboardingPage = () => { const LayoutTemplate = theme.getLayoutTemplate() const { state } = useOnboarding() const StepComponent = getStepDetails(state.value as StepType) - console.log('StepComponent', StepComponent) return ( <> {StepComponent} diff --git a/frontend/src/components/pages/playground/Playground.tsx b/frontend/src/components/pages/playground/Playground.tsx new file mode 100644 index 0000000..ac1110a --- /dev/null +++ b/frontend/src/components/pages/playground/Playground.tsx @@ -0,0 +1,49 @@ +import { Button } from 'components/atoms' +import { AnimatedText } from 'components/molecules/animateText/AnimatedText' +import { useState } from 'react' + +export const Playground = () => { + const [key, setKey] = useState('title') + const [visibility, setVisibility] = useState<'visible' | 'hidden'>('visible') + return ( + <> +
+ +
+ + + + + + + + ) +} diff --git a/frontend/src/components/templates/themes/defaultTheme/Step.template.tsx b/frontend/src/components/templates/themes/defaultTheme/Step.template.tsx index c5a8811..dac64d1 100644 --- a/frontend/src/components/templates/themes/defaultTheme/Step.template.tsx +++ b/frontend/src/components/templates/themes/defaultTheme/Step.template.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react' +import { FC, useEffect, useState } from 'react' import globalStyle from 'styles/global.module.css' import templateStyle from './step.template.module.css' import { StepRenderDetailsType } from 'types/ui' @@ -10,6 +10,9 @@ import { import { useOnboarding } from 'hooks/useOnboarding' import { Commands } from 'state/commands' import { RightDot } from 'components/atoms/ornaments/rightDot' +import { motion } from 'framer-motion' +import { AnimatedText } from 'components/molecules/animateText/AnimatedText' +import { set } from 'lodash' // import { SuccessIcon, TrustStackedIcon } from 'components/atoms/icons' const style = { @@ -29,25 +32,41 @@ export const StepTemplate: FC = function ( placement, name, showNextButton, - title: TitleComponent = () => { - return - }, - subtitle: SubtitleComponent = () => { - return - }, + title, + subtitle, } = stepRenderDetails const [isReadyForNextStep, setIsReadyForNextStep] = useState(true) const [isNextCalled, setIsNextCalled] = useState(false) const { send } = useOnboarding() - const namespace = `${name}.step` + const [namespace, setNamespace] = useState(`${name}.step`) + + const [textVisible, setTextVisible] = useState(true) + + useEffect(() => { + setTextVisible(!textVisible) + setTimeout(() => { + setTextVisible(textVisible) + setNamespace(`${name}.step`) + }, 1000) + }, [name]) + return (
-
- -
+ + +
{OrnamentComponent ? : ''}
@@ -60,11 +79,30 @@ export const StepTemplate: FC = function (
- + {' '}
-
+ -
+
@@ -72,7 +110,11 @@ export const StepTemplate: FC = function (
- + {' '}
{placement === 'inside' ? ( diff --git a/frontend/src/components/templates/themes/defaultTheme/step.template.module.css b/frontend/src/components/templates/themes/defaultTheme/step.template.module.css index 8251d8c..173ed79 100644 --- a/frontend/src/components/templates/themes/defaultTheme/step.template.module.css +++ b/frontend/src/components/templates/themes/defaultTheme/step.template.module.css @@ -56,4 +56,5 @@ .tooltipTriggerContainer { font-size: 48px; margin-left:auto; + transition: all; } \ No newline at end of file diff --git a/frontend/src/i18n/en/connectWallet.step.json b/frontend/src/i18n/en/connectWallet.step.json index c783852..f5a110e 100644 --- a/frontend/src/i18n/en/connectWallet.step.json +++ b/frontend/src/i18n/en/connectWallet.step.json @@ -1,7 +1,7 @@ { - "title" : "It's time to set up your digital wallet. Let us guide you through each step!", - "subtitle" : "Set up a digital wallet ", - "description" : "Based on this step, we will tailor the remaining process to your needs", - "legal.walletConnect" : "We are using WalletConnect Protocol. See the Privacy Policy and ToS", - "connectWallet" : "Connect/Create wallet" + "title": "It's time to set up your digital wallet. Let us guide you through each step!", + "subtitle": "Set up a digital wallet ", + "description": "Based on this step, we will tailor the remaining process to your needs", + "legal.walletConnect": "We are using WalletConnect Protocol. See the Privacy Policy and ToS", + "connectWallet": "Connect/Create wallet" } \ No newline at end of file diff --git a/frontend/src/i18n/en/welcome.step.json b/frontend/src/i18n/en/welcome.step.json index cfdb6ff..a11799b 100644 --- a/frontend/src/i18n/en/welcome.step.json +++ b/frontend/src/i18n/en/welcome.step.json @@ -1,33 +1,33 @@ { - "title": "Welcome on board! You’re just a few clicks away from getting a new computing power.", + "title": "Welcome on board! You're just a few clicks away from getting a new computing power.", "subtitle": "Use our recommendations", - "description": "Check out the estimates to determine how many tokens you need. Based on your selection, we'll assist you in acquiring the correct amount of tokens in the next steps.(Estimates may vary depending on prices and hardware quoted by providers and the calculations given are approximate.)", - "cards" : { - "playAround" : { + "description": "Check out the estimates to determine how many tokens you need. Based on your selection, we'll assist you in acquiring the correct amount of tokens in the next steps. Estimates may vary depending on prices and hardware quoted by providers and the calculations given are approximate.", + "cards": { + "playAround": { "title": "Play around", "description": "Just enough to learn what Golem has to offer, try out our multiple tools and examples or even start working on your own idea." }, - "compute" : { + "compute": { "title": "Compute", "description": "Perfect for longer ad hoc computation requests or if you would like to develop and test your app idea on top of Golem" - }, - "ambitious" : { + }, + "ambitious": { "title": "Ambitious", "description": "Amount suitable for more ambitious projects built on top or Golem like long running services" - }, - "custom" : { + }, + "custom": { "title": "Custom", - "cost" : "You can allocate as much money as you want in the next steps .", + "cost": "You can allocate as much money as you want in the next steps .", "description": "Ideal if you know how much computing power you need for sure. " } }, "coversComputing": "Covers computing", "coversFees": "Covers transaction costs", - "around" : "Around", - "machineDescription" : "of full 48 threads usage for sample computer with AMD Ryzen Threadripper 3960X 24-Core Processor, 128 GB RAM, 600 GB Disk space", - "for" : "for", - "disclaimer" : "Option to revert your tokens back to traditional currency is always available to you via and solution. Please keep in mind that, just like traditional currencies, the prices of tokens are estimates and can vary based on market values and the current usage of the blockchain network.", - "legal.thirdParty" : "I acknowledge and agree that the Site contains links to third-party services (More) * ", - "legal.termsAndConditions" : "I agree with Terms and Conditions * ", - "legal.error" : "To continue, you must accept the legal terms" + "around": "Around", + "machineDescription": "of full 48 threads usage for sample computer with AMD Ryzen Threadripper 3960X 24-Core Processor, 128 GB RAM, 600 GB Disk space", + "for": "for", + "disclaimer": "Option to revert your tokens back to traditional currency is always available to you via and solution. Please keep in mind that, just like traditional currencies, the prices of tokens are estimates and can vary based on market values and the current usage of the blockchain network.", + "legal.thirdParty": "I acknowledge and agree that the Site contains links to third-party services (More) * ", + "legal.termsAndConditions": "I agree with Terms and Conditions * ", + "legal.error": "To continue, you must accept the legal terms" } \ No newline at end of file From b7a8646e9d47c3e05d5dda7ecef12f5768df3f12 Mon Sep 17 00:00:00 2001 From: pociej Date: Tue, 6 Feb 2024 09:17:57 +0100 Subject: [PATCH 2/3] feat: animation between steps --- frontend/src/app/app.tsx | 8 ++ .../molecules/budgetCard/BudgetCard.tsx | 5 +- .../src/components/molecules/legal/Legal.tsx | 15 +++- .../molecules/useCaseCard/Card.module.css | 4 +- .../onboarding/steps/ChooseNetwork.step.tsx | 20 ++++- .../onboarding/steps/OnRamp.step.tsx | 10 ++- .../onboarding/steps/Welcome.step.tsx | 29 ++++++- .../themes/defaultTheme/Layout.template.tsx | 2 +- .../themes/defaultTheme/Step.template.tsx | 77 +++++++++++-------- .../themes/defaultTheme/StepWithProgress.tsx | 14 +++- .../defaultTheme/step.template.module.css | 2 +- frontend/src/hooks/useOnboarding.ts | 4 +- frontend/src/hooks/useRouteControl.ts | 6 +- frontend/src/state/machine.ts | 1 + 14 files changed, 146 insertions(+), 51 deletions(-) diff --git a/frontend/src/app/app.tsx b/frontend/src/app/app.tsx index f96a438..543f584 100644 --- a/frontend/src/app/app.tsx +++ b/frontend/src/app/app.tsx @@ -50,6 +50,14 @@ const Onboarding = () => { } > + + + + } + > } /> diff --git a/frontend/src/components/molecules/budgetCard/BudgetCard.tsx b/frontend/src/components/molecules/budgetCard/BudgetCard.tsx index 6fff2cd..a266a30 100644 --- a/frontend/src/components/molecules/budgetCard/BudgetCard.tsx +++ b/frontend/src/components/molecules/budgetCard/BudgetCard.tsx @@ -16,6 +16,7 @@ import { InfoTooltip, InfoTooltipTrigger, } from 'components/organisms/tooltip/InfoTooltip' +import { motion } from 'framer-motion' export const BudgetCard = ({ id, Icon, @@ -53,7 +54,7 @@ export const BudgetCard = ({ const maticCoinsCount = Math.ceil(maticCost / maticCoinValue) return ( -
{ selectBudget() @@ -144,6 +145,6 @@ export const BudgetCard = ({
-
+ ) } diff --git a/frontend/src/components/molecules/legal/Legal.tsx b/frontend/src/components/molecules/legal/Legal.tsx index 3f92c56..1e3042f 100644 --- a/frontend/src/components/molecules/legal/Legal.tsx +++ b/frontend/src/components/molecules/legal/Legal.tsx @@ -1,6 +1,7 @@ import { Checkbox } from 'components/atoms/checkbox' import { FC, useEffect, useState } from 'react' import { Trans } from 'components/atoms' +import { motion } from 'framer-motion' export const Legal: FC<{ setIsCompleted: (isCompleted: boolean) => void @@ -36,7 +37,17 @@ export const Legal: FC<{ ]) return ( -
+ (
@@ -73,6 +84,6 @@ export const Legal: FC<{ ) : ( '' )} -
+ ) } diff --git a/frontend/src/components/molecules/useCaseCard/Card.module.css b/frontend/src/components/molecules/useCaseCard/Card.module.css index 3499ba8..341ed51 100644 --- a/frontend/src/components/molecules/useCaseCard/Card.module.css +++ b/frontend/src/components/molecules/useCaseCard/Card.module.css @@ -76,7 +76,7 @@ color: var(--neutrals-gray-400, #1D222D); padding: 9px 4px; align-items: center; gap: 13px; - border-radius: 3px 3px 0px 0px; + border-radius: 3px; border-bottom: 1px solid var(--primary-blue-500, #181EA9); color: var(--primary-blue-500, #181EA9); line-height: 16px; @@ -88,7 +88,7 @@ color: var(--neutrals-gray-400, #1D222D); display: flex; align-items: center; gap: 13px; - border-radius: 3px 3px 0px 0px; + border-radius: 3px; border-bottom: 1px solid var(--primary-blue-500, #181EA9); } diff --git a/frontend/src/components/organisms/onboarding/steps/ChooseNetwork.step.tsx b/frontend/src/components/organisms/onboarding/steps/ChooseNetwork.step.tsx index af6f364..864789a 100644 --- a/frontend/src/components/organisms/onboarding/steps/ChooseNetwork.step.tsx +++ b/frontend/src/components/organisms/onboarding/steps/ChooseNetwork.step.tsx @@ -11,6 +11,7 @@ import { Button, Trans } from 'components/atoms' import { useOnboarding } from 'hooks/useOnboarding' import { Commands } from 'state/commands' import { hexToNumber } from 'viem/utils' +import { motion } from 'framer-motion' TooltipProvider.registerTooltip({ id: 'chooseNetwork', @@ -30,7 +31,22 @@ const ChooseNetworkPresentational = ({ selectedNetwork: NetworkType }) => { return ( -
+ onSelect={({ itemId }) => { onNetworkSelection(itemId) @@ -82,7 +98,7 @@ const ChooseNetworkPresentational = ({
-
+ ) } diff --git a/frontend/src/components/organisms/onboarding/steps/OnRamp.step.tsx b/frontend/src/components/organisms/onboarding/steps/OnRamp.step.tsx index 5c26f82..0c15e88 100644 --- a/frontend/src/components/organisms/onboarding/steps/OnRamp.step.tsx +++ b/frontend/src/components/organisms/onboarding/steps/OnRamp.step.tsx @@ -16,6 +16,7 @@ import { RecommendationCardOnRamp } from 'components/molecules/recommendationCar import { BudgetOption } from 'types/dataContext' import { useOnboarding } from 'hooks/useOnboarding' import { settings } from 'settings' +import { AnimatedText } from 'components/molecules/animateText/AnimatedText' const log = debug('onboarding:steps:onramp') @@ -38,11 +39,16 @@ enum TransactionState { COMPLETED, } -export const OnRampTitleComponent = () => { +export const OnRampTitleComponent = (visibility: 'hidden' | 'visible') => { const { chain } = useNetwork() return ( <> - + ) } diff --git a/frontend/src/components/organisms/onboarding/steps/Welcome.step.tsx b/frontend/src/components/organisms/onboarding/steps/Welcome.step.tsx index c73cd32..e30e13e 100644 --- a/frontend/src/components/organisms/onboarding/steps/Welcome.step.tsx +++ b/frontend/src/components/organisms/onboarding/steps/Welcome.step.tsx @@ -12,6 +12,7 @@ import { Commands } from 'state/commands' import { Trans } from 'components/atoms' import welcomeStepStyle from './Welcome.step.module.css' import { Legal } from 'components/molecules/legal/Legal' +import { AnimatePresence, motion } from 'framer-motion' const style = { ...welcomeStepStyle, @@ -61,7 +62,17 @@ const WelcomePresentational = ({ return ( <> -
+ {/* cards */} {BudgetCards.map((card) => { return { @@ -78,10 +89,20 @@ const WelcomePresentational = ({ }} selected={state.context.budget === BudgetOption.CUSTOM} /> -
-
+ + -
+ = ({ >
-
+
= function ( stepRenderDetails: StepRenderDetailsType ) { const { - layout: LayoutComponent, main: MainComponent, + layout: LayoutComponent, ornament: OrnamentComponent, placement, name, @@ -37,14 +38,23 @@ export const StepTemplate: FC = function ( const [isNextCalled, setIsNextCalled] = useState(false) const { send } = useOnboarding() const [namespace, setNamespace] = useState(`${name}.step`) - + const { chain } = useNetwork() const [textVisible, setTextVisible] = useState(true) + const [componentPlacement, setComponentPlacement] = useState('') + useEffect(() => { + setComponentPlacement('') + setTimeout(() => { + setComponentPlacement(placement) + }, 1000) + }, [placement]) + // eslint-disable-next-line @typescript-eslint/no-explicit-any useEffect(() => { setTextVisible(!textVisible) setTimeout(() => { setTextVisible(textVisible) setNamespace(`${name}.step`) + // setMainComponent(stepRenderDetails.main) }, 1000) }, [name]) @@ -56,7 +66,7 @@ export const StepTemplate: FC = function (
-
+
= function ( i18nKey="title" ns={namespace} visibility={textVisible ? 'visible' : 'hidden'} + values={{ chain: chain?.name }} />
@@ -119,37 +130,41 @@ export const StepTemplate: FC = function ( />{' '}
- {placement === 'inside' ? ( - - { - send(Commands.NEXT) - }} - /> - - ) : ( - '' - )} + + {componentPlacement === 'inside' ? ( + + { + send(Commands.NEXT) + }} + /> + + ) : ( + '' + )} +
- {placement === 'outside' ? ( - - { - send(Commands.NEXT) - }} - /> - - ) : ( - '' - )} + + {componentPlacement === 'outside' ? ( + + { + send(Commands.NEXT) + }} + /> + + ) : ( + '' + )} + -
+
{showNextButton ? (
diff --git a/frontend/src/i18n/en/welcome.step.json b/frontend/src/i18n/en/welcome.step.json index a11799b..a574683 100644 --- a/frontend/src/i18n/en/welcome.step.json +++ b/frontend/src/i18n/en/welcome.step.json @@ -27,7 +27,9 @@ "machineDescription": "of full 48 threads usage for sample computer with AMD Ryzen Threadripper 3960X 24-Core Processor, 128 GB RAM, 600 GB Disk space", "for": "for", "disclaimer": "Option to revert your tokens back to traditional currency is always available to you via and solution. Please keep in mind that, just like traditional currencies, the prices of tokens are estimates and can vary based on market values and the current usage of the blockchain network.", - "legal.thirdParty": "I acknowledge and agree that the Site contains links to third-party services (More) * ", + "legal.thirdParty": "I acknowledge and agree that the Site contains links to third-party services (More) * ", "legal.termsAndConditions": "I agree with Terms and Conditions * ", - "legal.error": "To continue, you must accept the legal terms" + "legal.error": "To continue, you must accept the legal terms", + + "legal.thirdParty.more" : "This Site may be integrated into or may contain links to other independent third-party services or web sites (\"Linked Sites\"). These Linked Sites are among others: walletconnect.com ramp.network uniswap.organd are provided solely as a convenience to our visitors. Such Linked Sites are not under Golem’s control, and Golem is not responsible for and does not endorse the content of such Linked Sites, including any services, information or materials contained on such Linked Sites. You will need to make your own independent judgment regarding your interaction with these Linked Sites." } \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index 45648e1..d0a0c64 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -75,6 +75,7 @@ html { background-repeat: no-repeat; background-attachment: fixed; /* To keep the background fixed during scroll */ min-height: 100%; + overflow-x: hidden; } body {