EVM Extension and new extension methods

README.md

@@ -1,13 +1,11 @@
   <p align="left">
-    <a href="https://magic.link/docs/home/welcome">
+    <a href="https://docs.magic.link/home/welcome">
       <img src="https://media.graphassets.com/T9TXZhcNRVm211eyMh3u" alt="Logo" width="270" height="auto">
     </a>
   </p>
 
 # Magic JavaScript SDK
 
-[![<MagicLabs>](https://app.circleci.com/pipelines/github/magiclabs/magic-js.svg?style=shield)](https://app.circleci.com/pipelines/github/magiclabs/magic-js)
-
 > The Magic JavaScript SDK empowers developers to provide frictionless web3 onboarding to their end-users while preserving their security and privacy using non-custodial wallets.
 
 <p align="center">
@@ -54,16 +52,60 @@ Then, you can start authenticating users with _just one method!_ Magic works acr
 
 ```ts
 import { Magic } from 'magic-sdk';
-import Web3 from 'web3';
+import { ethers } from 'ethers';
 
 const magic = new Magic('YOUR_API_KEY', {
-  network: 'goerli',
+  network: 'sepolia',
 });
 
-const web3 = new Web3(magic.rpcProvider);
+const provider = new ethers.BrowserProvider(magic.rpcProvider);
 const accounts = await magic.wallet.connectWithUI();
 ```
 
+With network switching:
+
+> Network switching is available on web SDK version 31.0.0+ and React Native SDKs version 32.0.0+
+
+```ts
+import { Magic } from 'magic-sdk';
+import { SolanaExtension } from '@magic-ext/solana';
+import { EVMExtension } from '@magic-ext/evm';
+import { ethers } from 'ethers';
+
+const customPolygonOptions = {
+  rpcUrl: 'https://polygon-rpc.com/', // Polygon RPC URL
+  chainId: 137, // Polygon chain id
+  default: true, // Set as default network
+};
+
+const customOptimismOptions = {
+  rpcUrl: 'https://mainnet.optimism.io',
+  chainId: 10,
+};
+
+const magic = new Magic(API_KEY, {
+  extensions: [
+    new EVMExtension([customPolygonOptions, customOptimismOptions]),
+    new SolanaExtension({
+      rpcUrl: 'https://api.devnet.solana.com',
+    }),
+  ],
+});
+
+const provider = new ethers.BrowserProvider(magic.rpcProvider);
+
+const network = await provider.getNetwork();
+console.log(network.chainId); // => 137
+
+magic.evm.switchChain(10);
+
+const network = await provider.getNetwork();
+console.log(network.chainId); // => 10
+
+const solanaPublicAddress = await magic.solana.getPublicAddress();
+console.log(solanaPublicAddress); // => "9WzDXwBbmkg8ZTbNMqUxvQRAyrZzDsGYdLVL9zYtAWWM"
+```
+
 ## 📦 Package Ecosystem
 
 ### Entry points
@@ -84,13 +126,11 @@ Extend Magic JS SDK functionality for your use-case through [`@magic-ext/*` pack
 
 These are packages Magic JS SDK uses internally to work seamlessly across platforms.
 
-| Package Name                                                               | Changelog                                                | Description                                                                                                                      |
-| -------------------------------------------------------------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types)       | [CHANGELOG](./packages/@magic-sdk/types/CHANGELOG.md)    | Core typings shared between JavaScript entry-points of Magic SDK.                                                                |
-| [`@magic-sdk/pnp`](https://www.npmjs.com/package/@magic-sdk/pnp)           | [CHANGELOG](./packages/@magic-sdk/pnp/CHANGELOG.md)      | A lightweight connector that wraps Magic JS authentication with a beautiful, functional out-of-the-box login form.               |
-| [`@magic-sdk/provider`](https://www.npmjs.com/package/@magic-sdk/provider) | [CHANGELOG](./packages/@magic-sdk/provider/CHANGELOG.md) | Core business logic shared between JavaScript entry-points of Magic SDK.                                                         |
-| [`@magic-sdk/commons`](https://www.npmjs.com/package/@magic-sdk/commons)   | [CHANGELOG](./packages/@magic-sdk/commons/CHANGELOG.md)  | Exposes a listing of common public APIs from `@magic-sdk/provider` and `@magic-sdk/types` to the platform-specific entry points. |
-| [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types)       | [CHANGELOG](./packages/@magic-sdk/types/CHANGELOG.md)    | Core typings for Magic SDK packages.                                                                                             |
+| Package Name                                                               | Changelog                                                | Description                                                              |
+| -------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------ |
+| [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types)       | [CHANGELOG](./packages/@magic-sdk/types/CHANGELOG.md)    | Core typings shared between JavaScript entry-points of Magic SDK.        |
+| [`@magic-sdk/provider`](https://www.npmjs.com/package/@magic-sdk/provider) | [CHANGELOG](./packages/@magic-sdk/provider/CHANGELOG.md) | Core business logic shared between JavaScript entry-points of Magic SDK. |
+| [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types)       | [CHANGELOG](./packages/@magic-sdk/types/CHANGELOG.md)    | Core typings for Magic SDK packages.                                     |
 
 ## 🚦 Testing
 

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

@@ -24,10 +24,10 @@
   },
   "externals": {
     "include": [
-      "@magic-sdk/commons"
+      "@magic-sdk/provider"
     ]
   },
   "devDependencies": {
-    "@magic-sdk/commons": "^26.0.0"
+    "@magic-sdk/provider": "^30.0.0"
   }
 }

packages/@magic-ext/algorand/src/index.ts

@@ -1,17 +1,14 @@
-import { Extension } from '@magic-sdk/commons';
+import { MultichainExtension } from '@magic-sdk/provider';
 import { AlgorandConfig, AlgorandPayloadMethod } from './types';
 
-export class AlgorandExtension extends Extension.Internal<'algod', any> {
+export class AlgorandExtension extends MultichainExtension<'algod'> {
   name = 'algod' as const;
-  config: any = {};
 
   constructor(public algorandConfig: AlgorandConfig) {
-    super();
-
-    this.config = {
+    super({
       rpcUrl: algorandConfig.rpcUrl,
       chainType: 'ALGOD',
-    };
+    });
   }
 
   public async signTransaction(txn: any) {

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

@@ -23,13 +23,11 @@
   },
   "externals": {
     "include": [
-      "@magic-sdk/commons",
       "@magic-sdk/provider"
     ]
   },
   "devDependencies": {
     "@aptos-labs/wallet-adapter-core": "^2.2.0",
-    "@magic-sdk/commons": "^26.0.0",
     "@magic-sdk/provider": "^30.0.0",
     "aptos": "^1.8.5"
   },

packages/@magic-ext/aptos/src/index.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@magic-sdk/commons';
+import { MultichainExtension } from '@magic-sdk/provider';
 
 // @ts-ignore
 import { AptosClient, BCS, TxnBuilderTypes, Types, getAddressFromAccountOrAddress } from 'aptos';
@@ -7,20 +7,15 @@ import { AptosConfig, AptosPayloadMethod } from './type';
 import { APTOS_PAYLOAD_TYPE } from './constants';
 
 export { MagicAptosWallet } from './MagicAptosWallet';
-export class AptosExtension extends Extension.Internal<'aptos', any> {
+export class AptosExtension extends MultichainExtension<'aptos'> {
   name = 'aptos' as const;
-  config: any = {};
 
   constructor(public aptosConfig: AptosConfig) {
-    super();
-
-    this.config = {
-      rpcUrl: '',
+    super({
+      rpcUrl: aptosConfig.nodeUrl,
       chainType: 'APTOS',
-      options: {
-        nodeUrl: aptosConfig.nodeUrl,
-      },
-    };
+      options: { nodeUrl: aptosConfig.nodeUrl },
+    });
   }
 
   private serializeRawTransaction = (rawTransaction: TxnBuilderTypes.RawTransaction) => {

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

@@ -12,7 +12,7 @@
     "dist"
   ],
   "target": "neutral",
-  "cdnGlobalName": "MagicSolanaExtension",
+  "cdnGlobalName": "MagicAvalancheExtension",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
   "types": "./dist/types/index.d.ts",
@@ -24,10 +24,10 @@
   },
   "externals": {
     "include": [
-      "@magic-sdk/commons"
+      "@magic-sdk/provider"
     ]
   },
   "devDependencies": {
-    "@magic-sdk/commons": "^26.0.0"
+    "@magic-sdk/provider": "^30.0.0"
   }
 }

packages/@magic-ext/avalanche/src/index.ts

@@ -1,21 +1,18 @@
-import { Extension } from '@magic-sdk/commons';
+import { MultichainExtension } from '@magic-sdk/provider';
 import { AvaxConfig } from './types';
 
-export class AvalancheExtension extends Extension.Internal<'avax', any> {
+export class AvalancheExtension extends MultichainExtension<'avax'> {
   name = 'avax' as const;
-  config: any = {};
 
   constructor(public avalancheConfig: AvaxConfig) {
-    super();
-
-    this.config = {
+    super({
       rpcUrl: avalancheConfig.rpcUrl,
       chainType: 'AVAX',
       options: {
         chainId: avalancheConfig.chainId,
         networkId: avalancheConfig.networkId,
       },
-    };
+    });
   }
 
   public signTransaction = (

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

@@ -24,10 +24,10 @@
   },
   "externals": {
     "include": [
-      "@magic-sdk/commons"
+      "@magic-sdk/provider"
     ]
   },
   "devDependencies": {
-    "@magic-sdk/commons": "^26.0.0"
+    "@magic-sdk/provider": "^30.0.0"
   }
 }

packages/@magic-ext/bitcoin/src/index.ts

@@ -1,20 +1,17 @@
-import { Extension } from '@magic-sdk/commons';
+import { MultichainExtension } from '@magic-sdk/provider';
 import { BitcoinConfig, BitcoinPayloadMethod } from './types';
 
-export class BitcoinExtension extends Extension.Internal<'bitcoin', any> {
+export class BitcoinExtension extends MultichainExtension<'bitcoin'> {
   name = 'bitcoin' as const;
-  config: any = {};
 
   constructor(public bitcoinConfig: BitcoinConfig) {
-    super();
-
-    this.config = {
+    super({
       rpcUrl: bitcoinConfig.rpcUrl,
       chainType: 'BITCOIN',
       options: {
         network: bitcoinConfig.network,
       },
-    };
+    });
   }
 
   public async signTransaction(txn: string, inputIndex: number) {

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

@@ -24,10 +24,10 @@
   },
   "externals": {
     "include": [
-      "@magic-sdk/commons"
+      "@magic-sdk/provider"
     ]
   },
   "devDependencies": {
-    "@magic-sdk/commons": "^26.0.0"
+    "@magic-sdk/provider": "^30.0.0"
   }
 }

packages/@magic-ext/conflux/src/index.ts

@@ -1,20 +1,17 @@
-import { Extension } from '@magic-sdk/commons';
+import { MultichainExtension } from '@magic-sdk/provider';
 import { ConfluxPayloadMethod, ConfluxConfig } from './types';
 
-export class ConfluxExtension extends Extension.Internal<'conflux', any> {
+export class ConfluxExtension extends MultichainExtension<'conflux'> {
   name = 'conflux' as const;
-  config: any = {};
 
   constructor(public confluxConfig: ConfluxConfig) {
-    super();
-
-    this.config = {
+    super({
       chainType: 'CONFLUX',
       options: {
         rpcUrl: confluxConfig.rpcUrl,
         networkId: confluxConfig.networkId,
       },
-    };
+    });
   }
 
   public async sendTransaction(txObject: any) {

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

@@ -24,10 +24,10 @@
   },
   "externals": {
     "include": [
-      "@magic-sdk/commons"
+      "@magic-sdk/provider"
     ]
   },
   "devDependencies": {
-    "@magic-sdk/commons": "^26.0.0"
+    "@magic-sdk/provider": "^30.0.0"
   }
 }

packages/@magic-ext/cosmos/src/index.ts

@@ -1,20 +1,17 @@
-import { Extension } from '@magic-sdk/commons';
+import { MultichainExtension } from '@magic-sdk/provider';
 import { CosmosConfig, CosmosPayloadMethod } from './type';
 
-export class CosmosExtension extends Extension.Internal<'cosmos', any> {
+export class CosmosExtension extends MultichainExtension<'cosmos'> {
   name = 'cosmos' as const;
-  config: any = {};
 
   constructor(public cosmosConfig: CosmosConfig) {
-    super();
-
-    this.config = {
+    super({
       rpcUrl: cosmosConfig.rpcUrl,
       chainType: 'COSMOS',
       options: {
         chain: cosmosConfig.chain,
       },
-    };
+    });
   }
 
   public signAndBroadcast = async (message: any, fee: any) => {

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

@@ -24,10 +24,10 @@
   },
   "externals": {
     "include": [
-      "@magic-sdk/commons"
+      "@magic-sdk/provider"
     ]
   },
   "devDependencies": {
-    "@magic-sdk/commons": "^26.0.0"
+    "@magic-sdk/provider": "^30.0.0"
   }
 }

packages/@magic-ext/ed25519/src/index.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@magic-sdk/commons';
+import { Extension } from '@magic-sdk/provider';
 import { Ed25519PayloadMethod } from './types';
 
 export class Ed25519Extension extends Extension.Internal<'ed', any> {

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

@@ -0,0 +1,35 @@
+{
+  "name": "@magic-ext/evm",
+  "version": "0.0.0",
+  "description": "magic evm extension",
+  "author": "Magic <team@magic.link> (https://magic.link/)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/magiclabs/magic-js"
+  },
+  "files": [
+    "dist"
+  ],
+  "target": "neutral",
+  "cdnGlobalName": "MagicEVMExtension",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/types/index.d.ts",
+  "jsdelivr": "./dist/extension.js",
+  "exports": {
+    "import": "./dist/es/index.mjs",
+    "types": "./dist/types/index.d.ts",
+    "require": "./dist/cjs/index.js"
+  },
+  "externals": {
+    "include": [
+      "@magic-sdk/provider",
+      "@magic-sdk/types"
+    ]
+  },
+  "devDependencies": {
+    "@magic-sdk/provider": "^29.5.0",
+    "@magic-sdk/types": "^24.22.0"
+  }
+}

packages/@magic-ext/evm/src/index.cdn.ts

@@ -0,0 +1,3 @@
+import { EVMExtension } from './index';
+
+export default EVMExtension;