lidofinance · alx-khramov · Mar 4, 2024 · Jan 25, 2024 · Jan 26, 2024 · Jan 26, 2024
@@ -1,15 +1,14 @@
 import React from 'react';
 import { WagmiConfig, createClient, configureChains, Chain } from 'wagmi';
 import { goerli, mainnet } from 'wagmi/chains';
-import { ProviderWeb3 } from 'reef-knot/web3-react';
-import { getConnectors, holesky } from 'reef-knot/core-react';
+import { ReefKnot, getConnectors, holesky } from 'reef-knot/core-react';
 import { getStaticRpcBatchProvider } from '@lido-sdk/providers';
+import { ProviderSDKWithProps } from './ProviderSDKWithProps';
 import { getRPCPath } from '../util/contractTestingUtils';
 import { rpcUrlsString } from '../util/rpc';
 import { WC_PROJECT_ID } from '../util/walletconnectProjectId';
 
 const supportedChains = [holesky, mainnet, goerli];
-const supportedChainsIds = supportedChains.map((chain) => chain.id);
 const defaultChainId = holesky.id;
 
 const jsonRpcBatchProvider = (chain: Chain) => ({
@@ -34,23 +33,38 @@ const connectors = getConnectors({
 
 const client = createClient({
   connectors,
-  autoConnect: true,
+  autoConnect: false, // default wagmi autoConnect should be false
   provider,
   webSocketProvider,
 });
 
-const ProviderWeb3WithProps = ({ children }: { children: React.ReactNode }) => {
+const ConfigContextProviders = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const defaultChain =
+    supportedChains.find((chain) => chain.id === defaultChainId) ||
+    supportedChains[0];
+
   return (
     <WagmiConfig client={client}>
-      <ProviderWeb3
-        defaultChainId={defaultChainId}
-        supportedChainIds={supportedChainsIds}
+      <ReefKnot
         rpc={rpcUrlsString}
+        chains={supportedChains}
+        defaultChain={defaultChain}
         walletconnectProjectId={WC_PROJECT_ID}
+        autoConnect
       >
-        {children}
-      </ProviderWeb3>
+        <ProviderSDKWithProps
+          defaultChainId={defaultChain.id}
+          supportedChains={supportedChains}
+          rpc={rpcUrlsString}
+        >
+          {children}
+        </ProviderSDKWithProps>
+      </ReefKnot>
     </WagmiConfig>
   );
 };
-export default ProviderWeb3WithProps;
+export default ConfigContextProviders;
@@ -4,6 +4,7 @@ const Header = () => (
   <Head>
     <title>Reef Knot demo app</title>
     <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+    <link rel="icon" type="image/png" href="/reef-knot-logo-32x32.png" />
     <style>{`
           body {
             font-family: sans-serif;

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { ProviderSDK } from '@lido-sdk/react';
+import { getStaticRpcBatchProvider } from '@lido-sdk/providers';
+import { Web3Provider } from '@ethersproject/providers';
+import { Chain, useAccount } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { useWeb3 } from 'reef-knot/web3-react';
+
+const POLLING_INTERVAL = 12_000;
+
+export const ProviderSDKWithProps = (props: {
+  children?: React.ReactNode;
+  defaultChainId: number;
+  supportedChains: Chain[];
+  rpc: Record<number, string>;
+}) => {
+  const { children, defaultChainId, rpc, supportedChains } = props;
+  const { chainId = defaultChainId, account } = useWeb3();
+  const { connector, isConnected } = useAccount();
+
+  const [providerWeb3, setProviderWeb3] = useState<Web3Provider>();
+
+  // Reset web3 provider if the provider was set previously,
+  // and currently no wallet is connected.
+  // Gets triggered on a wallet disconnection, for example.
+  if (!isConnected && providerWeb3) {
+    setProviderWeb3(undefined);
+  }
+
+  useEffect(() => {
+    void (async () => {
+      if (!providerWeb3 && connector && isConnected) {
+        const provider = await connector.getProvider();
+        const wrappedProvider = new Web3Provider(provider);
+        wrappedProvider.pollingInterval = POLLING_INTERVAL;
+        setProviderWeb3(wrappedProvider);
+      }
+    });
+  }, [connector, isConnected, providerWeb3]);
+
+  const supportedChainIds = supportedChains.map((chain) => chain.id);
+
+  const providerRpc = getStaticRpcBatchProvider(
+    chainId,
+    rpc[chainId],
+    0,
+    POLLING_INTERVAL,
+  );
+
+  const providerMainnetRpc = getStaticRpcBatchProvider(
+    mainnet.id,
+    rpc[mainnet.id],
+    0,
+    POLLING_INTERVAL,
+  );
+
+  return (
+    // @ts-expect-error Property children does not exist on type
+    <ProviderSDK
+      chainId={chainId}
+      supportedChainIds={supportedChainIds}
+      providerWeb3={providerWeb3}
+      providerRpc={providerRpc}
+      providerMainnetRpc={providerMainnetRpc}
+      account={account ?? undefined}
+    >
+      {children}
+    </ProviderSDK>
+  );
+};
@@ -1,7 +1,7 @@
 export { default as ConnectDisconnect } from './ConnectDisconnect';
 export { default as Header } from './Header';
 export { default as MainContainer } from './MainContainer';
-export { default as ProviderWeb3WithProps } from './ProviderWeb3WithProps';
+export { default as ProviderWeb3WithProps } from './ConfigContextProviders';
 export { default as ThemeSelect } from './ThemeSelect';
 export { default as WalletsModal } from './WalletsModal';
 export { default as ContractTesting } from './contractTesting/index';

@@ -18,4 +18,26 @@ export default withBundleAnalyzer({
   publicRuntimeConfig: {
     alchemyApiKey,
   },
+  async headers() {
+    return [
+      {
+        // required for Gnosis Safe apps
+        source: '/manifest.json',
+        headers: [
+          {
+            key: "Access-Control-Allow-Origin",
+            value: '*',
+          },
+          {
+            key: "Access-Control-Allow-Methods",
+            value: 'GET',
+          },
+          {
+            key: "Access-Control-Allow-Headers",
+            value: 'X-Requested-With, content-type, Authorization',
+          },
+        ],
+      },
+    ]
+  }
 })
@@ -0,0 +1,18 @@
+{
+  "name": "ReefKnot Demo App",
+  "short_name": "ReefKnot",
+  "description": "Application for demonstrating how ReefKnot works and for development purposes.",
+  "iconPath": "reef-knot-logo.svg",
+  "icons": [
+    {
+      "src": "/reef-knot-logo-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/reef-knot-logo.svg",
+      "sizes": "64x64",
+      "type": "image/svg+xml"
+    }
+  ]
+}
@@ -1,5 +1,18 @@
 # @reef-knot/connect-wallet-modal
 
+## 2.0.0
+
+### Minor Changes
+
+- 1046886: Support autoConnectOnly wallet adapters
+
+### Patch Changes
+
+- Updated dependencies [1046886]
+  - @reef-knot/[email protected]
+  - @reef-knot/[email protected]
+  - @reef-knot/[email protected]
+
 ## 1.17.1
 
 ### Patch Changes

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/connect-wallet-modal",
-  "version": "1.17.1",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -45,12 +45,12 @@
     "@types/react-dom": "18.2.17"
   },
   "devDependencies": {
-    "@reef-knot/core-react": "^1.8.1",
-    "@reef-knot/types": "^1.4.0",
+    "@reef-knot/core-react": "^2.0.0",
+    "@reef-knot/types": "^1.5.0",
     "@reef-knot/ui-react": "^1.0.8",
     "@reef-knot/wallets-helpers": "^1.1.5",
-    "@reef-knot/web3-react": "^1.13.0",
-    "@reef-knot/ledger-connector": "^2.0.1",
+    "@reef-knot/web3-react": "^2.0.0",
+    "@reef-knot/ledger-connector": "^3.0.0",
     "@types/ua-parser-js": "^0.7.36",
     "eslint-config-custom": "*",
     "react": "18.2.0",
@@ -59,12 +59,12 @@
     "wagmi": "^0.12.19"
   },
   "peerDependencies": {
-    "@reef-knot/core-react": "^1.4.2",
+    "@reef-knot/core-react": "^2.0.0",
     "@reef-knot/types": "^1.2.1",
     "@reef-knot/ui-react": "^1.0.4",
     "@reef-knot/wallets-helpers": "^1.1.2",
-    "@reef-knot/web3-react": "^1.12.0",
-    "@reef-knot/ledger-connector": "^2.0.0",
+    "@reef-knot/web3-react": "^2.0.0",
+    "@reef-knot/ledger-connector": "^3.0.0",
     "react": ">=18",
     "@lidofinance/lido-ui": "^3.18.0",
     "ua-parser-js": "^1.0.33",

@@ -8,7 +8,7 @@ import { useLedgerAccounts, useLedgerContext } from './hooks';
 import { getFirstIndexOnPage, saveLedgerDerivationPath } from './helpers';
 import { Metrics } from '../WalletsModal';
 import { LedgerDerivationPathSelect } from './LedgerDerivationPathSelect';
-import { AccountsStorage } from './types';
+import { AccountRecord, AccountsStorage } from './types';
 import { DERIVATION_PATHS } from './constants';
 
 const BoxWrapper = styled.div`
@@ -70,7 +70,7 @@ export const LedgerAccountScreen: FC<Props> = ({ metrics, closeScreen }) => {
   );
 
   const handleAccountButtonClick = useCallback(
-    async (account) => {
+    async (account: AccountRecord) => {
       saveLedgerDerivationPath(account.path);
       await disconnectTransport(true);
       try {
@@ -83,7 +83,7 @@ export const LedgerAccountScreen: FC<Props> = ({ metrics, closeScreen }) => {
     [closeScreen, connect, disconnectTransport, ledgerConnector, setError],
   );
 
-  const handleDerivationPathSelect = useCallback((value) => {
+  const handleDerivationPathSelect = useCallback((value: string) => {
     setCurrentPage(1);
     setDerivationPathTemplate(value);
   }, []);

@@ -34,8 +34,10 @@ export function getWalletsButtons({
   let wallets: string[] = [];
 
   walletDataList.forEach((walletData) => {
-    const { walletId, detector } = walletData;
-    addWalletTo(wallets, walletId, !!detector?.());
+    const { walletId, detector, autoConnectOnly } = walletData;
+    if (!autoConnectOnly) {
+      addWalletTo(wallets, walletId, !!detector?.());
+    }
   });
 
   wallets = [...wallets].filter(

@@ -1,4 +1,4 @@
-export * from './user-agents';
+export * from './userAgents';
 export * from './noop';
 export * from './capitalize';
 export * from './useLocalStorage';

@@ -1,5 +1,5 @@
 import { openWindow } from './openWindow';
-import { isAndroid, isIOS } from './user-agents';
+import { isAndroid, isIOS } from './userAgents';
 
 export const suggestApp = (urls: {
   default: string;

@@ -1,5 +1,11 @@
 # @reef-knot/ledger-connector
 
+## 3.0.0
+
+### Major Changes
+
+- 1046886: Rework: use wagmi for Ledger Live connector instead of web3-react
+
 ## 2.0.1
 
 ### Patch Changes

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/ledger-connector",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -37,14 +37,15 @@
     "eslint-config-custom": "*"
   },
   "dependencies": {
-    "@ethersproject/abstract-signer": "^5.5.0",
-    "@ethersproject/bignumber": "^5.5.0",
-    "@ethersproject/bytes": "^5.5.0",
-    "@ethersproject/properties": "^5.5.0",
-    "@ethersproject/providers": "^5.5.2",
-    "@ethersproject/strings": "^5.5.0",
-    "@ethersproject/transactions": "^5.5.0",
-    "@ethersproject/hash": "^5.5.0",
+    "@ethersproject/abstract-signer": "^5.7.0",
+    "@ethersproject/bignumber": "^5.7.0",
+    "@ethersproject/bytes": "^5.7.0",
+    "@ethersproject/properties": "^5.7.0",
+    "@ethersproject/providers": "^5.7.2",
+    "@ethersproject/strings": "^5.7.0",
+    "@ethersproject/transactions": "^5.7.0",
+    "@ethersproject/hash": "^5.7.0",
+    "@ethersproject/address": "^5.7.0",
     "@ledgerhq/hw-app-eth": "^6.35.2",
     "@ledgerhq/hw-transport": "^6.30.1",
     "@ledgerhq/hw-transport-webhid": "^6.28.1",