Skip to content

Commit

Permalink
update connectionrequest view
Browse files Browse the repository at this point in the history
  • Loading branch information
MarkNerdi committed May 24, 2024
1 parent ac4dd49 commit c87e570
Show file tree
Hide file tree
Showing 4 changed files with 211 additions and 146 deletions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<script lang="ts">
import { Alert, Table, TableRow, Text } from '@bloomwalletio/ui'
import { localize } from '@core/i18n'
import { ProposalTypes } from '@walletconnect/types'
import { NetworkAvatarGroup } from '@ui'
import { ALL_SUPPORTED_METHODS } from '@auxiliary/wallet-connect/constants'
import { SupportedNetworkId, getAllNetworkIds } from '@core/network'
import { RpcMethod } from '@auxiliary/wallet-connect/enums'
export let requiredNamespaces: ProposalTypes.RequiredNamespaces
export let optionalNamespaces: ProposalTypes.RequiredNamespaces
export let requiredNetworks: string[] = []
export let optionalNetworks: string[] = []
export let requiredMethods: string[] = []
const MAX_UNSUPPORTED_METHODS = 3
const localeKey = 'views.dashboard.drawers.dapps.connectionRequest'
Expand All @@ -19,12 +19,12 @@
unsupportedRequiredNetworks,
otherProfileSupportsRequiredNetworks,
supportsAnyNetwork,
} = getNetworkRequirementsSummary(requiredNamespaces, optionalNamespaces))
$: unsupportedMethods = getUnsupportedMethods(requiredNamespaces)
} = getNetworkRequirementsSummary(requiredNetworks, optionalNetworks))
$: unsupportedMethods = getUnsupportedMethods(requiredMethods as RpcMethod[])
function getNetworkRequirementsSummary(
_requiredNamespaces: ProposalTypes.RequiredNamespaces,
_optionalNamespaces: ProposalTypes.RequiredNamespaces
requiredNetworksByDapp: string[],
optionalMethods: string[]
): {
supportedNetworksByProfile: string[]
supportedNetworksByOtherProfile: string[]
Expand All @@ -34,15 +34,7 @@
} {
const supportedNetworksByProfile = getAllNetworkIds()
const allSupportedNetworksByWallet: string[] = Object.values(SupportedNetworkId)
const requiredNetworksByDapp: string[] = Object.values(_requiredNamespaces)
.flatMap(({ chains }) => chains)
.filter(Boolean)
const supportedNetworksByDapp = [
...requiredNetworksByDapp,
...Object.values(_optionalNamespaces)
.flatMap(({ chains }) => chains)
.filter(Boolean),
] as string[]
const supportedNetworksByDapp = [...requiredNetworksByDapp, ...optionalMethods] as string[]
const unsupportedRequiredNetworks = requiredNetworksByDapp.filter(
(networkId) => !supportedNetworksByProfile.includes(networkId)
Expand All @@ -67,10 +59,8 @@
}
}
function getUnsupportedMethods(_requiredNamespaces: ProposalTypes.RequiredNamespaces): RpcMethod[] {
const requiredMethods = Object.values(_requiredNamespaces).flatMap(({ methods }) => methods) as RpcMethod[]
return requiredMethods.filter((method) => !ALL_SUPPORTED_METHODS.includes(method))
function getUnsupportedMethods(_requiredMethods: RpcMethod[]): RpcMethod[] {
return _requiredMethods.filter((method) => !ALL_SUPPORTED_METHODS.includes(method))
}
</script>

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<script lang="ts">
import { Button, Table, TableRow, Text } from '@bloomwalletio/ui'
import { DappInfo } from '@ui'
import { localize } from '@core/i18n'
import { Router } from '@core/router'
import { DrawerTemplate } from '@components'
import { closeDrawer } from '@desktop/auxiliary/drawer'
import { SecurityWarning, UnsupportedDappHint } from '../components'
import { getAllNetworkIds } from '@core/network'
import { ALL_SUPPORTED_METHODS } from '@auxiliary/wallet-connect/constants'
import { rejectConnectionRequest } from '@auxiliary/wallet-connect/utils'
import { DappVerification, RpcMethod } from '@auxiliary/wallet-connect/enums'
import { Web3WalletTypes } from '@walletconnect/web3wallet'
export let drawerRouter: Router<unknown>
export let dappMetadata: Web3WalletTypes.Metadata
export let verifiedState: DappVerification
export let requiredNetworks: string[]
export let optionalNetworks: string[]
export let requiredMethods: RpcMethod[]
const localeKey = 'views.dashboard.drawers.dapps.connectionRequest'
let acceptedInsecureConnection = false
let flashingCheckbox = false
const fulfillsRequirements = doesFulfillsRequirements()
function doesFulfillsRequirements(): boolean {
const supportedNetworksByDapp = [...requiredNetworks, ...optionalNetworks]
return (
doesFulfillNetworkRequirements(requiredNetworks, supportedNetworksByDapp) &&
doesFulfillMethodRequirements(requiredMethods)
)
}
function doesFulfillNetworkRequirements(requiredNetworks: string[], optionalNetworks: string[]): boolean {
const supportedNetworksByProfile = getAllNetworkIds()
const supportsAllRequiredNetworks = requiredNetworks.every((networkId) =>
supportedNetworksByProfile.includes(networkId)
)
if (!supportsAllRequiredNetworks) {
return false
}
const supportsAnyNetwork = optionalNetworks.some((networkId) => supportedNetworksByProfile.includes(networkId))
if (!supportsAnyNetwork) {
return false
}
return true
}
function doesFulfillMethodRequirements(requiredMethods: RpcMethod[]): boolean {
return requiredMethods.every((method) => ALL_SUPPORTED_METHODS.includes(method))
}
function onRejectClick(): void {
rejectConnectionRequest()
closeDrawer()
}
function onContinueClick(): void {
if (verifiedState !== DappVerification.Valid && !acceptedInsecureConnection) {
flashingCheckbox = true
setTimeout(() => {
flashingCheckbox = false
}, 1500)
return
}
drawerRouter.next()
}
</script>

<DrawerTemplate title={localize(`${localeKey}.title`)} {drawerRouter} onBack={rejectConnectionRequest}>
<div class="w-full h-full flex flex-col justify-between">
<DappInfo metadata={dappMetadata} {verifiedState} />
<div class="flex-grow overflow-hidden">
<div class="h-full overflow-scroll flex flex-col gap-5 p-6">
<Table
items={[
{
key: localize('general.description'),
value: dappMetadata.description,
},
]}
orientation="vertical"
>
<TableRow item={{ key: localize('general.verified') }} orientation="vertical">
<div slot="boundValue">
<Text textColor={verifiedState === DappVerification.Valid ? 'success' : 'danger'}
>{localize(`general.${verifiedState === DappVerification.Valid ? 'yes' : 'no'}`)}</Text
>
</div>
</TableRow>
</Table>
</div>
</div>
{#if !fulfillsRequirements}
<div class="px-6">
<UnsupportedDappHint {requiredNetworks} {optionalNetworks} {requiredMethods} />
</div>
{:else if verifiedState !== DappVerification.Valid}
<div class="px-6">
<SecurityWarning {verifiedState} {flashingCheckbox} bind:acceptedInsecureConnection />
</div>
{/if}
</div>
<div class="flex flex-row gap-2" slot="footer">
<Button
width="full"
variant="outlined"
on:click={onRejectClick}
text={localize(`actions.${fulfillsRequirements ? 'reject' : 'cancel'}`)}
/>
{#if fulfillsRequirements && verifiedState !== DappVerification.Scam}
<Button width="full" on:click={onContinueClick} text={localize('actions.continue')} />
{/if}
</div>
</DrawerTemplate>
Loading

0 comments on commit c87e570

Please sign in to comment.