base commit

.github/workflows/publish.yaml

@@ -0,0 +1,50 @@
+# NOTE: See "prepublishOnly" script in package.json
+# NPM_TOKEN will only be populated in the context of the `publish` GH environment, see L14
+
+name: Publish to NPM
+
+on:
+  push:
+    branches:
+      - "main"
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    environment: publish
+    steps:
+      - name: Checkout the repo
+        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.12
+          always-auth: true
+
+      - name: Install PNPM
+        run: npm install -g pnpm@9.4.0
+        shell: bash
+
+      - name: Install dependencies
+        run:
+          pnpm install --frozen-lockfile --strict-peer-dependencies --filter=ccip-js --filter=ccip-react-components
+        shell: bash    
+
+      - name: Publish ccip-js to NPM
+        run: |
+          pnpm build-ccip-js
+          cd packages/ccip-js
+          pnpm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_CCIP_JAVASCRIPT_SDK }}
+          pnpm publish --no-git-checks --access public
+        shell: bash    
+
+      - name: Publish ccip-react-components to NPM
+        run: |
+          pnpm build-components
+          cd packages/ccip-react-components
+          pnpm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_CCIP_JAVASCRIPT_SDK }}
+          pnpm publish --no-git-checks --access public
+        shell: bash  

.gitignore

@@ -0,0 +1,10 @@
+# dependencies
+node_modules/
+
+# build
+dist/
+
+# misc
+.env
+*.tsbuildinfo
+bin

LICENSE

@@ -0,0 +1,7 @@
+Copyright (c) 2024 SmartContract ChainLink Limited SEZC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,77 @@
+<div style="text-align:center" align="center">
+    <a href="https://chain.link" target="_blank">
+        <img src="https://raw.githubusercontent.com/smartcontractkit/chainlink/develop/docs/logo-chainlink-blue.svg" width="225" alt="Chainlink logo">
+    </a>
+
+[![License](https://img.shields.io/badge/license-MIT-blue)](https://github.com/smartcontractkit/ccip-javascript-sdk/blob/main/LICENSE)
+[![SDK Documentation](https://img.shields.io/static/v1?label=sdk-docs&message=latest&color=blue)](https://docs.chain.link/ccip/ccip-javascript-sdk/)
+</div>
+
+# CCIP JavaScript SDK
+
+The CCIP JavaScript SDK includes two packages:
+  - [`ccip-js`](/packages/ccip-js/README.md): A TypeScript library that provides a client for managing cross-chain token transfers that use Chainlink's [Cross-Chain Interoperability Protocol (CCIP)](https://docs.chain.link/ccip) routers.
+  - [`ccip-react-components`](/packages/ccip-react-components/README.md): A set of prebuilt ready-to-use UI components built on top of `ccip-js`.
+
+  Using both packages, you can add a fully featured CCIP bridge to your app that can be styled to match your app design.
+
+  To view more detailed documentation and more examples, visit the [Chainlink Javascript SDK Documentation](https://docs.chain.link/ccip/ccip-javascript-sdk/).
+
+### Prerequisites
+
+1. Clone the `ccip-javascript-sdk` repo:
+
+```sh
+git clone https://github.com/smartcontractkit/ccip-javascript-sdk.git
+```
+
+2. [Install `pnpm`](https://pnpm.io/installation).
+
+3. Run `pnpm install`
+
+
+### Run the example app
+
+```sh
+pnpm dev-example
+```
+
+### Build packages
+
+If you want to make changes to the package code, you need to rebuild the packages and update the package.json file to point to the updated local versions. 
+
+Make sure to build the `ccip-js` package before you build the `ccip-react-components` package. The React components depend on the JS package.
+
+Follow these steps:
+
+1. Build the `ccip-js` package:
+
+```sh
+pnpm build-ccip-js
+```
+
+2. Build the `ccip-react-components` package:
+
+```sh
+pnpm build-components
+```
+
+3. Update the `ccip-react-components` package to use the local `ccip-js` version by modifying `packages/ccip-react-components/package.json` file. Replace the `@chainlink/ccip-js` dependency with the workspace reference:
+
+```sh
+"@chainlink/ccip-js": "workspace:*"
+```
+
+4. Update the `examples/nextjs` app to use both local `ccip-js` and `ccip-react-components` version by modifying `examples/nextjs/package.json` file. Replace the `@chainlink/ccip-js` and `@chainlink/ccip-react-components` dependency with relative path:
+
+```sh
+"@chainlink/ccip-js": "link:../../packages/ccip-js",
+"@chainlink/ccip-react-components": "link:../../packages/ccip-react-components",
+```
+
+## Resources
+
+- [Chainlink CCIP Javascript SDK Documentation](https://docs.chain.link/ccip/ccip-javascript-sdk/)
+- [Chainlink CCIP Documentation](https://docs.chain.link/ccip)
+- [Chainlink CCIP Directory](https://docs.chain.link/ccip/directory)
+- [Chainlink Documentation](https://docs.chain.link/)

examples/nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/app/ccip-js/page.tsx

@@ -0,0 +1,10 @@
+import { CCIP } from "@/components/ccip";
+import { Providers } from "./providers";
+
+export default function CCIPJsPage() {
+  return (
+    <Providers>
+      <CCIP />
+    </Providers>
+  );
+}

examples/nextjs/app/ccip-js/providers.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { WagmiProvider } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { wagmiConfig } from '@/config/wagmiConfig';
+
+const queryClient = new QueryClient();
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}

examples/nextjs/app/drawer/page.tsx

@@ -0,0 +1,5 @@
+import { DrawerWidget } from '@/components/drawer-widget';
+
+export default function DrawerPage() {
+  return <DrawerWidget />;
+}

examples/nextjs/app/globals.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

examples/nextjs/app/layout.tsx

@@ -0,0 +1,48 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { ClientOnly } from '@/components/client-only';
+import Link from 'next/link';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'CCIP Widget Examples',
+  description: 'View CCIP Widgets',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} flex min-h-screen`}>
+        <nav className="flex flex-col border-r border-r-slate-300 p-6 space-y-4 bg-white text-center">
+          <Link
+            className="border border-slate-300 rounded-md p-2 hover:bg-slate-300 transition-colors"
+            href="/"
+          >
+            Default
+          </Link>
+          <Link
+            className="border border-slate-300 rounded-md p-2 hover:bg-slate-300 transition-colors"
+            href="/drawer"
+          >
+            Drawer
+          </Link>
+          <Link
+            className="border border-slate-300 rounded-md p-2 hover:bg-slate-300 transition-colors"
+            href="/ccip-js"
+          >
+            CCIP-JS
+          </Link>
+        </nav>
+        <main className="flex flex-col items-center justify-center bg-slate-100 grow">
+          <ClientOnly>{children}</ClientOnly>
+        </main>
+      </body>
+    </html>
+  );
+}

examples/nextjs/app/page.tsx

@@ -0,0 +1,5 @@
+import { DefaultWidget } from '@/components/default-widget';
+
+export default function Home() {
+  return <DefaultWidget />;
+}