Improve claim someone (#2319)

* Add short link

* Improve claim on behalf of someone else

* Small fix min-width

src/custom/pages/Claim/ClaimingStatus.tsx

@@ -26,6 +26,8 @@ import CowProtocolIcon from 'assets/cow-swap/cowprotocol.svg'
 import { ExternalLink } from 'theme'
 import { formatMax, formatSmartLocaleAware } from 'utils/format'
 import { AMOUNT_PRECISION } from 'constants/index'
+import { shortenAddress } from 'utils'
+import CopyHelper from 'components/Copy'
 
 const COW_TWEET_TEMPLATE =
   'I just joined the 🐮 CoWmunity @MEVprotection and claimed my first vCOW tokens! Join me at https://cowswap.exchange/'
@@ -86,8 +88,12 @@ export default function ClaimingStatus() {
                   <p>
                     You have just claimed on behalf of{' '}
                     <b>
-                      {activeClaimAccount} (
-                      <ExplorerLink id={activeClaimAccount} type="token-transfer" />)
+                      <ExplorerLink
+                        id={activeClaimAccount}
+                        label={shortenAddress(activeClaimAccount)}
+                        type="token-transfer"
+                      />
+                      <CopyHelper toCopy={activeClaimAccount} />
                     </b>
                   </p>
                 </div>

src/custom/pages/Claim/styled.ts

@@ -10,6 +10,7 @@ import LogoETH from 'assets/cow-swap/network-mainnet-logo.svg'
 import LogoGNO from 'assets/cow-swap/gno.png'
 import LogoUSDC from 'assets/cow-swap/usdc.png'
 import LogoXDAI from 'assets/cow-swap/xdai.png'
+import { CopyIcon } from 'components/Copy'
 
 export const PageWrapper = styled.div`
   --border-radius: 56px;
@@ -628,18 +629,22 @@ export const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>`
     margin: 24px auto 0;
   }
 
-  > h4 > div > p > b {
-    word-break: break-all;
-    display: block;
-  }
-
   > h4 > button {
     margin: 32px auto;
 
     ${({ theme }) => theme.mediaWidth.upToSmall`
       margin: 20px auto;
     `};
   }
+
+  ${CopyIcon} {
+    display: inline;
+    min-width: 6em;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      min-width: 0;
+    `};
+  }
 `
 
 export const AttemptFooter = styled.div`