Merge pull request #287 from blocto/develop

docs: batch transaction

.changeset/curvy-students-trade.md

@@ -0,0 +1,5 @@
+---
+'@blocto/sdk': patch
+---
+
+adjust eth_accounts to not require prior enable

.changeset/funny-elephants-thank.md

@@ -0,0 +1,10 @@
+---
+'@blocto/connectkit-connector': patch
+'@blocto/rainbowkit-connector': patch
+'@blocto/web3-react-connector': patch
+'@blocto/web3modal-connector': patch
+'@blocto/wagmi-connector': patch
+'@blocto/sdk': patch
+---
+
+Fix export unreconize type for old typescript

.changeset/gorgeous-hairs-yell.md

@@ -0,0 +1,5 @@
+---
+'@blocto/web3-react-connector': patch
+---
+
+refactor: adjust web3-react-connector's activate method to comply with @blocto/sdk's changes

.changeset/new-brooms-refuse.md

@@ -0,0 +1,5 @@
+---
+'@blocto/dappauth': minor
+---
+
+restructure @blocto/dappauth and using rollup bundle

.changeset/six-foxes-add.md

@@ -0,0 +1,5 @@
+---
+'@blocto/sdk': patch
+---
+
+AccountChange use addSelfRemovableHandler

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: 'yarn'
+    directory: '/'
+    schedule:
+      interval: 'daily'
+    ignore:
+      - dependency-name: 'web3'

adapters/wagmi-connector/src/connector.ts

