feat: add video poster

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

@@ -21,6 +21,8 @@ export const Trans = ({
       {...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" />,
@@ -44,10 +46,13 @@ export const Trans = ({
         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" />,
         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/legal/Legal.tsx

@@ -1,7 +1,7 @@
 import { Checkbox } from 'components/atoms/checkbox'
 import { FC, useEffect, useState } from 'react'
 import { Trans } from 'components/atoms'
-import { motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 
 export const Legal: FC<{
   setIsCompleted: (isCompleted: boolean) => void
@@ -14,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,
@@ -46,12 +46,20 @@ export const Legal: FC<{
       transition={{
         duration: 1,
       }}
-      className="col-span-12 flex flex-col gap-3 text-darkblue-700"
+      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}
@@ -62,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">

frontend/src/components/organisms/onboarding/steps/Transfer.step.tsx

@@ -7,20 +7,13 @@ import { useSupplyYagnaWallet } from 'hooks/useSupplyYagnaWallet'
 import { useNetwork } from 'hooks/useNetwork'
 import { useBalance } from 'hooks/useBalance'
 import { TooltipProvider } from 'components/providers/Tooltip.provider'
-import { AnimatePresence, motion } from 'framer-motion'
 import { Button, Trans } from 'components/atoms'
 import { useEffect, useState } from 'react'
 import { RecommendationCardTransfer } from 'components/molecules/recommendationCard/RecommendationCard'
 import { StartButton } from 'components/molecules/stepStartButton/StepStartButton'
 import { IconInput } from 'components/atoms/iconInput/IconInput'
-import {
-  EthereumIcon,
-  GolemCoinIcon,
-  MaticCoinIcon,
-} from 'components/atoms/icons'
-import { EtherSymbol } from 'ethers'
-import { use } from 'i18next'
-import { set } from 'lodash'
+import { EthereumIcon, GolemCoinIcon } from 'components/atoms/icons'
+
 import { MaticCoinSolidIcon } from 'components/atoms/icons/matic.icon'
 import { formatEther } from 'viem'
 import { useSetup } from 'components/providers'
@@ -191,12 +184,12 @@ export const Transfer = ({
       setIsLoading(true)
     }
     //continue flow when both transactions are successful
-    // if (
-    //   txStatus[TokenCategory.GLM] === TxStatus.SUCCESS &&
-    //   txStatus[TokenCategory.NATIVE] === TxStatus.SUCCESS
-    // ) {
-    //   goToNextStep()
-    // }
+    if (
+      txStatus[TokenCategory.GLM] === TxStatus.SUCCESS &&
+      txStatus[TokenCategory.NATIVE] === TxStatus.SUCCESS
+    ) {
+      goToNextStep()
+    }
   }, [
     txStatus,
     // goToNextStep

frontend/src/components/pages/landing/Video.section.tsx

@@ -25,7 +25,7 @@ export const VideoSection = () => {
           <Trans i18nKey="videoDescription" ns="landing" />
         </div>
       </div>
-      <video className={style.video} controls>
+      <video className={style.video} controls poster="poster.jpg">
         <source src="https://downloads.dev.golem.network/golem-cut.mov" />
         Your browser does not support the video tag.
       </video>

frontend/src/components/templates/themes/defaultTheme/Step.template.tsx

@@ -2,7 +2,7 @@ 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'
-import { Bullet, Button, Trans } from 'components/atoms'
+import { Bullet, Button } from 'components/atoms'
 import {
   InfoTooltip,
   InfoTooltipTrigger,
@@ -12,7 +12,6 @@ import { Commands } from 'state/commands'
 import { RightDot } from 'components/atoms/ornaments/rightDot'
 import { AnimatePresence, motion } from 'framer-motion'
 import { AnimatedText } from 'components/molecules/animateText/AnimatedText'
-import { set } from 'lodash'
 import { useNetwork } from 'wagmi'
 // import { SuccessIcon, TrustStackedIcon } from 'components/atoms/icons'
 
@@ -81,7 +80,25 @@ export const StepTemplate: FC<StepRenderDetailsType> = function (
             />
           </motion.div>
           <div className="col-span-3 col-start-7 relative">
-            {OrnamentComponent ? <OrnamentComponent /> : ''}
+            <AnimatePresence>
+              {OrnamentComponent && componentPlacement !== '' ? (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  transition={{
+                    duration: 2,
+                  }}
+                >
+                  <OrnamentComponent />
+                </motion.div>
+              ) : (
+                ''
+              )}
+            </AnimatePresence>
           </div>
         </div>
         <div className="col-span-2"></div>

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 <RampIcon/> and <UniswapIcon/> solution. <breakLine /> 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 <strong> (More) </strong> <red> * </red>",
+  "legal.thirdParty": "I acknowledge and agree that the Site contains links to third-party services <span class='font-medium cursor-pointer' onclick={{onClick}}> (More) </span> <red> * </red>",
   "legal.termsAndConditions": "I agree with <strong> <a href='https://docs.golem.network/docs/golem/terms' target='_blank'>Terms and Conditions</a> </strong> <red> * <red>",
-  "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:<emptyLine />  <a href='https://walletconnect.com' target='_blank'><walletConnectIcon/> walletconnect.com</a><breakLine/><a href='https://ramp.network' target='_blank'> <RampIcon/>  ramp.network</a><breakLine/><a class='inline' href='https://uniswap.org' target='_blank'><UniswapIcon/> uniswap.org</a><emptyLine/>and 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."
 }

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 {