From ba0e496c9a164f3f08eea7d82d3c18d2ef8a4fd3 Mon Sep 17 00:00:00 2001 From: IsaccoSordo Date: Mon, 13 Jan 2025 16:50:19 +0100 Subject: [PATCH] fix: revert --- .../beacon-dapp/src/dapp-client/DAppClient.ts | 124 ++-- packages/beacon-dapp/src/events.ts | 175 +++-- .../beacon-ui/src/components/alert/index.tsx | 4 +- .../src/components/pair-other/pair-other.tsx | 83 +-- packages/beacon-ui/src/ui/alert/common.ts | 25 +- .../alert/components/pairing-alert/index.tsx | 631 +++++++++--------- .../src/ui/alert/hooks/useWallets.tsx | 2 +- 7 files changed, 503 insertions(+), 541 deletions(-) diff --git a/packages/beacon-dapp/src/dapp-client/DAppClient.ts b/packages/beacon-dapp/src/dapp-client/DAppClient.ts index 9ded176fa..d3aa6af52 100644 --- a/packages/beacon-dapp/src/dapp-client/DAppClient.ts +++ b/packages/beacon-dapp/src/dapp-client/DAppClient.ts @@ -342,8 +342,8 @@ export class DAppClient extends Client { connectionInfo.origin === Origin.P2P ? this.p2pTransport : connectionInfo.origin === Origin.WALLETCONNECT - ? this.walletConnectTransport - : this.postMessageTransport ?? (await this.transport) + ? this.walletConnectTransport + : this.postMessageTransport ?? (await this.transport) if (relevantTransport) { const peers: ExtendedPeerInfo[] = await relevantTransport.getPeers() @@ -440,8 +440,8 @@ export class DAppClient extends Client { res.status === 426 ? console.error('Metrics are no longer supported for this version, please upgrade.') : console.warn( - 'Network error encountered. Metrics sharing have been automatically disabled.' - ) + 'Network error encountered. Metrics sharing have been automatically disabled.' + ) } this.enableMetrics = res.ok this.storage.set(StorageKey.ENABLE_METRICS, res.ok) @@ -785,14 +785,20 @@ export class DAppClient extends Client { console.error(error) }) + await p2pTransport.connect() + + const serializer = new Serializer() + const p2pPeerInfo = await serializer.serialize(await p2pTransport.getPairingRequestInfo()) + const walletConnectPeerInfo = (await walletConnectTransport.getPairingRequestInfo()).uri + const postmessagePeerInfo = await serializer.serialize( + await postMessageTransport.getPairingRequestInfo() + ) + this.events .emit(BeaconEvent.PAIR_INIT, { - p2pPeerInfo: () => { - p2pTransport.connect().then().catch(console.error) - return p2pTransport.getPairingRequestInfo() - }, - postmessagePeerInfo: () => postMessageTransport.getPairingRequestInfo(), - walletConnectPeerInfo: () => walletConnectTransport.getPairingRequestInfo(), + p2pPeerInfo, + postmessagePeerInfo, + walletConnectPeerInfo, networkType: this.network.type, abortedHandler: async () => { logger.log('init', 'ABORTED') @@ -808,7 +814,7 @@ export class DAppClient extends Client { this.postMessageTransport = this.walletConnectTransport = this.p2pTransport = - undefined + undefined this._activeAccount.isResolved() && this.clearActiveAccount() this._initPromise = undefined }, @@ -1374,9 +1380,9 @@ export class DAppClient extends Client { logger.time(true, logId) const res = (await this.checkMakeRequest()) ? this.makeRequestV3< - BlockchainRequestV3, - BeaconMessageWrapper> - >(request) + BlockchainRequestV3, + BeaconMessageWrapper> + >(request) : this.makeRequestBC(request) res.catch(async (requestError: ErrorResponse) => { @@ -1588,13 +1594,13 @@ export class DAppClient extends Client { const res = (await this.checkMakeRequest()) ? this.makeRequest< - SimulatedProofOfEventChallengeRequest, - SimulatedProofOfEventChallengeResponse - >(request) + SimulatedProofOfEventChallengeRequest, + SimulatedProofOfEventChallengeResponse + >(request) : this.makeRequestBC< - SimulatedProofOfEventChallengeRequest, - SimulatedProofOfEventChallengeResponse - >(request) + SimulatedProofOfEventChallengeRequest, + SimulatedProofOfEventChallengeResponse + >(request) res.catch(async (requestError: ErrorResponse) => { requestError.errorType === BeaconErrorType.ABORTED_ERROR @@ -2058,50 +2064,50 @@ export class DAppClient extends Client { request: BeaconRequestInputMessage, response: | { - account: AccountInfo - output: PermissionResponseOutput - blockExplorer: BlockExplorer - connectionContext: ConnectionContext - walletInfo: WalletInfo - } + account: AccountInfo + output: PermissionResponseOutput + blockExplorer: BlockExplorer + connectionContext: ConnectionContext + walletInfo: WalletInfo + } | { - account: AccountInfo - output: ProofOfEventChallengeResponse - blockExplorer: BlockExplorer - connectionContext: ConnectionContext - walletInfo: WalletInfo - } + account: AccountInfo + output: ProofOfEventChallengeResponse + blockExplorer: BlockExplorer + connectionContext: ConnectionContext + walletInfo: WalletInfo + } | { - account: AccountInfo - output: SimulatedProofOfEventChallengeResponse - blockExplorer: BlockExplorer - connectionContext: ConnectionContext - walletInfo: WalletInfo - } + account: AccountInfo + output: SimulatedProofOfEventChallengeResponse + blockExplorer: BlockExplorer + connectionContext: ConnectionContext + walletInfo: WalletInfo + } | { - account: AccountInfo - output: OperationResponseOutput - blockExplorer: BlockExplorer - connectionContext: ConnectionContext - walletInfo: WalletInfo - } + account: AccountInfo + output: OperationResponseOutput + blockExplorer: BlockExplorer + connectionContext: ConnectionContext + walletInfo: WalletInfo + } | { - output: SignPayloadResponseOutput - connectionContext: ConnectionContext - walletInfo: WalletInfo - } + output: SignPayloadResponseOutput + connectionContext: ConnectionContext + walletInfo: WalletInfo + } // | { // output: EncryptPayloadResponseOutput // connectionContext: ConnectionContext // walletInfo: WalletInfo // } | { - network: Network - output: BroadcastResponseOutput - blockExplorer: BlockExplorer - connectionContext: ConnectionContext - walletInfo: WalletInfo - } + network: Network + output: BroadcastResponseOutput + blockExplorer: BlockExplorer + connectionContext: ConnectionContext + walletInfo: WalletInfo + } ): Promise { this.events .emit(messageEvents[request.type].success, response) @@ -2342,7 +2348,7 @@ export class DAppClient extends Client { logger.log('makeRequest', 'sending message', request) try { - ; (await this.transport).send(payload, peer) + ;(await this.transport).send(payload, peer) if ( request.type !== BeaconMessageType.PermissionRequest || (this._activeAccount.isResolved() && (await this._activeAccount.promise)) @@ -2458,7 +2464,7 @@ export class DAppClient extends Client { logger.log('makeRequest', 'sending message', request) try { - ; (await this.transport).send(payload, peer) + ;(await this.transport).send(payload, peer) if ( request.message.type !== BeaconMessageType.PermissionRequest || (this._activeAccount.isResolved() && (await this._activeAccount.promise)) @@ -2505,9 +2511,9 @@ export class DAppClient extends Client { request: Optional ): Promise< | { - message: U - connectionInfo: ConnectionContext - } + message: U + connectionInfo: ConnectionContext + } | undefined > { if (!this._transport.isResolved()) { diff --git a/packages/beacon-dapp/src/events.ts b/packages/beacon-dapp/src/events.ts index b94ecdc18..f65316f8a 100644 --- a/packages/beacon-dapp/src/events.ts +++ b/packages/beacon-dapp/src/events.ts @@ -11,9 +11,7 @@ import { import { BeaconErrorType, ExtendedPostMessagePairingResponse, - PostMessagePairingRequest, ExtendedP2PPairingResponse, - P2PPairingRequest, AccountInfo, ErrorResponse, PermissionResponseOutput, @@ -26,7 +24,6 @@ import { AcknowledgeResponse, WalletInfo, ExtendedWalletConnectPairingResponse, - WalletConnectPairingRequest, AnalyticsInterface, ProofOfEventChallengeResponseOutput, SimulatedProofOfEventChallengeResponseOutput @@ -199,9 +196,9 @@ export interface BeaconEventType { [BeaconEvent.SHOW_PREPARE]: { walletInfo?: WalletInfo } [BeaconEvent.HIDE_UI]: ('alert' | 'toast')[] | undefined [BeaconEvent.PAIR_INIT]: { - p2pPeerInfo: () => Promise - postmessagePeerInfo: () => Promise - walletConnectPeerInfo: () => Promise + p2pPeerInfo: string + postmessagePeerInfo: string + walletConnectPeerInfo: string networkType: NetworkType abortedHandler?(): void disclaimerText?: string @@ -209,9 +206,9 @@ export interface BeaconEventType { featuredWallets?: string[] } [BeaconEvent.PAIR_SUCCESS]: - | ExtendedPostMessagePairingResponse - | ExtendedP2PPairingResponse - | ExtendedWalletConnectPairingResponse + | ExtendedPostMessagePairingResponse + | ExtendedP2PPairingResponse + | ExtendedWalletConnectPairingResponse [BeaconEvent.CHANNEL_CLOSED]: string [BeaconEvent.INTERNAL_ERROR]: { text: string; buttons?: AlertButton[] } [BeaconEvent.UNKNOWN]: undefined @@ -520,22 +517,22 @@ const showProofOfEventChallengeSuccessAlert = async ( state: 'finished', actions: output.isAccepted ? [ - { - text: `Payload hash: ${output.payloadHash}`, - actionText: 'Copy to clipboard', - actionCallback: async (): Promise => { - navigator.clipboard.writeText(output.payloadHash).then( - () => { - logger.log('showSignSuccessAlert', 'Copying to clipboard was successful!') - }, - (err) => { - logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err) - } - ) - await closeToast() + { + text: `Payload hash: ${output.payloadHash}`, + actionText: 'Copy to clipboard', + actionCallback: async (): Promise => { + navigator.clipboard.writeText(output.payloadHash).then( + () => { + logger.log('showSignSuccessAlert', 'Copying to clipboard was successful!') + }, + (err) => { + logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err) + } + ) + await closeToast() + } } - } - ] + ] : [] }) } @@ -554,22 +551,22 @@ const showSimulatedProofOfEventChallengeSuccessAlert = async ( state: 'finished', actions: !output.errorMessage ? [ - { - text: 'Operation list', - actionText: 'Copy to clipboard', - actionCallback: async (): Promise => { - navigator.clipboard.writeText(output.operationsList).then( - () => { - logger.log('showSignSuccessAlert', 'Copying to clipboard was successful!') - }, - (err) => { - logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err) - } - ) - await closeToast() + { + text: 'Operation list', + actionText: 'Copy to clipboard', + actionCallback: async (): Promise => { + navigator.clipboard.writeText(output.operationsList).then( + () => { + logger.log('showSignSuccessAlert', 'Copying to clipboard was successful!') + }, + (err) => { + logger.error('showSignSuccessAlert', 'Could not copy text to clipboard: ', err) + } + ) + await closeToast() + } } - } - ] + ] : [{ text: 'Error message', actionText: output.errorMessage }] }) } @@ -775,56 +772,56 @@ export class BeaconEventHandler { private readonly callbackMap: { [key in BeaconEvent]: BeaconEventHandlerFunction[] // TODO: Fix type } = { - [BeaconEvent.PERMISSION_REQUEST_SENT]: [defaultEventCallbacks.PERMISSION_REQUEST_SENT], - [BeaconEvent.PERMISSION_REQUEST_SUCCESS]: [defaultEventCallbacks.PERMISSION_REQUEST_SUCCESS], - [BeaconEvent.PERMISSION_REQUEST_ERROR]: [defaultEventCallbacks.PERMISSION_REQUEST_ERROR], - [BeaconEvent.PROOF_OF_EVENT_CHALLENGE_REQUEST_SENT]: [ - defaultEventCallbacks.PERMISSION_REQUEST_SENT - ], - [BeaconEvent.PROOF_OF_EVENT_CHALLENGE_REQUEST_SUCCESS]: [ - defaultEventCallbacks.PROOF_OF_EVENT_CHALLENGE_REQUEST_SUCCESS - ], - [BeaconEvent.PROOF_OF_EVENT_CHALLENGE_REQUEST_ERROR]: [ - defaultEventCallbacks.PROOF_OF_EVENT_CHALLENGE_REQUEST_ERROR - ], - [BeaconEvent.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_SENT]: [ - defaultEventCallbacks.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_SENT - ], - [BeaconEvent.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_SUCCESS]: [ - defaultEventCallbacks.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_SUCCESS - ], - [BeaconEvent.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_ERROR]: [ - defaultEventCallbacks.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_ERROR - ], - [BeaconEvent.OPERATION_REQUEST_SENT]: [defaultEventCallbacks.OPERATION_REQUEST_SENT], - [BeaconEvent.OPERATION_REQUEST_SUCCESS]: [defaultEventCallbacks.OPERATION_REQUEST_SUCCESS], - [BeaconEvent.OPERATION_REQUEST_ERROR]: [defaultEventCallbacks.OPERATION_REQUEST_ERROR], - [BeaconEvent.SIGN_REQUEST_SENT]: [defaultEventCallbacks.SIGN_REQUEST_SENT], - [BeaconEvent.SIGN_REQUEST_SUCCESS]: [defaultEventCallbacks.SIGN_REQUEST_SUCCESS], - [BeaconEvent.SIGN_REQUEST_ERROR]: [defaultEventCallbacks.SIGN_REQUEST_ERROR], - // TODO: ENCRYPTION - // [BeaconEvent.ENCRYPT_REQUEST_SENT]: [defaultEventCallbacks.ENCRYPT_REQUEST_SENT], - // [BeaconEvent.ENCRYPT_REQUEST_SUCCESS]: [defaultEventCallbacks.ENCRYPT_REQUEST_SUCCESS], - // [BeaconEvent.ENCRYPT_REQUEST_ERROR]: [defaultEventCallbacks.ENCRYPT_REQUEST_ERROR], - [BeaconEvent.BROADCAST_REQUEST_SENT]: [defaultEventCallbacks.BROADCAST_REQUEST_SENT], - [BeaconEvent.BROADCAST_REQUEST_SUCCESS]: [defaultEventCallbacks.BROADCAST_REQUEST_SUCCESS], - [BeaconEvent.BROADCAST_REQUEST_ERROR]: [defaultEventCallbacks.BROADCAST_REQUEST_ERROR], - [BeaconEvent.ACKNOWLEDGE_RECEIVED]: [defaultEventCallbacks.ACKNOWLEDGE_RECEIVED], - [BeaconEvent.LOCAL_RATE_LIMIT_REACHED]: [defaultEventCallbacks.LOCAL_RATE_LIMIT_REACHED], - [BeaconEvent.NO_PERMISSIONS]: [defaultEventCallbacks.NO_PERMISSIONS], - [BeaconEvent.ACTIVE_ACCOUNT_SET]: [defaultEventCallbacks.ACTIVE_ACCOUNT_SET], - [BeaconEvent.ACTIVE_TRANSPORT_SET]: [defaultEventCallbacks.ACTIVE_TRANSPORT_SET], - [BeaconEvent.INVALID_ACTIVE_ACCOUNT_STATE]: [ - defaultEventCallbacks.INVALID_ACTIVE_ACCOUNT_STATE - ], - [BeaconEvent.SHOW_PREPARE]: [defaultEventCallbacks.SHOW_PREPARE], - [BeaconEvent.HIDE_UI]: [defaultEventCallbacks.HIDE_UI], - [BeaconEvent.PAIR_INIT]: [defaultEventCallbacks.PAIR_INIT], - [BeaconEvent.PAIR_SUCCESS]: [defaultEventCallbacks.PAIR_SUCCESS], - [BeaconEvent.CHANNEL_CLOSED]: [defaultEventCallbacks.CHANNEL_CLOSED], - [BeaconEvent.INTERNAL_ERROR]: [defaultEventCallbacks.INTERNAL_ERROR], - [BeaconEvent.UNKNOWN]: [defaultEventCallbacks.UNKNOWN] - } + [BeaconEvent.PERMISSION_REQUEST_SENT]: [defaultEventCallbacks.PERMISSION_REQUEST_SENT], + [BeaconEvent.PERMISSION_REQUEST_SUCCESS]: [defaultEventCallbacks.PERMISSION_REQUEST_SUCCESS], + [BeaconEvent.PERMISSION_REQUEST_ERROR]: [defaultEventCallbacks.PERMISSION_REQUEST_ERROR], + [BeaconEvent.PROOF_OF_EVENT_CHALLENGE_REQUEST_SENT]: [ + defaultEventCallbacks.PERMISSION_REQUEST_SENT + ], + [BeaconEvent.PROOF_OF_EVENT_CHALLENGE_REQUEST_SUCCESS]: [ + defaultEventCallbacks.PROOF_OF_EVENT_CHALLENGE_REQUEST_SUCCESS + ], + [BeaconEvent.PROOF_OF_EVENT_CHALLENGE_REQUEST_ERROR]: [ + defaultEventCallbacks.PROOF_OF_EVENT_CHALLENGE_REQUEST_ERROR + ], + [BeaconEvent.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_SENT]: [ + defaultEventCallbacks.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_SENT + ], + [BeaconEvent.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_SUCCESS]: [ + defaultEventCallbacks.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_SUCCESS + ], + [BeaconEvent.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_ERROR]: [ + defaultEventCallbacks.SIMULATED_PROOF_OF_EVENT_CHALLENGE_REQUEST_ERROR + ], + [BeaconEvent.OPERATION_REQUEST_SENT]: [defaultEventCallbacks.OPERATION_REQUEST_SENT], + [BeaconEvent.OPERATION_REQUEST_SUCCESS]: [defaultEventCallbacks.OPERATION_REQUEST_SUCCESS], + [BeaconEvent.OPERATION_REQUEST_ERROR]: [defaultEventCallbacks.OPERATION_REQUEST_ERROR], + [BeaconEvent.SIGN_REQUEST_SENT]: [defaultEventCallbacks.SIGN_REQUEST_SENT], + [BeaconEvent.SIGN_REQUEST_SUCCESS]: [defaultEventCallbacks.SIGN_REQUEST_SUCCESS], + [BeaconEvent.SIGN_REQUEST_ERROR]: [defaultEventCallbacks.SIGN_REQUEST_ERROR], + // TODO: ENCRYPTION + // [BeaconEvent.ENCRYPT_REQUEST_SENT]: [defaultEventCallbacks.ENCRYPT_REQUEST_SENT], + // [BeaconEvent.ENCRYPT_REQUEST_SUCCESS]: [defaultEventCallbacks.ENCRYPT_REQUEST_SUCCESS], + // [BeaconEvent.ENCRYPT_REQUEST_ERROR]: [defaultEventCallbacks.ENCRYPT_REQUEST_ERROR], + [BeaconEvent.BROADCAST_REQUEST_SENT]: [defaultEventCallbacks.BROADCAST_REQUEST_SENT], + [BeaconEvent.BROADCAST_REQUEST_SUCCESS]: [defaultEventCallbacks.BROADCAST_REQUEST_SUCCESS], + [BeaconEvent.BROADCAST_REQUEST_ERROR]: [defaultEventCallbacks.BROADCAST_REQUEST_ERROR], + [BeaconEvent.ACKNOWLEDGE_RECEIVED]: [defaultEventCallbacks.ACKNOWLEDGE_RECEIVED], + [BeaconEvent.LOCAL_RATE_LIMIT_REACHED]: [defaultEventCallbacks.LOCAL_RATE_LIMIT_REACHED], + [BeaconEvent.NO_PERMISSIONS]: [defaultEventCallbacks.NO_PERMISSIONS], + [BeaconEvent.ACTIVE_ACCOUNT_SET]: [defaultEventCallbacks.ACTIVE_ACCOUNT_SET], + [BeaconEvent.ACTIVE_TRANSPORT_SET]: [defaultEventCallbacks.ACTIVE_TRANSPORT_SET], + [BeaconEvent.INVALID_ACTIVE_ACCOUNT_STATE]: [ + defaultEventCallbacks.INVALID_ACTIVE_ACCOUNT_STATE + ], + [BeaconEvent.SHOW_PREPARE]: [defaultEventCallbacks.SHOW_PREPARE], + [BeaconEvent.HIDE_UI]: [defaultEventCallbacks.HIDE_UI], + [BeaconEvent.PAIR_INIT]: [defaultEventCallbacks.PAIR_INIT], + [BeaconEvent.PAIR_SUCCESS]: [defaultEventCallbacks.PAIR_SUCCESS], + [BeaconEvent.CHANNEL_CLOSED]: [defaultEventCallbacks.CHANNEL_CLOSED], + [BeaconEvent.INTERNAL_ERROR]: [defaultEventCallbacks.INTERNAL_ERROR], + [BeaconEvent.UNKNOWN]: [defaultEventCallbacks.UNKNOWN] + } constructor( eventsToOverride: { [key in BeaconEvent]?: { diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx index 800337c01..e79e52edf 100644 --- a/packages/beacon-ui/src/components/alert/index.tsx +++ b/packages/beacon-ui/src/components/alert/index.tsx @@ -5,7 +5,7 @@ import { AlertProps } from '../../ui/alert/common' import './styles.css' import useIsMobile from '../../ui/alert/hooks/useIsMobile' -const Alert: React.FC = (props: AlertProps) => { +const Alert: React.FC> = (props) => { // useEffect(() => { // const prevBodyOverflow = document.body.style.overflow // document.body.style.overflow = 'hidden' @@ -66,7 +66,7 @@ const Alert: React.FC = (props: AlertProps) => {
- {props.content} + {props.children} {!isMobile && (
{props.extraContent &&
} diff --git a/packages/beacon-ui/src/components/pair-other/pair-other.tsx b/packages/beacon-ui/src/components/pair-other/pair-other.tsx index bcb6e7145..1577ed091 100644 --- a/packages/beacon-ui/src/components/pair-other/pair-other.tsx +++ b/packages/beacon-ui/src/components/pair-other/pair-other.tsx @@ -1,88 +1,55 @@ -import React, { useState, useEffect } from "react"; -import QR from "../qr"; -import { MergedWallet } from "../../utils/wallets"; -import { - P2PPairingRequest, - WalletConnectPairingRequest, -} from "@airgap/beacon-types"; -import "./styles.css"; -import { Serializer } from "@airgap/beacon-core"; +import React, { useState, useEffect } from 'react' +import QR from '../qr' -export interface PairOtherProps { - walletList: MergedWallet[]; - p2pPayload: Promise | undefined; - wcPayload: Promise | undefined; - onClickLearnMore: () => void; -} +import { PairOtherProps } from '../../ui/alert/common' const PairOther: React.FC = (props: PairOtherProps) => { - const [uiState, setUiState] = useState<"selection" | "p2p" | "walletconnect">( - "selection" - ); - const [hasBeacon, setHasBeacon] = useState(false); - const [hasWalletConnect, setHasWalletConnect] = useState(false); - const [qrData, setQrData] = useState(""); + const [uiState, setUiState] = useState<'selection' | 'p2p' | 'walletconnect'>('selection') + const [hasBeacon, setHasBeacon] = useState(false) + const [hasWalletConnect, setHasWalletConnect] = useState(false) + const [qrData, setQrData] = useState('') useEffect(() => { - setUiState("selection"); - setQrData(""); - setHasBeacon(!!props.p2pPayload); - setHasWalletConnect(!!props.wcPayload); - }, [props.p2pPayload, props.wcPayload]); + setUiState('selection') + setQrData('') + setHasBeacon(!!props.p2pPayload) + setHasWalletConnect(!!props.wcPayload) + }, [props.p2pPayload, props.wcPayload]) - const buttonClickHandler = (state: "p2p" | "walletconnect") => { - if (state === "p2p" && props.p2pPayload) { - props.p2pPayload.then(async (payload) => { - const serializer = new Serializer(); - const codeQR = await serializer.serialize(payload); - setQrData(codeQR); - }); - } else if (state === "walletconnect" && props.wcPayload) { - props.wcPayload - .then((payload) => { - setQrData(payload.uri); - }) - .catch((error) => console.error(error.message)); - } - setUiState(state); - }; + const buttonClickHandler = (state: 'p2p' | 'walletconnect') => { + state === 'p2p' ? setQrData(props.p2pPayload) : setQrData(props.wcPayload) + setUiState(state) + } return ( <> - {uiState === "selection" && ( + {uiState === 'selection' && (
Select QR Type
{hasBeacon && ( - )} {hasWalletConnect && ( - )}
)} - {uiState !== "selection" && qrData && ( + {uiState !== 'selection' && qrData && ( )} - ); -}; - + ) +} -export default PairOther; +export default PairOther diff --git a/packages/beacon-ui/src/ui/alert/common.ts b/packages/beacon-ui/src/ui/alert/common.ts index a0e0d63df..b84d9acd1 100644 --- a/packages/beacon-ui/src/ui/alert/common.ts +++ b/packages/beacon-ui/src/ui/alert/common.ts @@ -1,10 +1,5 @@ -import { - P2PPairingRequest, - PostMessagePairingRequest, - WalletConnectPairingRequest, - NetworkType, - AnalyticsInterface -} from '@airgap/beacon-types' +import { NetworkType, AnalyticsInterface } from '@airgap/beacon-types' +import { MergedWallet } from '../../utils/wallets' export interface AlertButton { text: string @@ -19,19 +14,18 @@ export interface AlertConfig { timer?: number buttons?: AlertButton[] pairingPayload?: { - p2pSyncCode: () => Promise - postmessageSyncCode: () => Promise - walletConnectSyncCode: () => Promise + p2pSyncCode: string + postmessageSyncCode: string + walletConnectSyncCode: string networkType: NetworkType } - closeButtonCallback?(): void + closeButtonCallback?: () => void disclaimerText?: string analytics?: AnalyticsInterface featuredWallets?: string[] } export interface AlertProps { - content: any open: boolean showMore?: boolean extraContent?: any @@ -40,3 +34,10 @@ export interface AlertProps { onClickShowMore?: () => void onBackClick?: () => void } + +export interface PairOtherProps { + walletList: MergedWallet[] + p2pPayload: string + wcPayload: string + onClickLearnMore: () => void +} diff --git a/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx index 1e7415f8e..2b6e765fc 100644 --- a/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx +++ b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx @@ -12,8 +12,12 @@ import useWallets from '../../hooks/useWallets' // todo remove any const PairingAlert: React.FC = (props) => { - const { wcPayload, p2pPayload, postPayload, onClose } = props - const wallets = useWallets() + const { + walletConnectSyncCode: wcPayload, + p2pSyncCode: p2pPayload, + postmessageSyncCode: postPayload + } = props.pairingPayload! + const wallets = useWallets(props.pairingPayload?.networkType, props.featuredWallets) const [ wallet, isMobile, @@ -104,224 +108,35 @@ const PairingAlert: React.FC = (props) => { - {state === 'install' && ( -
- {isOnline && wallet?.types.includes('web') && ( - handleNewTab(props, wallet) - } - ]} - /> - )} - {!isMobile && wallet?.types.includes('extension') && ( - handleClickConnectExtension() - } - ] - : [ - { - label: 'Install extension', - type: 'primary', - onClick: () => handleClickInstallExtension() - } - ] - } - /> - )} - {!isMobile && wallet?.types.includes('desktop') && ( - handleClickOpenDesktopApp() - }, - { - label: 'Download desktop app', - type: 'secondary', - onClick: () => handleClickDownloadDesktopApp() - } - ]} - /> - )} - {!isMobile && - (qrCode?.length ?? 0) && - wallet?.types.includes('ios') && - (wallet?.types.length as number) > 1 && } - {!isMobile && - (qrCode?.length ?? 0) && - wallet?.types.includes('ios') && - (wallet?.types.length as number) <= 1 && } - {isMobile && - wallet?.types.includes('ios') && - (!wallet?.supportedInteractionStandards?.includes('wallet_connect') || - isWCWorking ? ( - { - if (!wallet) { - return - } - - handleDeepLinking( - wallet.supportedInteractionStandards?.includes('wallet_connect') - ? wcPayload - : p2pPayload - ) - } - } - ]} - downloadLink={ - wallet?.name.toLowerCase().includes('kukai') && isIOS(window) - ? { - label: 'Get Kukai Mobile >', - url: 'https://ios.kukai.app' - } - : undefined - } - onShowQRCodeClick={async () => { - const syncCode = wallet?.supportedInteractionStandards?.includes( - 'wallet_connect' - ) - ? wcPayload - : p2pPayload - - if (!syncCode.length || !wallet) { - onClose() - return - } - - if (isMobile && wallet.types.includes('ios') && wallet.types.length === 1) { - handleDeepLinking(syncCode) - } else { - handleUpdateQRCode(syncCode) - } - - handleUpdateState('qr') - // todo setDisplayQrExtra(true) - }} - /> - ) : ( - generateWCError(`Connect with ${wallet?.name} Mobile`) - ))} -
- )} - {state === 'qr' && ( -
- {!displayQRExtra ? ( - {}} - p2pPayload={p2pPayload} - wcPayload={wcPayload} - > - ) : ( - - )} -
- )} -
- handleClickWallet(id, props)} - onClickOther={handleClickOther} - /> -
+ extraContent={ + state !== 'top-wallets' || isMobile ? undefined : ( + handleClickWallet(id, props)} + onClickOther={handleClickOther} + /> + ) + } + onClickShowMore={handleShowMoreContent} + onBackClick={ + state === 'install' || + state === 'qr' || + (state === 'wallets' && isMobile) || + state === 'help' + ? () => handleUpdateState('top-wallets') + : undefined + } + > +
+ {state === 'install' && (
= (props) => { } } > - {areMetricsEnabled && } - {!areMetricsEnabled && ( - <> - - - - + {isOnline && wallet?.types.includes('web') && ( + handleNewTab(props, wallet) } - title="What is a wallet?" - description="Wallets let you send, receive, store and interact with digital assets. Your wallet can be used as an easy way to login, instead of having to remember a password." - /> + ]} + /> + )} + {!isMobile && wallet?.types.includes('extension') && ( + handleClickConnectExtension() + } + ] + : [ + { + label: 'Install extension', + type: 'primary', + onClick: () => handleClickInstallExtension() + } + ] + } + /> + )} + {!isMobile && wallet?.types.includes('desktop') && ( + handleClickOpenDesktopApp() + }, + { + label: 'Download desktop app', + type: 'secondary', + onClick: () => handleClickDownloadDesktopApp() + } + ]} + /> + )} + {!isMobile && + (qrCode?.length ?? 0) && + wallet?.types.includes('ios') && + (wallet?.types.length as number) > 1 && } + {!isMobile && + (qrCode?.length ?? 0) && + wallet?.types.includes('ios') && + (wallet?.types.length as number) <= 1 && } + {isMobile && + wallet?.types.includes('ios') && + (!wallet?.supportedInteractionStandards?.includes('wallet_connect') || isWCWorking ? ( - - - - + border + title={`Connect with ${wallet?.name} Mobile`} + description={''} + buttons={[ + { + label: 'Use App', + type: 'primary', + onClick: async () => { + if (!wallet) { + return + } + + handleDeepLinking( + wallet.supportedInteractionStandards?.includes('wallet_connect') + ? wcPayload + : p2pPayload + ) + } + } + ]} + downloadLink={ + wallet?.name.toLowerCase().includes('kukai') && isIOS(window) + ? { + label: 'Get Kukai Mobile >', + url: 'https://ios.kukai.app' + } + : undefined } - title="Not sure where to start?" - description="If you are new to the Web3, we recommend that you start by creating a Kukai wallet. Kukai is a fast way of creating your first wallet using your preferred social account." + onShowQRCodeClick={async () => { + const syncCode = wallet?.supportedInteractionStandards?.includes( + 'wallet_connect' + ) + ? wcPayload + : p2pPayload + + if (!syncCode.length || !wallet) { + props.onClose() + return + } + + if (isMobile && wallet.types.includes('ios') && wallet.types.length === 1) { + handleDeepLinking(syncCode) + } else { + handleUpdateQRCode(syncCode) + } + + handleUpdateState('qr') + // todo setDisplayQrExtra(true) + }} /> - - )} + ) : ( + generateWCError(`Connect with ${wallet?.name} Mobile`) + ))}
+ )} + {state === 'qr' && (
- handleClickWallet(id, props)} - onClickLearnMore={() => {}} - otherWallets={ - isMobile - ? { - images: [walletList[3].image, walletList[4].image, walletList[5].image], - onClick: () => handleUpdateState('wallets') - } - : undefined - } - /> + {!displayQRExtra ? ( + {}} + p2pPayload={p2pPayload} + wcPayload={wcPayload} + > + ) : ( + + )}
-
- } - extraContent={ - state !== 'top-wallets' || isMobile ? undefined : ( + )} +
handleClickWallet(id, props)} onClickOther={handleClickOther} /> - ) - } - onClickShowMore={handleShowMoreContent} - onBackClick={() => { - switch (state) { - case 'install': - case 'qr': - case 'wallets': - if (state === 'wallets' && !isMobile) return undefined - return () => handleUpdateState('top-wallets') - case 'help': - return () => { - // todo if (pairingExpired) { - // handleCloseAlert(); - // return; - // } - // todo return setCurrentInfo(previousInfo()); +
+
+ {areMetricsEnabled && } + {!areMetricsEnabled && ( + <> + + + + + } + title="What is a wallet?" + description="Wallets let you send, receive, store and interact with digital assets. Your wallet can be used as an easy way to login, instead of having to remember a password." + /> + + + + + + } + title="Not sure where to start?" + description="If you are new to the Web3, we recommend that you start by creating a Kukai wallet. Kukai is a fast way of creating your first wallet using your preferred social account." + /> + + )} +
+
+ handleClickWallet(id, props)} + onClickLearnMore={() => {}} + otherWallets={ + isMobile + ? { + images: [walletList[3].image, walletList[4].image, walletList[5].image], + onClick: () => handleUpdateState('wallets') + } + : undefined } - default: - return undefined - } - }} - /> + /> +
+
+ ) } diff --git a/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx b/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx index e9bb4804f..232a9b669 100644 --- a/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx +++ b/packages/beacon-ui/src/ui/alert/hooks/useWallets.tsx @@ -78,7 +78,7 @@ const useWallets = (networkType?: NetworkType, featuredWallets?: string[]) => { } }), ...webList.map((wallet) => { - const link = networkType ?? NetworkType.MAINNET + const link = wallet.links[networkType ?? NetworkType.MAINNET] return { id: wallet.key, key: wallet.key,