Merge branch 'main' into fix-referral-mechanism

thesis · Nov 22, 2024 · e361813 · e361813
2 parents aafe02f + fff5028
commit e361813
Show file tree

Hide file tree

Showing 35 changed files with 209 additions and 121 deletions.
diff --git a/dapp/.env b/dapp/.env
@@ -26,4 +26,5 @@ VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false"
 VITE_FEATURE_FLAG_ACRE_POINTS_ENABLED="true"
 VITE_FEATURE_FLAG_TVL_ENABLED="true"
 VITE_FEATURE_GATING_DAPP_ENABLED="true"
+VITE_FEATURE_MOBILE_MODE_ENABLED="true"
 
diff --git a/dapp/index.html b/dapp/index.html
@@ -1,13 +1,33 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/acre.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ACRE</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+
+<head>
+  <title>Acre App</title>
+  <meta name="title" content="Acre App" />
+  <meta name="description" content="Bitcoin Rewards Done Right" />
+
+  <link rel="icon" type="image/svg+xml" href="/acre.svg" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://bitcoin.acre.fi/" />
+  <meta property="og:title" content="Acre App" />
+  <meta property="og:description" content="Bitcoin Rewards Done Right" />
+  <meta property="og:image" content="/meta-image.png" />
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:url" content="https://bitcoin.acre.fi/" />
+  <meta property="twitter:title" content="Acre App" />
+  <meta property="twitter:description" content="Bitcoin Rewards Done Right" />
+  <meta property="twitter:image" content="/meta-image.png" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
 </html>
diff --git a/dapp/manifests/ledger-live/ledger-live-manifest-development.json b/dapp/manifests/ledger-live/ledger-live-manifest-development.json
@@ -2,20 +2,20 @@
   "id": "acre-dev",
   "name": "Acre [dev]",
   "url": "http://localhost:5173/?embed=ledger-live",
-  "homepageUrl": "https:/acre.fi/",
+  "homepageUrl": "https://acre.fi/",
   "icon": "http://localhost:5173/acre.svg",
-  "platforms": "desktop",
+  "platforms": "all",
   "apiVersion": "^2.0.0",
   "manifestVersion": "2",
   "branch": "stable",
   "categories": ["staking"],
   "currencies": ["bitcoin", "bitcoin_testnet"],
   "content": {
     "shortDescription": {
-      "en": "Bitcoin Liquid Staking"
+      "en": "Bitcoin Rewards Done Right"
     },
     "description": {
-      "en": "Bitcoin Liquid Staking"
+      "en": "Bitcoin Rewards Done Right"
     }
   },
   "permissions": [
@@ -27,6 +27,5 @@
     "custom.acre.messageSign",
     "custom.acre.transactionSignAndBroadcast"
   ],
-  "domains": ["http://*"],
-  "type": "walletApp"
+  "domains": ["https://"]
 }
diff --git a/dapp/manifests/ledger-live/ledger-live-manifest-mainnet.json b/dapp/manifests/ledger-live/ledger-live-manifest-mainnet.json
@@ -2,20 +2,20 @@
   "id": "acre",
   "name": "Acre",
   "url": "https://bitcoin.acre.fi/?embed=ledger-live",
-  "homepageUrl": "https:/acre.fi/",
+  "homepageUrl": "https://acre.fi/",
   "icon": "https://bitcoin.acre.fi/acre.svg",
-  "platforms": "desktop",
+  "platforms": "all",
   "apiVersion": "^2.0.0",
   "manifestVersion": "2",
   "branch": "stable",
   "categories": ["staking"],
   "currencies": ["bitcoin", "bitcoin_testnet"],
   "content": {
     "shortDescription": {
-      "en": "Bitcoin Liquid Staking"
+      "en": "Bitcoin Rewards Done Right"
     },
     "description": {
-      "en": "Bitcoin Liquid Staking"
+      "en": "Bitcoin Rewards Done Right"
     }
   },
   "permissions": [
@@ -27,6 +27,5 @@
     "custom.acre.messageSign",
     "custom.acre.transactionSignAndBroadcast"
   ],
-  "domains": ["http://*"],
-  "type": "walletApp"
+  "domains": ["https://"]
 }
diff --git a/dapp/manifests/ledger-live/ledger-live-manifest-testnet.json b/dapp/manifests/ledger-live/ledger-live-manifest-testnet.json
@@ -2,20 +2,20 @@
   "id": "acre-testnet",
   "name": "Acre [testnet]",
   "url": "https://bitcoin.test.acre.fi/?embed=ledger-live",
-  "homepageUrl": "https:/acre.fi/",
+  "homepageUrl": "https://acre.fi/",
   "icon": "https://bitcoin.test.acre.fi/acre.svg",
