Merge branch 'feature/animatedText' into staging

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,15 @@ const Onboarding = () => {
             </AnimatedPage>
           }
         ></Route>
+        <Route
+          path={'/finish'}
+          element={
+            <AnimatedPage>
+              <OnboardingPage />
+            </AnimatedPage>
+          }
+        ></Route>
+        <Route path="/playground" element={<Playground />} />
       </Routes>
     </AnimatePresence>
   )

frontend/src/components/atoms/icons/uniswap.icon.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react'
 
 export const UniswapIcon = (props: ComponentProps<'img'>) => {
-  return <img src="uniswap.png" {...props} />
+  return <img src="uniswap.svg" className="w-6" {...props} />
 }

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,17 @@ import {
 import { UniswapIcon } from '../icons/uniswap.icon'
 import { WalletIcon } from 'components/molecules/walletIcon/WalletIcon'
 
-export const LinkText = (
-  props: PropsWithChildren<{ to: string; title: string }>
-) => {
-  return (
-    <a
-      href={props.to || '#'}
-      target="_blank"
-      title={props.title || ''}
-      rel="noreferrer"
-    >
-      {props.children}
-    </a>
-  )
-}
-
-export const Trans = (props: ComponentProps<typeof TransComponent>) => {
+export const Trans = ({
+  components,
+  ...rest
+}: ComponentProps<typeof TransComponent>) => {
   return (
     <TransComponent
-      {...props}
+      {...rest}
       components={{
+        ...components,
+        //@ts-ignore
+        span: <span onClick={rest?.values?.onClick}></span>,
         a: <a></a>,
         b: <b></b>,
         red: <div className="inline text-dangerred-200" />,
@@ -55,11 +46,13 @@ export const Trans = (props: ComponentProps<typeof TransComponent>) => {
         maticCoinIcon: (
           <MaticCoinIcon className="inline h-line-1 mr-0.5 ml-1" />
         ),
-        UniswapIcon: <UniswapIcon className="inline" />,
+        UniswapIcon: <UniswapIcon className="inline w-6" />,
         RampIcon: <RampIcon className="inline" />,
-        ...props.components,
         Heart: <img src="heart.svg" className="inline h-line-1.5" />,
         walletIcon: <WalletIcon className="w-6 inline" />,
+        walletConnectIcon: (
+          <img src="walletconnect.png" className="inline w-6" />
+        ),
       }}
     />
   )

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 `<word class="word word_${index++}">${x}</word>`
+        })
+        .join('')
+    })
+  },
+})
+
+const itemVariants = {
+  hidden: (delayRef: MutableRefObject<number>) => ({
+    opacity: 0,
+    scale: 0,
+    transition: { delay: delayRef.current, duration: 0.5 },
+  }),
+  visible: (delayRef: MutableRefObject<number>) => ({
+    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<HTMLSpanElement>(null)
+
+  return (
+    <motion.span ref={ref} variants={itemVariants} custom={delayRef}>
+      {children}
+    </motion.span>
+  )
+}
+export const AnimatedText = (
+  props: ComponentProps<typeof TransComponent> & {
+    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 (
+    <motion.div initial="hidden" animate={controls}>
+      <TransComponent
+        {...props}
+        tOptions={{
+          postProcess: ['wrapWords'],
+        }}
+        components={{
+          word: (
+            <Word
+              originOffset={originOffset}
+              originIndex={Math.round(Math.random() * 10)}
+            ></Word>
+          ),
+        }}
+      />
+    </motion.div>
+  )
+}

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 (
-    <div
+    <motion.div
       className={`${style.card} ${selected ? style.selected : ''}`}
       onClick={() => {
         selectBudget()
@@ -144,6 +145,6 @@ export const BudgetCard = ({
           <Trans i18nKey={`cards.${description}`} ns="welcome.step" />
         </div>
       </div>
-    </div>
+    </motion.div>
   )
 }

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 { AnimatePresence, motion } from 'framer-motion'
 
 export const Legal: FC<{
   setIsCompleted: (isCompleted: boolean) => void
@@ -13,7 +14,7 @@ export const Legal: FC<{
   shouldCheckLegal: boolean
 }) => {
   const [showError, setShowError] = useState(false)
-
+  const [showMore, setShowMore] = useState(false)
   const [checked, setIsChecked] = useState({
     thirdParty: false,
     termsAndConditions: false,
@@ -36,11 +37,29 @@ export const Legal: FC<{
   ])
 
   return (
-    <div className="col-span-12 flex flex-col gap-3 text-darkblue-700">
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{
+        opacity: 0,
+      }}
+      transition={{
+        duration: 1,
+      }}
+      className="col-span-10 flex flex-col gap-3 text-darkblue-700"
+    >
       <Checkbox
         label={() => (
           <div className="text-body-extra-large">
-            <Trans i18nKey="legal.thirdParty" ns="welcome.step" />
+            <Trans
+              i18nKey="legal.thirdParty"
+              ns="welcome.step"
+              values={{
+                onClick: () => {
+                  setShowMore(!showMore)
+                },
+              }}
+            />
           </div>
         )}
         error={showError && !checked.thirdParty}
@@ -51,6 +70,29 @@ export const Legal: FC<{
           })
         }}
       />
+      <AnimatePresence>
+        {showMore && (
+          <motion.div
+            initial={{
+              opacity: 0,
+              lineHeight: 0,
+            }}
+            animate={{
+              opacity: 1,
+              lineHeight: '22.4px',
+            }}
+            exit={{
+              lineHeight: 0,
+              opacity: 0,
+              height: 0,
+            }}
+            className="ml-8 text-body-normal"
+          >
+            <Trans i18nKey="legal.thirdParty.more" ns="welcome.step" />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       <Checkbox
         label={() => (
           <div className="text-body-extra-large">
@@ -73,6 +115,6 @@ export const Legal: FC<{
       ) : (
         ''
       )}
-    </div>
+    </motion.div>
   )
 }

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);
 }
 

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 (
-    <div className="flex flex-col">
+    <motion.div
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 1,
+        transition: {
+          delay: 1,
+          duration: 1,
+        },
+      }}
+      exit={{
+        opacity: 0,
+      }}
+      className="flex flex-col"
+    >
       <RadioGroup<NetworkType>
         onSelect={({ itemId }) => {
           onNetworkSelection(itemId)
@@ -82,7 +98,7 @@ const ChooseNetworkPresentational = ({
           <Trans i18nKey="confirmNetwork" ns="chooseNetwork.step" />
         </Button>
       </div>
-    </div>
+    </motion.div>
   )
 }
 

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 (
     <>
-      <Trans i18nKey="title" ns="onRamp.step" values={{ chain: chain?.name }} />
+      <AnimatedText
+        visibility={visibility}
+        i18nKey="title"
+        ns="onRamp.step"
+        values={{ chain: chain?.name }}
+      />
     </>
   )
 }