issue template

lib/hooks/useIssueUrl.tsx

+import React from 'react';
+
+import appConfig from 'configs/app/config';
+import isBrowser from 'lib/isBrowser';
+
+const base = 'https://github.com/blockscout/blockscout/issues/new/';
+
+const bodyTemplate = `*Describe your issue here.*
+
+### Environment
+
+* Backend Version/branch/commit: ${ appConfig.blockScoutVersion }
+* Frontend Version+commit: ${ [ appConfig.frontendVersion, appConfig.frontendCommit ].filter(Boolean).join('+') }
+* User Agent: __userAgent__
+
+### Steps to reproduce
+
+*Tell us how to reproduce this issue.  ❤️ if you can push up a branch to your fork with a regression test we can run to reproduce locally.*
+
+### Expected behaviour
+
+*Tell us what should happen.*
+
+### Actual behaviour
+
+*Tell us what happens instead.*`;
+
+const labels = 'BlockScout';
+
+const title = `${ appConfig.network.name }: <Issue Title>`;
+
+export default function useIssueUrl() {
+  const [ userAgent, setUserAgent ] = React.useState('');
+  const isInBrowser = isBrowser();
+
+  React.useEffect(() => {
+    if (isInBrowser) {
+      setUserAgent(window.navigator.userAgent);
+    }
+  }, [ isInBrowser ]);
+
+  const params = new URLSearchParams({ labels, title, body: bodyTemplate.replace('__userAgent__', userAgent) });
+  return base + '?' + params.toString();
+
+}

ui/snippets/footer/Footer.tsx

@@ -12,6 +12,7 @@ import gitIcon from 'icons/social/git.svg';
 import twitterIcon from 'icons/social/tweet.svg';
 import type { ResourceError } from 'lib/api/resources';
 import useFetch from 'lib/hooks/useFetch';
+import useIssueUrl from 'lib/hooks/useIssueUrl';
 import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import ColorModeToggler from '../header/ColorModeToggler';
@@ -22,41 +23,42 @@ const MAX_LINKS_COLUMNS = 3;
 const API_VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ appConfig.blockScoutVersion }`;
 // const FRONT_VERSION_URL = `https://github.com/blockscout/frontend/tree/${ appConfig.frontendVersion }`;
 
-const BLOCSKOUT_LINKS = [
-  {
-    icon: editIcon,
-    iconSize: '16px',
-    text: 'Submit an issue',
-    // template???
-    url: 'https://github.com/blockscout/blockscout/issues/new',
-  },
-  {
-    icon: gitIcon,
-    iconSize: '18px',
-    text: 'Contribute',
-    url: 'https://github.com/blockscout/blockscout',
-  },
-  {
-    icon: twitterIcon,
-    iconSize: '18px',
-    text: 'Twitter',
-    url: 'https://www.twitter.com/blockscoutcom',
-  },
-  {
-    icon: discordIcon,
-    iconSize: '18px',
-    text: 'Discord',
-    url: 'https://discord.gg/blockscout',
-  },
-  {
-    icon: discussionsIcon,
-    iconSize: '20px',
-    text: 'Discussions',
-    url: 'https://github.com/orgs/blockscout/discussions',
-  },
-];
-
 const Footer = () => {
+
+  const issueUrl = useIssueUrl();
+  const BLOCSKOUT_LINKS = [
+    {
+      icon: editIcon,
+      iconSize: '16px',
+      text: 'Submit an issue',
+      url: issueUrl,
+    },
+    {
+      icon: gitIcon,
+      iconSize: '18px',
+      text: 'Contribute',
+      url: 'https://github.com/blockscout/blockscout',
+    },
+    {
+      icon: twitterIcon,
+      iconSize: '18px',
+      text: 'Twitter',
+      url: 'https://www.twitter.com/blockscoutcom',
+    },
+    {
+      icon: discordIcon,
+      iconSize: '18px',
+      text: 'Discord',
+      url: 'https://discord.gg/blockscout',
+    },
+    {
+      icon: discussionsIcon,
+      iconSize: '20px',
+      text: 'Discussions',
+      url: 'https://github.com/orgs/blockscout/discussions',
+    },
+  ];
+
   const fetch = useFetch();
 
   const { isLoading, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>(