[Profile] Add explorer orders link to Profile page and app menu

src/custom/api/gnosisProtocol/hooks.ts

@@ -15,3 +15,9 @@ export function useGpOrders(account?: string | null, refreshInterval?: number):
 
   return data
 }
+
+export function useHasOrders(account?: string | null): boolean | undefined {
+  const gpOrders = useGpOrders(account)
+
+  return (gpOrders?.length || 0) > 0
+}

src/custom/components/Menu/index.tsx

@@ -1,4 +1,4 @@
-import { Code, HelpCircle, BookOpen, PieChart, Moon, Sun, Repeat, Star, User } from 'react-feather'
+import { Code, HelpCircle, BookOpen, PieChart, Moon, Sun, Repeat, Star, User, ExternalLink } from 'react-feather'
 
 import MenuMod, {
   MenuItem,
@@ -9,11 +9,15 @@ import MenuMod, {
 } from './MenuMod'
 import { useToggleModal } from 'state/application/hooks'
 import styled from 'styled-components/macro'
+import { useActiveWeb3React } from 'hooks/web3'
+
 import { Separator as SeparatorBase } from 'components/SearchModal/styleds'
 import { CONTRACTS_CODE_LINK, DISCORD_LINK, DOCS_LINK, DUNE_DASHBOARD_LINK, TWITTER_LINK } from 'constants/index'
 import cowRunnerImage from 'assets/cow-swap/game.gif'
 import ninjaCowImage from 'assets/cow-swap/ninja-cow.png'
 import { ApplicationModal } from 'state/application/actions'
+import { getExplorerAddressLink } from 'utils/explorer'
+import { useHasOrders } from 'api/gnosisProtocol/hooks'
 
 import twitterImage from 'assets/cow-swap/twitter.svg'
 import discordImage from 'assets/cow-swap/discord.svg'
@@ -217,6 +221,9 @@ interface MenuProps {
 
 export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
   const close = useToggleModal(ApplicationModal.MENU)
+  const { account, chainId } = useActiveWeb3React()
+  const hasOrders = useHasOrders(account)
+  const showOrdersLink = account && hasOrders
 
   return (
     <StyledMenu>
@@ -280,7 +287,14 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
           </span>{' '}
           Cow Runner
         </InternalMenuItem>
-
+        {showOrdersLink && (
+          <MenuItem id="link" href={getExplorerAddressLink(chainId || 1, account)}>
+            <span aria-hidden="true" onClick={close} onKeyDown={close}>
+              <ExternalLink size={14} />
+              View all orders
+            </span>
+          </MenuItem>
+        )}
         <MenuItemResponsive onClick={() => toggleDarkMode()}>
           {darkMode ? (
             <>

src/custom/pages/Profile/index.tsx

@@ -7,10 +7,12 @@ import {
   GridWrap,
   CardHead,
   StyledTitle,
+  StyledContainer,
   StyledTime,
   ItemTitle,
   ChildWrapper,
   Loader,
+  ExtLink,
 } from 'pages/Profile/styled'
 import { useActiveWeb3React } from 'hooks/web3'
 import Copy from 'components/Copy/CopyMod'
@@ -19,18 +21,22 @@ import Web3Status from 'components/Web3Status'
 import useReferralLink from 'hooks/useReferralLink'
 import useFetchProfile from 'hooks/useFetchProfile'
 import { numberFormatter } from 'utils/format'
+import { getExplorerAddressLink } from 'utils/explorer'
 import useTimeAgo from 'hooks/useTimeAgo'
 import { MouseoverTooltipContent } from 'components/Tooltip'
 import NotificationBanner from 'components/NotificationBanner'
 import { SupportedChainId as ChainId } from 'constants/chains'
 import AffiliateStatusCheck from 'components/AffiliateStatusCheck'
+import { useHasOrders } from 'api/gnosisProtocol/hooks'
 
 export default function Profile() {
   const referralLink = useReferralLink()
   const { account, chainId } = useActiveWeb3React()
   const { profileData, isLoading, error } = useFetchProfile()
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
   const isTradesTooltipVisible = account && chainId == 1 && !!profileData?.totalTrades
+  const hasOrders = useHasOrders(account)
+
   const renderNotificationMessages = (
     <>
       {error && (
@@ -55,24 +61,31 @@ export default function Profile() {
             <StyledTitle>Profile overview</StyledTitle>
             {account && (
               <Loader isLoading={isLoading}>
-                <Txt>
-                  <RefreshCcw size={16} />
-                  &nbsp;&nbsp;
-                  <Txt secondary>
-                    Last updated
-                    <MouseoverTooltipContent content="Data is updated on the background periodically.">
-                      <HelpCircle size={14} />
-                    </MouseoverTooltipContent>
-                    :&nbsp;
+                <StyledContainer>
+                  <Txt>
+                    <RefreshCcw size={16} />
+                    &nbsp;&nbsp;
+                    <Txt secondary>
+                      Last updated
+                      <MouseoverTooltipContent content="Data is updated on the background periodically.">
+                        <HelpCircle size={14} />
+                      </MouseoverTooltipContent>
+                      :&nbsp;
+                    </Txt>
+                    {!lastUpdated ? (
+                      '-'
+                    ) : (
+                      <MouseoverTooltipContent content={<TimeFormatted date={profileData?.lastUpdated} />}>
+                        <strong>{lastUpdated}</strong>
+                      </MouseoverTooltipContent>
+                    )}
                   </Txt>
-                  {!lastUpdated ? (
-                    '-'
-                  ) : (
-                    <MouseoverTooltipContent content={<TimeFormatted date={profileData?.lastUpdated} />}>
-                      <strong>{lastUpdated}</strong>
-                    </MouseoverTooltipContent>
+                  {hasOrders && (
+                    <ExtLink href={getExplorerAddressLink(chainId || 1, account)}>
+                      <Txt secondary>View all orders ↗</Txt>
+                    </ExtLink>
                   )}
-                </Txt>
+                </StyledContainer>
               </Loader>
             )}
           </CardHead>

src/custom/pages/Profile/styled.tsx

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components/macro'
 import Page, { GdocsListStyle, Title } from 'components/Page'
 import * as CSS from 'csstype'
 import { transparentize } from 'polished'
+import { ExternalLink } from 'theme'
 
 export const Container = styled.div`
   max-width: 910px;
@@ -32,6 +33,13 @@ export const Wrapper = styled(Page)`
   }
 `
 
+export const ExtLink = styled(ExternalLink)`
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => theme.text1};
+  }
+`
+
 export const ChildWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -73,17 +81,12 @@ export const GridWrap = styled.div<Partial<CSS.Properties & { horizontal?: boole
 
 export const CardHead = styled.div`
   display: flex;
-  align-items: center;
   flex-grow: 1;
-  flex-direction: row;
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    flex-direction: column;
-  `}
+  flex-direction: column;
 `
 
 export const StyledTitle = styled(Title)`
   display: flex;
-  flex-grow: 1;
   justify-content: flex-start;
   margin: 0;
   line-height: 1.21;
@@ -134,6 +137,18 @@ export const FlexWrap = styled.div`
   `}
 `
 
+export const StyledContainer = styled.div`
+  display: flex;
+  flex:1;
+  align-items:center;
+  justify-content: space-between;
+  }
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    flex-wrap: wrap;
+    flex-direction: column;
+  `}
+`
+
 export const FlexCol = styled.div`
   display: flex;
   flex-grow: 1;
@@ -157,6 +172,8 @@ export const FlexCol = styled.div`
   }
 `
 export const Loader = styled.div<{ isLoading: boolean }>`
+  display: flex;
+  flex: 1;
   ${({ theme, isLoading }) =>
     isLoading &&
     css`