{{ t('dappProvider.requestFrom') }}
diff --git a/src/components/Confirm/ConfirmForm/ConfirmForm.vue b/src/components/Confirm/ConfirmForm/ConfirmForm.vue
index b4b4d152c..7faffca39 100644
--- a/src/components/Confirm/ConfirmForm/ConfirmForm.vue
+++ b/src/components/Confirm/ConfirmForm/ConfirmForm.vue
@@ -380,7 +380,7 @@
{{ t('dappProvider.requestFrom') }}
diff --git a/src/components/WalletHome/WalletConnectCard/WalletConnectCard.scss b/src/components/WalletHome/WalletConnectCard/WalletConnectCard.scss
deleted file mode 100644
index 740724e72..000000000
--- a/src/components/WalletHome/WalletConnectCard/WalletConnectCard.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.promotion-card {
- height: 159px;
- .torus-btn1--whitelabel {
- border: 1px solid var(--v-torusBrand1-base) !important;
- }
- &.isMobile {
- height: inherit;
- }
- &.fromEmbed {
- height: unset;
- padding-top: 12px;
- }
-}
-.more-details-container {
- margin-top: 16px;
- @media screen and (max-width: 600px) {
- margin-top: 16px;
- position: inherit;
- }
-}
-
-.copy-link {
- border: 1px solid var(--v-text_3-base);
- border-radius: 4px;
- height: 44px;
- cursor: pointer;
- font-size: 12px;
- font-weight: 500;
- &.theme--dark {
- border: 1px solid var(--v-text_3-base);
- }
-}
-
-.close-btn {
- position: absolute;
- top: 5px;
- right: 5px;
- color: #d3d3d4;
-}
diff --git a/src/components/WalletHome/WalletConnectCard/WalletConnectCard.vue b/src/components/WalletHome/WalletConnectCard/WalletConnectCard.vue
deleted file mode 100644
index 991d5a004..000000000
--- a/src/components/WalletHome/WalletConnectCard/WalletConnectCard.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
-
- {{ t('walletConnect.title') }}
-
-
- {{ t('walletConnect.caption') }}
-
-
-
-
+
+
-
-
-
-
-
- {{ !guideOn ? t('walletConnect.viewGuide') : t('walletConnect.hideGuide') }}
-
-
-
-
- $vuetify.icons.close
-
-
-
-
-
-
-
-
- $vuetify.icons.status
-
-
-
- {{ t('walletConnect.gotoApp') }}
- $vuetify.icons.link
-
-
- $vuetify.icons.scan
-
-
-
-
-
-
- {{ t('walletConnect.disconnect') }}
-
-
- {{ t('walletConnect.connect') }}
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/helpers/WalletConnect/index.js b/src/components/helpers/WalletConnect/index.js
deleted file mode 100644
index 51409b3eb..000000000
--- a/src/components/helpers/WalletConnect/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './WalletConnect.vue'
diff --git a/src/components/helpers/WalletConnectModal/WalletConnectModal.scss b/src/components/helpers/WalletConnectModal/WalletConnectModal.scss
new file mode 100644
index 000000000..ea3c08b36
--- /dev/null
+++ b/src/components/helpers/WalletConnectModal/WalletConnectModal.scss
@@ -0,0 +1,41 @@
+.v-btn.wallet-connect-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
+ background-color: var(--v-torusGray4-base);
+ color: #7f8fa4;
+ border-radius: 12px;
+ letter-spacing: 0.1px;
+ font-size: 12px;
+ font-weight: bold;
+ &.theme--dark {
+ background-color: var(--v-torusBlack2-base);
+ color: #5c6c7f;
+ }
+ &.wallet-connect-btn--success {
+ background-color: var(--v-success-lighten5);
+ color: var(--v-success-base);
+ }
+}
+
+.card-header {
+ box-sizing: border-box;
+ border-radius: 6px;
+ line-height: 0;
+
+ .close-btn {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ color: var(--v-text_1-base);
+ }
+}
+
+::v-deep .v-text-field.v-text-field--outlined.qr-field {
+ .v-input__slot {
+ padding-right: 0;
+
+ .v-input__append-inner {
+ margin-top: 0;
+ padding-left: 0;
+ border-left: 1px solid #d3d5e2;
+ }
+ }
+}
diff --git a/src/components/helpers/WalletConnectModal/WalletConnectModal.vue b/src/components/helpers/WalletConnectModal/WalletConnectModal.vue
new file mode 100644
index 000000000..a4beb6bc3
--- /dev/null
+++ b/src/components/helpers/WalletConnectModal/WalletConnectModal.vue
@@ -0,0 +1,346 @@
+
+
-
- {{ t('walletConnect.guideInfo') }}
-{{ t(wcErrorMsg) }}
-
-
- $vuetify.icons.close
-
-
-
+
+ ![]()
+ {{ t('walletConnect.connected') }}
+ $vuetify.icons.disconnect
+
+
+ 
+ {{ t('walletConnect.useWalletConnect') }}
+
+
+
+
+
+ 
+
+ $vuetify.icons.close
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/helpers/WalletConnectModal/index.js b/src/components/helpers/WalletConnectModal/index.js
new file mode 100644
index 000000000..ba1e5d3c2
--- /dev/null
+++ b/src/components/helpers/WalletConnectModal/index.js
@@ -0,0 +1 @@
+export { default } from './WalletConnectModal.vue'
diff --git a/src/containers/WalletHome/WalletHomeMain/WalletHomeMain.vue b/src/containers/WalletHome/WalletHomeMain/WalletHomeMain.vue
index ad458b78f..7d1156ca6 100644
--- a/src/containers/WalletHome/WalletHomeMain/WalletHomeMain.vue
+++ b/src/containers/WalletHome/WalletHomeMain/WalletHomeMain.vue
@@ -4,12 +4,12 @@
+ {{ t('walletConnect.useWalletConnect') }}
+
+ {{ headerText }}
+
+ ![Success]()
+
+ {{ t('walletConnect.disconnect') }}
+ $vuetify.icons.disconnect
+
+
+
+
+ {{ wcMessage ? t('walletConnect.youAllSet') : t('walletConnect.keepWalletOpen', [connectedAppName]) }}
+
+
+
+
+ {{ t('walletConnect.step', [1]) }}:
+ {{ t('walletConnect.step1Message') }}
+
+
+ {{ t('walletConnect.step', [2]) }}
+ {{ t('walletConnect.step2Message') }}
+
+
+ {{ t('walletConnect.step', [3]) }}
+ {{ t('walletConnect.step3Message') }}
+
+
+ {{ t('walletConnect.step', [4]) }}
+ {{ t('walletConnect.step4Message') }}
+
+
+
+
+
+ $vuetify.icons.scan
+ {{ t('walletConnect.qrScan') }}
+
+
+
+
+ {{ t(wcErrorMsg) }}
+
+
+
+
+
+
+
+ $vuetify.icons.close
+
+
+
{{ t('walletHome.walletHome') }}
-
+
@@ -94,40 +94,8 @@
-
-
-
!!x.customTokenId)
},
- apiStreamSupported() {
- return apiStreamSupported()
- },
},
mounted() {
this.setDateUpdated()
diff --git a/src/controllers/walletconnect/WalletConnectController.js b/src/controllers/walletconnect/WalletConnectController.js
index f7229946a..7e5fcc7cf 100644
--- a/src/controllers/walletconnect/WalletConnectController.js
+++ b/src/controllers/walletconnect/WalletConnectController.js
@@ -3,10 +3,14 @@ import WalletConnectV2Controller from './WalletConnectV2Controller'
class WalletConnectController {
constructor(options) {
+ const initState = {
+ sessionData: '',
+ message: '',
+ }
this.walletConnectorController = undefined
this.provider = options.provider
this.network = options.network
- this.store = new ObservableStore({})
+ this.store = new ObservableStore(initState)
this.selectedAddress = ''
}
@@ -45,8 +49,11 @@ class WalletConnectController {
store: this.store,
})
}
- this.walletConnectorController.setSelectedAddress(this.selectedAddress)
- await this.walletConnectorController.init(options)
+
+ if (this.walletConnectorController !== undefined) {
+ this.walletConnectorController.setSelectedAddress(this.selectedAddress)
+ await this.walletConnectorController.init(options)
+ }
}
setSelectedAddress(address) {
@@ -62,6 +69,10 @@ class WalletConnectController {
return this.walletConnectorController?.getPeerMetaURL()
}
+ getPeerMetaInfo() {
+ return this.walletConnectorController?.getPeerMetaInfo()
+ }
+
async disconnect() {
if (this.walletConnectorController) {
await this.walletConnectorController.disconnect()
diff --git a/src/controllers/walletconnect/WalletConnectV2Controller.js b/src/controllers/walletconnect/WalletConnectV2Controller.js
index 21d47a054..2385f711c 100644
--- a/src/controllers/walletconnect/WalletConnectV2Controller.js
+++ b/src/controllers/walletconnect/WalletConnectV2Controller.js
@@ -224,7 +224,7 @@ class WalletConnectV2Controller {
setStoreSession() {
if (this.sessionConfig.connectedTopic()) {
const sessionData = JSON.stringify(this.walletConnector.session.values)
- this.store.putState({
+ this.store.updateState({
sessionData,
})
} else {
@@ -232,6 +232,13 @@ class WalletConnectV2Controller {
}
}
+ setStoreMessage(message) {
+ this.store.updateState({
+ message,
+ })
+ setTimeout(() => this.store.updateState({ message: '' }), 8000)
+ }
+
onSessionRequest = async (requestEvent) => {
const { params, topic, id } = requestEvent
const { request, chainId } = params
@@ -296,6 +303,7 @@ class WalletConnectV2Controller {
topic,
response,
})
+ this.setStoreMessage('request_approved')
}
} catch (error) {
log.error(`FAILED REJECT REQUEST, ERROR ${error.message}`)
@@ -321,6 +329,15 @@ class WalletConnectV2Controller {
return this.walletConnector?.session?.values[0]?.peer?.metadata?.url
}
+ getPeerMetaInfo() {
+ const peerMetaURL = new URL(this.walletConnector?.session?.values[0]?.peer?.metadata?.url)
+ return {
+ name: peerMetaURL.hostname,
+ url: this.walletConnector?.session?.values[0]?.peer?.metadata?.url,
+ icon: this.walletConnector?.session?.values[0]?.peer?.metadata?.icons[0],
+ }
+ }
+
async disconnect() {
if (this.walletConnector && this.sessionConfig.connectedTopic()) {
await this.walletConnector.disconnect({
diff --git a/src/icons/DisconnectIcon.vue b/src/icons/DisconnectIcon.vue
index b102e867f..49f3db97a 100644
--- a/src/icons/DisconnectIcon.vue
+++ b/src/icons/DisconnectIcon.vue
@@ -1,10 +1,8 @@
-
+
{{ t('dappProvider.requestFrom') }}