Feature/1708 affiliate link owner info show

src/custom/pages/Profile/index.tsx

@@ -1,6 +1,5 @@
 import { Txt } from 'assets/styles/styled'
 import {
-  FlexCol,
   FlexWrap,
   Wrapper,
   Container,
@@ -12,11 +11,12 @@ import {
   ItemTitle,
   ChildWrapper,
   Loader,
-  ExtLink,
+  ExtLink as ExternalLink,
+  FlexRow,
 } from 'pages/Profile/styled'
 import { useActiveWeb3React } from 'hooks/web3'
 import Copy from 'components/Copy/CopyMod'
-import { HelpCircle, RefreshCcw } from 'react-feather'
+import { ArrowUpRight, HelpCircle, RefreshCcw } from 'react-feather'
 import Web3Status from 'components/Web3Status'
 import useReferralLink from 'hooks/useReferralLink'
 import useFetchProfile from 'hooks/useFetchProfile'
@@ -28,9 +28,12 @@ import NotificationBanner from 'components/NotificationBanner'
 import { SupportedChainId as ChainId } from 'constants/chains'
 import AffiliateStatusCheck from 'components/AffiliateStatusCheck'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
+import { useReferralAddress } from 'state/affiliate/hooks'
+import { shortenAddress } from 'utils'
 
 export default function Profile() {
   const referralLink = useReferralLink()
+  const refAddress = useReferralAddress()
   const { account, chainId } = useActiveWeb3React()
   const { profileData, isLoading, error } = useFetchProfile()
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
@@ -58,36 +61,55 @@ export default function Profile() {
       <Wrapper>
         <GridWrap>
           <CardHead>
-            <StyledTitle>Profile overview</StyledTitle>
-            {account && (
-              <Loader isLoading={isLoading}>
-                <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;
+            <FlexWrap col>
+              <StyledTitle>Profile overview</StyledTitle>
+              {account && (
+                <Loader isLoading={isLoading}>
+                  <StyledContainer>
+                    <Txt>
+                      <RefreshCcw size={16} />
+                      &nbsp;&nbsp;
+                      <Txt fs={14} 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>
-                    )}
+                  </StyledContainer>
+                </Loader>
+              )}
+            </FlexWrap>
+            <FlexWrap col yAlign={'flex-end'}>
+              {account && refAddress && (
+                <FlexRow>
+                  <Txt fs={14}>
+                    Referred by:&nbsp;<strong>{shortenAddress(refAddress.value)}</strong>
                   </Txt>
-                  {hasOrders && (
-                    <ExtLink href={getExplorerAddressLink(chainId || 1, account)}>
-                      <Txt secondary>View all orders ↗</Txt>
-                    </ExtLink>
-                  )}
-                </StyledContainer>
-              </Loader>
-            )}
+                  <span style={{ display: 'inline-block', verticalAlign: 'middle', marginLeft: 8 }}>
+                    <Copy toCopy={refAddress.value} />
+                  </span>
+                </FlexRow>
+              )}
+              <FlexWrap yAlign={'flex-end'}>
+                {referralLink && hasOrders && account && (
+                  <ExternalLink href={getExplorerAddressLink(chainId || 1, account)}>
+                    <Txt fs={14}>View all orders </Txt>
+                    <span style={{ lineHeight: 1, verticalAlign: 'middle', marginLeft: 8 }}>
+                      <ArrowUpRight width={'16px'} height={'16px'} />
+                    </span>
+                  </ExternalLink>
+                )}
+              </FlexWrap>
+            </FlexWrap>
           </CardHead>
           {renderNotificationMessages}
           <ChildWrapper>
@@ -118,36 +140,38 @@ export default function Profile() {
                   <HelpCircle size={14} />
                 </MouseoverTooltipContent>
               </ItemTitle>
-              <FlexWrap className="item">
-                <FlexCol>
+              <FlexWrap xAlign={'center'} className="item">
+                <FlexWrap col yAlign={'center'}>
                   <span role="img" aria-label="farmer">
                     🧑‍🌾
                   </span>
                   <Loader isLoading={isLoading}>
-                    <strong>{formatInt(profileData?.totalTrades)}</strong>
+                    <Txt fs={21}>
+                      <strong>{formatInt(profileData?.totalTrades)}</strong>
+                    </Txt>
                   </Loader>
                   <Loader isLoading={isLoading}>
-                    <span>
+                    <Txt secondary>
                       Total trades
                       {isTradesTooltipVisible && (
                         <MouseoverTooltipContent content="You may see more trades here than what you see in the activity list. To understand why, check out the FAQ.">
                           <HelpCircle size={14} />
                         </MouseoverTooltipContent>
                       )}
-                    </span>
+                    </Txt>
                   </Loader>
-                </FlexCol>
-                <FlexCol>
+                </FlexWrap>
+                <FlexWrap col yAlign={'center'}>
                   <span role="img" aria-label="moneybag">
                     💰
                   </span>
                   <Loader isLoading={isLoading}>
                     <strong>{formatDecimal(profileData?.tradeVolumeUsd)}</strong>
                   </Loader>
                   <Loader isLoading={isLoading}>
-                    <span>Total traded volume</span>
+                    <Txt secondary>Total traded volume</Txt>
                   </Loader>
-                </FlexCol>
+                </FlexWrap>
               </FlexWrap>
             </ChildWrapper>
             <ChildWrapper>
@@ -158,28 +182,28 @@ export default function Profile() {
                 </MouseoverTooltipContent>
               </ItemTitle>
               <FlexWrap className="item">
-                <FlexCol>
+                <FlexWrap yAlign={'center'} col>
                   <span role="img" aria-label="handshake">
                     🤝
                   </span>
                   <Loader isLoading={isLoading}>
                     <strong>{formatInt(profileData?.totalReferrals)}</strong>
                   </Loader>
                   <Loader isLoading={isLoading}>
-                    <span>Total referrals</span>
+                    <Txt secondary>Total referrals</Txt>
                   </Loader>
-                </FlexCol>
-                <FlexCol>
+                </FlexWrap>
+                <FlexWrap yAlign={'center'} col>
                   <span role="img" aria-label="wingedmoney">
                     💸
                   </span>
                   <Loader isLoading={isLoading}>
                     <strong>{formatDecimal(profileData?.referralVolumeUsd)}</strong>
                   </Loader>
                   <Loader isLoading={isLoading}>
-                    <span>Referrals volume</span>
+                    <Txt secondary>Referrals volume</Txt>
                   </Loader>
-                </FlexCol>
+                </FlexWrap>
               </FlexWrap>
             </ChildWrapper>
           </GridWrap>

src/custom/pages/Profile/styled.tsx

@@ -34,6 +34,8 @@ export const Wrapper = styled(Page)`
 `
 
 export const ExtLink = styled(ExternalLink)`
+  color: ${({ theme }) => theme.text1};
+  font-weight: 300;
   &:hover,
   &:focus {
     color: ${({ theme }) => theme.text1};
@@ -58,6 +60,7 @@ export const ChildWrapper = styled.div`
   `}
   > .item {
     width: 100%;
+    flex-direction: row;
   }
 `
 
@@ -82,7 +85,11 @@ export const GridWrap = styled.div<Partial<CSS.Properties & { horizontal?: boole
 export const CardHead = styled.div`
   display: flex;
   flex-grow: 1;
-  flex-direction: column;
+  flex-wrap: wrap;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    flex-direction: column;
+    flex-wrap: nowrap;
+  `}
 `
 
 export const StyledTitle = styled(Title)`
@@ -114,27 +121,30 @@ export const ItemTitle = styled.h3`
   `}
 `
 
-export const FlexWrap = styled.div`
-  display: flex;
-  flex-grow: 1;
+export const FlexRow = styled.div`
+  display: inline-flex;
   align-items: center;
-  flex-direction: row;
   justify-content: center;
-  > div {
-    width: auto;
-  }
-  button {
-    max-width: 180px;
-  }
+`
+
+export const FlexWrap = styled.div<Partial<CSS.Properties & { xAlign?: string; yAlign?: string; col?: boolean }>>`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: ${(props) => (props.col ? 'column' : 'row')};
+  flex-wrap: ${(props) => (props.col ? 'nowrap' : 'wrap')};
+  ${(props) => props.xAlign && `justify-content: ${props.xAlign};`}
+  ${(props) => props.yAlign && `align-items: ${props.yAlign};`}
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    flex-wrap: wrap;
-    > div {
-      width: 50%;
-    }
+    flex-direction: column;
+    flex-wrap:  nowrap;
+    align-items: center;
     button {
       max-width: 100%;
     }
   `}
+  button {
+    max-width: 180px;
+  }
 `
 
 export const StyledContainer = styled.div`
@@ -149,28 +159,6 @@ export const StyledContainer = styled.div`
   `}
 `
 
-export const FlexCol = styled.div`
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  strong {
-    font-size: 21px;
-    margin-top: 6px;
-    ${({ theme }) => theme.mediaWidth.upToSmall`
-    font-size: 14px;
-  `}
-  }
-  span:not([role='img']) {
-    font-size: 14px;
-    color: ${({ theme }) => theme.text6};
-    min-height: 32px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-  }
-`
 export const Loader = styled.div<{ isLoading: boolean }>`
   display: flex;
   flex: 1;