Coinbase Wallet Adapter

packages/connect-wallet-modal/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reef-knot/connect-wallet-modal
 
+## 1.13.0
+
+### Minor Changes
+
+- Rework Coinbase to use Wallet Adapter
+
 ## 1.12.0
 
 ### Minor Changes

packages/connect-wallet-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/connect-wallet-modal",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -49,8 +49,8 @@
     "@reef-knot/types": "^1.3.0",
     "@reef-knot/ui-react": "^1.0.7",
     "@reef-knot/wallets-helpers": "^1.1.5",
-    "@reef-knot/wallets-icons": "^1.4.0",
-    "@reef-knot/web3-react": "^1.10.0",
+    "@reef-knot/wallets-icons": "^1.5.0",
+    "@reef-knot/web3-react": "^1.11.0",
     "@reef-knot/ledger-connector": "^1.1.0",
     "@types/ua-parser-js": "^0.7.36",
     "eslint-config-custom": "*",

packages/connect-wallet-modal/src/components/WalletsModalForEth/WalletsModalForEth.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { useReefKnotContext } from '@reef-knot/core-react';
 import { WalletAdapterData } from '@reef-knot/types';
 import {
-  ConnectCoinbase,
   ConnectInjected,
   ConnectLedger,
   ConnectMetamask,
   ConnectWC,
+  ConnectCoinbase,
 } from '../../connectButtons';
 import { ButtonsCommonProps, WalletsModal } from '../WalletsModal';
 import { WalletsModalForEthProps } from './types';
@@ -16,9 +16,9 @@ const walletsButtons: { [K in WalletId | string]: React.ComponentType } = {
   default: ConnectInjected,
   injected: ConnectInjected,
   walletConnect: ConnectWC,
+  coinbaseWallet: ConnectCoinbase,
   [WALLET_IDS.METAMASK]: ConnectMetamask,
   [WALLET_IDS.LEDGER]: ConnectLedger,
-  [WALLET_IDS.COINBASE]: ConnectCoinbase,
 };
 
 function getWalletButton(
@@ -59,7 +59,7 @@ function getWalletsButtons(
     addWalletTo(wallets, walletId, !!detector?.());
   });
 
-  wallets = [...wallets, WALLET_IDS.LEDGER, WALLET_IDS.COINBASE].filter(
+  wallets = [...wallets, WALLET_IDS.LEDGER].filter(
     // Filtering wallets marked as hidden
     (wallet) => !hiddenWallets.includes(wallet),
   );

packages/connect-wallet-modal/src/connectButtons/ConnectCoinbase.tsx

@@ -0,0 +1,53 @@
+import React, { FC, useCallback } from 'react';
+import { useConnect } from 'wagmi';
+import { useDisconnect } from '@reef-knot/web3-react';
+import { ConnectButton } from '../components/ConnectButton';
+import { ConnectInjectedProps } from './types';
+
+export const ConnectCoinbase: FC<ConnectInjectedProps> = (
+  props: ConnectInjectedProps,
+) => {
+  const {
+    onConnect,
+    onBeforeConnect,
+    setRequirements,
+    shouldInvertWalletIcon,
+    metrics,
+    walletId,
+    walletName,
+    icon: WalletIcon,
+    downloadURLs,
+    detector,
+    connector,
+    ...rest
+  } = props;
+
+  const metricsOnConnect = metrics?.events?.connect?.handlers.onConnectCoinbase;
+  const metricsOnClick = metrics?.events?.click?.handlers.onClickCoinbase;
+
+  const { connect } = useConnect({
+    onSuccess() {
+      onConnect?.();
+      metricsOnConnect?.();
+    },
+  });
+  const { disconnect } = useDisconnect();
+
+  const handleConnect = useCallback(() => {
+    onBeforeConnect?.();
+    metricsOnClick?.();
+    disconnect?.();
+    connect({ connector });
+  }, [connect, connector, disconnect, metricsOnClick, onBeforeConnect]);
+
+  return (
+    <ConnectButton
+      {...rest}
+      icon={WalletIcon}
+      shouldInvertWalletIcon={shouldInvertWalletIcon}
+      onClick={handleConnect}
+    >
+      {walletName}
+    </ConnectButton>
+  );
+};

packages/connect-wallet-modal/src/connectButtons/index.ts

@@ -1,5 +1,5 @@
-export { default as ConnectCoinbase } from './connectCoinbase';
 export { default as ConnectLedger } from './connectLedger';
 export { default as ConnectMetamask } from './connectMetamask';
 export * from './ConnectInjected';
 export * from './ConnectWC';
+export * from './ConnectCoinbase';

packages/reef-knot/CHANGELOG.md

@@ -1,5 +1,15 @@
 # reef-knot
 
+## 1.13.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @reef-knot/[email protected]
+  - @reef-knot/[email protected]
+  - @reef-knot/[email protected]
+  - @reef-knot/[email protected]
+
 ## 1.12.0
 
 ### Patch Changes

packages/reef-knot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reef-knot",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -41,12 +41,12 @@
     "lint": "eslint --ext ts,tsx,js,mjs ."
   },
   "dependencies": {
-    "@reef-knot/connect-wallet-modal": "1.12.0",
+    "@reef-knot/connect-wallet-modal": "1.13.0",
     "@reef-knot/core-react": "1.7.0",
-    "@reef-knot/web3-react": "1.10.0",
+    "@reef-knot/web3-react": "1.11.0",
     "@reef-knot/ui-react": "1.0.7",
-    "@reef-knot/wallets-icons": "1.4.0",
-    "@reef-knot/wallets-list": "1.8.0",
+    "@reef-knot/wallets-icons": "1.5.0",
+    "@reef-knot/wallets-list": "1.9.0",
     "@reef-knot/wallets-helpers": "1.1.5",
     "@reef-knot/types": "1.3.0",
     "@reef-knot/ledger-connector": "1.1.1"

packages/wallets-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reef-knot/wallets-icons
 
+## 1.5.0
+
+### Minor Changes
+
+- Remove Coinbase related code
+
 ## 1.4.0
 
 ### Minor Changes

packages/wallets-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/wallets-icons",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

packages/wallets-icons/src/react/index.ts

@@ -1,4 +1,3 @@
-export { default as Coinbase } from '../svg/coinbase.svg';
 export { default as Ledger } from '../svg/ledger.svg';
 export { default as LedgerInversion } from '../svg/ledger-inversion.svg';
 export { default as LedgerConfirm } from '../svg/ledger-confirm.svg';

packages/wallets-list/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reef-knot/wallets-list
 
+## 1.9.0
+
+### Minor Changes
+
+- Rework Coinbase to use Wallet Adapter
+
 ## 1.8.0
 
 ### Minor Changes

packages/wallets-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/wallets-list",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -51,7 +51,8 @@
     "@reef-knot/wallet-adapter-brave": "1.0.1",
     "@reef-knot/wallet-adapter-imtoken": "1.0.0",
     "@reef-knot/wallet-adapter-trust": "1.0.0",
-    "@reef-knot/wallet-adapter-xdefi": "1.0.0"
+    "@reef-knot/wallet-adapter-xdefi": "1.0.0",
+    "@reef-knot/wallet-adapter-coinbase": "1.0.0"
   },
   "devDependencies": {
     "@reef-knot/types": "^1.3.0",

packages/wallets-list/src/ethereum.ts

@@ -9,6 +9,7 @@ import { Brave } from '@reef-knot/wallet-adapter-brave';
 import { ImToken } from '@reef-knot/wallet-adapter-imtoken';
 import { Trust } from '@reef-knot/wallet-adapter-trust';
 import { Xdefi } from '@reef-knot/wallet-adapter-xdefi';
+import { Coinbase } from '@reef-knot/wallet-adapter-coinbase';
 
 export const WalletsListEthereum: WalletsListType = {
   okx: Okx,
@@ -21,4 +22,5 @@ export const WalletsListEthereum: WalletsListType = {
   imtoken: ImToken,
   trust: Trust,
   xdefi: Xdefi,
+  coinbase: Coinbase,
 };

packages/wallets/coinbase/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": [
+    "custom"
+  ],
+  "rules": {
+    "import/no-extraneous-dependencies": "warn"
+  }
+}

