Merge pull request #500 from provenance-io/jarryd/499/update-wcjs-to-…

…v3.0.0

Updates to wcjs 3.0.0

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Update hash icon #487
 - Replace hash icons #489
 - Update validator metrics #494
+- Update to wcjs 3.0.0 #499
 - Add assetMetadata to local storage #501
 
 ## 3.5.0

package.json

@@ -11,8 +11,8 @@
   "private": false,
   "sideEffects": false,
   "dependencies": {
-    "@provenanceio/wallet-utils": "2.6.0",
-    "@provenanceio/walletconnect-js": "2.1.1-develop.2",
+    "@provenanceio/wallet-utils": "2.9.0",
+    "@provenanceio/walletconnect-js": "3.6.0",
     "@reduxjs/toolkit": "1.8.1",
     "bech32": "2.0.0",
     "big.js": "6.1.1",

src/App.js

@@ -99,7 +99,7 @@ const App = () => {
             <Route path="/network/upgrades" component={Upgrades} />
             <Route path="/network/params" component={Params} />
             <Route path="/tx/:txHash" component={Tx} />
-            <Route path='/txdash' component={TxDash} />
+            <Route path="/txdash" component={TxDash} />
             <Route path="/txs" component={Txs} />
             <Route path="/validator/:validatorId" component={Validator} />
             <Route path="/validators" component={Validators} />

src/Components/UserAccount/UserAccount.tsx

@@ -59,7 +59,7 @@ const Link = styled(BaseLink)`
 const UserAccount = ({ isMobile }: { isMobile: boolean }) => {
   const { isLoggedIn, setWalletUrl, setIsLoggedIn } = useApp();
   const { walletConnectService: wcs, walletConnectState } = useWalletConnect();
-  const { connected, address } = walletConnectState;
+  const { status, address } = walletConnectState;
   const theme = useTheme();
   const position = isMobile ? 'above' : 'left';
   const [visible, setVisible] = useState(false);
@@ -69,8 +69,8 @@ const UserAccount = ({ isMobile }: { isMobile: boolean }) => {
   useOnEscape(deactivateShowPopup);
 
   useEffect(() => {
-    setIsLoggedIn(connected);
-  }, [connected, setIsLoggedIn]);
+    setIsLoggedIn(status === 'connected');
+  }, [status, setIsLoggedIn]);
 
   const handleLogout = () => {
     setWalletUrl('');
@@ -119,13 +119,14 @@ const UserAccount = ({ isMobile }: { isMobile: boolean }) => {
         title="Scan the QRCode with your mobile Provenance Blockchain Wallet."
         className="QR-Code-Modal"
         devWallets={[
-          'figure_web',
-          'figure_web_test',
           'figure_mobile_test',
+          'figure_hosted_test',
+          // @ts-ignore
           'provenance_extension',
+          // @ts-ignore
           'provenance_mobile',
         ]}
-        hideWallets={isProd ? ['figure_web_test', 'figure_mobile_test'] : ['figure_web']}
+        hideWallets={isProd ? ['figure_hosted_test'] : ['figure_hosted']}
       />
     </Container>
   );

src/redux/features/asset/assetSlice.ts

@@ -416,6 +416,7 @@ export const assetSlice = createSlice({
         // Used by currencyFormat
         window.localStorage.setItem('assetMetadata', JSON.stringify(payload.data));
         setCookie('assetMetadata', JSON.stringify(payload.data), 5);
+        window.localStorage.setItem('assetMetadata', JSON.stringify(payload.data));
         state.assetMetadataLoading = false;
         state.assetMetadata = payload.data;
       })

src/redux/hooks/useProposal.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useWalletConnect, WINDOW_MESSAGES } from '@provenanceio/walletconnect-js';
-import { BroadcastResults } from '@provenanceio/walletconnect-js/lib/types';
 // @ts-ignore
 import useToggle from 'react-tiny-hooks/use-toggle';
 import { useApp } from 'redux/hooks';
@@ -28,25 +27,21 @@ export const useProposal = () => {
 
   // Event listeners for wallet messages
   useEffect(() => {
-    // Success message for transaction messages
-    const submitSuccess = (result: BroadcastResults) => {
+    wcs.addListener(WINDOW_MESSAGES.SEND_MESSAGE_COMPLETE, (result) => {
       setShouldPull(true);
       setSubmitted(true);
-    };
-    wcs.addListener(WINDOW_MESSAGES.SEND_MESSAGE_COMPLETE, submitSuccess);
+    });
 
     // Fail message for transaction messages
-    const submitFailure = (result: BroadcastResults) => {
+    wcs.addListener(WINDOW_MESSAGES.SEND_MESSAGE_FAILED, (result) => {
       setSubmitted(false);
       deactivateModalOpen();
-    };
-    wcs.addListener(WINDOW_MESSAGES.SEND_MESSAGE_FAILED, submitFailure);
+    });
 
     // Remove event listeners when no longer needed
     return () => {
-      wcs.removeListener(WINDOW_MESSAGES.SEND_MESSAGE_COMPLETE, submitSuccess);
-      wcs.removeListener(WINDOW_MESSAGES.SEND_MESSAGE_FAILED, submitFailure);
-      wcs.removeAllListeners();
+      wcs.removeListener(WINDOW_MESSAGES.SEND_MESSAGE_COMPLETE, () => {});
+      wcs.removeListener(WINDOW_MESSAGES.SEND_MESSAGE_FAILED, () => {});
     };
   }, [wcs, deactivateModalOpen]);
 

src/redux/hooks/useStaking.tsx

@@ -12,7 +12,6 @@ import { useWalletConnect, WINDOW_MESSAGES } from '@provenanceio/walletconnect-j
 import useToggle from 'react-tiny-hooks/use-toggle';
 import { useApp, useAccounts } from 'redux/hooks';
 import OgButton from 'Components/Button';
-import { BroadcastResults } from '@provenanceio/walletconnect-js/lib/types';
 
 const Button = styled(OgButton)`
   text-transform: capitalize;
@@ -96,14 +95,14 @@ export const useStaking = () => {
   // Event listeners for wallet messages
   useEffect(() => {
     // Success message for transaction messages
-    const submitSuccess = (result: BroadcastResults) => {
+    const submitSuccess = () => {
       setShouldPull(true);
       deactivateModalOpen();
     };
     wcs.addListener(WINDOW_MESSAGES.SEND_MESSAGE_COMPLETE, submitSuccess);
 
     // Fail message for transaction messages
-    const submitFailure = (result: BroadcastResults) => {
+    const submitFailure = () => {
       setShouldPull(false);
     };
     wcs.addListener(WINDOW_MESSAGES.SEND_MESSAGE_FAILED, submitFailure);
@@ -112,7 +111,6 @@ export const useStaking = () => {
     return () => {
       wcs.removeListener(WINDOW_MESSAGES.SEND_MESSAGE_COMPLETE, submitSuccess);
       wcs.removeListener(WINDOW_MESSAGES.SEND_MESSAGE_FAILED, submitFailure);
-      wcs.removeAllListeners();
     };
   }, [wcs, deactivateModalOpen]);
 

src/redux/hooks/useVoting.tsx

@@ -6,7 +6,6 @@ import { useWalletConnect, WINDOW_MESSAGES } from '@provenanceio/walletconnect-j
 import useToggle from 'react-tiny-hooks/use-toggle';
 import { useApp, useAccounts } from 'redux/hooks';
 import OgButton from 'Components/Button';
-import { BroadcastResults } from '@provenanceio/walletconnect-js/lib/types';
 
 const Button = styled(OgButton)`
   text-transform: capitalize;
@@ -32,13 +31,13 @@ export const useVoting = () => {
   // Event listeners for wallet messages
   useEffect(() => {
     // Success message for transaction messages
-    const submitSuccess = (result: BroadcastResults) => {
+    const submitSuccess = () => {
       setVoted(true);
     };
     wcs.addListener(WINDOW_MESSAGES.SEND_MESSAGE_COMPLETE, submitSuccess);
 
     // Fail message for transaction messages
-    const submitFailure = (result: BroadcastResults) => {
+    const submitFailure = () => {
       setVoted(false);
       deactivateModalOpen();
     };
@@ -48,7 +47,6 @@ export const useVoting = () => {
     return () => {
       wcs.removeListener(WINDOW_MESSAGES.SEND_MESSAGE_COMPLETE, submitSuccess);
       wcs.removeListener(WINDOW_MESSAGES.SEND_MESSAGE_FAILED, submitFailure);
-      wcs.removeAllListeners();
     };
   }, [wcs, deactivateModalOpen]);