Merge branch 'master' of https://github.com/gmx-io/gmx-interface

src/App/App.scss

@@ -421,6 +421,10 @@ button.App-connect-wallet:hover {
   }
 }
 
+.App-card-divider + .App-card-divider {
+  display: none
+}
+
 .line-divider {
   height: 1px;
   background: var(--color-slate-700);

src/components/Button/Button.scss

@@ -90,6 +90,16 @@
     }
   }
 
+  &.link {
+    color: var(--color-gray-300);
+    text-decoration: underline;
+    padding: 0;
+
+    &.disabled {
+      text-decoration: none;;
+    }
+  }
+
   &.disabled,
   &:disabled {
     box-shadow: none;

src/components/Button/Button.tsx

@@ -1,11 +1,11 @@
-import { HTMLProps, MouseEvent as ReactMouseEvent, ReactNode, RefObject, useMemo } from "react";
 import cx from "classnames";
+import { HTMLProps, MouseEvent as ReactMouseEvent, ReactNode, RefObject, useMemo } from "react";
 
 import ButtonLink from "./ButtonLink";
 
 import "./Button.scss";
 
-type ButtonVariant = "primary" | "primary-action" | "secondary";
+type ButtonVariant = "primary" | "primary-action" | "secondary" | "link";
 
 type ButtonProps = HTMLProps<HTMLButtonElement> & {
   children: ReactNode;

src/components/Exchange/ExchangeInfo.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import ExchangeInfoRow from "./ExchangeInfoRow";
 
 interface ExchangeInfoProps {
   children?: ReactNode;
@@ -56,5 +57,6 @@ function isExchangeInfoGroup(child: ReactNode) {
 }
 
 ExchangeInfo.Group = ExchangeInfoGroup;
+ExchangeInfo.Row = ExchangeInfoRow;
 
 export { ExchangeInfo };

src/components/Exchange/ExchangeInfoRow.tsx

@@ -7,13 +7,17 @@ type Props = PropsWithChildren<{
   isTop?: boolean;
   isWarning?: boolean;
   className?: string;
+  onClick?: () => void;
 }>;
 
 export default function ExchangeInfoRow(props: Props) {
-  const { label, children, value, isTop, isWarning, className } = props;
+  const { label, children, value, isTop, isWarning, className, onClick } = props;
 
   return (
-    <div className={cx("Exchange-info-row", className, { "top-line": isTop })}>
+    <div
+      className={cx("Exchange-info-row", className, { "top-line": isTop, "cursor-pointer": onClick })}
+      onClick={onClick}
+    >
       <div className="Exchange-info-label">{label}</div>
       <div className={cx("Exchange-info-value", { "Exchange-info-value-warning": isWarning })}>{children || value}</div>
     </div>

src/components/PercentageInput/PercentageInput.tsx

@@ -8,6 +8,7 @@ import type { TooltipPosition } from "components/Tooltip/Tooltip";
 import TooltipWithPortal from "components/Tooltip/TooltipWithPortal";
 
 import "./PercentageInput.scss";
+import { useLatest } from "react-use";
 
 export const NUMBER_WITH_TWO_DECIMALS = /^\d+(\.\d{0,2})?$/; // 0.00 ~ 99.99
 
@@ -78,25 +79,30 @@ export default function PercentageInput({
     }
   }
 
+  const latestInputValue = useLatest(inputValue);
+
   useEffect(() => {
     if (value === undefined) {
-      if (inputValue !== "") {
+      if (latestInputValue.current !== "") {
         setInputValue("");
       }
 
       return;
     }
 
+    const valueText = getValueText(value);
+    const defaultValueText = getValueText(defaultValue);
+
     if (
       // When the value is changed from outside we want to keep input empty
       // if the value is the same as the default value as it means the user
       // just cleared the input
-      Number.parseFloat(inputValue) !== Number.parseFloat(getValueText(value)) &&
-      !(getValueText(value) === getValueText(defaultValue) && inputValue === "")
+      Number.parseFloat(latestInputValue.current) !== Number.parseFloat(valueText) &&
+      !(valueText === defaultValueText && latestInputValue.current === "")
     ) {
-      setInputValue(getValueText(value));
+      setInputValue(valueText);
     }
-  }, [defaultValue, inputValue, value]);
+  }, [defaultValue, value, latestInputValue]);
 
   const error = useMemo(() => {
     const parsedValue = Math.round(Number.parseFloat(inputValue) * 100);
@@ -117,6 +123,14 @@ export default function PercentageInput({
 
   const shouldShowPanel = isPanelVisible && Boolean(suggestions.length);
 
+  const onSelectSuggestion = useCallback(
+    (suggestion: number) => () => {
+      onChange(suggestion * 100);
+      setIsPanelVisible(false);
+    },
+    [onChange, setIsPanelVisible]
+  );
+
   return (
     <div className="Percentage-input-wrapper">
       <TooltipWithPortal
@@ -150,14 +164,7 @@ export default function PercentageInput({
       {shouldShowPanel && (
         <ul className="Percentage-list">
           {suggestions.map((slippage) => (
-            <li
-              key={slippage}
-              onMouseDown={() => {
-                setInputValue(String(slippage));
-                onChange(slippage * 100);
-                setIsPanelVisible(false);
-              }}
-            >
+            <li key={slippage} onMouseDown={onSelectSuggestion(slippage)}>
               {slippage}%
             </li>
           ))}

src/components/Synthetics/AcceptablePriceImpactInputRow/AcceptablePriceImpactInputRow.scss

@@ -16,3 +16,7 @@
     color: var(--color-white);
   }
 }
+
+.AcceptablePriceImpactInputRow-na {
+  line-height: 2.3rem;
+}