feat(sdk): migrate to ethers v6

.github/pull_request_template.md

@@ -1,6 +1,7 @@
-### Hi👋, please prefix this PR's title with:
+### Hi👋, please ensure the PR title follows the below standards:
 <!-- This will allow for auto-generated changelog entries in Github releases -->
 <!-- Valid types: feat, fix, refactor, style, test, docs, build, ops, chore -->
+<!-- refactor, style, test, docs, build, ops, chore types won't be included in changelogs -->
 - [ ] PR is titled with conventional commit style naming: `type(scope): message`. For example: `feat(passport): my new feature`
 - [ ] If you have introduced modification that necessitates immediate adjustments by this SDK's users to their applications, clients, or integrations to avert disruptions to existing features or functionalities, add a `!` after the `type(scope)`, for example `feat(passport)!: my new breaking feature`
 

.github/workflows/publish.yaml

@@ -7,14 +7,15 @@ on:
         type: choice
         description: Release Type
         options:
+          - prerelease
           - prepatch
           - preminor
           - premajor
           - patch
           - minor
           - major
         required: true
-        default: prepatch
+        default: prerelease
       dry_run:
         type: boolean
         description: "(Optional) Dry run"
@@ -89,6 +90,9 @@ jobs:
         run: |
           git config user.name "platform-sa"
           git config user.email "[email protected]"
+
+      - name: Initialize current versions
+        run: pnpm --filter @imtbl/sdk... --filter @imtbl/checkout-widgets... exec sh -c "jq --arg version \"$(npm view @imtbl/metrics versions --json | jq -r '.[-1]')\" '.version = \$version' package.json > package.tmp.json && mv package.tmp.json package.json"
 
       - name: Setup new package versions
         run: pnpm nx release version --specifier ${{ env.RELEASE_TYPE }} $( ${{ env.DRY_RUN }} && echo "--dry-run" || echo "")
@@ -102,9 +106,6 @@ jobs:
         with:
           subject-path: './sdk, !./sdk/node_modules'
 
-      - name: Authenticate NPM
-        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.TS_IMMUTABLE_SDK_NPM_TOKEN }}
-
       - name: Generate version.json
         if: (env.DRY_RUN) == 'false'
         run: |
@@ -118,8 +119,10 @@ jobs:
       - name: Release to NPM
         id: npm_release
         env:
