Merge 803deeb into ccc5e3f

src/components/orders/DetailsTable/index.tsx

@@ -21,6 +21,9 @@ import { StatusLabel } from 'components/orders/StatusLabel'
 import { GasFeeDisplay } from 'components/orders/GasFeeDisplay'
 import { triggerEvent } from 'api/analytics'
 import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork'
+import { ButtonBase } from 'components/common/Button'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons'
 
 const Table = styled(SimpleTable)`
   border: 0.1rem solid ${({ theme }): string => theme.borderPrimary};
@@ -83,6 +86,44 @@ const tooltip = {
   fees: 'The amount of fees paid for this order. This will show a progressive number for orders with partial fills.',
 }
 
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  ${media.mobile} {
+    flex-direction: column;
+  }
+`
+
+const Button = styled(ButtonBase)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${({ theme }): string => theme.fontSizeDefault};
+  color: ${({ theme }): string => theme.orange1};
+  border: 1px solid ${({ theme }): string => theme.orange1};
+  background-color: ${({ theme }): string => theme.orangeOpacity};
+  border-radius: 0.4rem;
+  padding: 0.8rem 1.5rem;
+  margin: 0 0 0 2rem;
+
+  ${media.mobile} {
+    margin: 1rem 0 0 0;
+  }
+
+  ${media.mediumDown} {
+    min-width: 18rem;
+  }
+
+  :hover {
+    opacity: 0.8;
+    color: ${({ theme }): string => theme.white};
+  }
+
+  svg {
+    margin-right: 0.5rem;
+  }
+`
+
 export type Props = {
   order: Order
   areTradesLoading: boolean
@@ -170,11 +211,18 @@ export function DetailsTable(props: Props): JSX.Element | null {
                 {areTradesLoading ? (
                   <Spinner />
                 ) : txHash ? (
-                  <RowWithCopyButton
-                    textToCopy={txHash}
-                    onCopy={(): void => onCopy('settlementTx')}
-                    contentsToDisplay={<LinkWithPrefixNetwork to={`/tx/${txHash}`}>{txHash}</LinkWithPrefixNetwork>}
-                  />
+                  <Wrapper>
+                    <RowWithCopyButton
+                      textToCopy={txHash}
+                      onCopy={(): void => onCopy('settlementTx')}
+                      contentsToDisplay={
+                        <LinkWithPrefixNetwork to={`/tx/${txHash}/?tab=graph`}>{txHash}</LinkWithPrefixNetwork>
+                      }
+                    />
+                    <Button role="button">
+                      <FontAwesomeIcon icon={faProjectDiagram} /> View batch graph
+                    </Button>
+                  </Wrapper>
                 ) : (
                   '-'
                 )}