feat: Magic Widget extension

.github/workflows/test.yml

@@ -10,6 +10,9 @@ on:
   merge_group:
    types: [checks_requested]
 
+env:
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
 jobs:
   lint:
     runs-on: ubuntu-latest

.npmrc

@@ -0,0 +1,3 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+auto-install-peers=true
+

.yarnrc.yml

@@ -2,6 +2,11 @@ nmHoistingLimits: workspaces
 
 nodeLinker: node-modules
 
+npmScopes:
+  magiclabs:
+    npmRegistryServer: "https://registry.npmjs.org"
+    npmAuthToken: "${NPM_TOKEN}"
+
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"

packages/@magic-ext/algorand/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/aptos/package.json

@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@aptos-labs/wallet-adapter-core": "^7.10.1",
-    "@magic-sdk/provider": "^31.2.0",
+    "@magic-sdk/provider": "^33.1.0",
     "aptos": "^1.22.1"
   },
   "peerDependencies": {

packages/@magic-ext/avalanche/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/bitcoin/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/conflux/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/cosmos/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/ed25519/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/evm/package.json

@@ -29,7 +29,7 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^29.5.0",
-    "@magic-sdk/types": "^24.22.0"
+    "@magic-sdk/provider": "^33.1.0",
+    "@magic-sdk/types": "^27.1.0"
   }
 }

packages/@magic-ext/farcaster/package.json

@@ -29,7 +29,7 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0",
-    "@magic-sdk/types": "^25.2.0"
+    "@magic-sdk/provider": "^33.1.0",
+    "@magic-sdk/types": "^27.1.0"
   }
 }

packages/@magic-ext/flow/package.json

@@ -28,7 +28,7 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0",
+    "@magic-sdk/provider": "^33.1.0",
     "@onflow/fcl": "^1.4.1",
     "@onflow/types": "^1.1.0"
   },

packages/@magic-ext/gdkms/package.json

@@ -29,7 +29,7 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0",
-    "@magic-sdk/types": "^25.2.0"
+    "@magic-sdk/provider": "^33.1.0",
+    "@magic-sdk/types": "^27.1.0"
   }
 }

packages/@magic-ext/harmony/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/hedera/package.json

@@ -28,7 +28,7 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^29.5.0"
+    "@magic-sdk/provider": "^33.1.0"
   },
   "peerDependencies": {
     "@hashgraph/sdk": "^2.31.0"

packages/@magic-ext/icon/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/kadena/package.json

@@ -28,6 +28,6 @@
     ]
   },
   "devDependencies": {
-    "@magic-sdk/provider": "^31.2.0"
+    "@magic-sdk/provider": "^33.1.0"
   }
 }

packages/@magic-ext/web3modal-ethers5/eslint.config.mjs → packages/@magic-ext/magic-widget/eslint.config.mjs

@@ -8,12 +8,21 @@ const __dirname = path.dirname(__filename);
 export default [
   ...rootEslintConfig,
   {
-    ignores: ['node_modules', 'coverage', 'dist', 'eslint.config.mjs', 'jest.config.ts'],
+    ignores: [
+      'node_modules',
+      'coverage',
+      'dist',
+      'eslint.config.mjs',
+      'jest.config.ts',
+      'panda.config.ts',
+      'postcss.config.cjs',
+      'styled-system',
+    ],
   },
   {
     languageOptions: {
       parserOptions: {
-        project: ['./tsconfig.json', './test/tsconfig.json'],
+        project: ['./tsconfig.json'],
         tsconfigRootDir: __dirname,
       },
     },

packages/@magic-ext/web3modal-ethers5/jest.config.ts → packages/@magic-ext/magic-widget/jest.config.ts

@@ -7,7 +7,7 @@ const config: Config.InitialOptions = {
     '^.+\\.(js|jsx)$': 'babel-jest',
     '\\.(ts|tsx)$': 'ts-jest',
   },
-  coveragePathIgnorePatterns: ['index.ts', 'index.cdn.ts', 'index.native.ts'],
+  coveragePathIgnorePatterns: ['index.cdn.ts', 'index.native.ts'],
 };
 
 export default config;

packages/@magic-ext/magic-widget/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@magic-ext/magic-widget",
+  "useCustomBuild": true,
+  "version": "0.1.0",
+  "description": "Magic SDK Widget Extension with React components.",
+  "author": "Magic <[email protected]> (https://magic.link/)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/magiclabs/magic-js"
+  },
+  "scripts": {
+    "prepare": "panda codegen",
+    "build:css": "panda cssgen --outfile dist/styles.css",
+    "build": "rollup -c rollup.config.mjs && tsc"
+  },
+  "files": [
+    "dist"
+  ],
+  "target": "browser",
+  "type": "module",
+  "module": "./dist/es/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/es/index.mjs"
+    }
+  },
+  "externals": {
+    "include": [
+      "@magic-sdk/provider",
+      "@reown/appkit",
+      "@reown/appkit-adapter-wagmi",
+      "@tanstack/react-query",
+      "@wagmi/core",
+      "@walletconnect/ethereum-provider",
+      "react",
+      "react-dom",
+      "viem",
+      "wagmi"
+    ]
+  },
+  "esbuildAliases": {
+    "@styled/css": "./styled-system/css",
+    "@styled/jsx": "./styled-system/jsx",
+    "@styled/tokens": "./styled-system/tokens",
+    "@styled/patterns": "./styled-system/patterns"
+  },
+  "dependencies": {
+    "@magiclabs/ui-components": "^1.49.2",
+    "@reown/appkit": "^1.8.0",
+    "@reown/appkit-adapter-wagmi": "^1.8.0",
+    "@wagmi/core": "^2.0.0",
+    "@walletconnect/ethereum-provider": "^2.23.0",
+    "wagmi": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "viem": "^2.0.0"
+  },
+  "devDependencies": {
+    "@magic-sdk/provider": "^33.1.0",
+    "@magic-sdk/types": "^27.1.0",
+    "@pandacss/dev": "^0.35.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@tanstack/react-query": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup": "^4.18.0",
+    "tslib": "^2.6.3",
+    "viem": "^2.37.9"
+  }
+}

packages/@magic-ext/magic-widget/panda.config.ts

@@ -0,0 +1,50 @@
+import { magicPreset } from '@magiclabs/ui-components/presets';
+import { defineConfig } from '@pandacss/dev';
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+  // Minify the generated css
+  minify: true,
+  // Hash all classnames
+  hash: true,
+  // Clean the output directory before generating the css
+  clean: true,
+  // Note: @layer directives are stripped in rollup.config.mjs for Tailwind compatibility
+
+  importMap: '@styled',
+
+  // Where to look for your css declarations
+  include: ['./node_modules/@magiclabs/ui-components/dist/panda.buildinfo.json', './src/**/*.{js,jsx,ts,tsx}'],
+
+  // Files to exclude
+  exclude: [],
+
+  // Styling conditions / modes
+  conditions: {
+    light: '[data-color-mode=light] &',
+    dark: '[data-color-mode=dark] &',
+  },
+
+  presets: ['@pandacss/dev/presets', magicPreset],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: 'styled-system',
+
+  // Output extension impacting build
+  outExtension: 'js',
+
+  // The JSX framework to use
+  jsxFramework: 'react',
+
+  globalCss: {
+    html: {
+      '--primary': 'black',
+    },
+  },
+});