Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' of https://github.com/Emurgo/yoroi-frontend in…
…to Ahmed/zendesk
- Loading branch information
Showing
54 changed files
with
603 additions
and
181 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| // @flow | ||
| import cryptoRandomString from 'crypto-random-string'; | ||
| import querystring from 'querystring'; | ||
|
|
||
| import LocalStorageApi, { | ||
| loadAnalyticsInstanceId, | ||
| saveAnalyticsInstanceId, | ||
| } from '../localStorage'; | ||
| import { environment } from '../../environment'; | ||
| import { TRACKED_ROUTES } from '../../routes-config'; | ||
| import type { StoresMap } from '../../stores'; | ||
| import { isTestnet as isTestnetFunc } from '../ada/lib/storage/database/prepackaged/networks'; | ||
|
|
||
| const MATOMO_URL = 'https://analytics.emurgo-rnd.com/matomo.php'; | ||
| const SITE_ID = '4'; | ||
| let INSTANCE_ID; | ||
| let stores; | ||
|
|
||
| export async function trackStartup(stores_: StoresMap): Promise<void> { | ||
| stores = stores_; | ||
|
|
||
| let event; | ||
| if (await (new LocalStorageApi()).getUserLocale() != null) { | ||
| INSTANCE_ID = await loadAnalyticsInstanceId(); | ||
| if (INSTANCE_ID) { | ||
| emitEvent(INSTANCE_ID, 'launch'); | ||
| return; | ||
| } | ||
| event = 'pre-existing-instance'; | ||
| } else { | ||
| event = 'new-instance'; | ||
| } | ||
| INSTANCE_ID = generateAnalyticsInstanceId(); | ||
| await saveAnalyticsInstanceId(INSTANCE_ID); | ||
| emitEvent(INSTANCE_ID, event); | ||
| } | ||
|
|
||
| type NewWalletType = 'hardware' | 'created' | 'restored'; | ||
|
|
||
| export function trackWalletCreation(newWalletType: NewWalletType): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'new-wallet/' + newWalletType); | ||
| } | ||
|
|
||
| export function trackNavigation(path: string): void { | ||
| if (path.match(TRACKED_ROUTES)) { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'navigate' + path); | ||
| } | ||
| } | ||
|
|
||
| export function trackSend(): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'new-transaction/send'); | ||
| } | ||
|
|
||
| export function trackDelegation(): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'delegation'); | ||
| } | ||
|
|
||
| export function trackWithdrawal(shouldDeregister: boolean): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| if (shouldDeregister) { | ||
| emitEvent(INSTANCE_ID, 'deregister'); | ||
| } else { | ||
| emitEvent(INSTANCE_ID, 'withdrawal'); | ||
| } | ||
| } | ||
|
|
||
| export function trackCatalystRegistration(): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'new-transaction/catalyst'); | ||
| } | ||
|
|
||
| export function trackSetLocale(locale: string): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'set-locale/' + locale); | ||
| } | ||
|
|
||
| export function trackSetUnitOfAccount(unitOfAccount: string): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'unit-of-account/' + unitOfAccount); | ||
| } | ||
|
|
||
| export function trackUpdateTheme(theme: string): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'update-theme/' + theme); | ||
| } | ||
|
|
||
| export function trackUriPrompt(choice: 'skip' | 'allow'): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'uri-prompt/' + choice); | ||
| } | ||
|
|
||
| export function trackBuySellDialog(): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'buy-sell-ada'); | ||
| } | ||
|
|
||
| export function trackExportWallet(): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'export-wallet'); | ||
| } | ||
|
|
||
| export function trackRemoveWallet(): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'remove-wallet'); | ||
| } | ||
|
|
||
| export function trackResyncWallet(): void { | ||
| if (INSTANCE_ID == null) { | ||
| return; | ||
| } | ||
| emitEvent(INSTANCE_ID, 'resync-wallet'); | ||
| } | ||
|
|
||
| function generateAnalyticsInstanceId(): string { | ||
| // Matomo requires 16 character hex string | ||
| return cryptoRandomString({ length: 16 }); | ||
| } | ||
|
|
||
| function emitEvent(instanceId: string, event: string): void { | ||
| if (environment.isDev() || environment.isTest()) { | ||
| return; | ||
| } | ||
|
|
||
| const isTestnet = stores.profile.selectedNetwork != null ? | ||
| isTestnetFunc(stores.profile.selectedNetwork) : | ||
| false; | ||
|
|
||
| // https://developer.matomo.org/api-reference/tracking-api | ||
| const params = { | ||
| idsite: SITE_ID, | ||
| rec: '1', | ||
| action_name: (isTestnet ? 'testnet/' : '') + event, | ||
| url: `yoroi.extension/${isTestnet ? 'testnet/' : ''}${event}`, | ||
| _id: INSTANCE_ID, | ||
| rand: `${Date.now()}-${Math.random()}`, | ||
| apiv: '1' | ||
| }; | ||
| const url = `${MATOMO_URL}?${querystring.stringify(params)}`; | ||
|
|
||
| fetch(url); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
113 changes: 113 additions & 0 deletions
113
packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/EpochProgressCard.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| // @flow | ||
| import type { Node } from 'react'; | ||
| import { Box } from '@mui/system'; | ||
| import { CircularProgress, Stack, Typography } from '@mui/material'; | ||
|
|
||
| type Props = {| | ||
| +percentage: number, | ||
| +days: string, | ||
| +currentEpoch: number, | ||
| +startEpochDate: string, | ||
| +endEpochDate: string, | ||
| |}; | ||
|
|
||
| export function EpochProgressCard({ | ||
| percentage, | ||
| days, | ||
| currentEpoch, | ||
| startEpochDate, | ||
| endEpochDate, | ||
| }: Props): Node { | ||
| return ( | ||
| <Box> | ||
| <Stack direction="row" spacing={2} justifyContent="flex-start"> | ||
| <Graph value={percentage} days={days} /> | ||
| <Stack direction="column" flexGrow="1"> | ||
| <Title label="Current Epoch" value={currentEpoch} /> | ||
| <Stack direction="row" spacing={3} mt="50px" justifyContent="space-between"> | ||
| <LabelWithValue label="Epoch started at" value={startEpochDate} /> | ||
| <LabelWithValue label="Epoch ends at" value={endEpochDate} /> | ||
| </Stack> | ||
| </Stack> | ||
| </Stack> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| type TitleProps = {| | ||
| +label: string, | ||
| +value: string | number, | ||
| |}; | ||
| const Title = ({ label, value }: TitleProps): Node => { | ||
| return ( | ||
| <Box> | ||
| <Typography fontWeight="500" color="var(--yoroi-palette-primary-300)"> | ||
| {label}: {value} | ||
| </Typography> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| type InfoColumnProps = {| | ||
| +label: string, | ||
| +value: string | number, | ||
| |}; | ||
| const LabelWithValue = ({ label, value }: InfoColumnProps): Node => { | ||
| return ( | ||
| <Box> | ||
| <Typography | ||
| style={{ textTransform: 'uppercase' }} | ||
| variant="caption" | ||
| mb="4px" | ||
| color="var(--yoroi-palette-gray-600)" | ||
| > | ||
| {label} | ||
| </Typography> | ||
| <Typography color="var(--yoroi-palette-gray-900)">{value}</Typography> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| const Graph = ({ value, days }): Node => { | ||
| return ( | ||
| <Box mr="8px" position="relative" display="flex" justifyContent="center"> | ||
| <CircularProgress | ||
| size={120} | ||
| thickness={7} | ||
| variant="determinate" | ||
| value={value} | ||
| sx={{ | ||
| color: 'var(--yoroi-palette-primary-300)', | ||
| animationDuration: '550ms', | ||
| position: 'absolute', | ||
| zIndex: 1, | ||
| }} | ||
| /> | ||
| <CircularProgress | ||
| size={120} | ||
| thickness={7} | ||
| variant="determinate" | ||
| sx={{ | ||
| color: 'var(--yoroi-palette-gray-50)', | ||
| }} | ||
| value={100} | ||
| /> | ||
| <Box | ||
| position="absolute" | ||
| sx={{ | ||
| top: '30%', | ||
| left: '50%', | ||
| transform: 'translate(-50%)', | ||
| textAlign: 'center', | ||
| }} | ||
| > | ||
| <Typography variant="h4" color="var(--yoroi-palette-gray-900)"> | ||
| {value}% | ||
| </Typography> | ||
| <Typography variant="caption1" fontSize="12px" color="var(--yoroi-palette-gray-600)"> | ||
| {days} days | ||
| </Typography> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; |
Oops, something went wrong.