ChainSafe · avkos · Mar 24, 2025 · Mar 21, 2025 · Mar 21, 2025 · Mar 24, 2025
diff --git a/.github/workflows/build-demo.yml b/.github/workflows/build-demo.yml
@@ -1,7 +1,7 @@
 name: 'Lint and Build All'
 on:
   pull_request:
-    types: [opened, reopened, synchronize]
+    types: [ opened, reopened, synchronize ]
 
 jobs:
   test:
@@ -17,4 +17,4 @@ jobs:
       - run: yarn elements:build
       - run: yarn build
       - run: yarn lint
-      - run: yarn workspace @circle-libs/react-elements build-storybook
+      - run: yarn workspace @chainsafe/circle-react-elements build-storybook
diff --git a/.github/workflows/publish-storybook-gh-pages.yml b/.github/workflows/publish-storybook-gh-pages.yml
@@ -29,7 +29,7 @@ jobs:
           node-version: 20
           cache: yarn
       - run: yarn install
-      - run: yarn workspace @circle-libs/react-elements build-storybook
+      - run: yarn workspace @chainsafe/circle-react-elements build-storybook
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact

diff --git a/README.md b/README.md
@@ -2,8 +2,9 @@
 
 Monorepo that contains the following packages:
 
-- [`@circle-libs/circle-demo-webapp`](packages/circle-demo-webapp) - Demo application combining Circle React components and [Circle SDK](https://developers.circle.com/)
-- [`@circle-libs/react-elements`](packages/circle-react-elements) - React components compatible with Circle SDK
+- [`@circle-libs/circle-demo-webapp`](packages/circle-demo-webapp) - Demo application combining Circle React components
+  and [Circle SDK](https://developers.circle.com/)
+- [`@chainsafe/circle-react-elements`](packages/circle-react-elements) - React components compatible with Circle SDK
 - [`@circle-libs/sdk-setup`](packages/circle-sdk-setup) - CLI tool for Circle SDK setup
 
 ## Local Development

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "circle-elements-monorepo",
+  "name": "@chainsafe/circle-elements-monorepo",
   "version": "0.0.1",
-  "description": "Circle Wallet Elements - UI components and tools compatible with Circle SDK",
+  "description": "ChainSafe React Elements powered by Circle Web3 Services - UI components and tools compatible with Circle SDK",
   "homepage": "https://github.com/ChainSafe/web3-circle-libs#readme",
   "bugs": {
     "url": "https://github.com/ChainSafe/web3-circle-libs/issues"
@@ -18,9 +18,9 @@
   "scripts": {
     "demo:dev": "yarn workspace circle-demo-webapp dev",
     "demo:build": "yarn elements:build && yarn workspace circle-demo-webapp build",
-    "elements:build": "yarn workspace @circle-libs/react-elements build",
-    "elements:watch": "yarn workspace @circle-libs/react-elements watch",
-    "elements:storybook": "yarn workspace @circle-libs/react-elements storybook",
+    "elements:build": "yarn workspace @chainsafe/circle-react-elements build",
+    "elements:watch": "yarn workspace @chainsafe/circle-react-elements watch",
+    "elements:storybook": "yarn workspace @chainsafe/circle-react-elements storybook",
     "build": "yarn workspaces run build",
     "lint": "yarn workspaces run lint"
   },

diff --git a/packages/circle-demo-webapp/app/components/Sidebar/Sidebar.tsx b/packages/circle-demo-webapp/app/components/Sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { ElementsWalletSet } from '@circle-libs/react-elements';
+import { ElementsWalletSet } from '@chainsafe/circle-react-elements';
 import { Link, NavLink } from '@remix-run/react';
 import { Database, LayoutDashboard } from 'lucide-react';
 import React from 'react';

diff --git a/packages/circle-demo-webapp/app/hooks/useCreateWalletSet.ts b/packages/circle-demo-webapp/app/hooks/useCreateWalletSet.ts
@@ -1,4 +1,4 @@
-import { ElementsWalletSet } from '@circle-libs/react-elements';
+import { ElementsWalletSet } from '@chainsafe/circle-react-elements';
 import { useCallback, useState } from 'react';
 
 import { callFetch } from '~/lib/utils';

diff --git a/packages/circle-demo-webapp/app/hooks/useGetTransaction.ts b/packages/circle-demo-webapp/app/hooks/useGetTransaction.ts
@@ -1,5 +1,5 @@
+import { ElementsTransactionWithToken } from '@chainsafe/circle-react-elements';
 import { GetTransactionInput } from '@circle-fin/developer-controlled-wallets';
-import { ElementsTransactionWithToken } from '@circle-libs/react-elements';
 import { useCallback, useState } from 'react';
 
 import { callGetFetch } from '~/lib/utils';

diff --git a/packages/circle-demo-webapp/app/hooks/useTransactions.ts b/packages/circle-demo-webapp/app/hooks/useTransactions.ts
@@ -1,5 +1,5 @@
+import { ElementsTransactionWithToken } from '@chainsafe/circle-react-elements';
 import { ListTransactionsInput } from '@circle-fin/developer-controlled-wallets';
-import { ElementsTransactionWithToken } from '@circle-libs/react-elements';
 import { useCallback, useState } from 'react';
 
 import { callGetFetch } from '~/lib/utils';

diff --git a/packages/circle-demo-webapp/app/lib/memcache.ts b/packages/circle-demo-webapp/app/lib/memcache.ts
@@ -1,5 +1,5 @@
+import { ElementsWalletSet } from '@chainsafe/circle-react-elements';
 import { Token } from '@circle-fin/developer-controlled-wallets';
-import { ElementsWalletSet } from '@circle-libs/react-elements';
 
 import { sdk } from '~/lib/sdk';
 

diff --git a/packages/circle-demo-webapp/app/routes/_index.tsx b/packages/circle-demo-webapp/app/routes/_index.tsx
@@ -7,7 +7,7 @@ export default function Page() {
           <p className="text-muted-foreground">
             This is a demonstration application showcasing Circle&apos;s
             developer-controlled wallets using Circle SDK and ChainSafe&apos;s{' '}
-            @circle-libs/react-elements library.
+            @chainsafe/circle-react-elements library.
           </p>
         </div>
 
@@ -19,7 +19,7 @@ export default function Page() {
           </p>
           <ul className="list-disc list-inside space-y-2 text-muted-foreground ml-4">
             <li>Circle SDK for wallet and transaction management</li>
-            <li>@circle-libs/react-elements library for pre-built UI components</li>
+            <li>@chainsafe/circle-react-elements library for pre-built UI components</li>
             <li>Remix.js for the application framework</li>
             <li>Tailwind CSS for styling</li>
           </ul>
@@ -43,15 +43,15 @@ export default function Page() {
                   href="https://github.com/ChainSafe/web3-circle-libs"
                   className="text-primary hover:underline"
                 >
-                  @circle-libs/react-elements GitHub Repository
+                  @chainsafe/circle-react-elements GitHub Repository
                 </a>
               </li>
               <li>
                 <a
                   href="https://chainsafe.github.io/web3-circle-libs/"
                   className="text-primary hover:underline"
                 >
-                  @circle-libs/react-elements Documentation
+                  @chainsafe/circle-react-elements Documentation
                 </a>
               </li>
             </ul>

diff --git a/packages/circle-demo-webapp/app/routes/api.getTransaction.tsx b/packages/circle-demo-webapp/app/routes/api.getTransaction.tsx
@@ -1,8 +1,8 @@
+import { ElementsTransactionWithToken } from '@chainsafe/circle-react-elements';
 import {
   GetTransactionInput,
   TransactionType,
 } from '@circle-fin/developer-controlled-wallets';
-import { ElementsTransactionWithToken } from '@circle-libs/react-elements';
 import { LoaderFunctionArgs } from '@remix-run/node';
 
 import { cachedCoins } from '~/lib/memcache';

diff --git a/packages/circle-demo-webapp/app/routes/api.listTransactions.tsx b/packages/circle-demo-webapp/app/routes/api.listTransactions.tsx
@@ -1,5 +1,5 @@
+import { ElementsTransactionWithToken } from '@chainsafe/circle-react-elements';
 import { ListTransactionsInput } from '@circle-fin/developer-controlled-wallets';
-import { ElementsTransactionWithToken } from '@circle-libs/react-elements';
 import { LoaderFunctionArgs } from '@remix-run/node';
 
 import { cachedCoins } from '~/lib/memcache';

diff --git a/packages/circle-demo-webapp/app/routes/transactions.$walletId/route.tsx b/packages/circle-demo-webapp/app/routes/transactions.$walletId/route.tsx
@@ -1,5 +1,5 @@
+import { Transaction, TransactionDetails } from '@chainsafe/circle-react-elements';
 import { ListTransactionsInput } from '@circle-fin/developer-controlled-wallets';
-import { TransactionDetails, Transaction } from '@circle-libs/react-elements';
 import { useParams } from '@remix-run/react';
 import { LoaderCircle } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';

diff --git a/packages/circle-demo-webapp/app/routes/wallet.$id/components/EditWalletDialog.tsx b/packages/circle-demo-webapp/app/routes/wallet.$id/components/EditWalletDialog.tsx
@@ -1,9 +1,9 @@
-import { Wallet } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
 import {
   EditWalletForm,
   EditWalletFormInput,
   ElementsSubmitHandler,
-} from '@circle-libs/react-elements';
+} from '@chainsafe/circle-react-elements';
+import { Wallet } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
 import { FilePenLine } from 'lucide-react';
 import { useState } from 'react';
 

diff --git a/packages/circle-demo-webapp/app/routes/wallet.$id/components/WalletReceiveDialog.tsx b/packages/circle-demo-webapp/app/routes/wallet.$id/components/WalletReceiveDialog.tsx
@@ -1,5 +1,5 @@
+import { WalletReceive } from '@chainsafe/circle-react-elements';
 import { Wallet } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
-import { WalletReceive } from '@circle-libs/react-elements';
 import { ArrowDown } from 'lucide-react';
 import { useState } from 'react';
 

diff --git a/packages/circle-demo-webapp/app/routes/wallet.$id/components/WalletSendDialog.tsx b/packages/circle-demo-webapp/app/routes/wallet.$id/components/WalletSendDialog.tsx
@@ -1,3 +1,11 @@
+import {
+  ElementsSubmitHandler,
+  SendTransactionForm,
+  SendTransactionFormInput,
+  SuccessMessage,
+  utils,
+  WalletDetails,
+} from '@chainsafe/circle-react-elements';
 import {
   Balance,
   CreateTransactionInput,
@@ -6,14 +14,6 @@ import {
   Transaction,
   Wallet,
 } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
-import {
-  ElementsSubmitHandler,
-  SendTransactionForm,
-  SendTransactionFormInput,
-  SuccessMessage,
-  utils,
-  WalletDetails,
-} from '@circle-libs/react-elements';
 import { ArrowUp, ArrowUpRight } from 'lucide-react';
 import { useState } from 'react';
 

diff --git a/packages/circle-demo-webapp/app/routes/wallet.$id/route.tsx b/packages/circle-demo-webapp/app/routes/wallet.$id/route.tsx
@@ -1,11 +1,11 @@
-import { CreateTransactionInput } from '@circle-fin/developer-controlled-wallets';
-import { Transaction as TransactionType } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
 import {
   formats,
   Transaction,
   WalletBalance,
   WalletDetails,
-} from '@circle-libs/react-elements';
+} from '@chainsafe/circle-react-elements';
+import { CreateTransactionInput } from '@circle-fin/developer-controlled-wallets';
+import { Transaction as TransactionType } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
 import { LoaderFunctionArgs } from '@remix-run/node';
 import { Link, useLoaderData, useParams, useRevalidator } from '@remix-run/react';
 import { ArrowUpRight } from 'lucide-react';

diff --git a/packages/circle-demo-webapp/app/routes/wallets.$id/components/EditWalletSetDialog.tsx b/packages/circle-demo-webapp/app/routes/wallets.$id/components/EditWalletSetDialog.tsx
@@ -3,7 +3,7 @@ import {
   EditWalletSetFormInput,
   ElementsSubmitHandler,
   ElementsWalletSet,
-} from '@circle-libs/react-elements';
+} from '@chainsafe/circle-react-elements';
 import { FilePenLine } from 'lucide-react';
 import { useState } from 'react';
 

diff --git a/packages/circle-demo-webapp/app/routes/wallets.$id/components/NewWalletDialog.tsx b/packages/circle-demo-webapp/app/routes/wallets.$id/components/NewWalletDialog.tsx
@@ -1,10 +1,10 @@
-import { Wallet } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
 import {
   ElementsSubmitHandler,
   NewWalletForm,
   NewWalletFormInput,
   SuccessMessage,
-} from '@circle-libs/react-elements';
+} from '@chainsafe/circle-react-elements';
+import { Wallet } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 

diff --git a/packages/circle-demo-webapp/app/routes/wallets.$id/route.tsx b/packages/circle-demo-webapp/app/routes/wallets.$id/route.tsx
@@ -3,7 +3,7 @@ import {
   ElementsWalletSet,
   formats,
   WalletDetails,
-} from '@circle-libs/react-elements';
+} from '@chainsafe/circle-react-elements';
 import { Link, useLoaderData, useParams, useRevalidator } from '@remix-run/react';
 import { ArrowUpRight } from 'lucide-react';
 

diff --git a/packages/circle-demo-webapp/app/routes/wallets._index/components/NewWalletSetDialog.tsx b/packages/circle-demo-webapp/app/routes/wallets._index/components/NewWalletSetDialog.tsx
@@ -4,7 +4,7 @@ import {
   NewWalletSetForm,
   NewWalletSetFormInput,
   SuccessMessage,
-} from '@circle-libs/react-elements';
+} from '@chainsafe/circle-react-elements';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 

diff --git a/packages/circle-demo-webapp/app/routes/wallets._index/route.tsx b/packages/circle-demo-webapp/app/routes/wallets._index/route.tsx
@@ -1,4 +1,4 @@
-import { WalletSetDetails } from '@circle-libs/react-elements';
+import { WalletSetDetails } from '@chainsafe/circle-react-elements';
 import { Link, useLoaderData, useRevalidator } from '@remix-run/react';
 import { ArrowUpRight } from 'lucide-react';
 

diff --git a/packages/circle-demo-webapp/app/tailwind.css b/packages/circle-demo-webapp/app/tailwind.css
@@ -1,12 +1,12 @@
 @import 'tailwindcss';
-@import '@circle-libs/react-elements/styles.css';
+@import '@chainsafe/circle-react-elements/styles.css';
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --primary: hsl(255 82% 64%); /* Overwrite to match your theme. */
+    --primary: hsl(255 82% 64%); /* Overwrite to match your theme. */
 }
 
 .dark {
-  --primary: hsl(255 82% 64%);
+    --primary: hsl(255 82% 64%);
 }
