only link to create issue from known prod URLs (Uniswap#2572)

william-weber · Nov 30, 2021 · f68fa08 · f68fa08
1 parent 5a3c91f
commit f68fa08
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 97 deletions.
diff --git a/src/components/ErrorBoundary/CreateIssueLink.tsx b/src/components/ErrorBoundary/CreateIssueLink.tsx
@@ -0,0 +1,90 @@
+import store, { AppState } from '../../state'
+import { userAgent } from '../../utils/userAgent'
+import GetHelpLink from './GetHelpLink'
+
+export default function CreateIssueLink(props: { error: Error }) {
+  const onKnownProdURL = window.location.href.match(/uniswap\.org|ipfs\.dweb\.link|ipfs\.cf-ipfs\.com/)
+
+  // Do not display link to make issue on github if not on a known prod URL
+  // (prevents creating issues from forks of the interface)
+  if (!onKnownProdURL) return null
+
+  const error = props.error
+  const encodedBody = encodeURIComponent(issueBody(error))
+
+  return (
+    <GetHelpLink
+      id="create-github-issue-link"
+      href={`https://github.com/Uniswap/uniswap-interface/issues/new?assignees=&labels=bug&body=${encodedBody}&title=${encodeURIComponent(
+        `Crash report: \`${error.name}${error.message && `: ${error.message}`}\``
+      )}`}
+      text="Create an issue on GitHub"
+    />
+  )
+}
+
+function issueBody(error: Error): string {
+  const relevantState = getRelevantState()
+  const deviceData = userAgent
+  return `## URL
+  
+${window.location.href}
+
+${
+  relevantState
+    ? `## \`${relevantState}\` state
+    
+\`\`\`json
+${JSON.stringify(store.getState()[relevantState], null, 2)}
+\`\`\`
+`
+    : ''
+}
+${
+  error.name &&
+  `## Error
+
+\`\`\`
+${error.name}${error.message && `: ${error.message}`}
+\`\`\`
+`
+}
+${
+  error.stack &&
+  `## Stacktrace
+
+\`\`\`
+${error.stack}
+\`\`\`
+`
+}
+${
+  deviceData &&
+  `## Device data
+
+\`\`\`json
+${JSON.stringify(deviceData, null, 2)}
+\`\`\`
+`
+}
+`
+}
+
+function getRelevantState(): null | keyof AppState {
+  const path = window.location.hash
+  if (!path.startsWith('#/')) {
+    return null
+  }
+  const pieces = path.substring(2).split(/[\/\\?]/)
+  switch (pieces[0]) {
+    case 'swap':
+      return 'swap'
+    case 'add':
+      if (pieces[1] === 'v2') return 'mint'
+      else return 'mintV3'
+    case 'remove':
+      if (pieces[1] === 'v2') return 'burn'
+      else return 'burnV3'
+  }
+  return null
+}
diff --git a/src/components/ErrorBoundary/GetHelpLink.tsx b/src/components/ErrorBoundary/GetHelpLink.tsx
@@ -0,0 +1,22 @@
+import { Trans } from '@lingui/macro'
+import styled from 'styled-components/macro'
+
+import { ExternalLink, TYPE } from '../../theme'
+
+const LinkWrapper = styled.div`
+  color: ${({ theme }) => theme.blue1};
+  padding: 6px 24px;
+`
+
+export default function GetHelpLink(props: { id: string; href: string; text: string }) {
+  return (
+    <LinkWrapper>
+      <ExternalLink id={props.id} href={props.href} target="_blank">
+        <TYPE.link fontSize={16}>
+          <Trans>{props.text}</Trans>
+          <span>↗</span>
+        </TYPE.link>
+      </ExternalLink>
+    </LinkWrapper>
+  )
+}
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
@@ -3,11 +3,11 @@ import React, { ErrorInfo } from 'react'
 import ReactGA from 'react-ga'
 import styled from 'styled-components/macro'
 
-import store, { AppState } from '../../state'
-import { ExternalLink, TYPE } from '../../theme'
-import { userAgent } from '../../utils/userAgent'
+import { TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
 import { AutoRow } from '../Row'
+import CreateIssueLink from './CreateIssueLink'
+import GetHelpLink from './GetHelpLink'
 
 const FallbackWrapper = styled.div`
   display: flex;
@@ -34,11 +34,6 @@ const CodeBlockWrapper = styled.div`
   color: ${({ theme }) => theme.text1};
 `
 
-const LinkWrapper = styled.div`
-  color: ${({ theme }) => theme.blue1};
-  padding: 6px 24px;
-`
-
 const SomethingWentWrongWrapper = styled.div`
   padding: 6px 24px;
 `
@@ -67,8 +62,8 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
 
   render() {
     const { error } = this.state
+
     if (error !== null) {
-      const encodedBody = encodeURIComponent(issueBody(error))
       return (
         <FallbackWrapper>
           <BodyWrapper>
@@ -84,28 +79,12 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
                 </code>
               </CodeBlockWrapper>
               <AutoRow>
-                <LinkWrapper>
-                  <ExternalLink
-                    id="create-github-issue-link"
-                    href={`https://github.com/Uniswap/uniswap-interface/issues/new?assignees=&labels=bug&body=${encodedBody}&title=${encodeURIComponent(
-                      `Crash report: \`${error.name}${error.message && `: ${error.message}`}\``
-                    )}`}
-                    target="_blank"
-                  >
-                    <TYPE.link fontSize={16}>
-                      <Trans>Create an issue on GitHub</Trans>
-                      <span>↗</span>
-                    </TYPE.link>
-                  </ExternalLink>
-                </LinkWrapper>
-                <LinkWrapper>
-                  <ExternalLink id="get-support-on-discord" href="https://discord.gg/FCfyBSbCU5" target="_blank">
-                    <TYPE.link fontSize={16}>
-                      <Trans>Get support on Discord</Trans>
-                      <span>↗</span>
-                    </TYPE.link>
-                  </ExternalLink>
-                </LinkWrapper>
+                <CreateIssueLink error={error} />
+                <GetHelpLink
+                  id="get-support-on-discord"
+                  href="https://discord.gg/FCfyBSbCU5"
+                  text="Get support on Discord"
+                />
               </AutoRow>
             </AutoColumn>
           </BodyWrapper>
@@ -115,69 +94,3 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
     return this.props.children
   }
 }
-
-function getRelevantState(): null | keyof AppState {
-  const path = window.location.hash
-  if (!path.startsWith('#/')) {
-    return null
-  }
-  const pieces = path.substring(2).split(/[\/\\?]/)
-  switch (pieces[0]) {
-    case 'swap':
-      return 'swap'
-    case 'add':
-      if (pieces[1] === 'v2') return 'mint'
-      else return 'mintV3'
-    case 'remove':
-      if (pieces[1] === 'v2') return 'burn'
-      else return 'burnV3'
-  }
-  return null
-}
-
-function issueBody(error: Error): string {
-  const relevantState = getRelevantState()
-  const deviceData = userAgent
-  return `## URL
-  
-${window.location.href}
-
-${
-  relevantState
-    ? `## \`${relevantState}\` state
-    
-\`\`\`json
-${JSON.stringify(store.getState()[relevantState], null, 2)}
-\`\`\`
-`
-    : ''
-}
-${
-  error.name &&
-  `## Error
-
-\`\`\`
-${error.name}${error.message && `: ${error.message}`}
-\`\`\`
-`
-}
-${
-  error.stack &&
-  `## Stacktrace
-
-\`\`\`
-${error.stack}
-\`\`\`
-`
-}
-${
-  deviceData &&
-  `## Device data
-
-\`\`\`json
-${JSON.stringify(deviceData, null, 2)}
-\`\`\`
-`
-}
-`
-}