Create a <HashLink> component

[Will Garrett]

Currently a number of modals display truncated tx hash / wallet id that link to Explorer or Etherscan. We will refactor these links into a single reusable <HashLink> component.

The component will need:

• to prop: this should be limited to explorer or etherscan

• transaction, stake, wallet props: these will contain the full hash/id/address string. (If linking to a wallet, stake and transaction props should be null)

• url computed prop: calculated from to and transaction/stake/wallet props

• title computed prop: which should be Stake ID / Tx Hash / Wallet Address depending on which stake / transaction / wallet has a value

• truncatedHash prop: this will shorten the hash/id/address as is currently done in the existing modals

The component also needs to contain appropriate styling for the modals. Just following how they are already styled.

See below an example of a link to both Explorer and Etherscan

Link to Explorer

wallet/src/components/stakes/CreateStakeModal.vue

Lines 128 to 146 in be9eae1

   <div class="form-group mb-14"> 
     <label>Transaction hash</label> 
     <span class="flex w-full overflow-hidden text-white overflow-ellipsis"> 
       <a 
         class="text-lg text-white underline" 
         :href="`${explorerUrl}/transaction/${completedTx.hash}`" 
         target="_blank" 
       > 
         {{ completedTxShortHash }} 
       </a> 
       <!-- eslint-disable-next-line max-len --> 
       <svg class="w-20 h-20 mt-2 ml-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg> 
     </span> 
   </div> 
   <div class="flex items-center mt-24 leading-8 text-gray"> 
     <!-- eslint-disable-next-line max-len --> 
     <p class="mb-0">Your transaction has been submitted. Once processed, your stake will be created. This may take a minute or two.</p> 
   </div> 
 </div> 

Link to Etherscan

wallet/src/components/tx/DepositModal.vue

Lines 203 to 210 in be9eae1

 <div class="form-group mb-14"> 
   <label>Transaction hash</label> 
   <span class="flex w-full overflow-hidden text-white overflow-ellipsis"> 
     <a class="text-lg text-white underline" :href="ethTxUrl" target="_blank">{{ethTxShortHash}}</a> 
     <!-- eslint-disable-next-line max-len --> 
     <svg class="w-20 h-20 mt-2 ml-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg> 
   </span> 
 </div>