feat: sentry feedback

.github/workflows/playwright.yml

@@ -110,13 +110,6 @@ jobs:
       - name: Merge into HTML Report
         run: npx playwright merge-reports --reporter html ./all-blob-reports
 
-      - name: Upload HTML report
-        uses: actions/upload-artifact@v3
-        with:
-          name: html-report--attempt-${{ github.run_attempt }}
-          path: playwright-report
-          retention-days: 14
-
       - name: Extract branch name
         shell: bash
         run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT

package.json

@@ -140,7 +140,7 @@
     "@scure/bip39": "1.2.1",
     "@scure/btc-signer": "1.1.0",
     "@segment/analytics-next": "1.56.0",
-    "@sentry/react": "7.72.0",
+    "@sentry/react": "7.86.0",
     "@sentry/tracing": "7.72.0",
     "@stacks/auth": "6.9.0",
     "@stacks/blockchain-api-client": "6.3.4",

panda.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from '@pandacss/dev';
 import { breakpoints } from './theme/breakpoints';
 import { globalCss } from './theme/global/global';
 import { keyframes } from './theme/keyframes';
-import { buttonRecipe } from './theme/recipes/button';
+import { buttonRecipe } from './theme/recipes/button-recipe';
 import { semanticTokens } from './theme/semantic-tokens';
 import { tokens } from './theme/tokens';
 import { textStyles } from './theme/typography';

src/app/components/app-version.tsx