diff --git a/packages/circle-demo-webapp/package.json b/packages/circle-demo-webapp/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "circle-demo-webapp",
+  "name": "@chainsafe/circle-demo-webapp",
   "version": "0.0.1",
   "description": "Demo application combining Circle React components and Circle SDK",
   "homepage": "https://github.com/ChainSafe/web3-circle-libs#readme",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@circle-fin/developer-controlled-wallets": "^7.1.0",
-    "@circle-libs/react-elements": "^0.1.0",
+    "@chainsafe/circle-react-elements": "^0.1.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.4",

diff --git a/packages/circle-react-elements/.storybook/manager.ts b/packages/circle-react-elements/.storybook/manager.ts
@@ -5,7 +5,7 @@ import { create } from '@storybook/theming';
 addons.setConfig({
   theme: create({
     base: 'light',
-    brandTitle: 'Circle React Elements',
+    brandTitle: 'ChainSafe React Elements powered by Circle Web3 Services',
     brandImage: './circle-logo.svg',
   }),
 });
@@ -18,7 +18,7 @@ addons.register('theme-switcher', (api) => {
     channel.on('DARK_MODE', (isDark) => {
       const newTheme = create({
         base: isDark ? 'dark' : 'light',
-        brandTitle: 'Circle React Elements',
+        brandTitle: 'ChainSafe React Elements powered by Circle Web3 Services',
         brandImage: isDark ? './circle-logo-ondark.svg' : './circle-logo.svg',
       });