feat: copy button

airgap-it · Aug 23, 2024 · 088fe2b · 088fe2b
1 parent d66563d
commit 088fe2b
Show file tree

Hide file tree

Showing 7 changed files with 1,041 additions and 1,195 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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": [

diff --git a/src/docs/getting-started/subscribe-to-active-account.mdx b/src/docs/getting-started/subscribe-to-active-account.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) {

diff --git a/src/examples/custom-block-explorer.beacon.ts b/src/examples/custom-block-explorer.beacon.ts
@@ -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);

diff --git a/src/examples/custom-block-explorer.taquito.ts b/src/examples/custom-block-explorer.taquito.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);

diff --git a/src/theme/Playground/components/copy-button.jsx b/src/theme/Playground/components/copy-button.jsx
@@ -0,0 +1,60 @@
+import { useState } from "react";
+
+const CopyButton = ({ text }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Copy code to clipboard"
+        title="Copy"
+        className="clean-btn"
+        onClick={() => {
+          navigator.clipboard.writeText(text).then(() => {
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 3000);
+          });
+        }}
+      >
+        <span
+          className="copyButtonIcons_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
+          style={{ display: "inline-block" }}
+          aria-hidden="true"
+        >
+          {!isCopied ? (
+            <>
+              <svg
+                viewBox="0 0 24 24"
+                className="copyButtonIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
+              >
+                <path
+                  fill="currentColor"
+                  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
+                viewBox="0 0 24 24"
+                className="copyButtonSuccessIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
+              >
+                <path
+                  fill="currentColor"
+                  d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                ></path>
+              </svg>
+            </>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="copyButtonIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"
+            >
+              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+            </svg>
+          )}
+        </span>
+      </button>
+    </>
+  );
+};
+export default CopyButton;
diff --git a/src/theme/Playground/index.js b/src/theme/Playground/index.js
@@ -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={children} />
             </>
           ) : (
             <>
-              <EditorWithHeader />
+              <EditorWithHeader code={children} />
               {isEditorEnabled && (
                 <ResultWithHeader snippetId={getSnippetId(children)} />
               )}