@@ -179,7 +179,7 @@ class BloctoConnector extends Connector<BloctoProvider, BloctoOptions> {
       account,
       chain,
       transport: custom(provider),
-    });
+    }) as WalletClient;
   }
 
   protected onAccountsChanged(): void {

adapters/web3-react-connector/src/index.ts

@@ -71,7 +71,7 @@ export class BloctoConnector extends Connector {
       !desiredChainId ||
       parseChainId(desiredChainId) === parseChainId(this.provider.chainId)
     ) {
-      const accounts = await this.provider.request({ method: 'eth_accounts' });
+      const accounts = await this.provider.request({ method: 'eth_requestAccounts' });
       return this.actions.update({
         chainId: parseChainId(this.provider.chainId),
         accounts,

examples/with-evm-blocto-batch-transaction/package.json

@@ -11,7 +11,7 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",
-    "web3": "^4.1.1"
+    "web3": "^1.8.0"
   },
   "scripts": {
     "start": "react-scripts start",

examples/with-evm-connectkit/.gitignore

@@ -1,23 +1,47 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+
 /node_modules
 /.pnp
 .pnp.js
 
 # testing
+
 /coverage
 
+# vite
+
+dist
+dist-ssr
+
 # production
+
 /build
 
 # misc
+
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+\*.pem
+*.local
+
+# debug
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+
+.env
+.env\*.local
+
+# vercel
+
+.vercel
+
+# typescript
+
+\*.tsbuildinfo
+next-env.d.ts

examples/with-evm-connectkit/README.md

@@ -1,6 +1,19 @@
-# [Create React App](https://github.com/facebook/create-react-app) + [TypeScript](https://www.typescriptlang.org/) + ConnectKit Example
+This is a [wagmi](https://wagmi.sh) + [ConnectKit](https://docs.family.co/connectkit) project bootstrapped with [Create React App](https://github.com/facebook/create-react-app), Simultaneously Integrating [Blocto](https://blocto.io) wallet.
 
-This is a simple example of how to implement ConnectKit with [Create React App](https://github.com/facebook/create-react-app) in TypeScript.
+# Getting Started
 
-- If you'd like to look at an example online, try this [CodeSandbox](https://codesandbox.io/s/5rhqm0?file=/README.md)
-- If you want to run the example locally have a look at the [instructions in the main README](https://github.com/family/connectkit/blob/main/README.md#running-examples-locally)
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+# Learn more
+
+To learn more about [ConnectKit](https://docs.family.co/connectkit) or [wagmi](https://wagmi.sh), check out the following resources:
+
+- [wagmi Documentation](https://wagmi.sh) – learn about wagmi Hooks and API.
+- [wagmi Examples](https://wagmi.sh/examples/connect-wallet) – a suite of simple examples using wagmi.
+- [ConnectKit Documentation](https://docs.family.co/connectkit) – learn more about ConnectKit (configuration, theming, advanced usage, etc).

examples/with-evm-connectkit/package.json

@@ -1,32 +1,38 @@
 {
-  "name": "cra",
-  "version": "0.0.0",
+  "name": "with-evm-connectkit",
+  "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "util": "^0.12.4",
+    "viem": "~0.3.36",
+    "wagmi": "^1.0.6",
+    "@blocto/connectkit-connector": "latest",
+    "connectkit": "1.5.3"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.59",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
-    "connectkit": "^1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
-    "viem": "^1.0.0",
-    "wagmi": "^1.1.1",
-    "web-vitals": "^2.1.4",
-    "use-debounce": "^9.0.4"
+    "@types/node": "^16.18.43",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "typescript": "^4.9.5"
   },
   "scripts": {
-    "dev": "react-scripts start",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint src --ext .ts"
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
     "production": [

examples/with-evm-connectkit/public/index.html

@@ -2,16 +2,35 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
     <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
+      name="description"
+      content="Web site created using create-react-app"
     />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="ConnectKit CRA Example" />
-    <title>ConnectKit CRA Example</title>
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
   </body>
 </html>

examples/with-evm-connectkit/src/App.tsx

@@ -1,32 +1,39 @@
-import { ConnectKitButton } from 'connectkit';
-import { useAccount } from 'wagmi';
-import SignMessage from './components/SignMessage';
-import SendTransaction from './components/SendTransaction';
+import { useAccount } from 'wagmi'
 
-function App() {
-  const { isConnected } = useAccount();
+import { NetworkSwitcher } from './components/NetworkSwitcher'
+import { SendTransaction } from './components/SendTransaction'
+import { SignMessage } from './components/SignMessage'
+import { SignTypedData } from './components/SignTypedData'
+import { ConnectKitButton } from 'connectkit'
+
+export function App() {
+  const { isConnected } = useAccount()
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '10px',
-        height: '100vh',
-      }}
-    >
+    <>
+      <h1>wagmi + Connectkit</h1>
+
       <ConnectKitButton />
 
       {isConnected && (
         <>
+          <hr />
+          <h2>Network</h2>
+          <NetworkSwitcher />
+          <br />
+          <hr />
+          <h2>Send Transaction</h2>
           <SendTransaction />
+          <br />
+          <hr />
+          <h2>Sign Message</h2>
           <SignMessage />
+          <br />
+          <hr />
+          <h2>Sign Typed Data</h2>
+          <SignTypedData />
         </>
       )}
-    </div>
-  );
+    </>
+  )
 }
-
-export default App;

examples/with-evm-connectkit/src/components/Connect.tsx

@@ -0,0 +1,32 @@
+import { BaseError } from 'viem'
+import { useAccount, useConnect, useDisconnect } from 'wagmi'
+
+export function Connect() {
+  const { connector, isConnected } = useAccount()
+  const { connect, connectors, error, isLoading, pendingConnector } =
+    useConnect()
+  const { disconnect } = useDisconnect()
+
+  return (
+    <div>
+      <div>
+        {isConnected && (
+          <button onClick={() => disconnect()}>
+            Disconnect from {connector?.name}
+          </button>
+        )}
+
+        {connectors
+          .filter((x) => x.ready && x.id !== connector?.id)
+          .map((x) => (
+            <button key={x.id} onClick={() => connect({ connector: x })}>
+              {x.name}
+              {isLoading && x.id === pendingConnector?.id && ' (connecting)'}
+            </button>
+          ))}
+      </div>
+
+      {error && <div>{(error as BaseError).shortMessage}</div>}
+    </div>
+  )
+}

examples/with-evm-connectkit/src/components/Connected.tsx

@@ -0,0 +1,8 @@
+import { useAccount } from 'wagmi'
+
+export function Connected({ children }: { children: React.ReactNode }) {
+  const { isConnected } = useAccount()
+
+  if (!isConnected) return null
+  return <>{children}</>
+}

examples/with-evm-connectkit/src/components/NetworkSwitcher.tsx

@@ -0,0 +1,32 @@
+import { useNetwork, useSwitchNetwork } from 'wagmi'
+
+export function NetworkSwitcher() {
+  const { chain } = useNetwork()
+  const { chains, error, isLoading, pendingChainId, switchNetwork } =
+    useSwitchNetwork()
+
+  return (
+    <div>
+      <div>
+        Connected to {chain?.name ?? chain?.id}
+        {chain?.unsupported && ' (unsupported)'}
+      </div>
+      <br />
+      {switchNetwork && (
+        <div>
+          Switch to:{' '}
+          {chains.map((x) =>
+            x.id === chain?.id ? null : (
+              <button key={x.id} onClick={() => switchNetwork(x.id)}>
+                {x.name}
+                {isLoading && x.id === pendingChainId && ' (switching)'}
+              </button>
+            ),
+          )}
+        </div>
+      )}
+
+      <div>{error?.message}</div>
+    </div>
+  )
+}