-  "platforms": "desktop",
+  "platforms": "all",
   "apiVersion": "^2.0.0",
   "manifestVersion": "2",
   "branch": "stable",
   "categories": ["staking"],
   "currencies": ["bitcoin", "bitcoin_testnet"],
   "content": {
     "shortDescription": {
-      "en": "Bitcoin Liquid Staking"
+      "en": "Bitcoin Rewards Done Right"
     },
     "description": {
-      "en": "Bitcoin Liquid Staking"
+      "en": "Bitcoin Rewards Done Right"
     }
   },
   "permissions": [
@@ -27,6 +27,5 @@
     "custom.acre.messageSign",
     "custom.acre.transactionSignAndBroadcast"
   ],
-  "domains": ["http://*"],
-  "type": "walletApp"
+  "domains": ["https://"]
 }
diff --git a/dapp/manifests/ledger-live/ledger-manifest-template.json b/dapp/manifests/ledger-live/ledger-manifest-template.json
@@ -2,20 +2,20 @@
   "id": "{{id}}",
   "name": "{{name}}",
   "url": "{{{url}}}?embed=ledger-live",
-  "homepageUrl": "https:/acre.fi/",
+  "homepageUrl": "https://acre.fi/",
   "icon": "{{{url}}}acre.svg",
-  "platforms": "desktop",
+  "platforms": "all",
   "apiVersion": "^2.0.0",
   "manifestVersion": "2",
   "branch": "stable",
   "categories": ["staking"],
   "currencies": ["bitcoin", "bitcoin_testnet"],
   "content": {
     "shortDescription": {
-      "en": "Bitcoin Liquid Staking"
+      "en": "Bitcoin Rewards Done Right"
     },
     "description": {
-      "en": "Bitcoin Liquid Staking"
+      "en": "Bitcoin Rewards Done Right"
     }
   },
   "permissions": [
@@ -27,6 +27,5 @@
     "custom.acre.messageSign",
     "custom.acre.transactionSignAndBroadcast"
   ],
-  "domains": ["http://*"],
-  "type": "walletApp"
+  "domains": ["https://"]
 }
