diff --git a/packages/connect-wallet-modal/CHANGELOG.md b/packages/connect-wallet-modal/CHANGELOG.md index 402653b6..1c18bd75 100644 --- a/packages/connect-wallet-modal/CHANGELOG.md +++ b/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 diff --git a/packages/connect-wallet-modal/package.json b/packages/connect-wallet-modal/package.json index 79ce381f..fdb0f036 100644 --- a/packages/connect-wallet-modal/package.json +++ b/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": "*", diff --git a/packages/connect-wallet-modal/src/components/WalletsModalForEth/WalletsModalForEth.tsx b/packages/connect-wallet-modal/src/components/WalletsModalForEth/WalletsModalForEth.tsx index db07c54f..f87e2c1d 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModalForEth/WalletsModalForEth.tsx +++ b/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), ); diff --git a/packages/connect-wallet-modal/src/connectButtons/ConnectCoinbase.tsx b/packages/connect-wallet-modal/src/connectButtons/ConnectCoinbase.tsx new file mode 100644 index 00000000..c7d98b56 --- /dev/null +++ b/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 = ( + 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 ( + + {walletName} + + ); +}; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectCoinbase.tsx b/packages/connect-wallet-modal/src/connectButtons/connectCoinbase.tsx deleted file mode 100644 index 948404f4..00000000 --- a/packages/connect-wallet-modal/src/connectButtons/connectCoinbase.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { FC, useCallback } from 'react'; -import { useConnectorCoinbase } from '@reef-knot/web3-react'; -import { Coinbase } from '@reef-knot/wallets-icons/react'; -import { ConnectWalletProps } from './types'; -import { ConnectButton } from '../components/ConnectButton'; - -const ConnectCoinbase: FC = (props) => { - const { onConnect, onBeforeConnect, metrics, ...rest } = props; - const onConnectCoinbase = - metrics?.events?.connect?.handlers.onConnectCoinbase; - const onClickCoinbase = metrics?.events?.click?.handlers.onClickCoinbase; - const { connect } = useConnectorCoinbase({ - onConnect: () => { - onConnect?.(); - onConnectCoinbase?.(); - }, - }); - - const handleConnect = useCallback(async () => { - onBeforeConnect?.(); - onClickCoinbase?.(); - - await connect(); - }, [connect, onBeforeConnect, onClickCoinbase]); - - return ( - - Coinbase - - ); -}; - -export default ConnectCoinbase; diff --git a/packages/connect-wallet-modal/src/connectButtons/index.ts b/packages/connect-wallet-modal/src/connectButtons/index.ts index 3a5e1c62..6d43ea2b 100644 --- a/packages/connect-wallet-modal/src/connectButtons/index.ts +++ b/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'; diff --git a/packages/reef-knot/CHANGELOG.md b/packages/reef-knot/CHANGELOG.md index 3fa977fc..8cfa0c94 100644 --- a/packages/reef-knot/CHANGELOG.md +++ b/packages/reef-knot/CHANGELOG.md @@ -1,5 +1,15 @@ # reef-knot +## 1.13.0 + +### Patch Changes + +- Updated dependencies + - @reef-knot/connect-wallet-modal@1.13.0 + - @reef-knot/wallets-list@1.9.0 + - @reef-knot/wallets-icons@1.5.0 + - @reef-knot/web3-react@1.11.0 + ## 1.12.0 ### Patch Changes diff --git a/packages/reef-knot/package.json b/packages/reef-knot/package.json index 86a2bc0a..d19d29ff 100644 --- a/packages/reef-knot/package.json +++ b/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" diff --git a/packages/wallets-icons/CHANGELOG.md b/packages/wallets-icons/CHANGELOG.md index e3620551..07e5cc8c 100644 --- a/packages/wallets-icons/CHANGELOG.md +++ b/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 diff --git a/packages/wallets-icons/package.json b/packages/wallets-icons/package.json index 0673a372..d0f980ac 100644 --- a/packages/wallets-icons/package.json +++ b/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": { diff --git a/packages/wallets-icons/src/react/index.ts b/packages/wallets-icons/src/react/index.ts index facd057d..11e801ac 100644 --- a/packages/wallets-icons/src/react/index.ts +++ b/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'; diff --git a/packages/wallets-list/CHANGELOG.md b/packages/wallets-list/CHANGELOG.md index d7cf6ec0..045e776d 100644 --- a/packages/wallets-list/CHANGELOG.md +++ b/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 diff --git a/packages/wallets-list/package.json b/packages/wallets-list/package.json index 3e733c91..bcd01d1e 100644 --- a/packages/wallets-list/package.json +++ b/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", diff --git a/packages/wallets-list/src/ethereum.ts b/packages/wallets-list/src/ethereum.ts index b3d96042..a8c47efa 100644 --- a/packages/wallets-list/src/ethereum.ts +++ b/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, }; diff --git a/packages/wallets/coinbase/.eslintrc.json b/packages/wallets/coinbase/.eslintrc.json new file mode 100644 index 00000000..06342be5 --- /dev/null +++ b/packages/wallets/coinbase/.eslintrc.json @@ -0,0 +1,9 @@ +{ + "root": true, + "extends": [ + "custom" + ], + "rules": { + "import/no-extraneous-dependencies": "warn" + } +} diff --git a/packages/wallets/coinbase/package.json b/packages/wallets/coinbase/package.json new file mode 100644 index 00000000..933584f6 --- /dev/null +++ b/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" + } +} diff --git a/packages/wallets/coinbase/rollup.config.js b/packages/wallets/coinbase/rollup.config.js new file mode 100644 index 00000000..a91f4d4a --- /dev/null +++ b/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// + /^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, +}); diff --git a/packages/wallets/coinbase/src/custom.d.ts b/packages/wallets/coinbase/src/custom.d.ts new file mode 100644 index 00000000..006534e2 --- /dev/null +++ b/packages/wallets/coinbase/src/custom.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: React.FunctionComponent>; + export default content; +} diff --git a/packages/wallets-icons/src/svg/coinbase.svg b/packages/wallets/coinbase/src/icons/coinbase.svg similarity index 100% rename from packages/wallets-icons/src/svg/coinbase.svg rename to packages/wallets/coinbase/src/icons/coinbase.svg diff --git a/packages/wallets/coinbase/src/icons/index.ts b/packages/wallets/coinbase/src/icons/index.ts new file mode 100644 index 00000000..54a3f8df --- /dev/null +++ b/packages/wallets/coinbase/src/icons/index.ts @@ -0,0 +1 @@ +export { default as WalletIcon } from './coinbase.svg'; diff --git a/packages/wallets/coinbase/src/index.ts b/packages/wallets/coinbase/src/index.ts new file mode 100644 index 00000000..252df6b4 --- /dev/null +++ b/packages/wallets/coinbase/src/index.ts @@ -0,0 +1,16 @@ +import { WalletAdapterType } from '@reef-knot/types'; +import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'; +import { WalletIcon } from './icons/index.js'; + +export const Coinbase: WalletAdapterType = ({ chains }) => ({ + walletName: 'Coinbase', + walletId: 'coinbase', + icon: WalletIcon, + detector: () => !!globalThis.window?.ethereum?.isCoinbaseWallet, + connector: new CoinbaseWalletConnector({ + chains, + options: { + appName: globalThis.window?.location?.hostname, + }, + }), +}); diff --git a/packages/wallets/coinbase/tsconfig.json b/packages/wallets/coinbase/tsconfig.json new file mode 100644 index 00000000..23709e73 --- /dev/null +++ b/packages/wallets/coinbase/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "tsconfig/react-library.json", + "include": ["src/**/*"], + "exclude": ["node_modules", "dist", "**/*.test.*"], + "compilerOptions": { + "rootDir": "src", + } +} diff --git a/packages/web3-react/CHANGELOG.md b/packages/web3-react/CHANGELOG.md index 48cab28b..00dd61df 100644 --- a/packages/web3-react/CHANGELOG.md +++ b/packages/web3-react/CHANGELOG.md @@ -1,5 +1,11 @@ # @reef-knot/web3-react +## 1.11.0 + +### Minor Changes + +- Remove Coinbase related code + ## 1.10.0 ### Minor Changes diff --git a/packages/web3-react/package.json b/packages/web3-react/package.json index ae12118b..b6373e84 100644 --- a/packages/web3-react/package.json +++ b/packages/web3-react/package.json @@ -1,6 +1,6 @@ { "name": "@reef-knot/web3-react", - "version": "1.10.0", + "version": "1.11.0", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { diff --git a/packages/web3-react/src/context/connectors.tsx b/packages/web3-react/src/context/connectors.tsx index 6fc51773..5062345f 100644 --- a/packages/web3-react/src/context/connectors.tsx +++ b/packages/web3-react/src/context/connectors.tsx @@ -1,6 +1,5 @@ import React, { createContext, FC, memo, useMemo } from 'react'; import { InjectedConnector } from '@web3-react/injected-connector'; -import { WalletLinkConnector } from '@web3-react/walletlink-connector'; import { SafeAppConnector } from '@gnosis.pm/safe-apps-web3-react'; import { CHAINS } from '@lido-sdk/constants'; import { useSDK } from '@lido-sdk/react'; @@ -20,8 +19,6 @@ export interface ConnectorsContextProps { export type ConnectorsContextValue = { injected: InjectedConnector; - walletlink: WalletLinkConnector; - coinbase: WalletLinkConnector; ledgerlive: LedgerHQFrameConnector; ledger: LedgerHQConnector; gnosis?: SafeAppConnector; @@ -68,22 +65,6 @@ const ProviderConnectors: FC = (props) => { chainId: defaultChainId, url: rpc[defaultChainId], }), - - [CONNECTOR_NAMES.COINBASE]: new WalletLinkConnector({ - // only mainnet - url: rpc[CHAINS.Mainnet], - supportedChainIds, - appName, - appLogoUrl, - }), - - [CONNECTOR_NAMES.WALLET_LINK]: new WalletLinkConnector({ - // only mainnet - url: rpc[CHAINS.Mainnet], - supportedChainIds, - appName, - appLogoUrl, - }), }), [appLogoUrl, appName, rpc, defaultChainId, supportedChainIds], ); diff --git a/packages/web3-react/src/hooks/index.ts b/packages/web3-react/src/hooks/index.ts index ea5537ee..4b7c1e60 100644 --- a/packages/web3-react/src/hooks/index.ts +++ b/packages/web3-react/src/hooks/index.ts @@ -1,5 +1,4 @@ export * from './useAutoConnect'; -export * from './useConnectorCoinbase'; export * from './useConnectorInfo'; export * from './useConnectorLedger'; export * from './useConnectorMetamask'; diff --git a/packages/web3-react/src/hooks/useAutoConnect.ts b/packages/web3-react/src/hooks/useAutoConnect.ts index f0055924..845da051 100644 --- a/packages/web3-react/src/hooks/useAutoConnect.ts +++ b/packages/web3-react/src/hooks/useAutoConnect.ts @@ -99,28 +99,15 @@ export const useEagerConnector = (connectors: ConnectorsContextValue) => { export const useSaveConnectorToLS = (): void => { const [, saveConnector] = useConnectorStorage(); - const { - isInjected, - isDappBrowser, - isCoinbase, - isLedger, - isConnectedViaWagmi, - } = useConnectorInfo(); + const { isInjected, isDappBrowser, isLedger, isConnectedViaWagmi } = + useConnectorInfo(); useEffect(() => { if (!isConnectedViaWagmi) { if (isInjected && !isDappBrowser) return saveConnector('injected'); - if (isCoinbase) return saveConnector('coinbase'); if (isLedger) return saveConnector('ledger'); } - }, [ - isLedger, - isCoinbase, - isInjected, - isDappBrowser, - saveConnector, - isConnectedViaWagmi, - ]); + }, [isLedger, isInjected, isDappBrowser, saveConnector, isConnectedViaWagmi]); }; export const useDeleteConnectorFromLS = (): void => { diff --git a/packages/web3-react/src/hooks/useConnectorCoinbase.ts b/packages/web3-react/src/hooks/useConnectorCoinbase.ts deleted file mode 100644 index d176d3e4..00000000 --- a/packages/web3-react/src/hooks/useConnectorCoinbase.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { useCallback } from 'react'; -import { WalletLinkConnector } from '@web3-react/walletlink-connector'; -import { useConnectors } from './useConnectors'; -import { useForceDisconnect } from './useDisconnect'; -import { useWeb3 } from './useWeb3'; -import { ConnectorHookArgs } from './types'; - -type Connector = { - connect: () => Promise; - connector: WalletLinkConnector; -}; - -export const useConnectorCoinbase = (args?: ConnectorHookArgs): Connector => { - const { coinbase } = useConnectors(); - const { activate } = useWeb3(); - const { disconnect } = useForceDisconnect(); - const onConnect = args?.onConnect; - - const connect = useCallback(async () => { - await disconnect(); - await activate(coinbase); - onConnect?.(); - }, [disconnect, activate, coinbase, onConnect]); - - return { connect, connector: coinbase }; -};