packages/wallets/coinbase/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@reef-knot/wallet-adapter-coinbase",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "dist/index.d.ts"
+      ]
+    }
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/lidofinance/reef-knot",
+  "bugs": {
+    "url": "https://github.com/lidofinance/reef-knot/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "dev=on rollup -c -w",
+    "lint": "eslint --ext ts,tsx,js,mjs ."
+  },
+  "devDependencies": {
+    "@reef-knot/types": "^1.3.0",
+    "@svgr/rollup": "^6.5.1",
+    "eslint-config-custom": "*"
+  },
+  "peerDependencies": {
+    "wagmi": "^0.12.19",
+    "@reef-knot/types": "^1.2.1"
+  }
+}

packages/wallets/coinbase/rollup.config.js

@@ -0,0 +1,57 @@
+import * as process from 'node:process';
+import fs from 'node:fs';
+import ts from 'typescript';
+import { defineConfig } from 'rollup';
+import del from 'rollup-plugin-delete';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import { babel } from '@rollup/plugin-babel';
+import svgr from '@svgr/rollup';
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx', '.svg'];
+const { dependencies = {}, peerDependencies = {} } =
+  JSON.parse(fs.readFileSync('package.json', 'utf-8'));
+const commonExternal = [
+  'react/jsx-runtime',
+  // Do not include in the bundle subpath exports like:
+  /^@reef-knot\/.*/, // e.g. @reef-knot/<package>/<exports-field-entry>
+  /^reef-knot\/.*/, // e.g. reef-knot/wallets-icons/react
+];
+const external = [
+  ...commonExternal,
+  ...Object.keys({ ...dependencies, ...peerDependencies }),
+  /node_modules/
+];
+const isDevMode = process.env.dev === 'on';
+
+export default defineConfig({
+  input: './src/index',
+  output: {
+    format: 'es',
+    dir: 'dist',
+    preserveModules: true,
+    preserveModulesRoot: 'src',
+    generatedCode: 'es2015'
+  },
+  plugins: [
+    isDevMode ? null : del({ targets: 'dist/*', runOnce: true }),
+    resolve({ extensions, preferBuiltins: true }),
+    svgr({
+      typescript: true,
+      prettier: false,
+      memo: true,
+      svgo: false,
+    }),
+    typescript({
+      typescript: ts,
+      tsconfig: 'tsconfig.json',
+      check: false,
+    }),
+    babel({
+      exclude: 'node_modules/**',
+      babelHelpers: 'bundled',
+      extensions,
+    }),
+  ],
+  external,
+});

packages/wallets/coinbase/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

packages/wallets/coinbase/src/icons/index.ts

@@ -0,0 +1 @@
+export { default as WalletIcon } from './coinbase.svg';