Merge pull request argentlabs#1947 from argentlabs/feature/dappland-b…

…anner

BLO-861 dappland-banner

packages/extension/src/declarations.d.ts

@@ -1,5 +1,9 @@
 declare module "*.svg"
 declare module "*.gif"
+declare module "*.png" {
+  const url: string
+  export default url
+}
 declare module "*.txt" {
   const url: string
   export default url

packages/extension/src/ui/features/accountTokens/AccountTokens.tsx

@@ -1,5 +1,7 @@
-import { CellStack } from "@argent/ui"
+import { CellStack, DapplandBanner } from "@argent/ui"
+import dapplandBanner from "@argent/ui/assets/dapplandBannerBackground.png"
 import { Flex, VStack } from "@chakra-ui/react"
+import { AnimatePresence, motion } from "framer-motion"
 import { FC, useCallback, useEffect, useRef } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 import useSWR from "swr"
@@ -27,6 +29,7 @@ import { useAccountGuardianIsSelf } from "../shield/useAccountGuardian"
 import { StatusMessageBannerContainer } from "../statusMessage/StatusMessageBanner"
 import { AccountTokensButtons } from "./AccountTokensButtons"
 import { AccountTokensHeader } from "./AccountTokensHeader"
+import { useDapplandBanner } from "./dappland/banner.state"
 import { TokenList } from "./TokenList"
 import { useCurrencyDisplayEnabled } from "./tokenPriceHooks"
 import { useFeeTokenBalance } from "./tokens.service"
@@ -44,6 +47,7 @@ export const AccountTokens: FC<AccountTokensProps> = ({ account }) => {
   const { pendingTransactions } = useAccountTransactions(account)
   const { accountNames } = useAccountMetadata()
   const { isBackupRequired } = useBackupRequired()
+  const { hasSeenBanner } = useDapplandBanner()
   const currencyDisplayEnabled = useCurrencyDisplayEnabled()
   const transactionsBeforeReview = useKeyValueStorage(
     userReviewStore,
@@ -102,6 +106,13 @@ export const AccountTokens: FC<AccountTokensProps> = ({ account }) => {
   const hasEscape = accountHasEscape(account)
   const accountGuardianIsSelf = useAccountGuardianIsSelf(account)
 
+  const showDapplandBanner =
+    !hasSeenBanner &&
+    !showBackupBanner &&
+    !needsUpgrade &&
+    !hasPendingTransactions &&
+    !hasEscape
+
   const hadPendingTransactions = useRef(false)
   useEffect(() => {
     if (hasPendingTransactions) {
@@ -149,6 +160,23 @@ export const AccountTokens: FC<AccountTokensProps> = ({ account }) => {
         {showNoBalanceForUpgrade && (
           <UpgradeBanner canNotPay to={routes.funding()} />
         )}
+        <AnimatePresence initial={false}>
+          {showDapplandBanner && (
+            <motion.div
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.2 }}
+            >
+              <DapplandBanner
+                backgroundImageUrl={dapplandBanner}
+                href="https://www.dappland.com?utm_source=argent&utm_medium=extension&utm_content=banner"
+                onClose={() => {
+                  useDapplandBanner.setState({ hasSeenBanner: true })
+                }}
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
         <TokenList variant={tokenListVariant} showNewTokenButton />
       </CellStack>
     </Flex>

packages/extension/src/ui/features/accountTokens/dappland/banner.state.ts

@@ -0,0 +1,15 @@
+import create from "zustand"
+import { persist } from "zustand/middleware"
+
+export interface DapplandBannerState {
+  hasSeenBanner: boolean
+}
+
+export const useDapplandBanner = create<DapplandBannerState>(
+  persist(
+    (_set, _get) => ({
+      hasSeenBanner: false,
+    }),
+    { name: "hasSeenDapplandBanner" },
+  ),
+)

packages/extension/src/ui/features/settings/DapplandFooter.tsx

@@ -0,0 +1,28 @@
+import { Button, P3 } from "@argent/ui"
+import { SimpleGrid, VStack } from "@chakra-ui/react"
+import { FC } from "react"
+
+import { DapplandIcon } from "./assets/DapplandIcon"
+
+const DapplandFooter: FC = () => (
+  <VStack mt={4} borderTop="solid 1px" borderTopColor="border">
+    <P3 color="neutrals.400" pt="6">
+      Discover Starknet dapps:
+    </P3>
+    <SimpleGrid columns={1} gap="2" w="100%" py={4}>
+      <Button
+        as={"a"}
+        size="sm"
+        rounded={"lg"}
+        leftIcon={<DapplandIcon />}
+        href="https://www.dappland.com?utm_source=argent&utm_medium=extension&utm_content=settings"
+        title="Dappland"
+        target="_blank"
+      >
+        Dappland
+      </Button>
+    </SimpleGrid>
+  </VStack>
+)
+
+export { DapplandFooter }

packages/extension/src/ui/features/settings/SettingsScreen.tsx

@@ -18,6 +18,7 @@ import { H2 } from "../../theme/Typography"
 import { AccountListScreenItem } from "../accounts/AccountListScreenItem"
 import { useAccount, useSelectedAccount } from "../accounts/accounts.state"
 import { useExtensionIsInTab, useOpenExtensionInTab } from "../browser/tabs"
+import { DapplandFooter } from "./DapplandFooter"
 import { SettingsMenuItem } from "./SettingsMenuItem"
 import { SupportFooter } from "./SupportFooter"
 
@@ -145,6 +146,7 @@ export const SettingsScreen: FC = () => {
               title="Privacy"
             />
           )}
+          <DapplandFooter />
           <SupportFooter />
         </CellStack>
       </NavigationContainer>

packages/storybook/.storybook/main.ts

@@ -4,6 +4,7 @@ export default {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
+    "@storybook/addon-actions",
     {
       name: "@storybook/addon-essentials",
       options: {
@@ -60,5 +61,5 @@ export default {
     }
     return config
   },
-  staticDirs: ["../../extension/src"],
+  staticDirs: ["../../extension/src", "../../ui/assets"],
 }

packages/storybook/src/declarations.d.ts

@@ -1,5 +1,9 @@
 declare module "*.svg"
 declare module "*.gif"
+declare module "*.png" {
+  const url: string
+  export default url
+}
 declare module "*.txt" {
   const url: string
   export default url

packages/storybook/src/ui/components/DapplandBanner.stories.tsx

@@ -0,0 +1,22 @@
+import { DapplandBanner } from "@argent/ui"
+import dapplandBanner from "@argent/ui/assets/dapplandBannerBackground.png"
+import { action } from "@storybook/addon-actions"
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+
+export default {
+  title: "components/DapplandBanner",
+  component: DapplandBanner,
+} as ComponentMeta<typeof DapplandBanner>
+
+const Template: ComponentStory<typeof DapplandBanner> = (props) => (
+  <DapplandBanner {...props}></DapplandBanner>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  title: "Discover",
+  subTitle: "Starknet dapps",
+  backgroundImageUrl: dapplandBanner,
+  href: "https://www.dappland.com?utm_source=argent&utm_medium=extension&utm_content=banner",
+  onClose: action("onClose"),
+}

packages/ui/package.json

@@ -4,7 +4,8 @@
   "license": "MIT",
   "private": true,
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "main": "./dist/ui.umd.js",
   "module": "./dist/ui.es.js",
@@ -13,7 +14,8 @@
     ".": {
       "import": "./dist/ui.es.js",
       "require": "./dist/ui.umd.js"
-    }
+    },
+    "./assets/dapplandBannerBackground.png": "./assets/dapplandBannerBackground.png"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.1.8",

packages/ui/src/components/DapplandBanner.tsx

@@ -0,0 +1,99 @@
+import { Box } from "@chakra-ui/react"
+import { FC, MouseEventHandler } from "react"
+
+import { ButtonCell } from "./CellStack"
+import { CloseIcon } from "./icons"
+import { P3, P4 } from "./Typography"
+
+interface CloseButtonProps {
+  onClick?: MouseEventHandler<HTMLDivElement>
+}
+
+interface DapplandBannerProps {
+  href: string
+  backgroundImageUrl: string
+  title?: string
+  subTitle?: string
+  onClose?: () => void
+}
+
+const Scrim: FC = () => (
+  <Box
+    position="absolute"
+    top="0"
+    left="0"
+    right="0"
+    bottom="0"
+    background="linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)"
+    zIndex="0"
+  />
+)
+const CloseButton: FC<CloseButtonProps> = ({ ...props }) => (
+  <Box
+    position="absolute"
+    top="0"
+    right="0"
+    width="24px"
+    height="24px"
+    zIndex="1"
+    background="black"
+    color="white"
+    borderRadius={"50%"}
+    m={1}
+    display="flex"
+    justifyContent="center"
+    alignItems="center"
+    {...props}
+  >
+    <CloseIcon fontSize="xs" />
+  </Box>
+)
+
+export const DapplandBanner: FC<DapplandBannerProps> = ({
+  href,
+  backgroundImageUrl,
+  title = "Discover",
+  subTitle = "Starknet dapps",
+  onClose,
+}) => {
+  return (
+    <ButtonCell
+      width="100%"
+      overflow="hidden"
+      position={"relative"}
+      rightIcon={null}
+      bgColor="#DCCAC0"
+      background={`url("${backgroundImageUrl}")`}
+      backgroundSize="contain"
+      backgroundPosition="right top"
+      backgroundRepeat="no-repeat"
+      as="a"
+      title="Dappland"
+      target="_blank"
+      // reset hover styles
+      _hover={{
+        background: `url("${backgroundImageUrl}")`,
+        backgroundSize: "contain",
+        backgroundPosition: "right top",
+        backgroundRepeat: "no-repeat",
+        bgColor: "#DCCAC0",
+      }}
+      href={href}
+    >
+      <Scrim />
+      <P3 zIndex="1" color="black" fontWeight="extrabold">
+        {title}
+      </P3>
+      <P4 zIndex="1" color="black" fontWeight="medium">
+        {subTitle}
+      </P4>
+      <CloseButton
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          onClose?.()
+        }}
+      />
+    </ButtonCell>
+  )
+}

packages/ui/src/components/index.ts

@@ -8,6 +8,7 @@ export * from "./AlertDialog"
 export * from "./Button"
 export * from "./CellStack"
 export * from "./CopyTooltip"
+export * from "./DapplandBanner"
 export * from "./Empty"
 export * from "./Error"
 export * from "./Input"