feat: handle wallet connect session request expiry time (#2672)

* cleanup request handler params * add expiration logic to evm transaction popup * add expiration to siwe + sign message popup * fix expiry * cleanup * update locale * remove method from request info * fix empty expirytimetamp * fix empty description --------- Co-authored-by: Nicole O'Brien <[email protected]>
bloomwalletio · Jun 28, 2024 · 425fbd2 · 425fbd2
1 parent fabe7af
commit 425fbd2
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 142 deletions.
diff --git a/packages/desktop/components/popup/popups/EvmTransactionFromDappPopup.svelte b/packages/desktop/components/popup/popups/EvmTransactionFromDappPopup.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { DappVerification, RpcMethod } from '@auxiliary/wallet-connect/enums'
-    import { IConnectedDapp } from '@auxiliary/wallet-connect/interface'
-    import { CallbackParameters } from '@auxiliary/wallet-connect/types'
+    import { RpcMethod } from '@auxiliary/wallet-connect/enums'
+    import { WCRequestInfo } from '@auxiliary/wallet-connect/types'
     import { EvmTokenApprovalAlert } from '@components'
     import { EvmSmartContractAlert } from '@components/evm-transactions'
     import { IAccountState } from '@core/account'
@@ -18,7 +17,6 @@
     import { EvmTransactionData } from '@core/layer-2/types'
     import { ParsedSmartContractData } from '@core/layer-2/types/parsed-smart-contract-data.type'
     import { LedgerAppName } from '@core/ledger'
-    import { IEvmNetwork } from '@core/network'
     import { getNftByIdForAccount } from '@core/nfts/stores'
     import { checkActiveProfileAuth } from '@core/profile/actions'
     import { getActiveProfileId } from '@core/profile/stores'
@@ -32,16 +30,16 @@
     import { EvmTransactionDetails } from '@views/dashboard/send-flow/views/components'
     import { onDestroy, onMount } from 'svelte'
     import PopupTemplate from '../PopupTemplate.svelte'
+    import { RequestExpirationAlert } from '@views/dashboard/drawers/dapp-config/components'
+    import { time } from '@core/app/stores'
 
     export let preparedTransaction: EvmTransactionData
-    export let evmNetwork: IEvmNetwork
-    export let dapp: IConnectedDapp | undefined = undefined
-    export let verifiedState: DappVerification
+    export let requestInfo: WCRequestInfo
     export let method: RpcMethod.EthSendTransaction | RpcMethod.EthSignTransaction | RpcMethod.EthSendRawTransaction
-    export let callback: ((params: CallbackParameters) => void) | undefined = undefined
 
     let busy = false
 
+    const { dapp, responseCallback, verifiedState, evmNetwork, expiryTimestamp } = requestInfo
     let parsedData: ParsedSmartContractData | undefined
 
     let selectedGasSpeed = GasSpeed.Required
@@ -59,6 +57,8 @@
         token: getTokenFromSelectedAccountTokens(BASE_TOKEN_ID, evmNetwork.id),
         rawAmount: Converter.bigIntLikeToBigInt(preparedTransaction.value),
     }
+    $: hasExpired =
+        expiryTimestamp === undefined ? false : expiryTimestamp * MILLISECONDS_PER_SECOND - $time.getTime() <= 0
 
     setParsedContractData()
     function setParsedContractData(): void {
@@ -123,7 +123,7 @@
         const account = getSelectedAccount()
         const signedTransaction = await getSignedTransaction(account)
         if (method === RpcMethod.EthSignTransaction) {
-            callback && callback({ result: signedTransaction })
+            responseCallback && responseCallback({ result: signedTransaction })
             return
         }
 
@@ -134,7 +134,7 @@
             profileId,
             account
         )
