generic cleanups and bug fixes

ApeSwapFinance · May 25, 2022 · cebef40 · cebef40
1 parent 4bd8647
commit cebef40
Show file tree

Hide file tree

Showing 35 changed files with 118 additions and 85 deletions.
diff --git a/src/__tests__/components/toggle.test.tsx b/src/__tests__/components/toggle.test.tsx
@@ -30,7 +30,7 @@ it("renders correctly", () => {
           </span>
         </div>
         <button
-          class="css-1uj2es5"
+          class="css-1iz1aqp-Toggle"
         >
           Switch2 
         </button>

diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
@@ -166,7 +166,7 @@ it("renders correctly", () => {
           >
             <div>
               <button
-                class="css-1kusgwj"
+                class="css-10odqte"
                 font-size="14px"
               >
                 <span
@@ -179,7 +179,7 @@ it("renders correctly", () => {
             </div>
             <button
               aria-label="Toggle menu"
-              class="css-cnncwg"
+              class="css-1u0toul"
             >
               <svg
                 class="sc-gsTEea fQWPxo"
@@ -468,7 +468,7 @@ it("renders correctly", () => {
                   class="css-98z5z1"
                 >
                   <button
-                    class="css-1erqard"
+                    class="css-giy75x"
                   >
                     <svg
                       class="sc-gsTEea fQWPxo"
@@ -668,7 +668,7 @@ it("renders correctly", () => {
                 class="sc-hHfuMS kUhdWd"
               >
                 <button
-                  class="css-c0dbms"
+                  class="css-giy75x"
                 >
                   <div
                     class="css-4cffwv"
@@ -712,7 +712,7 @@ it("renders correctly", () => {
                   style="margin: 0px 12.5px;"
                 />
                 <button
-                  class="css-1erqard"
+                  class="css-giy75x"
                 >
                   <svg
                     class="sc-gsTEea fQWPxo"

diff --git a/src/__tests__/widgets/walletmodal.test.tsx b/src/__tests__/widgets/walletmodal.test.tsx
@@ -17,7 +17,7 @@ it("renders ConnectModal correctly", () => {
           style="opacity: 0; transform: translate(-50%, -50%) scale(0.1);"
         >
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -156,7 +156,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -196,7 +196,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -308,7 +308,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -333,7 +333,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -360,7 +360,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -391,7 +391,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -432,7 +432,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -493,7 +493,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -536,7 +536,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-6h7fdg"
+            class="css-1fjjhyd"
             id="wallet-connect-"
           >
             <span
@@ -584,7 +584,7 @@ it("renders ConnectModal correctly", () => {
              
           </button>
           <button
-            class="css-1dn8hyl"
+            class="css-rtl4ff"
             id="wallet-connect-"
           >
             <span
@@ -616,7 +616,7 @@ it("renders ConnectModal correctly", () => {
             class="css-1gksbu2"
           >
             <a
-              class="css-10ylzz7"
+              class="css-1n3itcm"
               href="https://apeswap.gitbook.io/apeswap-finance/product-and-features/wallets/how-to-connect-your-wallet"
               rel="noreferrer noopener"
               target="_blank"
@@ -678,7 +678,7 @@ it("renders AccountModal correctly", () => {
             class="css-1ne87w5"
           >
             <a
-              class="css-f7lsuy"
+              class="css-1i0376m"
               href="https://bscscan.com/address/undefined"
               rel="noreferrer noopener"
               target="_blank"

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -9,14 +9,15 @@ import { AlertProps, variants } from "./types";
 import { LinkExternal } from "../Link";
 import { Svg } from "../Svg";
 
-const Alert: React.FC<AlertProps> = ({ variant = variants.ERROR, text, linkText, url, size, onClose }) => {
+const Alert: React.FC<AlertProps> = ({ variant = variants.ERROR, text, linkText, url, size, onClose, ...props }) => {
   return (
     <motion.div
       initial={{ right: "-250px" }}
       animate={{ right: "10px" }}
       transition={{ duration: 0.5 }}
       exit={{ right: "-250px" }}
       sx={styles.alert}
+      {...props}
     >
       <Flex>
         <Svg

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -5,8 +5,6 @@ import { ButtonProps, variants, buttonFontSizes, buttonPadding, sizes } from "./
 
 const Button: React.FC<ButtonProps> = ({
   variant = variants.PRIMARY,
-  sx,
-  csx,
   size = sizes.MEDIUM,
   load,
   children,
@@ -82,8 +80,6 @@ const Button: React.FC<ButtonProps> = ({
         },
         ...hoverStyle,
         width: fullWidth ? "100%" : "max-content",
-        ...sx,
-        ...csx,
       }}
     >
       {React.isValidElement(startIcon) &&

diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
@@ -12,7 +12,6 @@ const IconButton: React.FC<IconButtonProps> = ({
   background = colorValues.yellow,
   variant = variants.PRIMARY,
   children,
-  sx,
   ...props
 }) => {
   return (
@@ -24,7 +23,6 @@ const IconButton: React.FC<IconButtonProps> = ({
         background,
         ...(variant === variants.PRIMARY ? style.primary : {}),
         ...(variant === variants.TRANSPARENT ? style.transparent : {}),
-        ...sx,
       }}
     >
       {children || <Svg color={color} icon={icon} {...props} />}

diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
@@ -48,7 +48,6 @@ export interface ButtonProps extends ThemeUIButtonProps {
   startIcon?: ReactNode;
   endIcon?: ReactNode;
   fullWidth?: boolean;
-  csx?: ThemeUICSSObject;
   load?: boolean;
   [key: string]: any;
 }

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { Card as ThemeUICard } from "theme-ui";
 import { CardProps } from "./types";
 
-const Card: React.FC<CardProps> = ({ children, background, sx, ...props }) => {
+const Card: React.FC<CardProps> = ({ children, background, ...props }) => {
   return (
-    <ThemeUICard {...props} sx={{ ...sx, variant: `cards.primary`, background }}>
+    <ThemeUICard {...props} sx={{ variant: `cards.primary`, background }}>
       {children}
     </ThemeUICard>
   );

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -12,12 +12,13 @@ const getScale = ({ scale }: CheckboxProps) => {
   }
 };
 
-const Checkbox: React.FC<CheckboxProps> = ({ scale = scales.SM, display = "block", ...props }) => {
+const Checkbox: React.FC<CheckboxProps> = ({ scale = scales.SM, display = "block", className, ...props }) => {
   const scaleSize = getScale({ scale });
   const svgScale = scale === "sm" ? 13 : 21;
 
   return (
     <span
+      className={className}
       sx={{
         display,
         width: scaleSize,

diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { Divider as ThemeUIDivider } from "theme-ui";
 
-const Divider: React.FC = () => {
-  return <ThemeUIDivider sx={{ variant: "styles.hr" }} />;
+const Divider: React.FC = ({ ...props }) => {
+  return <ThemeUIDivider {...props} sx={{ variant: "styles.hr" }} />;
 };
 
 export default Divider;
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -5,7 +5,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { DropdownProps, dropdownPadding, fontSizes, sizes } from "./types";
 import { Svg } from "../Svg";
 
-const Dropdown: React.FC<DropdownProps> = ({ component, children, size = sizes.MEDIUM }) => {
+const Dropdown: React.FC<DropdownProps> = ({ component, children, size = sizes.MEDIUM, ...props }) => {
   const [open, setOpen] = useState(false);
 
   const handleClick = () => setOpen((prev) => !prev);
@@ -19,6 +19,7 @@ const Dropdown: React.FC<DropdownProps> = ({ component, children, size = sizes.M
         position: "relative",
       }}
       onClick={handleClick}
+      {...props}
     >
       <Flex
         sx={{

diff --git a/src/components/Dropdown/DropdownItem.tsx b/src/components/Dropdown/DropdownItem.tsx
@@ -17,10 +17,18 @@ const Element: React.FC<DropdownItemProps> = ({ onClick, url, active, size, chil
   );
 };
 
-const DropdownItem: React.FC<DropdownItemProps> = ({ onClick, url, active, size = sizes.MEDIUM, children }) => {
+const DropdownItem: React.FC<DropdownItemProps> = ({
+  onClick,
+  url,
+  active,
+  size = sizes.MEDIUM,
+  children,
+  ...props
+}) => {
   return (
     <Box
       as="li"
+      {...props}
       sx={{
         px: dropdownItemPadding[size].x,
         py: dropdownItemPadding[size].y,

diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { Heading as ThemeUIHeading } from "theme-ui";
 import { HeadingProps } from "./types";
 
-const Heading: React.FC<HeadingProps> = ({ children, as = "h3", banner }) => {
+const Heading: React.FC<HeadingProps> = ({ children, as = "h3", banner, ...props }) => {
   return (
-    <ThemeUIHeading as={as} sx={{ variant: `styles.${banner ? "banner" : as || "h1"}` }}>
+    <ThemeUIHeading {...props} as={as} sx={{ variant: `styles.${banner ? "banner" : as || "h1"}` }}>
       {children}
     </ThemeUIHeading>
   );

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -20,7 +20,6 @@ const Input: React.FC<InputProps> = ({ size = sizes.MD, icon, width, sx, ...prop
           variant: `forms.input.${size}`,
           color: "text",
           outline: "none",
-          ...sx,
         }}
       />
       {icon && (

diff --git a/src/components/Link/LinkExternal.tsx b/src/components/Link/LinkExternal.tsx
@@ -4,7 +4,7 @@ import { Box, Link } from "theme-ui";
 import { Svg } from "../Svg";
 import { LinkExternalProps } from "./types";
 
-const LinkExternal: React.FC<LinkExternalProps> = ({ display, textAlign, children, sx, ...props }) => {
+const LinkExternal: React.FC<LinkExternalProps> = ({ display, textAlign, children, ...props }) => {
   return (
     <Link
       sx={{
@@ -13,7 +13,6 @@ const LinkExternal: React.FC<LinkExternalProps> = ({ display, textAlign, childre
         textAlign,
         cursor: "pointer",
         alignItems: "center",
-        ...sx,
       }}
       {...props}
       target="_blank"

diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
@@ -14,6 +14,7 @@ const Progress: React.FC<ProgressProps> = ({
   color = "gradient",
   background = "white4",
   width = "100%",
+  ...props
 }) => {
   const [toValue, setTo] = useState(0);
 
@@ -23,6 +24,7 @@ const Progress: React.FC<ProgressProps> = ({
 
   return (
     <div
+      {...props}
       sx={{
         height,
         width,

diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
@@ -22,12 +22,12 @@ const getCheckedScale = ({ scale }: RadioProps) => {
   }
 };
 
-const Radio: React.FC<RadioProps> = ({ scale = scales.SM, display = "inline-block", ...props }) => {
+const Radio: React.FC<RadioProps> = ({ scale = scales.SM, display = "inline-block", className, ...props }) => {
   const scaleSize = getScale({ scale });
   const checkedScale = getCheckedScale({ scale });
 
   return (
-    <span sx={{ display, width: scaleSize, height: scaleSize, position: "relative" }}>
+    <span className={className} sx={{ display, width: scaleSize, height: scaleSize, position: "relative" }}>
       <input type="radio" sx={{ variant: "forms.radio" }} {...props} />
       <span sx={{ width: checkedScale, height: checkedScale }} />
     </span>

diff --git a/src/components/Select/SelectItem.tsx b/src/components/Select/SelectItem.tsx
@@ -4,12 +4,13 @@ import { Box } from "theme-ui";
 import { SelectItemProps, selectItemPadding, sizes } from "./types";
 import { dynamicStyles } from "./styles";
 
-const SelectItem: React.FC<SelectItemProps> = ({ onClick, value, active, size = sizes.MEDIUM, children }) => {
+const SelectItem: React.FC<SelectItemProps> = ({ onClick, value, active, size = sizes.MEDIUM, children, ...props }) => {
   const style = dynamicStyles.dropdownItem({ size });
 
   return (
     <Box
       as="li"
+      {...props}
       onClick={() => onClick?.(value)}
       sx={{
         padding: selectItemPadding[size],

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -1,9 +1,10 @@
 /** @jsxImportSource theme-ui */
 import React from "react";
 
-const Table: React.FC = ({ children }) => {
+const Table: React.FC = ({ children, ...props }) => {
   return (
     <table
+      {...props}
       sx={{
         width: "100%",
       }}