@broxus/evm-connect 1.12.9 → 1.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -52,8 +52,7 @@ require("./index.css");
52
52
  exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
53
53
  const intl = (0, react_intl_1.useIntl)();
54
54
  const walletService = (0, context_1.useEvmWalletService)();
55
- const walletProviders = (0, context_1.useEvmWalletProviders)();
56
- const [recentMeta, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)(walletProviders.recentMetaStorageKey);
55
+ const [recentMeta, setRecentMeta] = (0, hooks_1.useRecentConnectionMeta)();
57
56
  const drop = React.useRef(null);
58
57
  const { changeWalletButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonTrigger, connectButtonType, disconnectButtonText = intl.formatMessage(intl_1.default.EVM_CONNECT_DISCONNECT_BTN_TEXT), network = walletService.network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, warnUnsupportedNetwork = true, } = props;
59
58
  const changeWallet = () => {
@@ -64,7 +63,7 @@ exports.EvmConnector = (0, mobx_react_lite_1.observer)((props) => {
64
63
  drop.current?.close();
65
64
  await walletService.disconnect();
66
65
  if (recentMeta) {
67
- setRecentMeta({ ...recentMeta, disconnected: true }, walletProviders.recentMetaStorageKey);
66
+ setRecentMeta({ ...recentMeta, disconnected: true });
68
67
  }
69
68
  }
70
69
  };
@@ -49,11 +49,10 @@ const intl_1 = __importDefault(require("../../../intl"));
49
49
  const types_1 = require("../../../types");
50
50
  const utils_1 = require("../../../utils");
51
51
  require("./index.css");
52
- exports.ProviderButton = (0, mobx_react_lite_1.observer)((props) => {
52
+ exports.ProviderButton = (0, mobx_react_lite_1.observer)(({ providerConfig, onSelect: onSelectProvider }) => {
53
53
  const intl = (0, react_intl_1.useIntl)();
54
54
  const walletService = (0, context_1.useEvmWalletService)();
55
55
  const walletProviders = (0, context_1.useEvmWalletProviders)();
56
- const { providerConfig, onSelect: onSelectProvider } = props;
57
56
  const [hasProvider, setHasProvider] = React.useState(() => {
58
57
  if (providerConfig.connector.type === types_1.EthereumConnectionType.WALLET_CONNECT_V2) {
59
58
  return true;
@@ -51,7 +51,8 @@ exports.EvmProvidersDispatcher = (0, mobx_react_lite_1.observer)(() => {
51
51
  const intl = (0, react_intl_1.useIntl)();
52
52
  const walletService = (0, context_1.useEvmWalletService)();
53
53
  const walletProviders = (0, context_1.useEvmWalletProviders)();
54
- const orderedProviders = (0, hooks_1.useOrderedConnections)(walletService.providers ?? []);
54
+ const [recentMeta] = (0, hooks_1.useRecentConnectionMeta)();
55
+ const orderedProviders = (0, hooks_1.useOrderedConnections)(walletService.providers ?? [], recentMeta);
55
56
  const dispatcher = React.useRef(null);
56
57
  const content = React.useRef(null);
57
58
  React.useLayoutEffect(() => {
@@ -70,15 +70,19 @@ function getRecentConnectionMeta(storageKey = constants_1.EVM_RECENT_CONNECTION)
70
70
  storeRecentConnectionMeta(undefined, storageKey);
71
71
  return undefined;
72
72
  }
73
- function useRecentConnectionMeta(storageKey = constants_1.EVM_RECENT_CONNECTION) {
73
+ function useRecentConnectionMeta() {
74
74
  const walletProviders = (0, context_1.useEvmWalletProviders)();
75
- const [meta, setMeta] = React.useState(getRecentConnectionMeta(walletProviders.recentMetaStorageKey || storageKey));
75
+ const storageKey = walletProviders.recentMetaStorageKey ?? constants_1.EVM_RECENT_CONNECTION;
76
+ const [recentMeta, setRecentMeta] = React.useState(getRecentConnectionMeta(storageKey));
77
+ const setMeta = (meta) => {
78
+ storeRecentConnectionMeta(meta, storageKey);
79
+ };
76
80
  React.useEffect(() => {
77
81
  const onStorage = (event) => {
78
82
  if (event.key === storageKey && event.newValue) {
79
83
  const json = JSON.parse(event.newValue);
80
84
  if (isRecentConnectionMeta(json)) {
81
- setMeta(json);
85
+ setRecentMeta(json);
82
86
  }
83
87
  }
84
88
  };
@@ -91,5 +95,5 @@ function useRecentConnectionMeta(storageKey = constants_1.EVM_RECENT_CONNECTION)
91
95
  }
92
96
  };
93
97
  }, [storageKey]);
94
- return [meta, storeRecentConnectionMeta];
98
+ return [recentMeta, setMeta];
95
99
  }
@@ -6,15 +6,14 @@ import { observer } from 'mobx-react-lite';
6
6
  import * as React from 'react';
7
7
  import { useIntl } from 'react-intl';
8
8
  import { EvmConnectButton } from '../../components/EvmConnectButton';
9
- import { useEvmWalletProviders, useEvmWalletService } from '../../context';
9
+ import { useEvmWalletService } from '../../context';
10
10
  import { useRecentConnectionMeta } from '../../hooks';
11
11
  import messages from '../../intl';
12
12
  import './index.css';
13
13
  export const EvmConnector = observer((props) => {
14
14
  const intl = useIntl();
15
15
  const walletService = useEvmWalletService();
16
- const walletProviders = useEvmWalletProviders();
17
- const [recentMeta, setRecentMeta] = useRecentConnectionMeta(walletProviders.recentMetaStorageKey);
16
+ const [recentMeta, setRecentMeta] = useRecentConnectionMeta();
18
17
  const drop = React.useRef(null);
19
18
  const { changeWalletButtonText = intl.formatMessage(messages.EVM_CONNECT_CHANGE_WALLET_BTN_TEXT), className, connectButtonShape, connectButtonText = intl.formatMessage(messages.EVM_CONNECT_CONNECT_BTN_TEXT), connectButtonTrigger, connectButtonType, disconnectButtonText = intl.formatMessage(messages.EVM_CONNECT_DISCONNECT_BTN_TEXT), network = walletService.network, popupType, suffix, showDropMenu = true, showSubIcon = true, standalone = walletService.providers?.length === 1, warnUnsupportedNetwork = true, } = props;
20
19
  const changeWallet = () => {
@@ -25,7 +24,7 @@ export const EvmConnector = observer((props) => {
25
24
  drop.current?.close();
26
25
  await walletService.disconnect();
27
26
  if (recentMeta) {
28
- setRecentMeta({ ...recentMeta, disconnected: true }, walletProviders.recentMetaStorageKey);
27
+ setRecentMeta({ ...recentMeta, disconnected: true });
29
28
  }
30
29
  }
31
30
  };
@@ -5,7 +5,7 @@ interface ProviderButtonProps {
5
5
  providerConfig: EvmWalletProviderConfig;
6
6
  onSelect?: (providerConfig: EvmWalletProviderConfig) => Promise<void> | void;
7
7
  }
8
- export declare const ProviderButton: ((props: ProviderButtonProps) => React.JSX.Element) & {
8
+ export declare const ProviderButton: (({ providerConfig, onSelect: onSelectProvider }: ProviderButtonProps) => React.JSX.Element) & {
9
9
  displayName: string;
10
10
  };
11
11
  export {};
@@ -10,11 +10,10 @@ import messages from '../../../intl';
10
10
  import { EthereumConnectionType } from '../../../types';
11
11
  import { getEvmProviderPlatformLink } from '../../../utils';
12
12
  import './index.css';
13
- export const ProviderButton = observer((props) => {
13
+ export const ProviderButton = observer(({ providerConfig, onSelect: onSelectProvider }) => {
14
14
  const intl = useIntl();
15
15
  const walletService = useEvmWalletService();
16
16
  const walletProviders = useEvmWalletProviders();
17
- const { providerConfig, onSelect: onSelectProvider } = props;
18
17
  const [hasProvider, setHasProvider] = React.useState(() => {
19
18
  if (providerConfig.connector.type === EthereumConnectionType.WALLET_CONNECT_V2) {
20
19
  return true;
@@ -5,14 +5,15 @@ import { useIntl } from 'react-intl';
5
5
  import { ConnectionRequest } from '../../components/EvmProvidersDispatcher/ConnectionRequest';
6
6
  import { ProviderButton } from '../../components/EvmProvidersDispatcher/ProviderButton';
7
7
  import { useEvmWalletProviders, useEvmWalletService } from '../../context';
8
- import { useOrderedConnections } from '../../hooks';
8
+ import { useOrderedConnections, useRecentConnectionMeta } from '../../hooks';
9
9
  import messages from '../../intl';
10
10
  import './index.css';
11
11
  export const EvmProvidersDispatcher = observer(() => {
12
12
  const intl = useIntl();
13
13
  const walletService = useEvmWalletService();
14
14
  const walletProviders = useEvmWalletProviders();
15
- const orderedProviders = useOrderedConnections(walletService.providers ?? []);
15
+ const [recentMeta] = useRecentConnectionMeta();
16
+ const orderedProviders = useOrderedConnections(walletService.providers ?? [], recentMeta);
16
17
  const dispatcher = React.useRef(null);
17
18
  const content = React.useRef(null);
18
19
  React.useLayoutEffect(() => {
@@ -9,7 +9,7 @@ export declare function storeRecentConnectionMeta(meta: RecentConnectionMeta | u
9
9
  export declare function getRecentConnectionMeta(storageKey?: string): RecentConnectionMeta | undefined;
10
10
  type UseRecentConnectionMeta = [
11
11
  value: RecentConnectionMeta | undefined,
12
- setValue: (meta: RecentConnectionMeta | undefined, storageKey?: string) => void
12
+ setValue: (meta: RecentConnectionMeta | undefined) => void
13
13
  ];
14
- export declare function useRecentConnectionMeta(storageKey?: string): UseRecentConnectionMeta;
14
+ export declare function useRecentConnectionMeta(): UseRecentConnectionMeta;
15
15
  export {};
@@ -32,15 +32,19 @@ export function getRecentConnectionMeta(storageKey = EVM_RECENT_CONNECTION) {
32
32
  storeRecentConnectionMeta(undefined, storageKey);
33
33
  return undefined;
34
34
  }
35
- export function useRecentConnectionMeta(storageKey = EVM_RECENT_CONNECTION) {
35
+ export function useRecentConnectionMeta() {
36
36
  const walletProviders = useEvmWalletProviders();
37
- const [meta, setMeta] = React.useState(getRecentConnectionMeta(walletProviders.recentMetaStorageKey || storageKey));
37
+ const storageKey = walletProviders.recentMetaStorageKey ?? EVM_RECENT_CONNECTION;
38
+ const [recentMeta, setRecentMeta] = React.useState(getRecentConnectionMeta(storageKey));
39
+ const setMeta = (meta) => {
40
+ storeRecentConnectionMeta(meta, storageKey);
41
+ };
38
42
  React.useEffect(() => {
39
43
  const onStorage = (event) => {
40
44
  if (event.key === storageKey && event.newValue) {
41
45
  const json = JSON.parse(event.newValue);
42
46
  if (isRecentConnectionMeta(json)) {
43
- setMeta(json);
47
+ setRecentMeta(json);
44
48
  }
45
49
  }
46
50
  };
@@ -53,5 +57,5 @@ export function useRecentConnectionMeta(storageKey = EVM_RECENT_CONNECTION) {
53
57
  }
54
58
  };
55
59
  }, [storageKey]);
56
- return [meta, storeRecentConnectionMeta];
60
+ return [recentMeta, setMeta];
57
61
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@broxus/evm-connect",
3
- "version": "1.12.9",
3
+ "version": "1.13.1",
4
4
  "description": "Ethereum wallets connector.",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -76,9 +76,9 @@
76
76
  "prepare": "npx yarn cleanup && npx yarn build"
77
77
  },
78
78
  "dependencies": {
79
- "@broxus/js-core": "^0.32.1",
79
+ "@broxus/js-core": "^0.33.1",
80
80
  "@broxus/js-utils": "^1.3.16",
81
- "@broxus/react-components": "^0.23.4",
81
+ "@broxus/react-components": "^0.23.6",
82
82
  "@broxus/react-uikit": "^0.19.3",
83
83
  "@metamask/detect-provider": "^2.0.0",
84
84
  "@walletconnect/ethereum-provider": "^2.20.2",
@@ -96,5 +96,5 @@
96
96
  "web3-types": "^1.x",
97
97
  "web3-utils": "^4.x"
98
98
  },
99
- "gitHead": "0d38ed5de484717a5fcbc4c831055da0e43a81b7"
99
+ "gitHead": "e3e7524619c84756dd6a7e964878ed906466d057"
100
100
  }