Merge pull request #1996 from torusresearch/fix/popup-widget-currency

Fix/popup widget currency

src/containers/WalletHome/WalletHomeMain/WalletHomeMain.vue

@@ -248,6 +248,7 @@
 </template>
 
 <script>
+import { BroadcastChannel } from '@toruslabs/broadcast-channel'
 import { mapActions, mapGetters, mapState } from 'vuex'
 
 import ComponentLoader from '../../../components/helpers/ComponentLoader'
@@ -260,7 +261,7 @@ import PromotionCard from '../../../components/WalletHome/PromotionCard'
 import TokenBalancesTable from '../../../components/WalletHome/TokenBalancesTable'
 import WalletConnectCard from '../../../components/WalletHome/WalletConnectCard'
 import { LOCALE_EN, MAINNET, WALLET_CONNECT_CARD_DATA } from '../../../utils/enums'
-import { apiStreamSupported } from '../../../utils/utils'
+import { apiStreamSupported, broadcastChannelOptions } from '../../../utils/utils'
 
 export default {
   name: 'WalletHome',
@@ -349,8 +350,19 @@ export default {
         }
       })
     },
-    onCurrencyChange(value) {
+    async onCurrencyChange(value) {
       this.setSelectedCurrency({ selectedCurrency: value, origin: 'home' })
+      const urlInstance = new URLSearchParams(window.location.search).get('instanceId')
+      if (urlInstance && urlInstance !== '') {
+        const selectedCurrencyChannel = new BroadcastChannel(`selected_currency_channel_${urlInstance}`, broadcastChannelOptions)
+        await selectedCurrencyChannel.postMessage({
+          data: {
+            name: 'selected_currency',
+            payload: value,
+          },
+        })
+        selectedCurrencyChannel.close()
+      }
     },
     refreshBalances() {
       this.forceFetchTokens()

src/controllers/PreferencesController.js

@@ -129,6 +129,8 @@ class PreferencesController extends SafeEventEmitter {
     postboxAddress,
     dispatch,
     commit,
+    customCurrency,
+    supportedCurrencies,
   }) {
     let response = { token: jwtToken }
     if (this.state(address)) return this.state(address).defaultPublicAddress || address
@@ -154,14 +156,19 @@ class PreferencesController extends SafeEventEmitter {
     let defaultPublicAddress = address
     if (user?.data) {
       const { default_currency: defaultCurrency, verifier: storedVerifier, verifier_id: storedVerifierId, default_public_address } = user.data || {}
-      dispatch('setSelectedCurrency', { selectedCurrency: defaultCurrency, origin: 'store' })
+      if (supportedCurrencies.includes(defaultCurrency)) {
+        dispatch('setSelectedCurrency', { selectedCurrency: defaultCurrency, origin: 'store' })
+      } else {
+        dispatch('setSelectedCurrency', { selectedCurrency: customCurrency || currentState.selectedCurrency, origin: 'home' })
+      }
       if (!storedVerifier || !storedVerifierId) this.setVerifier(verifier, verifierId, address)
       defaultPublicAddress = default_public_address
     } else {
+      // Use customCurrency if available for new user
       const accountState = this.store.getState()[postboxAddress] || currentState
-      await this.createUser(accountState.selectedCurrency, accountState.theme, verifier, verifierId, accountType, address)
+      await this.createUser(customCurrency || accountState.selectedCurrency, accountState.theme, verifier, verifierId, accountType, address)
       commit('setNewUser', true)
-      dispatch('setSelectedCurrency', { selectedCurrency: accountState.selectedCurrency, origin: 'store' })
+      dispatch('setSelectedCurrency', { selectedCurrency: customCurrency || accountState.selectedCurrency, origin: 'home' })
     }
     if (!rehydrate) this.storeUserLogin(verifier, verifierId, { calledFromEmbed, rehydrate }, address)
     return defaultPublicAddress

src/store/actions.js

@@ -374,7 +374,7 @@ export default {
     context.commit('setNetworkId', payload.networkId)
     // torus.updateStaticData({ networkId: payload.networkId })
   },
-  async setProviderType({ commit, dispatch, state }, payload) {
+  async setProviderType({ commit, dispatch, getters, state }, payload) {
     let networkType = payload.network
     let isSupportedNetwork = false
     const activeChainId = networkType.chainId && (isHexStrict(networkType.chainId) ? networkType.chainId : `0x${networkType.chainId.toString(16)}`)
@@ -384,7 +384,7 @@ export default {
       networkType = { ...networkConfig, ...networkType }
     }
     if (SUPPORTED_NETWORK_TYPES[networkType.host]) {
-      networkType = SUPPORTED_NETWORK_TYPES[networkType.host]
+      networkType = { ...SUPPORTED_NETWORK_TYPES[networkType.host], ...networkType }
       isSupportedNetwork = true
     }
     const currentTicker = networkType.ticker || 'ETH'
@@ -398,6 +398,10 @@ export default {
     if (!config.supportedCurrencies.includes(state.selectedCurrency) && networkType.ticker !== state.selectedCurrency)
       await dispatch('setSelectedCurrency', { selectedCurrency: networkType.ticker, origin: 'home' })
     else await dispatch('setSelectedCurrency', { selectedCurrency: state.selectedCurrency, origin: 'store' })
+
+    // Set custom currency
+    if (getters.supportedCurrencies.includes(networkType.ticker) && networkType.ticker !== state.selectedCurrency)
+      await commit('setCustomCurrency', networkType.ticker)
     return undefined
   },
   async triggerLogin({ dispatch, commit, state }, { calledFromEmbed, verifier, preopenInstanceId, login_hint }) {
@@ -482,7 +486,7 @@ export default {
     encryptionPublicKeyManager.store.subscribe(encryptionPublicKeyHandler)
     decryptMessageManager.store.subscribe(unapprovedDecryptMsgsHandler)
   },
-  async initTorusKeyring({ dispatch, commit, state }, payload) {
+  async initTorusKeyring({ dispatch, commit, getters, state }, payload) {
     const { keys, calledFromEmbed, rehydrate, postboxAddress } = payload
     await torusController.initTorusKeyring(
       keys.map((x) => x.privKey),
@@ -502,6 +506,8 @@ export default {
           jwtToken: x.jwtToken,
           accountType: x.accountType,
           postboxAddress,
+          customCurrency: state.customCurrency,
+          supportedCurrencies: getters.supportedCurrencies,
         })
       })
     )

src/store/mutations.js

@@ -56,6 +56,9 @@ export default {
   setSelectedCurrency(state, currency) {
     state.selectedCurrency = currency
   },
+  setCustomCurrency(state, currency) {
+    state.customCurrency = currency
+  },
   setTypedMessages(state, unapprovedTypedMessages) {
     state.unapprovedTypedMessages = unapprovedTypedMessages
   },

src/store/setupStoreChannels.js

@@ -83,9 +83,7 @@ if (!isMain) {
       VuexStore.commit('setTorusWidgetVisibility', torusWidgetVisibility)
       VuexStore.commit('setLoginConfig', { enabledVerifiers, loginConfig })
       VuexStore.commit('setSkipTKey', skipTKey)
-      if (VuexStore.state.networkType.host !== network.host) {
-        VuexStore.dispatch('setProviderType', { network })
-      }
+      VuexStore.dispatch('setProviderType', { network })
       const { isRehydrationComplete } = VuexStore.state
       if (isRehydrationComplete) {
         initStream.write({
@@ -186,6 +184,16 @@ if (!isMain) {
     }
   })
 
+  const selectedCurrencyChannel = new BroadcastChannel(`selected_currency_channel_${torus.instanceId}`, broadcastChannelOptions)
+  selectedCurrencyChannel.addEventListener('message', (ev) => {
+    if (ev.data && ev.data.name === 'selected_currency' && ev.data.payload) {
+      log.info('setting selected currency', ev.data)
+      if (VuexStore.state.selectedCurrency !== ev.data.payload) {
+        VuexStore.dispatch('setSelectedCurrency', { selectedCurrency: ev.data.payload, origin: 'home' })
+      }
+    }
+  })
+
   // used for communication between popup and iframe
   const providerChangeChannel = new BroadcastChannel(`provider_change_${torus.instanceId}`, broadcastChannelOptions)
   providerChangeChannel.addEventListener('message', (ev) => {

src/store/state.js

@@ -50,6 +50,7 @@ const initialState = {
   selectedAddress: '',
   supportedNetworks: { ...SUPPORTED_NETWORK_TYPES },
   selectedCurrency: 'USD',
+  customCurrency: '',
   pastTransactions: [],
   paymentTx: [],
   theme: THEME_LIGHT_BLUE_NAME,