Improve imports/exports for the dApp (#926)

Closes AENG-148

- We should use default exports in the entire dApp. For this purpose,
the eslint `import/prefer-default-export` rule was enabled. The dApp
code has been updated to comply with this rule.
- Imports for assets have also been improved by adding an `index.ts`
file.

dapp/.eslintrc

@@ -3,7 +3,6 @@
   "extends": ["@thesis-co"],
   "rules": {
     "import/no-extraneous-dependencies": "off",
-    "import/prefer-default-export": "off",
     // Regarding the fact that we are using Chakra UI lib let's disable this rule.
     // This will allow us to easily pass props from the parent component.
     "react/jsx-props-no-spreading": "off",

dapp/src/DApp.tsx

@@ -9,18 +9,18 @@ import { AcreSdkProvider } from "./acre-react/contexts"
 import GlobalStyles from "./components/GlobalStyles"
 import { WalletConnectionAlertContextProvider } from "./contexts"
 import { useInitApp } from "./hooks"
-import { router } from "./router"
-import { store } from "./store"
+import router from "./router"
+import store from "./store"
 import getWagmiConfig from "./wagmiConfig"
 import queryClient from "./queryClient"
 import { delay, logPromiseFailure } from "./utils"
-import { AcreLogo } from "./assets/icons"
+import { AcreLogoIcon } from "./assets/icons"
 import PostHogProvider from "./posthog/PostHogProvider"
 
 function SplashPage() {
   return (
     <Center h="100vh" w="100vw">
-      <Icon as={AcreLogo} w={200} h={300} />
+      <Icon as={AcreLogoIcon} w={200} h={300} />
     </Center>
   )
 }

dapp/src/acre-react/contexts/AcreSdkContext.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react"
 import { Acre, AcreBitcoinProvider } from "@acre-btc/sdk"
-import { BITCOIN_NETWORK, env } from "#/constants"
+import { chains, env } from "#/constants"
 
 const { TBTC_API_ENDPOINT, SUBGRAPH_API_KEY } = env
 const ETH_RPC_URL = env.ETH_HOSTNAME_HTTP
@@ -28,7 +28,7 @@ export function AcreSdkProvider({ children }: { children: React.ReactNode }) {
   const init = useCallback<AcreSdkContextValue["init"]>(
     async (bitcoinProvider?: AcreBitcoinProvider) => {
       let sdk = await Acre.initialize(
-        BITCOIN_NETWORK,
+        chains.BITCOIN_NETWORK,
         TBTC_API_ENDPOINT,
         ETH_RPC_URL,
         GELATO_API_KEY,

dapp/src/acre-react/hooks/index.ts

@@ -1,3 +1,3 @@
-export * from "./useAcreContext"
 export * from "./useStakeFlow"
+export { default as useAcreContext } from "./useAcreContext"
 export { default as useInitializeWithdraw } from "./useInitializeWithdraw"

dapp/src/acre-react/hooks/useAcreContext.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react"
 import { AcreSdkContext } from "../contexts"
 
-export function useAcreContext() {
+export default function useAcreContext() {
   const context = useContext(AcreSdkContext)
 
   if (!context) {

dapp/src/acre-react/hooks/useInitializeWithdraw.ts

@@ -4,7 +4,7 @@ import {
   MessageSignedStepCallback,
   OnSignMessageStepCallback,
 } from "@acre-btc/sdk/dist/src/lib/redeemer-proxy"
-import { useAcreContext } from "./useAcreContext"
+import useAcreContext from "./useAcreContext"
 
 export default function useInitializeWithdraw() {
   const { acre, isConnected } = useAcreContext()

dapp/src/acre-react/hooks/useStakeFlow.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react"
 import { StakeInitialization, DepositReceipt } from "@acre-btc/sdk"
-import { useAcreContext } from "./useAcreContext"
+import useAcreContext from "./useAcreContext"
 
 export type UseStakeFlowReturn = {
   initStake: (

dapp/src/assets/fonts/index.ts

@@ -0,0 +1,13 @@
+import SegmentRegular from "./Segment-Regular.otf"
+import SegmentMedium from "./Segment-Medium.otf"
+import SegmentSemiBold from "./Segment-SemiBold.otf"
+import SegmentBold from "./Segment-Bold.otf"
+import SegmentBlack from "./Segment-Black.otf"
+
+export {
+  SegmentRegular,
+  SegmentMedium,
+  SegmentSemiBold,
+  SegmentBold,
+  SegmentBlack,
+}

dapp/src/assets/icons/AcreLogo.tsx → dapp/src/assets/icons/AcreLogoIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const AcreLogo = createIcon({
+export default createIcon({
   displayName: "AcreLogo",
   viewBox: "0 0 120 71",
   path: (

dapp/src/assets/icons/AcreSignIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const AcreSignIcon = createIcon({
+export default createIcon({
   displayName: "AcreSignIcon",
   viewBox: "0 0 24 24",
   path: [

dapp/src/assets/icons/BitcoinIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const BitcoinIcon = createIcon({
+export default createIcon({
   displayName: "BitcoinIcon",
   viewBox: "0 0 28 28",
   path: [

dapp/src/assets/icons/BitcoinsStackErrorIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const BitcoinsStackErrorIcon = createIcon({
+export default createIcon({
   displayName: "BitcoinsStackErrorIcon",
   viewBox: "0 0 57 49",
   defaultProps: {

dapp/src/assets/icons/CableWithPlugIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const CableWithPlugIcon = createIcon({
+export default createIcon({
   displayName: "CableWithPlugIcon",
   viewBox: "0 0 127 122",
   defaultProps: {

dapp/src/assets/icons/MezoSignIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const MezoSignIcon = createIcon({
+export default createIcon({
   displayName: "MezoSignIcon",
   viewBox: "0 0 88 88",
   path: [

dapp/src/assets/icons/Pause.tsx → dapp/src/assets/icons/PauseIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const PauseIcon = createIcon({
+export default createIcon({
   displayName: "PauseIcon",
   viewBox: "0 0 18 20",
   path: (

dapp/src/assets/icons/index.ts

@@ -1,9 +1,9 @@
-export * from "./AcreLogo"
-export * from "./Pause"
+export { default as AcreLogoIcon } from "./AcreLogoIcon"
+export { default as PauseIcon } from "./PauseIcon"
 export { default as LoadingSpinnerSuccessIcon } from "./LoadingSpinnerSuccessIcon"
-export * from "./BitcoinIcon"
-export * from "./CableWithPlugIcon"
-export * from "./MezoSignIcon"
-export * from "./AcreSignIcon"
-export * from "./BitcoinsStackErrorIcon"
+export { default as BitcoinIcon } from "./BitcoinIcon"
+export { default as CableWithPlugIcon } from "./CableWithPlugIcon"
+export { default as MezoSignIcon } from "./MezoSignIcon"
+export { default as AcreSignIcon } from "./AcreSignIcon"
+export { default as BitcoinsStackErrorIcon } from "./BitcoinsStackErrorIcon"
 export { default as MatsIcon } from "./MatsIcon"

dapp/src/assets/images/index.ts

@@ -0,0 +1,11 @@
+import acrePointsCardPlaceholder from "./acre-points-card-placeholder.png"
+import acrePointsIllustration from "./acre-points-illustration.png"
+import beehiveIllustration from "./beehive-illustration.svg"
+import emptyState from "./empty-state.svg"
+
+export {
+  acrePointsCardPlaceholder,
+  acrePointsIllustration,
+  beehiveIllustration,
+  emptyState,
+}

dapp/src/assets/videos/welcome-steps/index.ts

@@ -0,0 +1,5 @@
+import step1Video from "./welcome-step-1.mp4"
+import step2Video from "./welcome-step-2.mp4"
+import step3Video from "./welcome-step-3.mp4"
+
+export { step1Video, step2Video, step3Video }

dapp/src/components/AcrePointsClaimModal.tsx

@@ -7,13 +7,13 @@ import {
   Transition,
   useAnimate,
 } from "framer-motion"
-import { logPromiseFailure, numberToLocaleString } from "#/utils"
-import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
+import { logPromiseFailure, numbersUtils } from "#/utils"
+import { time } from "#/constants"
 import ConfettiExplosion from "react-confetti-explosion"
 import { BaseModalProps } from "#/types"
-import { AnimatedNumber } from "./shared/AnimatedNumber"
 import { TextXl } from "./shared/Typography"
 import withBaseModal from "./ModalRoot/withBaseModal"
+import AnimatedNumber from "./shared/AnimatedNumber"
 
 const MotionBox = motion(Box)
 
@@ -28,8 +28,8 @@ const TRANSITION: Transition = {
   stiffness: 86,
   delay: 4, // step duration
 }
-const AUTOCLOSE_DELAY = 12 * ONE_SEC_IN_MILLISECONDS
-const CONFETTI_DURATION = 4 * ONE_SEC_IN_MILLISECONDS
+const AUTOCLOSE_DELAY = 12 * time.ONE_SEC_IN_MILLISECONDS
+const CONFETTI_DURATION = 4 * time.ONE_SEC_IN_MILLISECONDS
 
 const getStepOffsets = (
   stepCount: number,
@@ -54,8 +54,9 @@ function AcrePointsClaimModalBase({
   totalAmount,
   closeModal,
 }: AcrePointsClaimModalBaseProps) {
-  const formattedClaimedAmount = numberToLocaleString(claimedAmount)
-  const formattedTotalAmount = numberToLocaleString(totalAmount)
+  const formattedClaimedAmount =
+    numbersUtils.numberToLocaleString(claimedAmount)
+  const formattedTotalAmount = numbersUtils.numberToLocaleString(totalAmount)
 
   const steps = useMemo<[string, ReactNode][]>(
     () => [

dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { AlertStatus, Box, Link, VStack } from "@chakra-ui/react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
-import { EXTERNAL_HREF } from "#/constants"
+import { externalHref } from "#/constants"
 import {
   Alert,
   AlertDescription,
@@ -35,7 +35,7 @@ function ContactSupport() {
         // TODO: Define in the new color palette
         color="#0E61FE"
         textDecoration="underline"
-        href={EXTERNAL_HREF.DISCORD}
+        href={externalHref.DISCORD}
         isExternal
       >
         Acre support

dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from "react"
-import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
+import { time } from "#/constants"
 import {
   useAppDispatch,
   useIsEmbed,
   useModal,
+  usePostHogIdentity,
   useSignMessageAndCreateSession,
   useWallet,
   useWalletConnectionAlert,
@@ -24,7 +25,6 @@ import {
 } from "@chakra-ui/react"
 import { IconArrowNarrowRight } from "@tabler/icons-react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
-import { usePostHogIdentity } from "#/hooks/posthog"
 import ArrivingSoonTooltip from "../ArrivingSoonTooltip"
 import { TextLg, TextMd } from "../shared/Typography"
 import ConnectWalletStatusLabel from "./ConnectWalletStatusLabel"
@@ -162,7 +162,7 @@ export default function ConnectWalletButton({
       }
 
       setIsLoading(false)
-    }, ONE_SEC_IN_MILLISECONDS * 2)
+    }, time.ONE_SEC_IN_MILLISECONDS * 2)
   }, [connector])
 
   const handleButtonClick = () => {

dapp/src/components/Footer.tsx

@@ -9,7 +9,7 @@ import {
   Button,
   Icon,
 } from "@chakra-ui/react"
-import { EXTERNAL_HREF } from "#/constants"
+import { externalHref } from "#/constants"
 import { AcreSignIcon } from "#/assets/icons"
 import { useMobileMode } from "#/hooks"
 import { IconArrowUpRight } from "@tabler/icons-react"
@@ -19,38 +19,38 @@ type FooterListItem = Pick<LinkProps, "href" | "children">
 const NAVIGATION: FooterListItem[] = [
   {
     children: "Acre.fi",
-    href: EXTERNAL_HREF.WEBSITE,
+    href: externalHref.WEBSITE,
   },
   {
     children: "Docs",
-    href: EXTERNAL_HREF.DOCS,
+    href: externalHref.DOCS,
   },
   {
     children: "FAQ",
-    href: EXTERNAL_HREF.FAQ,
+    href: externalHref.FAQ,
   },
   {
     children: "Blog",
-    href: EXTERNAL_HREF.BLOG,
+    href: externalHref.BLOG,
   },
   {
     children: "Discord",
-    href: EXTERNAL_HREF.DISCORD,
+    href: externalHref.DISCORD,
   },
   {
     children: "X",
-    href: EXTERNAL_HREF.X,
+    href: externalHref.X,
   },
 ]
 
 const DOCUMENTS: FooterListItem[] = [
   {
     children: "Privacy Policy",
-    href: EXTERNAL_HREF.PRIVACY_POLICY,
+    href: externalHref.PRIVACY_POLICY,
   },
   {
     children: "Terms of Use",
-    href: EXTERNAL_HREF.TERMS_OF_USE,
+    href: externalHref.TERMS_OF_USE,
   },
 ]
 

dapp/src/components/GateModal.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react"
 import { Link, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react"
 import { TextSm } from "#/components/shared/Typography"
-import { EXTERNAL_HREF } from "#/constants"
+import { externalHref } from "#/constants"
 import { BaseModalProps } from "#/types"
 import { useAccessCode } from "#/hooks"
 import withBaseModal from "./ModalRoot/withBaseModal"
@@ -34,7 +34,7 @@ export function GateModalBase({ closeModal }: BaseModalProps) {
           <Link
             fontWeight="bold"
             textDecoration="underline"
-            href={EXTERNAL_HREF.DISCORD}
+            href={externalHref.DISCORD}
             isExternal
           >
             Discord

dapp/src/components/GlobalStyles.tsx

@@ -1,11 +1,12 @@
 import React from "react"
 import { Global } from "@emotion/react"
-
-import SegmentRegular from "#/assets/fonts/Segment-Regular.otf"
-import SegmentMedium from "#/assets/fonts/Segment-Medium.otf"
-import SegmentSemiBold from "#/assets/fonts/Segment-SemiBold.otf"
-import SegmentBold from "#/assets/fonts/Segment-Bold.otf"
-import SegmentBlack from "#/assets/fonts/Segment-Black.otf"
+import {
+  SegmentRegular,
+  SegmentMedium,
+  SegmentSemiBold,
+  SegmentBold,
+  SegmentBlack,
+} from "#/assets/fonts"
 
 export default function GlobalStyles() {
   return (