feat: add get support button to error modal

src/components/transactions/FlowCommons/Error.tsx

@@ -2,10 +2,26 @@ import { DuplicateIcon, XIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
 import { Box, Button, Link, SvgIcon, Typography } from '@mui/material';
 import { useModalContext } from 'src/hooks/useModal';
+import { useRootStore } from 'src/store/root';
 import { TxErrorType } from 'src/ui-config/errorMapping';
+import { useShallow } from 'zustand/shallow';
 
 export const TxErrorView = ({ txError }: { txError: TxErrorType }) => {
   const { close } = useModalContext();
+  const [setFeedbackOpen, setSupportPrefillMessage] = useRootStore(
+    useShallow((state) => [state.setFeedbackOpen, state.setSupportPrefillMessage])
+  );
+
+  const handleGetSupport = () => {
+    const rawMessage = txError?.rawError?.message
+      ? txError.rawError.message.toString()
+      : 'Unknown error';
+    const template = `I am coming from a transaction failure with this error:\n\n"${rawMessage}"`;
+
+    setSupportPrefillMessage(template);
+    setFeedbackOpen(true);
+    close();
+  };
 
   return (
     <>
@@ -47,18 +63,22 @@ export const TxErrorView = ({ txError }: { txError: TxErrorType }) => {
           </Trans>
         </Typography>
 
-        <Button
-          variant="outlined"
-          onClick={() => navigator.clipboard.writeText(txError.rawError.message.toString())}
-          size="small"
-          sx={{ mt: 6 }}
-        >
-          <Trans>Copy error text</Trans>
+        <Box sx={{ display: 'flex', gap: 2, mt: 6 }}>
+          <Button variant="outlined" onClick={handleGetSupport} size="small">
+            <Trans>Get support</Trans>
+          </Button>
+          <Button
+            variant="outlined"
+            onClick={() => navigator.clipboard.writeText(txError.rawError.message.toString())}
+            size="small"
+          >
+            <Trans>Copy error text</Trans>
 
-          <SvgIcon sx={{ ml: 0.5, fontSize: '12px' }}>
-            <DuplicateIcon />
-          </SvgIcon>
-        </Button>
+            <SvgIcon sx={{ ml: 0.5, fontSize: '12px' }}>
+              <DuplicateIcon />
+            </SvgIcon>
+          </Button>
+        </Box>
       </Box>
       <Box sx={{ display: 'flex', flexDirection: 'column', mt: 12 }}>
         <Button onClick={close} variant="contained" size="large" sx={{ minHeight: '44px' }}>

src/layouts/SupportModal.tsx

@@ -21,11 +21,19 @@ import { SUPPORT } from 'src/utils/events';
 import { useShallow } from 'zustand/shallow';
 
 export const SupportModal = () => {
-  const [feedbackDialogOpen, setFeedbackOpen, isTrackingEnabled] = useRootStore(
+  const [
+    feedbackDialogOpen,
+    setFeedbackOpen,
+    isTrackingEnabled,
+    supportPrefillMessage,
+    setSupportPrefillMessage,
+  ] = useRootStore(
     useShallow((state) => [
       state.feedbackDialogOpen,
       state.setFeedbackOpen,
       state.isTrackingEnabled,
+      state.supportPrefillMessage,
+      state.setSupportPrefillMessage,
     ])
   );
   const [account, trackEvent] = useRootStore(
@@ -51,8 +59,9 @@ export const SupportModal = () => {
       setSuccess(false);
       setError(false);
       setEmailError('');
+      setValue(supportPrefillMessage || '');
     }
-  }, [feedbackDialogOpen]);
+  }, [feedbackDialogOpen, supportPrefillMessage]);
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const emailValue = e.target.value;
@@ -114,6 +123,7 @@ export const SupportModal = () => {
       setEmail('');
       setIsShareWalletApproved(false);
       setCountry(null);
+      setSupportPrefillMessage(undefined);
     }
   };
 
@@ -127,6 +137,7 @@ export const SupportModal = () => {
     setSuccess(false);
     setError(false);
     setCountry(null);
+    setSupportPrefillMessage(undefined);
   };
 
   return (
@@ -296,7 +307,7 @@ export const SupportModal = () => {
                 />
 
                 {account && !hasOptedIn && (
-                  <Box sx={{ mt: 2, p: 2, bgcolor: 'grey.50', borderRadius: 1.5 }}>
+                  <Box sx={{ mt: 2, p: 2, bgcolor: 'background.surface', borderRadius: 1.5 }}>
                     <FormControlLabel
                       control={
                         <Checkbox

src/locales/en/messages.po

@@ -1065,6 +1065,10 @@ msgstr "Reactivate cooldown period to unstake {0} {stakedToken}"
 msgid "Migrate to v3"
 msgstr "Migrate to v3"
 
+#: src/components/transactions/FlowCommons/Error.tsx
+msgid "Get support"
+msgstr "Get support"
+
 #: src/components/transactions/Bridge/BridgeModalContent.tsx
 msgid "The source chain time to finality is the main factor that determines the time to destination. <0>Learn more</0>"
 msgstr "The source chain time to finality is the main factor that determines the time to destination. <0>Learn more</0>"

src/store/layoutSlice.ts

@@ -7,6 +7,8 @@ export type LayoutSlice = {
   mobileDrawerOpen: boolean;
   feedbackDialogOpen: boolean;
   setFeedbackOpen: (eventName: boolean) => void;
+  supportPrefillMessage?: string;
+  setSupportPrefillMessage: (message?: string) => void;
 };
 
 export const createLayoutSlice: StateCreator<
@@ -18,11 +20,15 @@ export const createLayoutSlice: StateCreator<
   return {
     mobileDrawerOpen: false,
     feedbackDialogOpen: false,
+    supportPrefillMessage: undefined,
     setMobileDrawerOpen: (value: boolean) => {
       set({ mobileDrawerOpen: value });
     },
     setFeedbackOpen: (value: boolean) => {
       set({ feedbackDialogOpen: value });
     },
+    setSupportPrefillMessage: (message?: string) => {
+      set({ supportPrefillMessage: message });
+    },
   };
 };