Click to copy abbreviated links (#112)

* Add ability to make InlineCopy a link * Remove underline on hover and external link icon * Use inline link copy * fix table formatting; show whole table with no scrollbar * muck around with styles so it can work inline * New URL for testnet explorer
etherlinkcom · Jul 22, 2024 · ba9afdb · ba9afdb
1 parent f9a28d0
commit ba9afdb
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 51 deletions.
diff --git a/docs/building-on-etherlink/tokens.md → docs/building-on-etherlink/tokens.mdx b/docs/building-on-etherlink/tokens.md → docs/building-on-etherlink/tokens.mdx
@@ -2,12 +2,14 @@
 title: Tokens
 ---
 
+import InlineCopy from '@site/src/components/InlineCopy';
+
 ## Token addresses
 
 These are some of the tokens that are available on Etherlink.
 Click the address to go to the block explorer page for the token:
 
-<table class="token_address_table">
+<table>
 <thead>
   <th>Name</th>
   <th>Symbol</th>
@@ -18,38 +20,38 @@ Click the address to go to the block explorer page for the token:
 <tr>
   <td>Wrapped XTZ (see <a href="#wxtz">WXTZ</a> below)</td>
   <td>WXTZ</td>
-  <td><a href="https://explorer.etherlink.com/address/0xc9B53AB2679f573e480d01e0f49e2B5CFB7a3EAb" target="_blank">0xc9B...3EAb</a></td>
-  <td><a href="https://testnet.explorer.etherlink.com/address/0xB1Ea698633d57705e93b0E40c1077d46CD6A51d8" target="_blank">0xB1E...51d8</a></td>
+  <td><InlineCopy code="0xc9B53AB2679f573e480d01e0f49e2B5CFB7a3EAb" href="https://explorer.etherlink.com/address/0xc9B53AB2679f573e480d01e0f49e2B5CFB7a3EAb">0xc9B...3EAb</InlineCopy></td>
+  <td><InlineCopy code="0xB1Ea698633d57705e93b0E40c1077d46CD6A51d8" href="https://testnet.explorer.etherlink.com/address/0xB1Ea698633d57705e93b0E40c1077d46CD6A51d8">0xB1E...51d8</InlineCopy></td>
 </tr>
 <tr>
   <td>Etherlink USD</td>
   <td>eUSD</td>
   <td>Coming soon</td>
-  <td><a href="https://testnet.explorer.etherlink.com/address/0x1A71f491fb0Ef77F13F8f6d2a927dd4C969ECe4f" target="_blank">0x1A7...Ce4f</a></td>
+  <td><InlineCopy code="0x1A71f491fb0Ef77F13F8f6d2a927dd4C969ECe4f" href="https://testnet.explorer.etherlink.com/address/0x1A71f491fb0Ef77F13F8f6d2a927dd4C969ECe4f">0x1A7...Ce4f</InlineCopy></td>
 </tr>
 <tr>
   <td>Tether USD</td>
   <td>USDT</td>
-  <td><a href="https://explorer.etherlink.com/address/0x2C03058C8AFC06713be23e58D2febC8337dbfE6A" target="_blank">0x2C0...fE6a</a></td>
-  <td><a href="https://testnet.explorer.etherlink.com/address/0xD21B917D2f4a4a8E3D12892160BFFd8f4cd72d4F" target="_blank">0xD21...2d4F</a></td>
+  <td><InlineCopy code="0x2C03058C8AFC06713be23e58D2febC8337dbfE6A" href="https://explorer.etherlink.com/address/0x2C03058C8AFC06713be23e58D2febC8337dbfE6A">0x2C0...fE6a</InlineCopy></td>
+  <td><InlineCopy code="0xD21B917D2f4a4a8E3D12892160BFFd8f4cd72d4F" href="https://testnet.explorer.etherlink.com/address/0xD21B917D2f4a4a8E3D12892160BFFd8f4cd72d4F">0xD21...2d4F</InlineCopy></td>
 </tr>
 <tr>
   <td>USD Coin</td>
   <td>USDC</td>
-  <td><a href="https://explorer.etherlink.com/address/0x796Ea11Fa2dD751eD01b53C372fFDB4AAa8f00F9" target="_blank">0x796...00F9</a></td>
-  <td><a href="https://testnet.explorer.etherlink.com/address/0xa7c9092A5D2C3663B7C5F714dbA806d02d62B58a" target="_blank">0xa7c...B58a</a></td>
+  <td><InlineCopy code="0x796Ea11Fa2dD751eD01b53C372fFDB4AAa8f00F9" href="https://explorer.etherlink.com/address/0x796Ea11Fa2dD751eD01b53C372fFDB4AAa8f00F9">0x796...00F9</InlineCopy></td>
+  <td><InlineCopy code="0xa7c9092A5D2C3663B7C5F714dbA806d02d62B58a" href="https://testnet.explorer.etherlink.com/address/0xa7c9092A5D2C3663B7C5F714dbA806d02d62B58a">0xa7c...B58a</InlineCopy></td>
 </tr>
 <tr>
   <td>Wrapped Ether</td>
   <td>WETH</td>
-  <td><a href="https://explorer.etherlink.com/address/0xfc24f770F94edBca6D6f885E12d4317320BcB401" target="_blank">0xfc2...B401</a></td>
-  <td><a href="https://testnet.explorer.etherlink.com/address/0x8DEF68408Bc96553003094180E5C90d9fe5b88C1" target="_blank">0x8DE...88C1</a></td>
+  <td><InlineCopy code="0xfc24f770F94edBca6D6f885E12d4317320BcB401" href="https://explorer.etherlink.com/address/0xfc24f770F94edBca6D6f885E12d4317320BcB401">0xfc2...B401</InlineCopy></td>
+  <td><InlineCopy code="0x8DEF68408Bc96553003094180E5C90d9fe5b88C1" href="https://testnet.explorer.etherlink.com/address/0x8DEF68408Bc96553003094180E5C90d9fe5b88C1">0x8DE...88C1</InlineCopy></td>
 </tr>
 <tr>
   <td>Tezos BTC</td>
   <td>tzBTC</td>
   <td>Coming soon</td>
-  <td><a href="https://testnet.explorer.etherlink.com/address/0x6bDE94725379334b469449f4CF49bCfc85ebFb27" target="_blank">0x6bD...Fb27</a></td>
+  <td><InlineCopy code="0x6bDE94725379334b469449f4CF49bCfc85ebFb27" href="https://testnet.explorer.etherlink.com/address/0x6bDE94725379334b469449f4CF49bCfc85ebFb27">0x6bD...Fb27</InlineCopy></td>
 </tr>
 <tr>
   <td>Wrapped BTC</td>
@@ -106,31 +108,31 @@ This standard allows WXTZ to be bridged in a secure and capital-efficient way ac
 
 Here are the chains the token is deployed on:
 
-<table class="token_address_table">
+<table>
 <thead>
   <th>Chain</th>
   <th>Mainnet address</th>
 </thead>
 <tbody>
 <tr>
   <td>Etherlink</td>
-  <td><a href="https://explorer.etherlink.com/address/0xc9B53AB2679f573e480d01e0f49e2B5CFB7a3EAb" target="_blank">0xc9B...3EAb</a></td>
+  <td><InlineCopy code="0xc9B53AB2679f573e480d01e0f49e2B5CFB7a3EAb" href="https://explorer.etherlink.com/address/0xc9B53AB2679f573e480d01e0f49e2B5CFB7a3EAb">0xc9B...3EAb</InlineCopy></td>
 </tr>
 <tr>
   <td>Ethereum</td>
-  <td><a href="https://etherscan.io/address/0xc9b53ab2679f573e480d01e0f49e2b5cfb7a3eab" target="_blank">0xc9B...3EAb</a></td>
+  <td><InlineCopy href="https://etherscan.io/address/0xc9b53ab2679f573e480d01e0f49e2b5cfb7a3eab" code="0xc9b53ab2679f573e480d01e0f49e2b5cfb7a3eab">0xc9B...3EAb</InlineCopy></td>
 </tr>
 <tr>
   <td>Base</td>
-  <td><a href="https://basescan.org/address/0x91f9cc2649ac70a071602cade9b0c1a5868af51d" target="_blank">0x91F...f51D</a></td>
+  <td><InlineCopy href="https://basescan.org/address/0x91f9cc2649ac70a071602cade9b0c1a5868af51d" code="0x91f9cc2649ac70a071602cade9b0c1a5868af51d">0x91F...f51D</InlineCopy></td>
 </tr>
 <tr>
   <td>Binance Smart Chain</td>
-  <td><a href="https://bscscan.com/address/0x91F9cc2649ac70a071602cadE9b0C1A5868af51D" target="_blank">0x91F...f51D</a></td>
+  <td><InlineCopy href="https://bscscan.com/address/0x91F9cc2649ac70a071602cadE9b0C1A5868af51D" code="0x91F9cc2649ac70a071602cadE9b0C1A5868af51D">0x91F...f51D</InlineCopy></td>
 </tr>
 <tr>
   <td>Arbitrum One</td>
-  <td><a href="https://arbiscan.io/address/0x7424f00845777a06e21f0bd8873f814a8a814b2d" target="_blank">0x742...4B2D</a></td>
+  <td><InlineCopy href="https://arbiscan.io/address/0x7424f00845777a06e21f0bd8873f814a8a814b2d" code="0x7424f00845777a06e21f0bd8873f814a8a814b2d">0x742...4B2D</InlineCopy></td>
 </tr>
 </tbody>
 </table>

diff --git a/...nce/how-do-i-participate-in-governance.md → ...ce/how-do-i-participate-in-governance.mdx b/...nce/how-do-i-participate-in-governance.md → ...ce/how-do-i-participate-in-governance.mdx
@@ -2,6 +2,8 @@
 title: How do I participate in governance?
 ---
 
+import InlineCopy from '@site/src/components/InlineCopy';
+
 Etherlink bakers can participate in the [Etherlink governance process](/governance/how-is-etherlink-governed) by submitting proposals and voting for them.
 
 The voting power of a baker is the amount of tez that it has staked plus the tez that delegators have delegated to it, also called its _staking balance_.
@@ -14,25 +16,35 @@ For information about the Octez client, see [Command Line Interface](https://tez
 
 You need the address of the correct governance contract to propose changes and vote on changes.
 
-### Mainnet governance contracts
-
-These are the governance contracts for the Etherlink Smart Rollup on Mainnet, which has the address [`sr1Ghq66tYK9y3r8CC1Tf8i8m5nxh8nTvZEf`](https://tzkt.io/sr1Ghq66tYK9y3r8CC1Tf8i8m5nxh8nTvZEf):
-
-Governance contract | Address
---- | ---
-Kernel governance | [KT1H5pCmFuhAwRExzNNrPQFKpunJx1yEVa6J](https://better-call.dev/mainnet/KT1H5pCmFuhAwRExzNNrPQFKpunJx1yEVa6J)
-Kernel security governance | [KT1N5MHQW5fkqXkW9GPjRYfn5KwbuYrvsY1g](https://better-call.dev/mainnet/KT1N5MHQW5fkqXkW9GPjRYfn5KwbuYrvsY1g)
-Sequencer committee | [KT1NcZQ3y9Wv32BGiUfD2ZciSUz9cY1DBDGF](https://better-call.dev/mainnet/KT1NcZQ3y9Wv32BGiUfD2ZciSUz9cY1DBDGF)
-
-### Testnet governance contracts
-
-These are the governance contracts for the Etherlink Smart Rollup on Etherlink Testnet (Ghostnet), which has the address [`sr18wx6ezkeRjt1SZSeZ2UQzQN3Uc3YLMLqg`](https://ghostnet.tzkt.io/sr18wx6ezkeRjt1SZSeZ2UQzQN3Uc3YLMLqg):
-
-Governance contract | Address
---- | ---
-Kernel governance | [KT1HfJb718fGszcgYguA4bfTjAqe1BEmFHkv](https://better-call.dev/ghostnet/KT1HfJb718fGszcgYguA4bfTjAqe1BEmFHkv)
-Kernel security governance | [KT1QDgF5pBkXEizj5RnmagEyxLxMTwVRpmYk](https://better-call.dev/ghostnet/KT1QDgF5pBkXEizj5RnmagEyxLxMTwVRpmYk)
-Sequencer committee | [KT1FRzozuzFMWLimpFeSdADHTMxzU8KtgCr9](https://better-call.dev/ghostnet/KT1FRzozuzFMWLimpFeSdADHTMxzU8KtgCr9)
+<table>
+<thead>
+<th>&nbsp;</th>
+<th>Mainnet address</th>
+<th>Testnet address</th>
+</thead>
+<tbody>
+<tr>
+<td>Smart Rollup</td>
+<td><InlineCopy code="sr1Ghq66tYK9y3r8CC1Tf8i8m5nxh8nTvZEf" href="https://tzkt.io/sr1Ghq66tYK9y3r8CC1Tf8i8m5nxh8nTvZEf">sr1Ghq...vZEf</InlineCopy></td>
+<td><InlineCopy code="sr18wx6ezkeRjt1SZSeZ2UQzQN3Uc3YLMLqg" href="https://ghostnet.tzkt.io/sr18wx6ezkeRjt1SZSeZ2UQzQN3Uc3YLMLqg">sr18wx...mlqg</InlineCopy></td>
+</tr>
+<tr>
+<td>Kernel governance</td>
+<td><InlineCopy code="KT1H5pCmFuhAwRExzNNrPQFKpunJx1yEVa6J" href="https://better-call.dev/mainnet/KT1H5pCmFuhAwRExzNNrPQFKpunJx1yEVa6J">KT1H5p...Va6J</InlineCopy></td>
+<td><InlineCopy code="KT1HfJb718fGszcgYguA4bfTjAqe1BEmFHkv" href="https://better-call.dev/ghostnet/KT1HfJb718fGszcgYguA4bfTjAqe1BEmFHkv">KT1HfJ...FHkv</InlineCopy></td>
+</tr>
+<tr>
+<td>Kernel security governance</td>
+<td><InlineCopy code="KT1N5MHQW5fkqXkW9GPjRYfn5KwbuYrvsY1g" href="https://better-call.dev/mainnet/KT1N5MHQW5fkqXkW9GPjRYfn5KwbuYrvsY1g">KT1N5M...sY1g</InlineCopy></td>
+<td><InlineCopy code="KT1QDgF5pBkXEizj5RnmagEyxLxMTwVRpmYk" href="https://better-call.dev/ghostnet/KT1QDgF5pBkXEizj5RnmagEyxLxMTwVRpmYk">KT1QDg...pmYk</InlineCopy></td>
+</tr>
+<tr>
+<td>Sequencer committee</td>
+<td><InlineCopy code="KT1NcZQ3y9Wv32BGiUfD2ZciSUz9cY1DBDGF" href="https://better-call.dev/mainnet/KT1NcZQ3y9Wv32BGiUfD2ZciSUz9cY1DBDGF">KT1NcZ...BDGF</InlineCopy></td>
+<td><InlineCopy code="KT1FRzozuzFMWLimpFeSdADHTMxzU8KtgCr9" href="https://better-call.dev/ghostnet/KT1FRzozuzFMWLimpFeSdADHTMxzU8KtgCr9">KT1FRz...gCr9</InlineCopy></td>
+</tr>
+</tbody>
+</table>
 
 ## Participating in kernel and security governance
 

diff --git a/src/components/CopyButton/styles.module.css b/src/components/CopyButton/styles.module.css
@@ -11,9 +11,9 @@
 
 .copyButtonIcons {
   position: relative;
-  display: block;
-  width: 1.125rem;
-  height: 1.125rem;
+  display: inline;
+  width: 1rem;
+  height: 1rem;
 }
 
 .copyButtonIcon,
@@ -26,21 +26,20 @@
 }
 
 .copyButtonSuccessIcon {
-  top: -12px;
-  left: 10px;
-  transform: translate(-50%, -50%) scale(0.33);
+  left: -18px;
+  margin-right: -18px;
   opacity: 0;
   color: #00d600;
   position: relative;
+  display: none;
 }
 
 .copyButtonCopied .copyButtonIcon {
-  transform: scale(0.33);
   opacity: 0;
 }
 
 .copyButtonCopied .copyButtonSuccessIcon {
-  transform: translate(-50%, -50%) scale(1);
   opacity: 1;
+  display: inline;
   transition-delay: 0.075s;
 }
diff --git a/src/components/InlineCopy/index.jsx b/src/components/InlineCopy/index.jsx
@@ -2,13 +2,20 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import Link from '@docusaurus/Link';
 
-import CopyButton from '@site/src/components/CopyButton'
+import CopyButton from '@site/src/components/CopyButton';
 
-export default function InlineCopy({ code }) {
+export default function InlineCopy({ code, href, children }) {
   return (
     <div className={clsx(styles.container)}>
-      <code>{code}</code>
+      {href ?
+        <Link to={href} className={clsx(styles.link)}>
+          <code>{children || code}</code>
+        </Link>
+      :
+        <code>{children || code}</code>
+      }
       <CopyButton code={code} />
     </div>
   );

diff --git a/src/components/InlineCopy/styles.module.css b/src/components/InlineCopy/styles.module.css
@@ -1,6 +1,13 @@
 .container {
-  display: flex;
-  column-gap: 0.2rem;
+  display: inline;
   position: unset;
   background-color: var(--ifm-code-background);
 }
+
+.link:hover {
+  text-decoration: none;
+}
+
+.link::after {
+  content: none !important;
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -246,6 +246,6 @@ article a[target="_blank"]:after {
   font-family: 'Inter SemiBold', 'Roboto', sans-serif;
 }
 
-.token_address_table {
-  width: fit-content;
+article table {
+  overflow: visible;
 }