diff --git a/dapp/public/meta-image.png b/dapp/public/meta-image.png
diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx
@@ -162,7 +162,7 @@ function AcrePointsClaimModalBase({
               <Box
                 data-step-value
                 transformOrigin="bottom"
-                fontSize="8xl"
+                fontSize={{ base: "5xl", md: "8xl" }}
                 lineHeight="6.25rem" // 100px
                 fontWeight="bold"
                 color="grey.700"
@@ -208,7 +208,6 @@ function AcrePointsClaimModalBase({
 const AcrePointsClaimModal = withBaseModal(AcrePointsClaimModalBase, {
   returnFocusOnClose: false,
   variant: "unstyled",
-  size: "full",
 })
 
 export default AcrePointsClaimModal
diff --git a/dapp/src/components/ArrivingSoonTooltip.tsx b/dapp/src/components/ArrivingSoonTooltip.tsx
@@ -1,15 +1,17 @@
 import React, { ReactNode } from "react"
-import { Tooltip } from "@chakra-ui/react"
+import Tooltip from "./shared/Tooltip"
 
 export default function ArrivingSoonTooltip({
+  label,
   shouldDisplayTooltip,
   children,
 }: {
+  label?: string
   shouldDisplayTooltip: boolean
   children: ReactNode
 }) {
   return shouldDisplayTooltip ? (
-    <Tooltip label="Arriving Soon">{children}</Tooltip>
+    <Tooltip label={label ?? "Arriving Soon"}>{children}</Tooltip>
   ) : (
     children
   )

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletErrorAlert.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletErrorAlert.tsx
@@ -39,7 +39,7 @@ export default function ConnectWalletErrorAlert(
           <Alert status="error" mb={6} {...restProps}>
             <AlertIcon />
             <VStack w="full" align="start" spacing={0}>
-              <AlertTitle>{title}</AlertTitle>
+              <AlertTitle textAlign="start">{title}</AlertTitle>
               <AlertDescription>{description}</AlertDescription>
             </VStack>
           </Alert>

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
@@ -46,12 +46,12 @@ export default function ConnectWalletStatusLabel({
 
   return (
     <HStack spacing={3}>
-      <HStack>
+      <HStack textAlign="start">
         {icon}
         <TextMd {...statusToLabelProps[status]}>{label}</TextMd>
       </HStack>
       {isError && (
-        <HStack color="red.400">
+        <HStack color="red.400" textAlign="start">
           <Icon as={IconInfoCircle} boxSize={boxSize} />
           <TextMd>Rejected by user</TextMd>
         </HStack>

diff --git a/dapp/src/components/Footer.tsx b/dapp/src/components/Footer.tsx
@@ -11,6 +11,7 @@ import {
 } from "@chakra-ui/react"
 import { EXTERNAL_HREF } from "#/constants"
 import { AcreSignIcon, ArrowUpRight } from "#/assets/icons"
+import { useMobileMode } from "#/hooks"
 
 type FooterListItem = Pick<LinkProps, "href" | "children">
 
@@ -74,6 +75,9 @@ const getItemsList = (
 
 export default function Footer() {
   const styles = useMultiStyleConfig("Footer")
+  const isMobileMode = useMobileMode()
+
+  if (isMobileMode) return null
 
   return (
     <Box as="footer" __css={styles.container}>

diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
@@ -6,7 +6,6 @@ import {
   Icon,
   IconButton,
   StackDivider,
-  Tooltip,
   useClipboard,
   useMultiStyleConfig,
 } from "@chakra-ui/react"
@@ -24,6 +23,7 @@ import {
   IconUserCode,
 } from "@tabler/icons-react"
 import { useMatch } from "react-router-dom"
+import Tooltip from "../shared/Tooltip"
 
 function isChangeAccountFeatureSupported(embeddedApp: string | undefined) {
   return referralProgram.isEmbedApp(embeddedApp)

diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx
@@ -13,9 +13,9 @@ export default function Header() {
       mx="auto"
       justify="space-between"
       zIndex="header"
-      pt={12}
+      pt={{ base: 4, md: 12 }}
       pb={{ base: 4, xl: 12 }}
-      px={{ base: 10, xl: 30 }}
+      px={{ base: 4, md: "2.5rem", xl: 30 }}
     >
       <Link href={EXTERNAL_HREF.WEBSITE} isExternal>
         <Icon as={AcreLogo} w={20} h={12} />

diff --git a/dapp/src/components/Layout.tsx b/dapp/src/components/Layout.tsx
@@ -10,17 +10,21 @@ import Sidebar from "./Sidebar"
 import MobileModeBanner from "./MobileModeBanner"
 import Footer from "./Footer"
 
-const PADDING = "2.5rem" // 40px
+// The padding update should also be done in the Header component and Footer theme as well
+const PADDING = {
+  base: 4,
+  md: "2.5rem", // 40px
+}
 const PAGE_MAX_WIDTH: Record<DappMode, string> = {
   standalone: "63rem", // 1008px
   "ledger-live": "63rem", // 1008px
 }
 
 function Layout() {
   const isMobileMode = useMobileMode()
-  const { embeddedApp } = useIsEmbed()
+  const { isEmbed, embeddedApp } = useIsEmbed()
 
-  if (isMobileMode) return <MobileModeBanner forceOpen />
+  if (!isEmbed && isMobileMode) return <MobileModeBanner forceOpen />
 
   const maxWidth = embeddedApp
     ? PAGE_MAX_WIDTH[embeddedApp]
@@ -33,10 +37,11 @@ function Layout() {
       <Flex
         flexFlow="column"
         mx="auto"
-        p={PADDING}
+        px={PADDING}
+        pb={10}
         pt={0.5}
         w="full"
-        maxWidth={`calc(${maxWidth} + 2*${PADDING})`}
+        maxWidth={`calc(${maxWidth} + 2*${PADDING.md})`}
         flex={1}
       >
         <Outlet />

diff --git a/dapp/src/components/MobileModeBanner/index.tsx b/dapp/src/components/MobileModeBanner/index.tsx
@@ -46,7 +46,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
     >
       <Flex align="center" justify="center" p={4} bg="grey.700">
         <TextMd color="gold.300" textAlign="center" whiteSpace="break-spaces">
-          Staking is <LiveTag color="brand.400" gap={1} px={1} py={0} /> on
+          Acre App is <LiveTag color="brand.400" gap={1} px={1} py={0} /> on
           desktop!
         </TextMd>
 
@@ -92,7 +92,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
               <AcreAnimatedBadge mx="auto" mb={12} />
 
               <H4 mb={9} fontWeight="500">
-                Staking is live only on desktop for now. We&apos;re working with
+                Acre App live only on desktop for now. We&apos;re working with
                 partners to bring it to mobile soon.
               </H4>
 

diff --git a/dapp/src/components/TransactionModal/index.tsx b/dapp/src/components/TransactionModal/index.tsx
@@ -4,7 +4,6 @@ import {
   useAppDispatch,
   useFetchActivities,
   useIsSignedMessage,
-  useSidebar,
   useTransactionModal,
 } from "#/hooks"
 import { ActionFlowType, BaseModalProps } from "#/types"
@@ -18,7 +17,6 @@ import { ConnectWalletModalBase } from "../ConnectWalletModal"
 type TransactionModalProps = { type: ActionFlowType } & BaseModalProps
 
 function TransactionModalBase({ type, closeModal }: TransactionModalProps) {
-  const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar()
   const dispatch = useAppDispatch()
   const fetchActivities = useFetchActivities()
 
@@ -34,11 +32,6 @@ function TransactionModalBase({ type, closeModal }: TransactionModalProps) {
     }
   }, [dispatch, fetchActivities])
 
-  useEffect(() => {
-    openSideBar()
-    return () => closeSidebar()
-  }, [closeSidebar, openSideBar])
-
   return (
     <StakeFlowProvider>
       <ModalContentWrapper closeModal={closeModal}>