Skip to content

Commit

Permalink
feat: made bug report available everywhere
Browse files Browse the repository at this point in the history
  • Loading branch information
@IsaccoSordo
IsaccoSordo committed Feb 11, 2025
1 parent 812e7d9 commit 52ba9f0
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 110 deletions.
24 changes: 19 additions & 5 deletions packages/beacon-dapp/src/events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import {
// EncryptionOperation
} from '@airgap/beacon-core'
import { shortenString } from './utils/shorten-string'
import { isMobile, isMobileOS } from '@airgap/beacon-ui'
import { isMobile, isMobileOS, openBugReport } from '@airgap/beacon-ui'

const logger = new Logger('BeaconEvents')

Expand Down Expand Up @@ -100,6 +100,8 @@ export enum BeaconEvent {
PAIR_SUCCESS = 'PAIR_SUCCESS',
CHANNEL_CLOSED = 'CHANNEL_CLOSED',

OPEN_BUG_REPORT = 'OPEN_BUG_REPORT',

INTERNAL_ERROR = 'INTERNAL_ERROR',
UNKNOWN = 'UNKNOWN'
}
Expand Down Expand Up @@ -216,6 +218,7 @@ export interface BeaconEventType {
| ExtendedWalletConnectPairingResponse
[BeaconEvent.CHANNEL_CLOSED]: string
[BeaconEvent.INTERNAL_ERROR]: { text: string; buttons?: AlertButton[] }
[BeaconEvent.OPEN_BUG_REPORT]: undefined
[BeaconEvent.UNKNOWN]: undefined
}

