[uma-bridge] Disable BridgeCardForm back button while mutations are r…

…unning (#14382) GitOrigin-RevId: 554659a800df7ac6530938b5689912734c6d2c79
lightsparkdev · Dec 18, 2024 · 505b569 · 505b569
1 parent 7ad1622
commit 505b569
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 6 deletions.
diff --git a/packages/ui/src/components/Flex.tsx b/packages/ui/src/components/Flex.tsx
@@ -19,8 +19,10 @@ type FlexProps = {
     | undefined;
   children?: ReactNode;
   as?: ElementType | undefined;
+  asButtonType?: "button" | "submit" | undefined;
   column?: boolean | undefined;
   onClick?: (() => void) | undefined;
+  disabled?: boolean | undefined;
   overflow?: "hidden" | "visible" | "scroll" | "auto" | undefined;
   whiteSpace?:
     | "nowrap"
@@ -43,8 +45,10 @@ export function Flex({
   column = false,
   children,
   onClick,
+  disabled = false,
   gap,
   as = "div",
+  asButtonType,
   overflow,
   whiteSpace,
   mt,
@@ -55,21 +59,24 @@ export function Flex({
   const justify = justifyProp ? justifyProp : center ? "center" : "stretch";
   const align = alignProp ? alignProp : center ? "center" : "stretch";
 
+  const asButtonProps = asButtonType ? { type: asButtonType, disabled } : {};
+
   return (
     <StyledFlex
       justify={justify}
       align={align}
       column={column}
       as={as}
-      onClick={onClick}
-      cursorProp={onClick ? "pointer" : "unset"}
+      onClick={disabled ? undefined : onClick}
+      cursorProp={onClick ? (disabled ? "not-allowed" : "pointer") : "unset"}
       overflowProp={overflow}
       whiteSpace={whiteSpace}
       mr={mr}
       ml={ml}
       mt={mt}
       mb={mb}
       gap={gap}
+      {...asButtonProps}
     >
       {children}
     </StyledFlex>
@@ -80,20 +87,35 @@ type StyledFlexProps = {
   justify: NonNullable<FlexProps["justify"]>;
   align: NonNullable<FlexProps["align"]>;
   column: boolean;
-  cursorProp: "pointer" | "initial" | "unset";
+  cursorProp: "pointer" | "not-allowed" | "initial" | "unset";
   overflowProp: FlexProps["overflow"];
   whiteSpace: FlexProps["whiteSpace"];
   mt: FlexProps["mt"];
   mr: FlexProps["mr"];
   mb: FlexProps["mb"];
   ml: FlexProps["ml"];
   gap: number | undefined;
+  as?: ElementType | undefined;
 };
 
 export const StyledFlex = styled.div<StyledFlexProps>`
   display: flex;
   text-overflow: ellipsis;
 
+  ${({ as }) =>
+    /* reset button styles */
+    as === "button" &&
+    `
+    border: 0;
+    appearance: none;
+    background: transparent;
+    padding: 0;
+    /* needed in Safari for some reason */
+    font-size: 1rem;
+    color: inherit;
+    font-weight: inherit;
+  `}
+
   ${({ column }) => column && `flex-direction: column;`}
   ${({ justify }) => `justify-content: ${justify};`}
   ${({ align }) => `align-items: ${align};`}

diff --git a/packages/ui/src/components/IconWithCircleBackground.tsx b/packages/ui/src/components/IconWithCircleBackground.tsx
@@ -16,6 +16,7 @@ type IconWithCircleBackgroundProps = {
   noBg?: boolean;
   shouldRotate?: boolean;
   onClick?: () => void;
+  disabled?: boolean;
 };
 
 export function IconWithCircleBackground({
@@ -26,9 +27,16 @@ export function IconWithCircleBackground({
   darkBg = false,
   shouldRotate = false,
   noBg = false,
+  disabled = false,
 }: IconWithCircleBackgroundProps) {
   const content = (
-    <Flex center onClick={onClick}>
+    <Flex
+      center
+      onClick={onClick}
+      disabled={disabled}
+      as={onClick ? "button" : "div"}
+      asButtonType="button"
+    >
       <StyledIconWithCircleBackground
         size={iconWidth}
         darkBg={darkBg}
@@ -43,7 +51,15 @@ export function IconWithCircleBackground({
       </StyledIconWithCircleBackground>
     </Flex>
   );
-  return to ? <Link to={to}>{content}</Link> : content;
+  return to ? (
+    <div css={{ cursor: disabled ? "not-allowed" : undefined }}>
+      <Link to={to} disabled={disabled}>
+        {content}
+      </Link>
+    </div>
+  ) : (
+    content
+  );
 }
 
 type StyledIconWithCircleBackgroundProps = {

diff --git a/packages/ui/src/router.tsx b/packages/ui/src/router.tsx
@@ -54,6 +54,7 @@ export type LinkProps = {
   newTab?: boolean | undefined;
   hash?: RouteHash | undefined;
   typography?: SimpleTypographyProps | undefined;
+  disabled?: boolean | undefined;
 };
 
 export function replaceParams(
@@ -158,7 +159,9 @@ function LinkBase({
   );
 }
 
-export const Link = styled(LinkBase)``;
+export const Link = styled(LinkBase)`
+  ${({ disabled }) => disabled && `pointer-events: none;`}
+`;
 
 type NavigateProps = Omit<LinkProps, "children"> & {
   to: NewRoutesType;