chore: add wallet user survey, adjust styling

config/wallet-config.json

@@ -1,7 +1,18 @@
 {
   "$schema": "./wallet-config.schema.json",
   "messages": {
-    "global": []
+    "global": [
+      {
+        "chainTarget": "all",
+        "dismissible": true,
+        "id": "user-survey-announcement",
+        "publishedAt": "2024-04-03T12:55:46",
+        "text": "We want to hear what you think about Leather.",
+        "learnMoreText": "Take our user survey →",
+        "learnMoreUrl": "https://blocksurvey.io/leather-wallet-user-survey-YWvSDeY2RU2mBtmuG2sbwA",
+        "purpose": "info"
+      }
+    ]
   },
   "activeFiatProviders": {
     "coinbase": {

src/app/features/hiro-messages/components/in-app-message-item.tsx

@@ -11,18 +11,22 @@ export function HiroMessageItem(props: HiroMessageItemProps) {
     props;
 
   return (
-    <Flex position="relative" py="space.05" px="space.04" width="100%" justifyContent="center">
-      <Flex pos="relative" flexDirection={['column', null, 'row']} width={['100%', null, '884px']}>
+    <Flex position="relative" py="space.05" px="space.05" width="100%" justifyContent="center">
+      <Flex
+        pos="relative"
+        flexDirection={['column', null, 'row']}
+        width="100%"
+        maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
+        px={['unset', 'space.05']}
+      >
         {dismissible && (
           <styled.button
             position="absolute"
             p="space.02"
             top={['-16px', null, '50%']}
-            // mr="space.02"
             mt={['space.02', null, 'unset']}
             transform={[null, null, 'translateY(-50%)']}
-            right="-space.02"
-            borderRadius="lg"
+            right={['-space.02', 'space.04']}
             _focus={{ outline: '1px solid white' }}
             onClick={() => onDismiss(id)}
           >
@@ -34,33 +38,33 @@ export function HiroMessageItem(props: HiroMessageItemProps) {
             <img width={imgWidth} src={img} />
           </Box>
         )}
-        <Box fontSize="13px" lineHeight="20px">
+        <Box>
           {title && (
             <styled.span textStyle="label.02" display="block" lineHeight="inherit">
               {title}
             </styled.span>
           )}
           <styled.span
-            textStyle="caption.01"
+            textStyle="label.02"
             display="inline-block"
             fontSize="inherit"
-            mr={['space.02', 'space.04']}
-            mt="space.03"
+            mr="space.07"
             lineHeight="inherit"
           >
             {text}
+            {learnMoreUrl && (
+              <styled.a
+                textStyle="label.02"
+                textDecoration="underline"
+                href={learnMoreUrl}
+                whiteSpace="nowrap"
+                target="_blank"
+                ml="space.01"
+              >
+                {learnMoreText ? learnMoreText : 'Learn more →'}
+              </styled.a>
+            )}
           </styled.span>
-          {learnMoreUrl && (
-            <styled.a
-              display="inline-block"
-              textDecoration="underline"
-              href={learnMoreUrl}
-              whiteSpace="nowrap"
-              target="_blank"
-            >
-              {learnMoreText ? learnMoreText : 'Learn more ↗'}
-            </styled.a>
-          )}
         </Box>
       </Flex>
     </Flex>

src/app/features/hiro-messages/in-app-messages.tsx

@@ -1,21 +1,25 @@
+import { useLocation } from 'react-router-dom';
+
 import { Flex, FlexProps } from 'leather-styles/jsx';
 
+import { RouteUrls } from '@shared/route-urls';
+
 import { useRemoteLeatherMessages } from '@app/query/common/remote-config/remote-config.query';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 import { useDismissMessage } from '@app/store/settings/settings.actions';
 import { useDismissedMessageIds } from '@app/store/settings/settings.selectors';
 
 import { HiroMessageItem } from './components/in-app-message-item';
 
-//  See wallet-config.md for instructions on testing InAppMessages
 export function InAppMessages(props: FlexProps) {
+  const location = useLocation();
   const messages = useRemoteLeatherMessages();
 
   const { mode } = useCurrentNetworkState();
   const dismissMessage = useDismissMessage();
   const dismissedIds = useDismissedMessageIds();
 
-  if (messages.length === 0) return null;
+  if (location.pathname !== RouteUrls.Home || messages.length === 0) return null;
 
   const firstMessage = messages.filter(msg => !dismissedIds.includes(msg.id))[0];