Expand Down Expand Up @@ -331,10 +334,15 @@ const showInvalidActiveAccountState = async (): Promise<void> => {
*/
const showGenericErrorAlert = async (errorMessage: string): Promise<void> => {
await openAlert({
title: 'Error',
body: `${errorMessage}.<br />Please try again.<br />If this problem persists please reach out <a href="mailto:support@walletbeacon.io?subject=${encodeURIComponent(
'Beacon error'
)}&body=${encodeURIComponent(errorMessage)}">support@walletbeacon.io</a>`
title: `${errorMessage}`,
body: 'Please try again. If this problem persists please send us a bug report here',
buttons: [
{
label: 'Send Report',
type: 'primary',
onClick: () => openBugReport()
}
] as any
})
}

Expand Down Expand Up @@ -436,6 +444,10 @@ const showExtensionConnectedAlert = async (): Promise<void> => {
await closeAlerts()
}

const showBugReportForm = () => {
openBugReport()
}

/**
* Show a "channel closed" alert for 1.5 seconds
*/
Expand Down Expand Up @@ -775,6 +787,7 @@ export const defaultEventCallbacks: {
[BeaconEvent.HIDE_UI]: hideUI,
[BeaconEvent.PAIR_INIT]: showPairAlert,
[BeaconEvent.PAIR_SUCCESS]: showExtensionConnectedAlert,
[BeaconEvent.OPEN_BUG_REPORT]: showBugReportForm,
[BeaconEvent.CHANNEL_CLOSED]: showChannelClosedAlert,
[BeaconEvent.INTERNAL_ERROR]: showInternalErrorAlert,
[BeaconEvent.UNKNOWN]: emptyHandler()
Expand Down Expand Up @@ -836,6 +849,7 @@ export class BeaconEventHandler {
[BeaconEvent.HIDE_UI]: [defaultEventCallbacks.HIDE_UI],
[BeaconEvent.PAIR_INIT]: [defaultEventCallbacks.PAIR_INIT],
[BeaconEvent.PAIR_SUCCESS]: [defaultEventCallbacks.PAIR_SUCCESS],
[BeaconEvent.OPEN_BUG_REPORT]: [defaultEventCallbacks.OPEN_BUG_REPORT],
[BeaconEvent.CHANNEL_CLOSED]: [defaultEventCallbacks.CHANNEL_CLOSED],
[BeaconEvent.INTERNAL_ERROR]: [defaultEventCallbacks.INTERNAL_ERROR],
[BeaconEvent.UNKNOWN]: [defaultEventCallbacks.UNKNOWN]
Expand Down
2 changes: 1 addition & 1 deletion packages/beacon-ui/src/components/info/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Info: Component<InfoProps> = (props: InfoProps) => {
</div>
)}
<h3 class="info-title">{props.title}</h3>
{props.description && <div class="info-description" innerHTML={props.description} />}
{props.description && <div class="info-description">{props.description}</div>}
{props.data && <pre class="info-data">{props.data}</pre>}
<div class="info-buttons">
<For each={props.buttons}>
Expand Down
2 changes: 1 addition & 1 deletion packages/beacon-ui/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export { openAlert, closeAlerts } from './ui/alert'
export { openAlert, closeAlerts, openBugReport } from './ui/alert'
export type { AlertButton, AlertConfig } from './ui/alert'

export {
Expand Down
170 changes: 67 additions & 103 deletions packages/beacon-ui/src/ui/alert/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const closeAlert = (_: string): Promise<void> => {
*/
const closeAlerts = async (): Promise<void> => {
if (currentInfo() === 'help') {
console.log('setting status as pairing expired.')
logger.log('closeAlerts', 'setting status as pairing expired.')
setPairingExpired(true)
return
}
Expand All @@ -144,6 +144,11 @@ const closeAlerts = async (): Promise<void> => {
})
}

const openBugReport = () => {
setPreviousInfo(currentInfo())
setCurrentInfo('help')
}

/**
* Show an alert
*
Expand All @@ -155,9 +160,6 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
const p2pPayload = config.pairingPayload?.p2pSyncCode()
const wcPayload = config.pairingPayload?.walletConnectSyncCode()
const isOnline = navigator.onLine
const areMetricsEnabled = localStorage
? localStorage.getItem(StorageKey.ENABLE_METRICS) === 'true'
: false

setAnalytics(config.analytics)

Expand Down Expand Up @@ -1069,61 +1071,11 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
}
}
>
{areMetricsEnabled && (
<BugReportForm
onSubmit={() => {
handleCloseAlert()
}}
/>
)}
{!areMetricsEnabled && (
<>
<Info
iconBadge
icon={
<svg
fill="currentColor"
stroke-width="0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="1em"
width="1em"
style="overflow: visible;"
color="white"
>
<path d="M16 12h2v4h-2z"></path>
<path d="M20 7V5c0-1.103-.897-2-2-2H5C3.346 3 2 4.346 2 6v12c0 2.201 1.794 3 3 3h15c1.103 0 2-.897 2-2V9c0-1.103-.897-2-2-2zM5 5h13v2H5a1.001 1.001 0 0 1 0-2zm15 14H5.012C4.55 18.988 4 18.805 4 18V8.815c.314.113.647.185 1 .185h15v10z"></path>
</svg>
}
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."
/>
<Info
iconBadge
icon={
<svg
fill="none"
stroke-width="2"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
viewBox="0 0 24 24"
height="1em"
width="1em"
style="overflow: visible;"
color="white"
>
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect width="16" height="16" x="4" y="4" rx="2"></rect>
<path d="M9 12h6M12 9v6"></path>
</svg>
}
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."
/>
</>
)}
<BugReportForm
onSubmit={() => {
handleCloseAlert()
}}
/>
</div>
<div
style={
Expand Down Expand Up @@ -1204,49 +1156,61 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
<Alert
open={isOpen()}
content={
<Info
bigIcon
icon={
<svg
fill="currentColor"
stroke-width="0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
height="1em"
width="1em"
style="overflow: visible;"
color="#494949"
>
<path
d="M85.57 446.25h340.86a32 32 0 0 0 28.17-47.17L284.18 82.58c-12.09-22.44-44.27-22.44-56.36 0L57.4 399.08a32 32 0 0 0 28.17 47.17Z"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32px"
></path>
<path
d="m250.26 195.39 5.74 122 5.73-121.95a5.74 5.74 0 0 0-5.79-6h0a5.74 5.74 0 0 0-5.68 5.95Z"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32px"
></path>
<path d="M256 397.25a20 20 0 1 1 20-20 20 20 0 0 1-20 20Z"></path>
</svg>
}
title={config.title || 'No title'}
description={config.body || 'No description'}
data={config.data}
buttons={[
{
label: 'Close',
type: 'primary',
onClick: () => handleCloseAlert()
}
]}
/>
<>
{currentInfo() === 'help' ? (
<BugReportForm
onSubmit={() => {
handleCloseAlert()
}}
/>
) : (
<Info
bigIcon
icon={
<svg
fill="currentColor"
stroke-width="0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
height="1em"
width="1em"
style="overflow: visible;"
color="#494949"
>
<path
d="M85.57 446.25h340.86a32 32 0 0 0 28.17-47.17L284.18 82.58c-12.09-22.44-44.27-22.44-56.36 0L57.4 399.08a32 32 0 0 0 28.17 47.17Z"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32px"
></path>
<path
d="m250.26 195.39 5.74 122 5.73-121.95a5.74 5.74 0 0 0-5.79-6h0a5.74 5.74 0 0 0-5.68 5.95Z"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32px"
></path>
<path d="M256 397.25a20 20 0 1 1 20-20 20 20 0 0 1-20 20Z"></path>
</svg>
}
title={config.title || 'No title'}
description={config.body || 'No description'}
data={config.data}
buttons={
(config.buttons as any) ?? [
{
label: 'Close',
type: 'primary',
onClick: () => handleCloseAlert()
}
]
}
/>
)}
</>
}
onCloseClick={() => handleCloseAlert()}
/>
Expand All @@ -1263,4 +1227,4 @@ const openAlert = async (config: AlertConfig): Promise<string> => {
return ''
}

export { closeAlert, closeAlerts, openAlert }
export { closeAlert, closeAlerts, openAlert, openBugReport }

0 comments on commit 52ba9f0

Please sign in to comment.