= (props: ToastProps) => {
const hasWalletObject = props.label.includes('{{wallet}}') && props.walletInfo
+ const isRequestSentToast = props.label.includes('Request sent to')
+
+ if (isRequestSentToast) {
+ setShowMoreInfo(false)
+ setTimeout(() => {
+ setShowMoreInfo(true)
+ }, 3000)
+ }
return (
@@ -50,11 +61,23 @@ const Toast: Component
= (props: ToastProps) => {
{hasWalletObject && props.walletInfo && <>{parseWallet(props.label, props.walletInfo)}}
{!hasWalletObject && props.label
}
+ {props.openWalletAction && (
+ {
+ if (props && props.openWalletAction) {
+ props?.openWalletAction()
+ }
+ }}
+ >
+ Open Wallet
+
+ )}
{(action) => (
diff --git a/packages/beacon-ui/src/components/wallets/index.tsx b/packages/beacon-ui/src/components/wallets/index.tsx
index 4b4d55d07..f54ff9845 100644
--- a/packages/beacon-ui/src/components/wallets/index.tsx
+++ b/packages/beacon-ui/src/components/wallets/index.tsx
@@ -7,6 +7,7 @@ interface WalletProps {
wallets: MergedWallet[]
onClickWallet: (id: string) => void
onClickOther: () => void
+ isMobile: boolean
small?: boolean
disabled?: boolean
}
@@ -33,7 +34,7 @@ const Wallets: Component = (props: WalletProps) => {
)
diff --git a/packages/beacon-ui/src/ui/alert/index.tsx b/packages/beacon-ui/src/ui/alert/index.tsx
index ceef34e37..9aab68140 100644
--- a/packages/beacon-ui/src/ui/alert/index.tsx
+++ b/packages/beacon-ui/src/ui/alert/index.tsx
@@ -25,6 +25,7 @@ import * as walletStyles from '../../components/wallet/styles.css'
import * as infoStyles from '../../components/info/styles.css'
import * as qrStyles from '../../components/qr/styles.css'
import * as loaderStyles from '../../components/loader/styles.css'
+import * as pairOtherStyles from '../../components/pair-other/styles.css'
import { Serializer, windowRef } from '@airgap/beacon-core'
import { PostMessageTransport } from '@airgap/beacon-transport-postmessage'
@@ -38,6 +39,7 @@ import {
import { getTzip10Link } from 'src/utils/get-tzip10-link'
import { isAndroid, isIOS, isTwBrowser } from 'src/utils/platform'
import { getColorMode } from 'src/utils/colorMode'
+import PairOther from 'src/components/pair-other/pair-other'
// Interfaces
export interface AlertButton {
@@ -69,13 +71,14 @@ const [isOpen, setIsOpen] = createSignal(false)
const [isLoading, setIsLoading] = createSignal(false)
const [showMoreContent, setShowMoreContent] = createSignal(false)
const [codeQR, setCodeQR] = createSignal('')
+const [walletList, setWalletList] = createSignal([])
const [currentWallet, setCurrentWallet] = createSignal(undefined)
const [previousInfo, setPreviousInfo] = createSignal<
- 'top-wallets' | 'wallets' | 'install' | 'help'
+ 'top-wallets' | 'wallets' | 'install' | 'help' | 'qr'
+>('top-wallets')
+const [currentInfo, setCurrentInfo] = createSignal<
+ 'top-wallets' | 'wallets' | 'install' | 'help' | 'qr'
>('top-wallets')
-const [currentInfo, setCurrentInfo] = createSignal<'top-wallets' | 'wallets' | 'install' | 'help'>(
- 'top-wallets'
-)
const [analytics, setAnalytics] = createSignal(undefined)
type VoidFunction = () => void
@@ -133,16 +136,16 @@ const closeAlerts = async (): Promise =>
*/
// eslint-disable-next-line complexity
const openAlert = async (config: AlertConfig): Promise => {
- const p2ppayload = config.pairingPayload?.p2pSyncCode()
- const wcpaylouad = config.pairingPayload?.walletConnectSyncCode()
+ const p2pPayload = config.pairingPayload?.p2pSyncCode()
+ const wcPayload = config.pairingPayload?.walletConnectSyncCode()
setAnalytics(config.analytics)
// TODO: Remove eager connection
- p2ppayload?.then(() => {
+ p2pPayload?.then(() => {
console.log('P2P LOADED')
})
- wcpaylouad?.then(() => {
+ wcPayload?.then(() => {
console.log('WC LOADED')
})
@@ -152,12 +155,22 @@ const openAlert = async (config: AlertConfig): Promise => {
}
if (!isOpen()) {
- const availableExtensions = await PostMessageTransport.getAvailableExtensions()
+ let availableExtensions = await PostMessageTransport.getAvailableExtensions()
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const extensionsUpdatedFn = async (event: any): Promise => {
+ if (event.data === 'extensionsUpdated') {
+ availableExtensions = await PostMessageTransport.getAvailableExtensions()
+ setWalletList(createWalletList())
+ }
+ }
+
+ windowRef.addEventListener('message', extensionsUpdatedFn)
const setDefaultPayload = async () => {
if (config.pairingPayload) {
const serializer = new Serializer()
- const codeQR = await serializer.serialize(await p2ppayload)
+ const codeQR = await serializer.serialize(await p2pPayload)
setCodeQR(codeQR)
}
}
@@ -207,77 +220,109 @@ const openAlert = async (config: AlertConfig): Promise => {
style7.textContent = loaderStyles.default
shadowRoot.appendChild(style7)
+ // PairOther styles
+ const style8 = document.createElement('style')
+ style8.textContent = pairOtherStyles.default
+ shadowRoot.appendChild(style8)
+
// Inject font styles
const styleFonts = document.createElement('style')
styleFonts.textContent =
"* { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;}"
shadowRoot.appendChild(styleFonts)
- const wallets: Wallet[] = [
- ...desktopList.map((wallet) => {
- return {
- id: wallet.key,
- key: wallet.key,
- name: wallet.shortName,
- image: wallet.logo,
- description: 'Desktop App',
- type: 'desktop',
- link: wallet.downloadLink,
- deepLink: wallet.deepLink
- }
- }),
- ...extensionList.map((wallet) => {
- return {
- id: wallet.id,
- key: wallet.key,
- name: wallet.shortName,
- image: wallet.logo,
- description: 'Browser Extension',
- type: 'extension',
- link: wallet.link
- }
- }),
- ...iOSList.map((wallet) => {
- return {
- id: wallet.key,
- key: wallet.key,
- name: wallet.shortName,
- image: wallet.logo,
- description: 'Mobile App',
- supportedInteractionStandards: wallet.supportedInteractionStandards,
- type: 'ios',
- link: wallet.universalLink,
- deepLink: wallet.deepLink
- }
- }),
- ...webList.map((wallet) => {
- const link = wallet.links[config.pairingPayload?.preferredNetwork ?? NetworkType.MAINNET]
- return {
- id: wallet.key,
- key: wallet.key,
- name: wallet.shortName,
- image: wallet.logo,
- description: 'Web App',
- type: 'web',
- link: link ?? wallet.links.mainnet
- }
- })
- ]
+ const createWalletList = () => {
+ const wallets: Wallet[] = [
+ ...desktopList
+ // This is used for a special case where desktop wallets have inApp browsers.
+ // In this case, the wallet will act like an extension. This means we have to remove
+ // the desktop app from the list to make the user experience better. One example of this
+ // is Infinity Wallet.
+ .filter(
+ (wallet) => !availableExtensions.some((extWallet) => wallet.name === extWallet.name)
+ )
+ .map((wallet) => {
+ return {
+ id: wallet.key,
+ key: wallet.key,
+ name: wallet.shortName,
+ image: wallet.logo,
+ description: 'Desktop App',
+ type: 'desktop',
+ link: wallet.downloadLink,
+ deepLink: wallet.deepLink
+ }
+ }),
+ ...extensionList.map((wallet) => {
+ return {
+ id: wallet.id,
+ key: wallet.key,
+ name: wallet.shortName,
+ image: wallet.logo,
+ description: 'Browser Extension',
+ type: 'extension',
+ link: wallet.link
+ }
+ }),
+ ...iOSList.map((wallet) => {
+ return {
+ id: wallet.key,
+ key: wallet.key,
+ name: wallet.shortName,
+ image: wallet.logo,
+ description: 'Mobile App',
+ supportedInteractionStandards: wallet.supportedInteractionStandards,
+ type: 'ios',
+ link: wallet.universalLink,
+ deepLink: wallet.deepLink
+ }
+ }),
+ ...webList.map((wallet) => {
+ const link = wallet.links[config.pairingPayload?.preferredNetwork ?? NetworkType.MAINNET]
+ return {
+ id: wallet.key,
+ key: wallet.key,
+ name: wallet.shortName,
+ image: wallet.logo,
+ description: 'Web App',
+ type: 'web',
+ link: link ?? wallet.links.mainnet
+ }
+ }),
+ ...availableExtensions
+ .filter((newExt) => !extensionList.some((ext) => ext.id === newExt.id))
+ .map((wallet) => {
+ return {
+ id: wallet.id,
+ key: wallet.id,
+ name: wallet.shortName ?? wallet.name ?? '',
+ image: wallet.iconUrl ?? '',
+ description: 'Browser Extension',
+ type: 'extension',
+ link: (wallet as any).link ?? ''
+ }
+ })
+ ]
- // Parse wallet names
- const parsedWallets = parseWallets(wallets)
+ // Parse wallet names
+ const parsedWallets = parseWallets(wallets)
- // Merge wallets by name
- const mergedWallets = mergeWallets(parsedWallets)
+ // Merge wallets by name
+ const mergedWallets = mergeWallets(parsedWallets)
- // Default selection of featured wallets
- const defaultWalletList = ['kukai', 'temple', 'naan', 'umami']
+ // Default selection of featured wallets
+ const defaultWalletList = ['kukai', 'temple', 'naan', 'umami']
- // Sort wallets by top4
- const arrangedWallets = arrangeTopWallets(
- mergedWallets,
- config.featuredWallets ?? defaultWalletList
- )
+ // Sort wallets by top4
+ const arrangedWallets = arrangeTopWallets(
+ mergedWallets,
+ config.featuredWallets ?? defaultWalletList
+ )
+
+ return arrangedWallets
+ }
+
+ setWalletList(createWalletList())
const isMobile = window.innerWidth <= 800
@@ -299,6 +344,7 @@ const openAlert = async (config: AlertConfig): Promise => {
const handleCloseAlert = () => {
closeAlert('')
+ windowRef.removeEventListener('message', extensionsUpdatedFn)
if (config.closeButtonCallback) config.closeButtonCallback()
}
@@ -307,7 +353,7 @@ const openAlert = async (config: AlertConfig): Promise => {
setIsLoading(true)
setShowMoreContent(false)
- const wallet = arrangedWallets.find((wallet) => wallet.id === id)
+ const wallet = walletList().find((wallet) => wallet.id === id)
setCurrentWallet(wallet)
if (wallet?.key) {
analytics()?.track('click', 'ui', 'opened wallet', { key: wallet.key })
@@ -315,18 +361,31 @@ const openAlert = async (config: AlertConfig): Promise => {
}
if (wallet?.types.includes('web')) {
- if (config.pairingPayload) {
+ if (p2pPayload) {
+ // Noopener feature parameter cannot be used, because Chrome will open
+ // about:blank#blocked instead and it will no longer work.
+ const newTab = window.open('', '_blank')
+
+ if (newTab) {
+ newTab.opener = null
+ }
+
const serializer = new Serializer()
- const code = await serializer.serialize(await p2ppayload)
+ const code = await serializer.serialize(await p2pPayload)
const link = getTzip10Link(wallet.link, code)
- window.open(link, '_blank', 'noopener')
+
+ if (newTab) {
+ newTab.location.href = link
+ } else {
+ window.open(link, '_blank', 'noopener')
+ }
}
setIsLoading(false)
return
}
if (wallet && wallet.supportedInteractionStandards?.includes('wallet_connect')) {
- const uri = (await wcpaylouad)?.uri
+ const uri = (await wcPayload)?.uri
if (uri) {
if (isAndroid(window) || isIOS(window)) {
@@ -356,7 +415,7 @@ const openAlert = async (config: AlertConfig): Promise => {
if (config.pairingPayload) {
const serializer = new Serializer()
- const code = await serializer.serialize(await p2ppayload)
+ const code = await serializer.serialize(await p2pPayload)
const link = getTzip10Link(
isIOS(window) && wallet.deepLink
@@ -388,16 +447,7 @@ const openAlert = async (config: AlertConfig): Promise => {
const handleClickOther = async () => {
analytics()?.track('click', 'ui', 'other wallet')
- setShowMoreContent(false)
- setCurrentWallet({
- ...arrangedWallets[0],
- name: '',
- types: ['ios']
- })
- // TODO: replace with storage class
- localStorage.setItem(StorageKey.LAST_SELECTED_WALLET, arrangedWallets[0].key)
- setDefaultPayload()
- setCurrentInfo('install')
+ setCurrentInfo('qr')
}
const handleClickConnectExtension = async () => {
@@ -441,9 +491,9 @@ const openAlert = async (config: AlertConfig): Promise => {
setShowMoreContent(false)
analytics()?.track('click', 'ui', 'open desktop', { key: currentWallet()?.key })
- if (config.pairingPayload?.p2pSyncCode) {
+ if (p2pPayload) {
const serializer = new Serializer()
- const code = await serializer.serialize(await config.pairingPayload?.p2pSyncCode())
+ const code = await serializer.serialize(await p2pPayload)
const link = getTzip10Link(currentWallet()?.deepLink || '', code)
window.open(link, '_blank', 'noopener')
}
@@ -474,107 +524,122 @@ const openAlert = async (config: AlertConfig): Promise => {
showMore={showMoreContent()}
content={
-
+ {!isMobile && currentWallet()?.types.includes('extension') && (
+
- {!isMobile && currentWallet()?.types.includes('extension') && (
- handleClickConnectExtension()
- }
- ]
- : [
- {
- label: 'Install extension',
- type: 'primary',
- onClick: () => handleClickInstallExtension()
- }
- ]
- }
- />
- )}
- {!isMobile && currentWallet()?.types.includes('desktop') && (
- handleClickOpenDesktopApp()
- },
- {
- label: 'Download desktop app',
- type: 'secondary',
- onClick: () => handleClickDownloadDesktopApp()
+ description={
+ hasExtension()
+ ? `Please connect below to use your ${
+ currentWallet()?.name
+ } Wallet browser extension.`
+ : `To connect your ${
+ currentWallet()?.name
+ } Wallet, install the browser extension.`
}
- ]}
- />
- )}
- {!isMobile &&
- codeQR().length > 0 &&
- currentWallet()?.types.includes('ios') &&
- (currentWallet()?.types.length as number) > 1 && (
- handleClickConnectExtension()
+ }
+ ]
+ : [
+ {
+ label: 'Install extension',
+ type: 'primary',
+ onClick: () => handleClickInstallExtension()
+ }
+ ]
}
- isMobile={false}
- walletName={currentWallet()?.name || 'AirGap'}
- code={codeQR()}
- onClickLearnMore={handleClickLearnMore}
- onClickQrCode={handleClickQrCode}
/>
)}
- {!isMobile &&
- codeQR().length > 0 &&
- currentWallet()?.types.includes('ios') &&
- (currentWallet()?.types.length as number) <= 1 && (
+ {!isMobile && currentWallet()?.types.includes('desktop') && (
+ handleClickOpenDesktopApp()
+ },
+ {
+ label: 'Download desktop app',
+ type: 'secondary',
+ onClick: () => handleClickDownloadDesktopApp()
+ }
+ ]}
+ />
+ )}
+ {!isMobile &&
+ codeQR().length > 0 &&
+ currentWallet()?.types.includes('ios') &&
+ (currentWallet()?.types.length as number) > 1 && (
+
+ )}
+ {!isMobile &&
+ codeQR().length > 0 &&
+ currentWallet()?.types.includes('ios') &&
+ (currentWallet()?.types.length as number) <= 1 && (
+
+ )}
+ {isMobile && codeQR().length > 0 && (
=> {
) || false
}
isMobile={true}
- walletName={currentWallet()?.name || 'Airgap'}
+ walletName={currentWallet()?.name || 'AirGap'}
code={codeQR()}
onClickLearnMore={handleClickLearnMore}
onClickQrCode={handleClickQrCode}
/>
)}
- {isMobile && codeQR().length > 0 && (
-
+ )}
+ {currentInfo() === 'qr' && (
+
+ p2pPayload={p2pPayload}
+ wcPayload={wcPayload}
+ >
+
+ )}
=> {
>
@@ -704,6 +789,7 @@ const openAlert = async (config: AlertConfig): Promise
=> {
=> {
>
setCurrentInfo('wallets')
}
@@ -748,7 +834,8 @@ const openAlert = async (config: AlertConfig): Promise => {
@@ -758,6 +845,8 @@ const openAlert = async (config: AlertConfig): Promise => {
onCloseClick={() => handleCloseAlert()}
onBackClick={
currentInfo() === 'install' && !isMobile
+ ? () => setCurrentInfo('top-wallets')
+ : currentInfo() === 'qr'
? () => setCurrentInfo('top-wallets')
: currentInfo() === 'install' && isMobile
? () => setCurrentInfo('wallets')
diff --git a/packages/beacon-ui/src/ui/toast/index.tsx b/packages/beacon-ui/src/ui/toast/index.tsx
index 388a500db..42f1dbf20 100644
--- a/packages/beacon-ui/src/ui/toast/index.tsx
+++ b/packages/beacon-ui/src/ui/toast/index.tsx
@@ -68,6 +68,7 @@ const createToast = (config: ToastConfig) => {
}}
actions={config.actions}
walletInfo={config.walletInfo}
+ openWalletAction={config.openWalletAction}
/>
),
shadowRoot
diff --git a/packages/beacon-utils/__tests__/beacon-utils.spec.ts b/packages/beacon-utils/__tests__/beacon-utils.spec.ts
index ce009dd07..66b2674c3 100644
--- a/packages/beacon-utils/__tests__/beacon-utils.spec.ts
+++ b/packages/beacon-utils/__tests__/beacon-utils.spec.ts
@@ -3,7 +3,7 @@
import * as chai from 'chai'
import * as chaiAsPromised from 'chai-as-promised'
import 'mocha'
-import { getAddressFromPublicKey } from '../src/utils/crypto'
+import { getAddressFromPublicKey, prefixPublicKey } from '../src/utils/crypto'
import { generateGUID } from '../src/utils/generate-uuid'
// use chai-as-promised plugin
@@ -104,4 +104,24 @@ describe(`Crypto`, () => {
expect(typeof GUID).to.deep.equal('string')
})
})
+
+ it(`should prefix a public key`, async () => {
+ const publicKey = '370ffb098088e67f8284ca4938f8f1eac02c3e2ab150f29adc8a7075a5ce7e63'
+
+ const prefixedPublicKey = await prefixPublicKey(publicKey)
+
+ expect(prefixedPublicKey).to.deep.equal(
+ 'edpku4US3ZykcZifjzSGFCmFr3zRgCKndE82estE4irj4d5oqDNDvf'
+ )
+ })
+
+ it(`should not prefix a public key that is already prefixed`, async () => {
+ const publicKey = 'edpku4US3ZykcZifjzSGFCmFr3zRgCKndE82estE4irj4d5oqDNDvf'
+
+ const prefixedPublicKey = await prefixPublicKey(publicKey)
+
+ expect(prefixedPublicKey).to.deep.equal(
+ 'edpku4US3ZykcZifjzSGFCmFr3zRgCKndE82estE4irj4d5oqDNDvf'
+ )
+ })
})
diff --git a/packages/beacon-utils/package.json b/packages/beacon-utils/package.json
index e7c115dd5..595d86819 100644
--- a/packages/beacon-utils/package.json
+++ b/packages/beacon-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@airgap/beacon-utils",
- "version": "4.0.4",
+ "version": "4.0.5",
"description": "> TODO: description",
"author": "Andreas Gassmann ",
"homepage": "https://walletbeacon.io",
diff --git a/packages/beacon-utils/src/index.ts b/packages/beacon-utils/src/index.ts
index 0f450be8a..5d3197b11 100644
--- a/packages/beacon-utils/src/index.ts
+++ b/packages/beacon-utils/src/index.ts
@@ -10,7 +10,8 @@ export {
sealCryptobox,
openCryptobox,
recipientString,
- signMessage
+ signMessage,
+ prefixPublicKey
} from './utils/crypto'
export { generateGUID } from './utils/generate-uuid'
diff --git a/packages/beacon-utils/src/utils/crypto.ts b/packages/beacon-utils/src/utils/crypto.ts
index f995be2fb..9c5c03dad 100644
--- a/packages/beacon-utils/src/utils/crypto.ts
+++ b/packages/beacon-utils/src/utils/crypto.ts
@@ -196,6 +196,21 @@ export async function getAddressFromPublicKey(publicKey: string): Promise {
+ if (publicKey.length !== 64) {
+ return publicKey
+ }
+
+ const payload: Uint8Array = Buffer.from(publicKey, 'hex')
+
+ return bs58check.encode(Buffer.concat([new Uint8Array([13, 15, 37, 217]), Buffer.from(payload)]))
+}
+
/**
* Get the recipient string used in the matrix message
*
diff --git a/packages/beacon-wallet/package.json b/packages/beacon-wallet/package.json
index b2268829d..1d4abb5d1 100644
--- a/packages/beacon-wallet/package.json
+++ b/packages/beacon-wallet/package.json
@@ -1,6 +1,6 @@
{
"name": "@airgap/beacon-wallet",
- "version": "4.0.4",
+ "version": "4.0.5",
"description": "> TODO: description",
"author": "Andreas Gassmann ",
"homepage": "https://walletbeacon.io",
@@ -35,8 +35,8 @@
"url": "https://github.com/airgap-it/beacon-sdk/issues"
},
"dependencies": {
- "@airgap/beacon-core": "4.0.4",
- "@airgap/beacon-transport-matrix": "4.0.4",
- "@airgap/beacon-transport-postmessage": "4.0.4"
+ "@airgap/beacon-core": "4.0.5",
+ "@airgap/beacon-transport-matrix": "4.0.5",
+ "@airgap/beacon-transport-postmessage": "4.0.5"
}
}