+          NODE_AUTH_TOKEN: ${{ secrets.TS_IMMUTABLE_SDK_NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: pnpm nx release publish $( ${{ env.DRY_RUN }} && echo "--dry-run" || echo "")
+        run: pnpm nx release publish $( ${{ env.DRY_RUN }} && echo "--dry-run" || echo "") $( ${{ startsWith(env.RELEASE_TYPE, 'pre') }} && echo "--tag alpha" || echo "")
 
       - name: Warm up CDN
         id: warm_up_cdn
@@ -160,7 +163,7 @@ jobs:
           echo "Waiting for NPM registry to reflect version: $VERSION"
 
           for i in {1..20}; do
-            LATEST_VERSION=$(npm view @imtbl/sdk@latest version)
+            LATEST_VERSION=$(if [[ "${{ startsWith(env.RELEASE_TYPE, 'pre') }}" == "true" ]]; then npm view @imtbl/sdk@alpha version; else npm view @imtbl/sdk@latest version; fi)
             if [[ "$LATEST_VERSION" == "$VERSION" ]]; then
               echo "NPM registry updated to version: $LATEST_VERSION"
               exit 0

.github/workflows/title-validation.yaml

@@ -0,0 +1,30 @@
+name: Title Validation
+
+on:
+  pull_request:
+    branches:
+      - '**'
+    types:
+      - opened
+      - edited
+  merge_group:
+    branches:
+      - main
+
+permissions:
+  pull-requests: read
+
+env:
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.TS_IMMUTABLE_SDK_NX_TOKEN }}
+
+jobs:
+  title-validation:
+    name: Validate PR title
+    if: ${{ github.event.action == 'opened' || github.event.changes.title.from }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          requireScope: true

examples/README.md

@@ -189,7 +189,7 @@ Install `@imtbl/sdk` and any other dependencies your example needs e.g.
 ```bash
 pnpm add @imtbl/sdk
 pnpm add @biom3/react
-pnpm add @ethersproject/providers@^5.7.2
+pnpm add ethers@^6.13.4
 ```
 
 You should use `@biom3/react` to style your app so it matches the immutable branding. A good example of how to use Biome can be found in the [Checkout SDK Connect](/examples/checkout/sdk-connect-with-nextjs) example.

examples/_deprecated/identity-with-nextjs/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "dependencies": {
     "@imtbl/sdk": "workspace:*",
-    "ethers": "^5.7.2",
+    "ethers": "^6.13.4",
     "next": "14.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/_deprecated/identity-with-nextjs/src/context/passport.tsx

@@ -5,7 +5,7 @@ import {
   useMemo,
 } from 'react';
 import { config, passport } from '@imtbl/sdk';
-import { ethers } from 'ethers';
+import { BrowserProvider } from 'ethers';
 
 type PassportContextType = {
   passportInstance?: passport.Passport;
@@ -25,7 +25,7 @@ const PassportContext = createContext<PassportContextType>({});
 
 export function PassportProvider({ children }: { children: ReactNode }) {
   // #doc passport-instance
-  const passportInstance = new passport.Passport({
+  const passportInstance = useMemo(() => new passport.Passport({
     baseConfig: {
       environment: config.Environment.SANDBOX, // or config.Environment.SANDBOX
       publishableKey:
@@ -36,11 +36,11 @@ export function PassportProvider({ children }: { children: ReactNode }) {
     logoutRedirectUri: 'http://localhost:3000/logout', // replace with one of your logout URIs from Hub
     audience: 'platform_api',
     scope: 'openid offline_access email transact',
-  });
+  }), []);
   // #enddoc passport-instance
 
   // #doc passport-silent-instance
-  const passportSilentInstance = new passport.Passport({
+  const passportSilentInstance = useMemo(() => new passport.Passport({
     baseConfig: {
       environment: config.Environment.SANDBOX, // or config.Environment.SANDBOX
       publishableKey:
@@ -52,13 +52,13 @@ export function PassportProvider({ children }: { children: ReactNode }) {
     logoutMode: 'silent',
     audience: 'platform_api',
     scope: 'openid offline_access email transact',
-  });
+  }), []);
   // #enddoc passport-silent-instance
 
   const login = useCallback(async () => {
     if (!passportInstance) return;
     // #doc passport-evm-login
-    const provider = passportInstance.connectEvm();
+    const provider = await passportInstance.connectEvm();
     const accounts = await provider.request({ method: 'eth_requestAccounts' });
     // #enddoc passport-evm-login
     window.alert(`accounts: ${accounts}`);
@@ -89,14 +89,14 @@ export function PassportProvider({ children }: { children: ReactNode }) {
   const loginWithEthersjs = useCallback(async () => {
     if (!passportInstance) return;
     // #doc passport-login-with-ethersjs
-    const passportProvider = passportInstance.connectEvm();
+    const passportProvider = await passportInstance.connectEvm();
 
-    const web3Provider = new ethers.providers.Web3Provider(passportProvider);
+    const browserProvider = new BrowserProvider(passportProvider);
 
-    const accounts = await web3Provider.send('eth_requestAccounts', []);
+    const accounts = await browserProvider.send('eth_requestAccounts', []);
     // #enddoc passport-login-with-ethersjs
 
-    const signer = web3Provider.getSigner();
+    const signer = await browserProvider.getSigner();
 
     window.alert(
       `accounts: ${accounts} signer: ${JSON.stringify(signer)}`,

examples/checkout/commerce-widget-nextjs/package.json

@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@biom3/react": "^0.25.21",
-    "@ethersproject/providers": "^5.7.2",
     "@imtbl/sdk": "workspace:*",
     "next": "14.2.7",
     "react": "^18",

examples/checkout/commerce-widget-nextjs/tests/utils/intercept-widgets.ts

@@ -7,7 +7,7 @@ import path from 'path';
 
 export const interceptWidgets = async (page: Page, widgetsVersion: string | 'latest' | '*' = 'latest') => {
 
-  return page.route(`https://cdn.jsdelivr.net/npm/@imtbl/sdk@${widgetsVersion}/dist/browser/checkout/**`, async route => {
+  return page.route(`https://cdn.jsdelivr.net/npm/@imtbl/checkout-widgets@${widgetsVersion}/dist/browser/**`, async route => {
     const url = new URL(route.request().url());
     const fileName = path.basename(url.pathname);
     let filePath = path.join(__dirname, 'local-widgets-js', fileName);

examples/checkout/sdk-connect-with-nextjs/package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@biom3/react": "^0.25.21",
-    "@ethersproject/providers": "^5.7.2",
     "@imtbl/sdk": "workspace:*",
+    "ethers": "^6.13.4",
     "next": "14.2.7",
     "react": "^18",
     "react-dom": "^18"

examples/checkout/sdk-connect-with-nextjs/src/app/connect-with-metamask/page.tsx

@@ -2,17 +2,17 @@
 import { checkout } from '@imtbl/sdk';
 import { checkoutSDK } from '../utils/setupDefault';
 import { useState } from 'react';
-import { Web3Provider } from '@ethersproject/providers';
 import { WalletInfo, WalletProviderName } from '@imtbl/sdk/checkout';
-import { Button, Heading, Body, Link, Table } from '@biom3/react';
+import { Button, Heading, Link, Table } from '@biom3/react';
 import NextLink from 'next/link';
+import { BrowserProvider } from 'ethers';
 
 export default function ConnectWithMetamask() {
 
-const [provider, setProvider] = useState<Web3Provider>();
+const [provider, setProvider] = useState<BrowserProvider>();
 const [walletProviderName, setWalletProviderName] = useState<WalletProviderName>();
 const [supportedWallets, setSupportedWallets] = useState<WalletInfo[]>();
-const [connectedProvider, setConnectedProvider] = useState<Web3Provider>();
+const [connectedProvider, setConnectedProvider] = useState<BrowserProvider>();
 const [isValidProvider, setIsValidProvider] = useState<boolean>();
 const [isConnected, setIsConnected] = useState<boolean>();
 const [walletAddress, setWalletAddress] = useState<string>();
@@ -42,8 +42,8 @@ const connectWithMetamask = async (connectWithPerms:boolean) => {
   setWalletProviderName(providerRes.walletProviderName);
 
   // #doc check-is-valid-provider
-  // Check if the provider if a Web3Provider
-  const isProviderRes = await checkout.Checkout.isWeb3Provider(providerRes.provider);
+  // Check if the provider if a BrowserProvider
+  const isProviderRes = checkout.Checkout.isWrappedBrowserProvider(providerRes.provider);
   // #enddoc check-is-valid-provider
 
   setIsValidProvider(isProviderRes);
@@ -71,7 +71,7 @@ const connectWithMetamask = async (connectWithPerms:boolean) => {
   }
 
   // #doc check-is-connected
-  // Check if the provider if a Web3Provider
+  // Check if the provider if a BrowserProvider
   const isConnectedRes = await checkoutSDK.checkIsWalletConnected({
     provider: providerRes.provider
   });

examples/checkout/sdk-gas-estimation-with-nextjs/package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@biom3/react": "^0.25.21",
-    "@ethersproject/providers": "^5.7.2",
     "@imtbl/sdk": "workspace:*",
+    "ethers": "^6.13.4",
     "next": "14.2.7",
     "react": "^18",
     "react-dom": "^18"

examples/checkout/sdk-gas-estimation-with-nextjs/src/app/gas-estimation-with-metamask/page.tsx

@@ -3,9 +3,9 @@ import { checkout } from "@imtbl/sdk";
 import { GasEstimateSwapResult, GasEstimateBridgeToL2Result } from "@imtbl/sdk/checkout";
 import { checkoutSDK } from "../utils/setupDefault";
 import { useState } from "react";
-import { Web3Provider } from "@ethersproject/providers";
-import { Button, Heading, Body, Link, Table } from "@biom3/react";
+import { Button, Heading, Link, Table } from "@biom3/react";
 import NextLink from "next/link";
+import { toBeHex } from "ethers";
 
 // Function to convert hex to decimal
 const hexToDecimal = (hex: string) => {
@@ -80,7 +80,7 @@ export default function ConnectWithMetamask() {
             <Table.Cell>
               {swapGasEstimate ? (
                 <>
-                  <div><b>Total Fees:</b> {swapGasEstimate.fees.totalFees ? hexToDecimal(swapGasEstimate.fees.totalFees._hex) : 'N/A'}</div>
+                  <div><b>Total Fees:</b> {swapGasEstimate.fees.totalFees ? hexToDecimal(toBeHex(swapGasEstimate.fees.totalFees)) : 'N/A'}</div>
                   <div><b>Token:</b> {swapGasEstimate.fees.token?.name} ({swapGasEstimate.fees.token?.symbol})</div>
                 </>
               ) : ' (not estimated)'}
@@ -91,11 +91,11 @@ export default function ConnectWithMetamask() {
             <Table.Cell>
               {bridgeGasEstimate ? (
                 <>
-                  <div><b>Source Chain Gas:</b> {hexToDecimal(bridgeGasEstimate.fees.sourceChainGas._hex)}</div>
-                  <div><b>Approval Fee:</b> {hexToDecimal(bridgeGasEstimate.fees.approvalFee._hex)}</div>
-                  <div><b>Bridge Fee:</b> {hexToDecimal(bridgeGasEstimate.fees.bridgeFee._hex)}</div>
-                  <div><b>IMTBL Fee:</b> {hexToDecimal(bridgeGasEstimate.fees.imtblFee._hex)}</div>
-                  <div><b>Total Fees:</b> {hexToDecimal(bridgeGasEstimate.fees.totalFees._hex)}</div>
+                  <div><b>Source Chain Gas:</b> {hexToDecimal(toBeHex(bridgeGasEstimate.fees.sourceChainGas))}</div>
+                  <div><b>Approval Fee:</b> {hexToDecimal(toBeHex(bridgeGasEstimate.fees.approvalFee))}</div>
+                  <div><b>Bridge Fee:</b> {hexToDecimal(toBeHex(bridgeGasEstimate.fees.bridgeFee))}</div>
+                  <div><b>IMTBL Fee:</b> {hexToDecimal(toBeHex(bridgeGasEstimate.fees.imtblFee))}</div>
+                  <div><b>Total Fees:</b> {hexToDecimal(toBeHex(bridgeGasEstimate.fees.totalFees))}</div>
                   <div><b>Token:</b> {bridgeGasEstimate.token?.name} ({bridgeGasEstimate.token?.symbol})</div>
                 </>
               ) : ' (not estimated)'}

examples/checkout/sdk-switch-network-with-nextjs/package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@biom3/react": "^0.25.21",
-    "@ethersproject/providers": "^5.7.2",
     "@imtbl/sdk": "workspace:*",
+    "ethers": "^6.13.4",
     "next": "14.2.7",
     "react": "^18",
     "react-dom": "^18"

examples/checkout/sdk-switch-network-with-nextjs/src/app/switch-with-metamask/page.tsx

@@ -2,9 +2,9 @@
 import { checkout } from "@imtbl/sdk";
 import { checkoutSDK } from "../utils/setupDefault";
 import { useState } from "react";
-import { Web3Provider } from "@ethersproject/providers";
 import { Button, Heading, Body, Link, Table } from "@biom3/react";
 import NextLink from "next/link";
+import { WrappedBrowserProvider } from "@imtbl/sdk/checkout";
 
 export default function ConnectWithMetamask() {
   const [isConnected, setIsConnected] = useState<boolean>();
@@ -13,11 +13,11 @@ export default function ConnectWithMetamask() {
   const [nativeCurrency, setNativeCurrency] = useState<string>();
   // setup the loading state to enable/disable buttons when loading
   const [loading, setLoadingState] = useState<boolean>(false);
-  const [connectedProvider, setConnectedProvider] = useState<Web3Provider>();
+  const [connectedProvider, setConnectedProvider] = useState<WrappedBrowserProvider>();
   const [supportedNetworks, setSupportedNetworks] = useState<string[]>();
   const [switchNetworkLoading, setSwitchNetworkLoading] = useState<boolean>(false);
 
-  const updateNetworkInfo = async (provider: Web3Provider) => {
+  const updateNetworkInfo = async (provider: WrappedBrowserProvider) => {
     try {
       // #doc get-network-details
       // Get the network details
@@ -62,7 +62,7 @@ export default function ConnectWithMetamask() {
     setConnectedProvider(connectRes.provider);
 
     // #doc check-is-connected
-    // Check if the provider if a Web3Provider
+    // Check if the provider if a BrowserProvider
     const isConnectedRes = await checkoutSDK.checkIsWalletConnected({
       provider: providerRes.provider,
     });

examples/checkout/sdk-wallet-balance-with-nextjs/package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@biom3/react": "^0.25.21",
-    "@ethersproject/providers": "^5.7.2",
     "@imtbl/sdk": "workspace:*",
+    "ethers": "^6.13.4",
     "next": "14.2.10",
     "react": "^18",
     "react-dom": "^18"