feat: copy button (#58)

* feat: copy button

* fix: styling

* fix: tooltip

* fix: removed header

* fix: add parisnet examples

Author: IsaccoSordo

package-lock.json

@@ -23,28 +23,28 @@
     "embed-code": "npm run generate-monaco-types && npm run prettier && tsc --module es2015 --target es2015 --moduleResolution node --esModuleInterop true src/examples/*.ts && node scripts/copy-examples.js && npm run clear-folders && cp -r src/docs/* build-docs/ && rm -r docs && mv build-docs docs && npm run pretty-docs"
   },
   "dependencies": {
-    "@airgap/beacon-sdk": "^4.2.1",
-    "@docusaurus/core": "3.3.2",
-    "@docusaurus/plugin-client-redirects": "^3.3.2",
-    "@docusaurus/preset-classic": "3.3.2",
-    "@docusaurus/theme-live-codeblock": "^3.3.2",
+    "@airgap/beacon-sdk": "^4.2.2",
+    "@docusaurus/core": "3.5.2",
+    "@docusaurus/plugin-client-redirects": "^3.5.2",
+    "@docusaurus/preset-classic": "3.5.2",
+    "@docusaurus/theme-live-codeblock": "^3.5.2",
     "@mdx-js/react": "^3.0.1",
     "@monaco-editor/react": "^4.6.0",
-    "@taquito/beacon-wallet": "^19.2.0",
-    "@taquito/taquito": "^19.2.0",
+    "@taquito/beacon-wallet": "^20.0.1",
+    "@taquito/taquito": "^20.0.1",
     "clsx": "^2.1.1",
-    "mermaid": "^10.9.0",
+    "mermaid": "^11.0.0",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.3.2",
+    "@docusaurus/module-type-aliases": "3.5.2",
     "@tsconfig/docusaurus": "^2.0.3",
     "classnames": "^2.5.1",
     "docusaurus-node-polyfills": "^1.0.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.4"
   },
   "browserslist": {
     "production": [

package.json

@@ -31,7 +31,7 @@ class TzStatsBlockExplorer extends BlockExplorer {
     public readonly rpcUrls: { [key in NetworkType]: string } = {
       [NetworkType.MAINNET]: "https://tzstats.com/",
       [NetworkType.GHOSTNET]: "https://ghost.tzstats.com/",
-      [NetworkType.WEEKLYNET]: "https://ghost.tzstats.com/",
+      [NetworkType.WEEKLYNET]: "https://monday.tzstats.com/",
       [NetworkType.DAILYNET]: "https://daily.tzstats.com/",
       [NetworkType.DELPHINET]: "https://delphi.tzstats.com/",
       [NetworkType.EDONET]: "https://edo.tzstats.com/",
@@ -46,6 +46,7 @@ class TzStatsBlockExplorer extends BlockExplorer {
       [NetworkType.NAIROBINET]: "https://nairobi.tzstats.com/",
       [NetworkType.OXFORDNET]: "https://oxford.tzstats.com/",
       [NetworkType.CUSTOM]: "https://custom.tzstats.com/",
+      [NetworkType.PARISNET]: "https://paris.tzstats.com/",
     },
   ) {
     super(rpcUrls);
@@ -89,7 +90,7 @@ class TzStatsBlockExplorer extends BlockExplorer {
     public readonly rpcUrls: { [key in NetworkType]: string } = {
       [NetworkType.MAINNET]: "https://tzstats.com/",
       [NetworkType.GHOSTNET]: "https://ghost.tzstats.com/",
-      [NetworkType.WEEKLYNET]: "https://ghost.tzstats.com/"",
+      [NetworkType.WEEKLYNET]: "https://monday.tzstats.com/",
       [NetworkType.DAILYNET]: "https://daily.tzstats.com/",
       [NetworkType.DELPHINET]: "https://delphi.tzstats.com/",
       [NetworkType.EDONET]: "https://edo.tzstats.com/",
@@ -104,6 +105,7 @@ class TzStatsBlockExplorer extends BlockExplorer {
       [NetworkType.NAIROBINET]: "https://nairobi.tzstats.com/",
       [NetworkType.OXFORDNET]: "https://oxford.tzstats.com/",
       [NetworkType.CUSTOM]: "https://custom.tzstats.com/",
+      [NetworkType.PARISNET]: "https://paris.tzstats.com/",
     },
   ) {
     super(rpcUrls);

src/docs/advanced/custom-block-explorer.mdx

@@ -80,7 +80,7 @@ Sometimes `requestPermissions` may not be enough, and you want to ensure the use
 dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, async (account) => {
   console.log(
     `${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `,
-    account?.address
+    account?.address,
   );
 
   if (!account) {
@@ -108,7 +108,7 @@ wallet.client.subscribeToEvent(
   async (account) => {
     console.log(
       `${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `,
-      account?.address
+      account?.address,
     );
 
     if (!account) {
@@ -124,7 +124,7 @@ wallet.client.subscribeToEvent(
       // The request was rejected
       // handle disconnection
     }
-  }
+  },
 );
 ```
 
@@ -229,7 +229,7 @@ Now, inside the handler, check whether the current tab has the leadership. If no
 dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, async (account) => {
   console.log(
     `${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `,
-    account?.address
+    account?.address,
   );
 
   if (!account || !elector.isLeader) {
@@ -257,7 +257,7 @@ wallet.client.subscribeToEvent(
   async (account) => {
     console.log(
       `${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `,
-      account?.address
+      account?.address,
     );
 
     if (!account || !elector.isLeader) {
@@ -273,7 +273,7 @@ wallet.client.subscribeToEvent(
       // The request was rejected
       // handle disconnection
     }
-  }
+  },
 );
 ```
 
@@ -333,7 +333,7 @@ const dAppClient = new DAppClient({
 dAppClient.subscribeToEvent(BeaconEvent.ACTIVE_ACCOUNT_SET, async (account) => {
   console.log(
     `${BeaconEvent.ACTIVE_ACCOUNT_SET} triggered: `,
-    account?.address
+    account?.address,
   );
 
   if (!account || !elector.isLeader) {

src/docs/getting-started/subscribe-to-active-account.mdx

@@ -31,6 +31,7 @@ const customBlockExplorerBeacon = async (loggerFun: Function) => {
         [NetworkType.NAIROBINET]: "https://nairobi.tzstats.com/",
         [NetworkType.OXFORDNET]: "https://oxford.tzstats.com/",
         [NetworkType.CUSTOM]: "https://custom.tzstats.com/",
+        [NetworkType.PARISNET]: "https://paris.tzstats.com/",
       },
     ) {
       super(rpcUrls);

src/examples/custom-block-explorer.beacon.ts

@@ -32,6 +32,7 @@ const customBlockExplorerTaquito = async (loggerFun: Function) => {
         [NetworkType.NAIROBINET]: "https://nairobi.tzstats.com/",
         [NetworkType.OXFORDNET]: "https://oxford.tzstats.com/",
         [NetworkType.CUSTOM]: "https://custom.tzstats.com/",
+        [NetworkType.PARISNET]: "https://paris.tzstats.com",
       },
     ) {
       super(rpcUrls);

src/examples/custom-block-explorer.taquito.ts

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import "../styles.module.css";
+
+const CopyButton = ({ text }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { colorMode } = useColorMode();
+
+  return (
+    <>
+      <button
+        type="button"
+        title="Copy code to clipboard"
+        style={{
+          backgroundColor: "transparent",
+          border: "none",
+          cursor: "pointer",
+        }}
+        onClick={() => {
+          navigator.clipboard.writeText(text).then(() => {
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 3000);
+          });
+        }}
+      >
+        <span style={{ display: "inline-block" }} aria-hidden="true">
+          {!isCopied ? (
+            <>
+              <svg style={{ maxWidth: "24px", maxHeight: "24px" }}>
+                <path
+                  fill={colorMode === "dark" ? "#000" : "#fff"}
+                  d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+                ></path>
+              </svg>
+            </>
+          ) : (
+            <svg
+              fill={colorMode === "dark" ? "#000" : "#fff"}
+              width="24px"
+              height="24px"
+              style={{ maxWidth: "24px", maxHeight: "24px" }}
+            >
+              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+            </svg>
+          )}
+        </span>
+      </button>
+    </>
+  );
+};
+export default CopyButton;

src/theme/Playground/components/copy-button.jsx

@@ -6,6 +6,7 @@ import Translate from "@docusaurus/Translate";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import { usePrismTheme } from "@docusaurus/theme-common";
+import CopyButton from "./components/copy-button";
 
 import styles from "./styles.module.css";
 import BrowserWindow from "@site/src/components/BrowserWindow/BrowserWindow";
@@ -21,7 +22,18 @@ function getSnippetId(code) {
 }
 
 function Header({ children }) {
-  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+  return (
+    <div
+      className={clsx(styles.playgroundHeader)}
+      style={{
+        display: "flex",
+        alignItems: "start",
+        justifyContent: "space-between",
+      }}
+    >
+      {children}
+    </div>
+  );
 }
 function LivePreviewLoader() {
   // Is it worth improving/translating?
@@ -66,16 +78,17 @@ function ThemedLiveEditor() {
     />
   );
 }
-function EditorWithHeader() {
+function EditorWithHeader({ code }) {
   return (
     <>
       <Header>
         <Translate
           id="theme.Playground.liveEditor"
           description="The live editor label of the live codeblocks"
         >
-          Live Editor
+          Example
         </Translate>
+        <CopyButton text={code} />
       </Header>
       <ThemedLiveEditor />
     </>
@@ -118,11 +131,11 @@ export default function Playground({ children, transformCode, ...props }) {
               {isEditorEnabled && (
                 <ResultWithHeader snippetId={getSnippetId(children)} />
               )}
-              <EditorWithHeader />
+              <EditorWithHeader code={getCodeBody(children)} />
             </>
           ) : (
             <>
-              <EditorWithHeader />
+              <EditorWithHeader code={getCodeBody(children)} />
               {isEditorEnabled && (
                 <ResultWithHeader snippetId={getSnippetId(children)} />
               )}

src/theme/Playground/index.js

@@ -31,3 +31,29 @@
   padding: 1rem;
   background-color: var(--ifm-pre-background);
 }
+
+.copyButtonIconWrapper {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.copyButtonIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: currentColor;
+  opacity: inherit;
+  width: inherit;
+  height: inherit;
+  transition: all var(--ifm-transition-fast) ease;
+}
+
+.copyButton {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+}