Merge remote-tracking branch 'origin/main' into automation-native-bil…

…ling

global.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  interface Window {
+    dataLayer: Array<{
+      event: string
+      [key: string]: any
+    }>
+  }
+}
+
+export {}

package.json

@@ -41,6 +41,7 @@
     "@chainlink/contracts": "1.2.0",
     "@chainlink/contracts-ccip": "1.4.0",
     "@chainlink/design-system": "^0.1.50",
+    "@chainlink/local": "^0.2.1",
     "@chainlink/solana-sdk": "^0.2.2",
     "@metamask/detect-provider": "^2.0.0",
     "@metamask/providers": "^10.2.1",
@@ -62,7 +63,8 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "rehype-wrap-all": "^1.1.0",
-    "remark-directive": "^3.0.0"
+    "remark-directive": "^3.0.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@nomicfoundation/hardhat-toolbox": "^2.0.2",

public/samples/CCIP/ProgrammableDefensiveTokenTransfers.sol

@@ -234,7 +234,7 @@ contract ProgrammableDefensiveTokenTransfers is CCIPReceiver, OwnerIsCreator {
 
     /// @notice Sends data and transfer tokens to receiver on the destination chain.
     /// @notice Pay for fees in native gas.
-    /// @dev Assumes your contract has sufficient native gas like ETH on Ethereum or MATIC on Polygon.
+    /// @dev Assumes your contract has sufficient native gas like ETH on Ethereum or POL on Polygon.
     /// @param _destinationChainSelector The identifier (aka selector) for the destination blockchain.
     /// @param _receiver The address of the recipient on the destination blockchain.
     /// @param _text The string data to be sent.

public/samples/CCIP/ProgrammableTokenTransfers.sol

@@ -195,7 +195,7 @@ contract ProgrammableTokenTransfers is CCIPReceiver, OwnerIsCreator {
 
     /// @notice Sends data and transfer tokens to receiver on the destination chain.
     /// @notice Pay for fees in native gas.
-    /// @dev Assumes your contract has sufficient native gas like ETH on Ethereum or MATIC on Polygon.
+    /// @dev Assumes your contract has sufficient native gas like ETH on Ethereum or POL on Polygon.
     /// @param _destinationChainSelector The identifier (aka selector) for the destination blockchain.
     /// @param _receiver The address of the recipient on the destination blockchain.
     /// @param _text The string data to be sent.

public/samples/CCIP/TestCCIPLocalSimulator.sol

@@ -0,0 +1,5 @@
+// SPDX-License-Identifier: MIT
+pragma solidity 0.8.19;
+
+// solhint-disable no-unused-import
+import {CCIPLocalSimulator} from "@chainlink/local/src/ccip/CCIPLocalSimulator.sol";

public/samples/CCIP/TokenTransferor.sol

@@ -143,10 +143,10 @@ contract TokenTransferor is OwnerIsCreator {
     }
 
     /// @notice Transfer tokens to receiver on the destination chain.
-    /// @notice Pay in native gas such as ETH on Ethereum or MATIC on Polgon.
+    /// @notice Pay in native gas such as ETH on Ethereum or POL on Polgon.
     /// @notice the token must be in the list of supported tokens.
     /// @notice This function can only be called by the owner.
-    /// @dev Assumes your contract has sufficient native gas like ETH on Ethereum or MATIC on Polygon.
+    /// @dev Assumes your contract has sufficient native gas like ETH on Ethereum or POL on Polygon.
     /// @param _destinationChainSelector The identifier (aka selector) for the destination blockchain.
     /// @param _receiver The address of the recipient on the destination blockchain.
     /// @param _token token address.

src/components/Address.tsx

@@ -7,11 +7,33 @@ export type Props = {
   endLength?: number
   urlClass?: string
   urlId?: string
+  eventName?: string
+  additionalInfo?: Record<string, string>
 }
 
-const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }: Props) => {
+const AddressComponent = ({
+  contractUrl,
+  address,
+  endLength,
+  urlClass,
+  urlId,
+  eventName,
+  additionalInfo = {}, // Default to an empty object if not provided
+}: Props) => {
   address = address || contractUrl.split("/").pop()
 
+  const handleClick = (e) => {
+    e.preventDefault()
+
+    if (eventName !== undefined) {
+      const dataLayerEvent = {
+        event: eventName,
+        ...additionalInfo,
+      }
+      window.dataLayer.push(dataLayerEvent)
+    }
+  }
+
   return (
     <span className={`addressContainer ${urlClass || ""}`} id={urlId}>
       <a title={address} className="addressLink" href={contractUrl}>
@@ -21,6 +43,7 @@ const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }:
         className={clsx("copyBtn", "copy-iconbutton")}
         style={{ height: "16px", width: "16px", minWidth: "12px" }}
         data-clipboard-text={address}
+        onClick={handleClick}
       >
         <img src="/assets/icons/copyIcon.svg" alt="Copy to clipboard" />
       </button>
@@ -38,6 +61,7 @@ const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }:
           align-items: center;
           gap: var(--space-1x);
           word-break: break-word;
+          margin-top: 0;
         }
 
         .copyBtn {

src/components/CopyText.tsx

@@ -6,9 +6,11 @@ export type Props = {
   code?: boolean
   format?: boolean // determine if formatting is needed
   formatType?: "bytes32"
+  eventName?: string
+  additionalInfo?: Record<string, string>
 }
 
-const CopyContainer = ({ text, code, format, formatType }: Props) => {
+const CopyContainer = ({ text, code, format, formatType, eventName, additionalInfo = {} }: Props) => {
   // Function to format text based on format type
   const formatText = (text: string, type: string | undefined) => {
     if (type === "bytes32" && text.length > 10) {
@@ -24,13 +26,27 @@ const CopyContainer = ({ text, code, format, formatType }: Props) => {
 
   // Determine if formatting is needed
   const displayText = format ? formatText(text, formatType) : text
+
+  const handleClick = (e) => {
+    e.preventDefault()
+
+    if (eventName !== undefined) {
+      const dataLayerEvent = {
+        event: eventName,
+        ...additionalInfo,
+      }
+      window.dataLayer.push(dataLayerEvent)
+    }
+  }
+
   return (
     <span className="copyContainer">
       {code ? <code>{displayText}</code> : displayText}
       <button
         className={clsx("copyBtn", "copy-iconbutton")}
         style={{ height: "16px", width: "16px", minWidth: "12px" }}
         data-clipboard-text={text}
+        onClick={handleClick}
       >
         <img src="/assets/icons/copyIcon.svg" alt="Copy to clipboard" />
       </button>
@@ -43,6 +59,7 @@ const CopyContainer = ({ text, code, format, formatType }: Props) => {
           overflow: hidden;
           text-overflow: ellipsis;
           word-break: break-all;
+          margin-top: 0;
         }
 
         .copyBtn {

src/components/Header/getNavigationProps.ts

@@ -77,6 +77,7 @@ const desktopSubProductsNav = [
     href: "/chainlink-nodes",
     icon: nodesLogo.src,
   },
+  { label: "Chainlink Local", href: "/chainlink-local", icon: quickstartLogo.src },
   {
     label: "Quickstarts",
     href: "/quickstarts",
@@ -135,6 +136,12 @@ const docsSections = [
         icon: nodesLogo.src,
         subProducts: getSubProducts(sidebar.nodeOperator),
       },
+      {
+        label: "Chainlink Local",
+        href: "/chainlink-local",
+        icon: quickstartLogo.src,
+        subProducts: getSubProducts(sidebar.chainlinkLocal),
+      },
       {
         label: "General",
         href: "/resources",