-        callback && callback({ result: transactionHash })
+        responseCallback && responseCallback({ result: transactionHash })
     }
 
     async function onConfirmClick(): Promise<void> {
@@ -212,7 +212,7 @@
     continueButton={{
         text: localize(`popups.${localeKey}.action`),
         onClick: onConfirmClick,
-        disabled: busy,
+        disabled: hasExpired,
     }}
     {busy}
 >
@@ -224,6 +224,7 @@
                 showLink={false}
                 classes="bg-surface-1 dark:bg-surface-1-dark pb-4"
             />
+            <RequestExpirationAlert {expiryTimestamp} />
         {/if}
     </svelte:fragment>
     <div class="space-y-5">

diff --git a/packages/desktop/components/popup/popups/SignMessagePopup.svelte b/packages/desktop/components/popup/popups/SignMessagePopup.svelte
@@ -2,27 +2,29 @@
     import { localize } from '@core/i18n'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
     import { handleError } from '@core/error/handlers'
-    import { IConnectedDapp } from '@auxiliary/wallet-connect/interface'
-    import { CallbackParameters } from '@auxiliary/wallet-connect/types'
     import { signMessage } from '@core/wallet/actions'
     import { Alert, Table, Text } from '@bloomwalletio/ui'
     import { IAccountState } from '@core/account'
-    import { IEvmNetwork } from '@core/network'
     import { AccountLabel, DappInfo } from '@ui'
     import { checkActiveProfileAuth } from '@core/profile/actions'
     import { LedgerAppName } from '@core/ledger'
     import PopupTemplate from '../PopupTemplate.svelte'
-    import { DappVerification } from '@auxiliary/wallet-connect/enums'
+    import { WCRequestInfo } from '@auxiliary/wallet-connect/types'
+    import { MILLISECONDS_PER_SECOND } from '@core/utils'
+    import { time } from '@core/app/stores'
+    import { RequestExpirationAlert } from '@views/dashboard/drawers/dapp-config/components'
 
     export let message: string
     export let account: IAccountState
-    export let evmNetwork: IEvmNetwork
-    export let dapp: IConnectedDapp
-    export let verifiedState: DappVerification
-    export let callback: (params: CallbackParameters) => void
+    export let requestInfo: WCRequestInfo
+
+    const { dapp, responseCallback, verifiedState, evmNetwork, expiryTimestamp } = requestInfo
 
     let isBusy = false
 
+    $: hasExpired =
+        expiryTimestamp === undefined ? false : expiryTimestamp * MILLISECONDS_PER_SECOND - $time.getTime() <= 0
+
     async function onConfirmClick(): Promise<void> {
         try {
             await checkActiveProfileAuth(LedgerAppName.Ethereum)
@@ -35,7 +37,7 @@
             const result = await signMessage(message, evmNetwork.coinType, account)
             closePopup({ forceClose: true })
 
-            callback({ result })
+            responseCallback({ result })
             openPopup({
                 id: PopupId.SuccessfulDappInteraction,
                 props: {
@@ -64,16 +66,22 @@
     continueButton={{
         text: localize('popups.signMessage.action'),
         onClick: onConfirmClick,
+        disabled: hasExpired,
     }}
     busy={isBusy}
 >
-    <DappInfo
-        slot="banner"
-        metadata={dapp.metadata}
-        {verifiedState}
-        showLink={false}
-        classes="bg-surface-1 dark:bg-surface-1-dark pb-4"
-    />
+    <svelte:fragment slot="banner">
+        {#if dapp}
+            <DappInfo
+                slot="banner"
+                metadata={dapp.metadata}
+                {verifiedState}
+                showLink={false}
+                classes="bg-surface-1 dark:bg-surface-1-dark pb-4"
+            />
+            <RequestExpirationAlert {expiryTimestamp} />
+        {/if}
+    </svelte:fragment>
 
     <div class="space-y-5">
         <div>

diff --git a/packages/desktop/components/popup/popups/SiwePopup.svelte b/packages/desktop/components/popup/popups/SiwePopup.svelte
@@ -2,27 +2,29 @@
     import { localize } from '@core/i18n'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
     import { handleError } from '@core/error/handlers'
-    import { IConnectedDapp } from '@auxiliary/wallet-connect/interface'
-    import { CallbackParameters } from '@auxiliary/wallet-connect/types'
+    import { WCRequestInfo } from '@auxiliary/wallet-connect/types'
     import { signMessage } from '@core/wallet/actions'
     import { Table, Tabs, Text } from '@bloomwalletio/ui'
     import { IAccountState } from '@core/account'
-    import { IEvmNetwork, EvmNetworkId, getNameFromNetworkId } from '@core/network'
+    import { EvmNetworkId, getNameFromNetworkId } from '@core/network'
     import { AccountLabel, DappInfo, KeyValue, NetworkLabel } from '@ui'
     import { checkActiveProfileAuth } from '@core/profile/actions'
     import { LedgerAppName } from '@core/ledger'
     import PopupTemplate from '../PopupTemplate.svelte'
     import { ParsedMessage } from '@spruceid/siwe-parser'
-    import { DappVerification } from '@auxiliary/wallet-connect/enums'
     import { openUrlInBrowser } from '@core/app'
+    import { MILLISECONDS_PER_SECOND } from '@core/utils'
+    import { time } from '@core/app/stores'
+    import { RequestExpirationAlert } from '@views/dashboard/drawers/dapp-config/components'
 
     export let rawMessage: string
     export let siweObject: ParsedMessage
     export let account: IAccountState
-    export let evmNetwork: IEvmNetwork
-    export let dapp: IConnectedDapp
-    export let verifiedState: DappVerification
-    export let callback: (params: CallbackParameters) => void
+    export let requestInfo: WCRequestInfo
+
+    const { dapp, responseCallback, verifiedState, evmNetwork, expiryTimestamp } = requestInfo
+    $: hasExpired =
+        expiryTimestamp === undefined ? false : expiryTimestamp * MILLISECONDS_PER_SECOND - $time.getTime() <= 0
 
     enum Tab {
         Details = 'details',
@@ -53,7 +55,7 @@
             const result = await signMessage(rawMessage, evmNetwork.coinType, account)
             closePopup({ forceClose: true })
 
-            callback({ result })
+            responseCallback({ result })
             openPopup({
                 id: PopupId.SuccessfulDappInteraction,
                 props: {
@@ -82,16 +84,22 @@
     continueButton={{
         text: localize('popups.siwe.action'),
         onClick: onConfirmClick,
+        disabled: hasExpired,
     }}
     busy={isBusy}
 >
-    <DappInfo
-        slot="banner"
-        metadata={dapp.metadata}
-        {verifiedState}
-        showLink={false}
-        classes="bg-surface-1 dark:bg-surface-1-dark pb-4"
-    />
+    <svelte:fragment slot="banner">
+        {#if dapp}
+            <DappInfo
+                slot="banner"
+                metadata={dapp.metadata}
+                {verifiedState}
+                showLink={false}
+                classes="bg-surface-1 dark:bg-surface-1-dark pb-4"
+            />
+            <RequestExpirationAlert {expiryTimestamp} />
+        {/if}
+    </svelte:fragment>
 
     <div class="flex flex-col gap-5">
         {#if siweObject.statement}

diff --git a/...op/views/dashboard/drawers/dapp-config/components/ConnectionRequestExpirationAlert.svelte b/...op/views/dashboard/drawers/dapp-config/components/ConnectionRequestExpirationAlert.svelte
diff --git a/...ages/desktop/views/dashboard/drawers/dapp-config/components/RequestExpirationAlert.svelte b/...ages/desktop/views/dashboard/drawers/dapp-config/components/RequestExpirationAlert.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { Text } from '@bloomwalletio/ui'
+    import { time } from '@core/app/stores'
+    import { MILLISECONDS_PER_SECOND, SECONDS_PER_MINUTE } from '@core/utils/constants'
+    import { localize } from '@core/i18n'
+    import { getTimeDifference } from '@core/utils'
+
+    export let expiryTimestamp: number | undefined
+
+    const localeKey = 'views.dashboard.drawers.dapps.confirmConnection'
+</script>
+
+{#if expiryTimestamp !== undefined}
+    {@const expiryTimeDiff = expiryTimestamp * MILLISECONDS_PER_SECOND - $time.getTime()}
+    {#if expiryTimeDiff <= 0}
+        <div class="w-full flex gap-4 px-6 py-1 bg-danger/10">
+            <Text type="sm" textColor="danger" class="flex items-center">{localize(`${localeKey}.expired`)}</Text>
+        </div>
+    {:else}
+        <div
+            class="
+                w-full flex justify-between gap-4 px-6 py-1
+                {expiryTimeDiff < SECONDS_PER_MINUTE ? 'bg-warning/10' : 'bg-neutral/10'}
+            "
+        >
+            <Text
+                type="sm"
+                class="flex items-center"
+                textColor={expiryTimeDiff < SECONDS_PER_MINUTE ? 'warning' : 'primary'}
+            >
+                {localize(`${localeKey}.expiresIn`)}
+                {getTimeDifference(new Date(expiryTimestamp * MILLISECONDS_PER_SECOND), $time, true)}
+            </Text>
+        </div>
+    {/if}
+{/if}
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/index.ts b/packages/desktop/views/dashboard/drawers/dapp-config/components/index.ts
@@ -1,5 +1,5 @@
 export { default as AccountSelection } from './AccountSelection.svelte'
-export { default as ConnectionRequestExpirationAlert } from './ConnectionRequestExpirationAlert.svelte'
+export { default as RequestExpirationAlert } from './RequestExpirationAlert.svelte'
 export { default as ConnectionSummary } from './ConnectionSummary.svelte'
 export { default as DappCard } from './DappCard.svelte'
 export { default as EditSelectionDrawer } from './EditSelectionDrawer.svelte'

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectionRequest.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectionRequest.svelte
@@ -5,7 +5,7 @@
     import { Router } from '@core/router'
     import { DrawerTemplate } from '@components'
     import { closeDrawer } from '@desktop/auxiliary/drawer'
-    import { ConnectionRequestExpirationAlert, SecurityWarning, UnsupportedDappHint } from '../components'
+    import { RequestExpirationAlert, SecurityWarning, UnsupportedDappHint } from '../components'
     import { getAllNetworkIds } from '@core/network'
     import { ALL_SUPPORTED_METHODS } from '@auxiliary/wallet-connect/constants'
     import { DappVerification, RpcMethod } from '@auxiliary/wallet-connect/enums'
@@ -49,7 +49,9 @@
             return false
         }
 
-        const supportsAnyNetwork = optionalNetworks.some((networkId) => supportedNetworksByProfile.includes(networkId))
+        const supportsAnyNetwork = [...requiredNetworks, ...optionalNetworks].some((networkId) =>
+            supportedNetworksByProfile.includes(networkId)
+        )
         if (!supportsAnyNetwork) {
             return false
         }
@@ -93,7 +95,7 @@
     <div class="w-full h-full flex flex-col justify-between">
         <div>
             <DappInfo metadata={dappMetadata} {verifiedState} />
-            <ConnectionRequestExpirationAlert {expiryTimestamp} />
+            <RequestExpirationAlert {expiryTimestamp} />
         </div>
         <div class="flex-grow overflow-hidden">
             <div class="h-full overflow-scroll flex flex-col gap-5 p-6">

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectionRequestDrawer.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/views/ConnectionRequestDrawer.svelte
@@ -102,7 +102,7 @@
             items={[
                 {
                     key: localize('general.description'),
-                    value: dappMetadata.description,
+                    value: dappMetadata.description || undefined,
                 },
             ]}
             orientation="vertical"

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/views/SessionProposalFlow.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/views/SessionProposalFlow.svelte
@@ -81,7 +81,7 @@
         items={[
             {
                 key: localize('general.description'),
-                value: dappMetadata.description,
+                value: dappMetadata.description || undefined,
             },
         ]}
         orientation="vertical"

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/views/SessionProposalFlowShared.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/views/SessionProposalFlowShared.svelte
@@ -22,7 +22,7 @@
         ConnectionSummary,
         NetworkSelection,
         PermissionSelection,
-        ConnectionRequestExpirationAlert,
+        RequestExpirationAlert,
     } from '../components'
     import { DappConfigRoute } from '../dapp-config-route.enum'
     import { CoreTypes, ProposalTypes } from '@walletconnect/types'
@@ -104,7 +104,7 @@
     <div class="w-full h-full flex flex-col space-y-6 overflow-hidden">
         <div>
             <DappInfo metadata={dappMetadata} {verifiedState} />
-            <ConnectionRequestExpirationAlert {expiryTimestamp} />
+            <RequestExpirationAlert {expiryTimestamp} />
         </div>
 
         <div class="px-6 flex-grow overflow-hidden">