boxes instead of frames

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "parser": "babel-eslint",
   "extends": [
+    "next",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
     "plugin:react-hooks/recommended"

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [15.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -37,7 +37,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [15.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2

babel.config.js

@@ -4,7 +4,16 @@ module.exports = function (api) {
   const removeDataTestAttributes =
     api.env("production") && !process.env.PRESERVE_DATA_TEST_ATTRIBUTES
 
-  const presets = ["next/babel"]
+  const presets = [
+    "next/babel",
+    {
+      "preset-react": {
+        importSource: "theme-ui", // or '@theme-ui/core'
+        runtime: "automatic",
+        throwIfNamespace: false,
+      },
+    },
+  ]
   const plugins = removeDataTestAttributes
     ? [["react-remove-properties", {properties: ["data-test"]}]]
     : []

components/CreateAccountForm.tsx

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import CreateAccountFields from "components/CreateAccountFields"
 import CreateAccountSubmitted from "components/CreateAccountSubmitted"
 import FormContainer from "components/FormContainer"

components/CreateAccountSubmitted.tsx

@@ -1,4 +1,3 @@
-/** @jsxImportSource theme-ui */
 import * as fcl from "@onflow/fcl"
 import copy from "clipboard-copy"
 import Button from "components/Button"
@@ -77,11 +76,11 @@ export default function CreateAccountSubmitted({address}: {address: string}) {
               <Flex
                 sx={{alignItems: "center", justifyContent: "space-between"}}
               >
-                <div sx={styles.walletAmount}>
+                <Box sx={styles.walletAmount}>
                   {`${parseFloat(
                     publicConfig.tokenAmountFlow
                   ).toLocaleString()} FLOW tokens`}
-                </div>
+                </Box>
                 <Link
                   href={`https://flow-view-source.com/testnet/account/${address}`}
                   target="_blank"
@@ -115,7 +114,7 @@ export default function CreateAccountSubmitted({address}: {address: string}) {
       </Box>
       <Themed.hr />
       <Box mb={5}>
-        <div sx={styles.infoBox}>
+        <Box sx={styles.infoBox}>
           <Themed.h3 sx={{my: 0}}>What can I build on Flow?</Themed.h3>
           <Themed.p>
             Flow is designed for high-throughput, low-latency consumer
@@ -132,7 +131,7 @@ export default function CreateAccountSubmitted({address}: {address: string}) {
           >
             Join the Flow alpha community
           </Button>
-        </div>
+        </Box>
       </Box>
     </>
   )

components/Footer.tsx

@@ -1,5 +1,3 @@
-/** @jsxImportSource theme-ui */
-
 import {TANOOKI_LABS_URL} from "lib/constants"
 import {Box, Container, Flex, Link, ThemeUICSSObject} from "theme-ui"
 
@@ -31,7 +29,7 @@ export default function Footer() {
   }
 
   return (
-    <div sx={styles.footer}>
+    <Box sx={styles.footer}>
       <Container>
         <Flex sx={styles.innerContainer}>
           <Flex mr={[0, "auto"]} mb={[2, 0]}>
@@ -61,6 +59,6 @@ export default function Footer() {
           </Flex>
         </Flex>
       </Container>
-    </div>
+    </Box>
   )
 }

components/FormContainer.tsx

@@ -1,8 +1,6 @@
-/** @jsxImportSource theme-ui */
-
 import NetworkLinks from "components/NetworkLinks"
 import React from "react"
-import {ThemeUICSSObject} from "theme-ui"
+import {Box, ThemeUICSSObject} from "theme-ui"
 
 export default function FormContainer({children}: {children: React.ReactNode}) {
   const styles: Record<string, ThemeUICSSObject> = {
@@ -22,9 +20,9 @@ export default function FormContainer({children}: {children: React.ReactNode}) {
     },
   }
   return (
-    <div sx={styles.container}>
+    <Box sx={styles.container}>
       <NetworkLinks />
-      <div sx={styles.children}>{children}</div>
-    </div>
+      <Box sx={styles.children}>{children}</Box>
+    </Box>
   )
 }

components/FundAccountSubmitted.tsx

@@ -56,11 +56,11 @@ export default function FundAccountSubmitted({
               <Flex
                 sx={{alignItems: "center", justifyContent: "space-between"}}
               >
-                <div sx={styles.walletAmount}>
+                <Box sx={styles.walletAmount}>
                   {`${parseFloat(result.amount).toLocaleString()} ${
                     result.token
                   } tokens`}
-                </div>
+                </Box>
                 <Link
                   href={`https://flow-view-source.com/testnet/account/${result.address}`}
                   target="_blank"

components/Label.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import {Label as ThemeUILabel, LabelProps} from "theme-ui"
+import {Label as ThemeUILabel, LabelProps, Box} from "theme-ui"
 
 type Props = {
   required?: boolean
@@ -17,7 +17,7 @@ const Label = ({required = false, children, ...props}: Props) => {
   return (
     <ThemeUILabel {...props}>
       {children}
-      {required && <div sx={styles.required}>*</div>}
+      {required && <Box sx={styles.required}>*</Box>}
     </ThemeUILabel>
   )
 }

components/LoadingFeedback.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource theme-ui */
-import {ThemeUICSSObject} from "theme-ui"
+import {Box, ThemeUICSSObject} from "theme-ui"
 
 const styles: Record<string, ThemeUICSSObject> = {
   loading: {
@@ -21,10 +20,10 @@ export default function LoadingFeedback({
   children?: React.ReactNode
 }) {
   return (
-    <div sx={styles.loading}>
+    <Box sx={styles.loading}>
       <img src="loading.svg" />
       <br />
       {children}
-    </div>
+    </Box>
   )
 }

components/NetworkLinks.tsx

@@ -1,9 +1,8 @@
-/** @jsxImportSource theme-ui */
-
 import TabNav, {TabNavLink} from "components/TabNav"
 import {TEST_NET, SANDBOX_NET} from "lib/constants"
 import {NETWORK_DISPLAY_NAME} from "lib/network"
 import publicConfig from "lib/publicConfig"
+import {Box, Image} from "theme-ui"
 
 export default function NetworkLinks() {
   const styles = {
@@ -23,13 +22,13 @@ export default function NetworkLinks() {
   }
 
   return (
-    <div sx={styles.container}>
+    <Box sx={styles.container}>
       <TabNav>
         <TabNavLink
           href={publicConfig.testNetUrl}
           active={publicConfig.network === TEST_NET}
         >
-          <img
+          <Image
             src={
               publicConfig.network === TEST_NET
                 ? "testnet-faucet-icon.svg"
@@ -44,7 +43,7 @@ export default function NetworkLinks() {
           href={publicConfig.sandboxNetUrl}
           active={publicConfig.network === SANDBOX_NET}
         >
-          <img
+          <Image
             src={
               publicConfig.network === SANDBOX_NET
                 ? "sandboxnet-faucet-icon.svg"
@@ -56,6 +55,6 @@ export default function NetworkLinks() {
           Sandboxnet
         </TabNavLink>
       </TabNav>
-    </div>
+    </Box>
   )
 }

components/SidebarAccordion.tsx

@@ -3,7 +3,7 @@ import useAccordionOption from "hooks/useAccordionOption"
 import {ACCOUNTS_KEYS_DOCS_URL, H_CAPTCHA_URL} from "lib/constants"
 import {useMixpanel} from "lib/mixpanel"
 import {useState} from "react"
-import {Link, ThemeUICSSObject} from "theme-ui"
+import {Box, Button, Link, ThemeUICSSObject} from "theme-ui"
 import {Themed} from "@theme-ui/mdx"
 import publicConfig from "../lib/publicConfig"
 
@@ -126,8 +126,8 @@ const AccordionOption = ({
     },
   }
   return (
-    <div sx={styles.container}>
-      <button
+    <Box sx={styles.container}>
+      <Button
         {...buttonProps}
         sx={styles.button}
         onClick={() => {
@@ -140,13 +140,13 @@ const AccordionOption = ({
       >
         {data.title}
         <img src={`caret-${isOpen ? "up" : "down"}.svg`} />
-      </button>
+      </Button>
       {isOpen && (
-        <div sx={styles.content} {...contentProps}>
+        <Box sx={styles.content} {...contentProps}>
           {typeof data.content === "function" ? data.content({}) : data.content}
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   )
 }
 
@@ -157,7 +157,7 @@ export default function SidebarAccordion() {
   }
 
   return (
-    <div sx={style}>
+    <Box sx={style}>
       {accordionData.map((data, index) => (
         <AccordionOption
           data={data}
@@ -168,6 +168,6 @@ export default function SidebarAccordion() {
           name="sidebarAccordion"
         />
       ))}
-    </div>
+    </Box>
   )
 }

components/TabNav.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
 
 import React from "react"
-import {Link, ThemeUICSSObject} from "theme-ui"
+import {Box, Link, ThemeUICSSObject} from "theme-ui"
 
 export function TabNavLink({
   active,
@@ -50,5 +50,5 @@ export default function TabNav({children}: {children: React.ReactNode}) {
     paddingRight: 18,
   }
 
-  return <div sx={style}>{children}</div>
+  return <Box sx={style}>{children}</Box>
 }

components/TokenFundingInfo.tsx

@@ -3,7 +3,7 @@
 import {TokenTypes} from "lib/constants"
 import {NETWORK_DISPLAY_NAME} from "lib/network"
 import {TOKEN_FUNDING_AMOUNTS} from "lib/publicConfig"
-import {Text, ThemeUICSSObject} from "theme-ui"
+import {Box, Text, ThemeUICSSObject} from "theme-ui"
 import {Themed} from "@theme-ui/mdx"
 
 export default function TokenFundingInfo({
@@ -27,12 +27,12 @@ export default function TokenFundingInfo({
   }
 
   return (
-    <div sx={style}>
+    <Box sx={style}>
       <Themed.h4 sx={{my: 0}}>
         Receive {parseFloat(TOKEN_FUNDING_AMOUNTS[token]).toLocaleString()}{" "}
         {NETWORK_DISPLAY_NAME} {token} tokens
       </Themed.h4>
       <Text color="gray.400">{description}</Text>
-    </div>
+    </Box>
   )
 }

components/inputs.tsx

@@ -4,6 +4,7 @@ import {useTextField} from "@react-aria/textfield"
 import {FieldProps} from "formik"
 import {useRef} from "react"
 import {
+  Box,
   Input,
   InputProps,
   Select,
@@ -56,7 +57,7 @@ export const FieldError = ({children}: {children: React.ReactNode}) => {
     },
   }
 
-  return <div sx={style}>{children}</div>
+  return <Box sx={style}>{children}</Box>
 }
 
 export const CustomInputComponent = ({

modules.d.ts

@@ -104,3 +104,12 @@ declare module "*.cdc" {
 
 declare module "@onflow/util-encode-key"
 declare module "@onflow/types"
+
+import {} from "react"
+import {ThemeUIStyleObject} from "theme-ui"
+
+declare module "react" {
+  interface Attributes {
+    sx?: ThemeUIStyleObject
+  }
+}