@@ -23,6 +23,7 @@ const AppVersionLabel = forwardRef<HTMLSpanElement, AppVersionLabelProps>(
       ml="space.02"
       opacity={0.5}
       textDecoration={isLatestVersion ? 'none' : 'line-through'}
+      textWrap="nowrap"
       {...props}
     >
       {children}
@@ -36,7 +37,7 @@ export function AppVersion() {
   const version = useMemo(() => {
     switch (process.env.WALLET_ENVIRONMENT) {
       case 'development':
-        return `dev@${BRANCH_NAME}`;
+        return BRANCH_NAME;
       case 'feature':
         return `${BRANCH_NAME}#${COMMIT_SHA?.slice(0, 8)}`;
       default:

src/app/features/asset-list/components/connect-ledger-asset-button.tsx

@@ -31,7 +31,7 @@ export function ConnectLedgerAssetBtn({ chain }: ConnectLedgerAssetBtnProps) {
       display="flex"
       alignItems="center"
       variant="outline"
-      height="36px"
+      size="sm"
       gap="space.02"
       onClick={onClick}
     >

src/app/features/feedback-button/feedback-button.tsx

@@ -0,0 +1,50 @@
+import { BrowserClient, Feedback, getCurrentHub } from '@sentry/react';
+import { Flex } from 'leather-styles/jsx';
+
+import { analytics } from '@shared/utils/analytics';
+
+import { useThemeSwitcher } from '@app/common/theme-provider';
+import { LeatherButton } from '@app/ui/components/button';
+import { MegaphoneIcon } from '@app/ui/components/icons/megaphone-icon';
+
+export function openFeedbackDialog() {
+  void analytics.track('user_clicked_feedback_button');
+  const client = getCurrentHub().getClient<BrowserClient>();
+  const feedback = client?.getIntegration(Feedback);
+  if (!feedback) return;
+  feedback.openDialog();
+}
+
+export function FeedbackButton() {
+  const { theme } = useThemeSwitcher();
+  return (
+    <LeatherButton
+      background="brown.1"
+      _hover={{ background: 'brown.2' }}
+      variant="ghost"
+      size="sm"
+      pos="fixed"
+      bottom="space.04"
+      right="space.04"
+      left="auto"
+      top="auto"
+      boxShadow={
+        theme === 'light'
+          ? '0px 12px 24px 0px rgba(18, 16, 15, 0.08), 0px 4px 8px 0px rgba(18, 16, 15, 0.08), 0px 0px 2px 0px rgba(18, 16, 15, 0.08);'
+          : undefined
+      }
+      filter={
+        theme === 'dark'
+          ? 'drop-shadow(0px 12px 24px rgba(247, 245, 243, 0.08)) drop-shadow(0px 4px 8px rgba(247, 245, 243, 0.08)) drop-shadow(0px 0px 2px rgba(247, 245, 243, 0.50));'
+          : undefined
+      }
+      zIndex={9}
+      onClick={openFeedbackDialog}
+    >
+      <Flex>
+        <MegaphoneIcon mr="space.01" mt="2px" />
+        Give feedback
+      </Flex>
+    </LeatherButton>
+  );
+}

src/app/features/settings-dropdown/settings-dropdown.tsx

@@ -21,6 +21,7 @@ import { useCurrentNetworkId } from '@app/store/networks/networks.selectors';
 import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
 import { Caption } from '@app/ui/components/typography/caption';
 
+import { openFeedbackDialog } from '../feedback-button/feedback-button';
 import { extractDeviceNameFromKnownTargetIds } from '../ledger/utils/generic-ledger-utils';
 import { AdvancedMenuItems } from './components/advanced-menu-items';
 import { LedgerDeviceItemRow } from './components/ledger-item-row';
@@ -109,7 +110,6 @@ export function SettingsDropdown() {
       <MenuItem
         data-testid={SettingsSelectors.GetSupportMenuItem}
         onClick={wrappedCloseCallback(() => {
-          void analytics.track('click_get_support_menu_item');
           openInNewTab('https://leather.gitbook.io/guides/installing/contact-support');
         })}
       >
@@ -118,17 +118,7 @@ export function SettingsDropdown() {
           <ExternalLinkIcon />
         </HStack>
       </MenuItem>
-      <MenuItem
-        onClick={wrappedCloseCallback(() => {
-          void analytics.track('click_request_feature_menu_item');
-          openInNewTab('https://leather.canny.io/feature-requests');
-        })}
-      >
-        <HStack>
-          <Box>Request feature</Box>
-          <ExternalLinkIcon />
-        </HStack>
-      </MenuItem>
+      <MenuItem onClick={wrappedCloseCallback(() => openFeedbackDialog())}>Give feedback</MenuItem>
       {hasGeneratedWallet ? <Divider /> : null}
       <MenuItem
         data-testid={SettingsSelectors.ChangeNetworkAction}
@@ -147,6 +137,7 @@ export function SettingsDropdown() {
       </MenuItem>
 
       <Divider />
+
       {showAdvancedMenuOptions && (
         <AdvancedMenuItems closeHandler={wrappedCloseCallback} settingsShown={isShowingSettings} />
       )}

src/app/pages/home/home.tsx

@@ -9,6 +9,7 @@ import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { Header } from '@app/components/header';
 import { ActivityList } from '@app/features/activity-list/activity-list';
 import { AssetsList } from '@app/features/asset-list/asset-list';
+import { FeedbackButton } from '@app/features/feedback-button/feedback-button';
 import { InAppMessages } from '@app/features/hiro-messages/in-app-messages';
 import { homePageModalRoutes } from '@app/routes/app-routes';
 import { ModalBackgroundWrapper } from '@app/routes/components/modal-background-wrapper';
@@ -37,6 +38,7 @@ export function Home() {
 
   return (
     <HomeLayout currentAccount={<CurrentAccount />}>
+      <FeedbackButton />
       <HomeTabs>
         <ModalBackgroundWrapper>
           <Route index element={<AssetsList />} />

src/app/ui/components/button.tsx

@@ -10,9 +10,13 @@ export type ButtonProps = Omit<
   ButtonVariantProps;
 
 export function LeatherButton(props: ButtonProps) {
-  const { children, variant, fullWidth, invert, type = 'button', ...rest } = props;
+  const { children, variant, fullWidth, invert, size, type = 'button', ...rest } = props;
   return (
-    <StyledButton className={buttonRecipe({ variant, fullWidth, invert })} type={type} {...rest}>
+    <StyledButton
+      className={buttonRecipe({ variant, fullWidth, size, invert })}
+      type={type}
+      {...rest}
+    >
       {children}
     </StyledButton>
   );

src/app/ui/components/icons/megaphone-icon.tsx

@@ -0,0 +1,23 @@
+import { styled } from 'leather-styles/jsx';
+
+import { SvgProps } from '@app/ui/ui-types';
+
+export function MegaphoneIcon({ size = 'sm', ...props }: SvgProps) {
+  return (
+    <styled.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M12.1652 9.33339C13.2698 9.33339 14.1652 8.43796 14.1652 7.33339C14.1652 6.22882 13.2698 5.33339 12.1652 5.33339M8.38477 12.1667C8.11021 12.9435 7.36939 13.5001 6.49858 13.5001C5.39401 13.5001 4.49858 12.6046 4.49858 11.5001V10.5001M4.50004 4.16672V10.5001M12.1652 2.73695V11.9298C12.1652 12.3786 11.7307 12.6992 11.3019 12.5668L2.3019 9.78803C2.02248 9.70175 1.83191 9.44346 1.83191 9.15103L1.83191 5.51575C1.83191 5.22332 2.02248 4.96502 2.3019 4.87875L11.3019 2.09995C11.7307 1.96755 12.1652 2.28814 12.1652 2.73695Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+      />
+    </styled.svg>
+  );
+}

src/shared/utils/analytics.ts

@@ -3,6 +3,7 @@ import { sha256 } from '@noble/hashes/sha256';
 import { base58 } from '@scure/base';
 import { AnalyticsBrowser } from '@segment/analytics-next';
 import * as Sentry from '@sentry/react';
+import { token } from 'leather-styles/tokens';
 import { getStoredState } from 'redux-persist';
 
 import {
@@ -59,6 +60,35 @@ export function initSentry() {
         startTransactionOnPageLoad: false,
         markBackgroundTransactions: false,
       }),
+      new Sentry.Feedback({
+        colorScheme: 'system',
+        isEmailRequired: false,
+        buttonLabel: 'Give feedback',
+        formTitle: 'Give feedback',
+        autoInject: false,
+        showEmail: false,
+        showName: false,
+        showBranding: false,
+        messageLabel: 'Feedback',
+        submitButtonLabel: 'Send feedback',
+        messagePlaceholder: 'How can we improve Leather?',
+        successMessageText: 'Thanks for helping make Leather better',
+        themeDark: {
+          background: token('colors.accent.background-primary'),
+          inputOutlineFocus: token('colors.accent.border-hover'),
+          submitBackground: token('colors.accent.component-background-default'),
+          submitBackgroundHover: token('colors.accent.component-background-hover'),
+          submitOutlineFocus: token('colors.accent.border-hover'),
+          submitBorder: token('colors.accent.component-background-default'),
+          cancelBackground: token('colors.colorPalette.action-primary-default'),
+          cancelBackgroundHover: token('colors.colorPalette.action-primary-hover'),
+        },
+        themeLight: {
+          submitBackground: token('colors.lightModeInk.12'),
+          submitBackgroundHover: token('colors.lightModeInk.12'),
+          submitOutlineFocus: token('colors.lightModeInk.12'),
+        },
+      }),
     ],
     ignoreErrors: [
       // Harmless error

theme/recipes/button.ts → theme/recipes/button-recipe.ts

@@ -4,7 +4,7 @@ import { ColorToken } from 'leather-styles/tokens';
 const basePesudoOutlineProps = {
   content: '""',
   position: 'absolute',
-  rounded: '8px',
+  rounded: 'xs',
   top: 0,
   left: 0,
   bottom: 0,
@@ -43,6 +43,7 @@ function loadingStyles(color: ColorToken) {
     },
   };
 }
+
 // ts-unused-exports:disable-next-line
 export const buttonRecipe = defineRecipe({
   description: 'The styles for the Button component',
@@ -52,11 +53,18 @@ export const buttonRecipe = defineRecipe({
     position: 'relative',
     py: 'space.03',
     px: 'space.04',
-    rounded: '8px',
+    rounded: 'xs',
     textStyle: 'label.01',
     _disabled: { cursor: 'not-allowed' },
   },
   variants: {
+    size: {
+      sm: {
+        textStyle: 'label.02',
+        py: 'space.02',
+        px: 'space.03',
+      },
+    },
     variant: {
       // Solid button
       solid: {