[SDk] fix: Improve multistep swap UI in PayEmbed (#6503)

Author: joaquim-verges

.changeset/bumpy-webs-crash.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+UI cleanup for multistep swaps in PayEmbed

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/OnRampScreen.tsx

@@ -90,9 +90,6 @@ export function OnRampScreen(props: {
     isAutoMode,
   });
   const firstStepChainId = state.steps[0]?.step.token.chainId;
-  const currentStepIndex = state.steps.findIndex(
-    (step) => step.status === "pending" || step.status === "actionRequired",
-  );
   return (
     <Container p="lg">
       <ModalHeader title={props.title} onBack={props.onBack} />
@@ -131,9 +128,7 @@ export function OnRampScreen(props: {
                 index={index}
               />
             </StepContainer>
-            {index < state.steps.length - 1 && (
-              <StepConnectorArrow active={index === currentStepIndex} />
-            )}
+            {index < state.steps.length - 1 && <StepConnectorArrow />}
           </Container>
         ))}
       </Container>

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx

@@ -1,55 +1,34 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import { Container } from "../../../../components/basic.js";
 
-export function StepConnectorArrow(props: {
-  active: boolean;
-}) {
+export function StepConnectorArrow() {
   const theme = useCustomTheme();
   return (
     <Container
       flex="row"
       center="both"
       style={{
         width: "100%",
-        height: "12px",
         position: "relative",
-        marginTop: "-1px",
+        marginTop: "-10px",
+        marginBottom: "-10px",
         zIndex: 1000,
       }}
     >
-      <svg
-        role="presentation"
-        width="32"
-        height="16"
-        viewBox="0 0 32 16"
-        fill="none"
+      <Container
+        flex="row"
+        center="both"
         style={{
-          display: "block",
+          borderRadius: "100%",
+          width: "30px",
+          height: "30px",
+          backgroundColor: theme.colors.modalBg,
+          border: `1px solid ${theme.colors.borderColor}`,
         }}
       >
-        <path
-          d="M1 0L16 15L31 0"
-          fill={theme.colors.tertiaryBg}
-          stroke={
-            props.active ? theme.colors.accentText : theme.colors.borderColor
-          }
-          strokeWidth="1"
-          strokeLinecap="square"
-          strokeLinejoin="miter"
-        />
-        <path
-          d="M8 0L16 7.5L24 0"
-          fill="none"
-          stroke={
-            props.active
-              ? theme.colors.accentText
-              : theme.colors.secondaryIconColor
-          }
-          strokeWidth="1"
-          strokeLinecap="square"
-          strokeLinejoin="miter"
-        />
-      </svg>
+        <ChevronDownIcon width={16} height={16} />
+      </Container>
     </Container>
   );
 }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapSummary.tsx

@@ -64,7 +64,7 @@ export function SwapSummary(props: {
         />
       </Container>
       {/* Connector Icon */}
-      <StepConnectorArrow active={false} />
+      <StepConnectorArrow />
       {/* Buy */}
       <Container
         flex="column"