ryanml
3 years ago
commit
48f4e9845b
|
After Width: | Height: | Size: 1022 KiB |
@ -0,0 +1,37 @@ |
|||||||
|
import { cloneDeep } from 'lodash'; |
||||||
|
import { LEDGER_TRANSPORT_TYPES } from '../../../shared/constants/hardware-wallets'; |
||||||
|
|
||||||
|
const version = 66; |
||||||
|
|
||||||
|
/** |
||||||
|
* Changes the useLedgerLive boolean property to the ledgerTransportType enum |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
version, |
||||||
|
async migrate(originalVersionedData) { |
||||||
|
const versionedData = cloneDeep(originalVersionedData); |
||||||
|
versionedData.meta.version = version; |
||||||
|
const state = versionedData.data; |
||||||
|
const newState = transformState(state); |
||||||
|
versionedData.data = newState; |
||||||
|
return versionedData; |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
function transformState(state) { |
||||||
|
const defaultTransportType = window.navigator.hid |
||||||
|
? LEDGER_TRANSPORT_TYPES.WEBHID |
||||||
|
: LEDGER_TRANSPORT_TYPES.U2F; |
||||||
|
const useLedgerLive = Boolean(state.PreferencesController?.useLedgerLive); |
||||||
|
const newState = { |
||||||
|
...state, |
||||||
|
PreferencesController: { |
||||||
|
...state?.PreferencesController, |
||||||
|
ledgerTransportType: useLedgerLive |
||||||
|
? LEDGER_TRANSPORT_TYPES.LIVE |
||||||
|
: defaultTransportType, |
||||||
|
}, |
||||||
|
}; |
||||||
|
delete newState.PreferencesController.useLedgerLive; |
||||||
|
return newState; |
||||||
|
} |
||||||
@ -0,0 +1,116 @@ |
|||||||
|
import { LEDGER_TRANSPORT_TYPES } from '../../../shared/constants/hardware-wallets'; |
||||||
|
import migration66 from './066'; |
||||||
|
|
||||||
|
describe('migration #66', () => { |
||||||
|
beforeEach(() => { |
||||||
|
jest.resetAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should update the version metadata', async () => { |
||||||
|
const oldStorage = { |
||||||
|
meta: { |
||||||
|
version: 65, |
||||||
|
}, |
||||||
|
data: {}, |
||||||
|
}; |
||||||
|
|
||||||
|
const newStorage = await migration66.migrate(oldStorage); |
||||||
|
expect(newStorage.meta).toStrictEqual({ |
||||||
|
version: 66, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set ledgerTransportType to `u2f` if no preferences controller exists and webhid is not available', async () => { |
||||||
|
const oldStorage = { |
||||||
|
meta: {}, |
||||||
|
data: {}, |
||||||
|
}; |
||||||
|
|
||||||
|
const newStorage = await migration66.migrate(oldStorage); |
||||||
|
expect( |
||||||
|
newStorage.data.PreferencesController.ledgerTransportType, |
||||||
|
).toStrictEqual(LEDGER_TRANSPORT_TYPES.U2F); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set ledgerTransportType to `u2f` if no useLedgerLive property exists and webhid is not available', async () => { |
||||||
|
const oldStorage = { |
||||||
|
meta: {}, |
||||||
|
data: { |
||||||
|
PreferencesController: {}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const newStorage = await migration66.migrate(oldStorage); |
||||||
|
expect( |
||||||
|
newStorage.data.PreferencesController.ledgerTransportType, |
||||||
|
).toStrictEqual(LEDGER_TRANSPORT_TYPES.U2F); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set ledgerTransportType to `u2f` if useLedgerLive is false and webhid is not available', async () => { |
||||||
|
const oldStorage = { |
||||||
|
meta: {}, |
||||||
|
data: { |
||||||
|
PreferencesController: { |
||||||
|
useLedgerLive: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const newStorage = await migration66.migrate(oldStorage); |
||||||
|
expect( |
||||||
|
newStorage.data.PreferencesController.ledgerTransportType, |
||||||
|
).toStrictEqual(LEDGER_TRANSPORT_TYPES.U2F); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set ledgerTransportType to `webhid` if useLedgerLive is false and webhid is available', async () => { |
||||||
|
const oldStorage = { |
||||||
|
meta: {}, |
||||||
|
data: { |
||||||
|
PreferencesController: { |
||||||
|
useLedgerLive: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
jest |
||||||
|
.spyOn(window, 'navigator', 'get') |
||||||
|
.mockImplementation(() => ({ hid: true })); |
||||||
|
const newStorage = await migration66.migrate(oldStorage); |
||||||
|
expect( |
||||||
|
newStorage.data.PreferencesController.ledgerTransportType, |
||||||
|
).toStrictEqual(LEDGER_TRANSPORT_TYPES.WEBHID); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set ledgerTransportType to `ledgerLive` if useLedgerLive is true', async () => { |
||||||
|
const oldStorage = { |
||||||
|
meta: {}, |
||||||
|
data: { |
||||||
|
PreferencesController: { |
||||||
|
useLedgerLive: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const newStorage = await migration66.migrate(oldStorage); |
||||||
|
expect( |
||||||
|
newStorage.data.PreferencesController.ledgerTransportType, |
||||||
|
).toStrictEqual('ledgerLive'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not change ledgerTransportType if useLedgerLive is true and webhid is available', async () => { |
||||||
|
const oldStorage = { |
||||||
|
meta: {}, |
||||||
|
data: { |
||||||
|
PreferencesController: { |
||||||
|
useLedgerLive: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
jest |
||||||
|
.spyOn(window, 'navigator', 'get') |
||||||
|
.mockImplementation(() => ({ hid: true })); |
||||||
|
const newStorage = await migration66.migrate(oldStorage); |
||||||
|
expect( |
||||||
|
newStorage.data.PreferencesController.ledgerTransportType, |
||||||
|
).toStrictEqual(LEDGER_TRANSPORT_TYPES.LIVE); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
export const readAddressAsContract = async (ethQuery, address) => { |
||||||
|
let contractCode; |
||||||
|
try { |
||||||
|
contractCode = await ethQuery.getCode(address); |
||||||
|
} catch (e) { |
||||||
|
contractCode = null; |
||||||
|
} |
||||||
|
|
||||||
|
const isContractAddress = |
||||||
|
contractCode && contractCode !== '0x' && contractCode !== '0x0'; |
||||||
|
return { contractCode, isContractAddress }; |
||||||
|
}; |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
const { readAddressAsContract } = require('./contract-utils'); |
||||||
|
|
||||||
|
describe('Contract Utils', () => { |
||||||
|
it('checks is an address is a contract address or not', async () => { |
||||||
|
let mockEthQuery = { |
||||||
|
getCode: () => { |
||||||
|
return '0xa'; |
||||||
|
}, |
||||||
|
}; |
||||||
|
const { isContractAddress } = await readAddressAsContract( |
||||||
|
mockEthQuery, |
||||||
|
'0x76B4aa9Fc4d351a0062c6af8d186DF959D564A84', |
||||||
|
); |
||||||
|
expect(isContractAddress).toStrictEqual(true); |
||||||
|
|
||||||
|
mockEthQuery = { |
||||||
|
getCode: () => { |
||||||
|
return '0x'; |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const { |
||||||
|
isContractAddress: isNotContractAddress, |
||||||
|
} = await readAddressAsContract( |
||||||
|
mockEthQuery, |
||||||
|
'0x76B4aa9Fc4d351a0062c6af8d186DF959D564A84', |
||||||
|
); |
||||||
|
expect(isNotContractAddress).toStrictEqual(false); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './ledger-instruction-field'; |
||||||
@ -0,0 +1,153 @@ |
|||||||
|
import React, { useEffect } from 'react'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { |
||||||
|
LEDGER_TRANSPORT_TYPES, |
||||||
|
LEDGER_USB_VENDOR_ID, |
||||||
|
WEBHID_CONNECTED_STATUSES, |
||||||
|
} from '../../../../shared/constants/hardware-wallets'; |
||||||
|
import { |
||||||
|
PLATFORM_FIREFOX, |
||||||
|
ENVIRONMENT_TYPE_FULLSCREEN, |
||||||
|
} from '../../../../shared/constants/app'; |
||||||
|
|
||||||
|
import { |
||||||
|
setLedgerWebHidConnectedStatus, |
||||||
|
getLedgerWebHidConnectedStatus, |
||||||
|
} from '../../../ducks/app/app'; |
||||||
|
|
||||||
|
import Typography from '../../ui/typography/typography'; |
||||||
|
import Button from '../../ui/button'; |
||||||
|
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||||
|
import { |
||||||
|
COLORS, |
||||||
|
FONT_WEIGHT, |
||||||
|
TYPOGRAPHY, |
||||||
|
} from '../../../helpers/constants/design-system'; |
||||||
|
import Dialog from '../../ui/dialog'; |
||||||
|
import { |
||||||
|
getPlatform, |
||||||
|
getEnvironmentType, |
||||||
|
} from '../../../../app/scripts/lib/util'; |
||||||
|
import { getLedgerTransportType } from '../../../ducks/metamask/metamask'; |
||||||
|
|
||||||
|
const renderInstructionStep = (text, show = true, color = COLORS.PRIMARY3) => { |
||||||
|
return ( |
||||||
|
show && ( |
||||||
|
<Typography |
||||||
|
boxProps={{ margin: 0 }} |
||||||
|
color={color} |
||||||
|
fontWeight={FONT_WEIGHT.BOLD} |
||||||
|
variant={TYPOGRAPHY.H7} |
||||||
|
> |
||||||
|
{text} |
||||||
|
</Typography> |
||||||
|
) |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default function LedgerInstructionField({ showDataInstruction }) { |
||||||
|
const t = useI18nContext(); |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
|
const webHidConnectedStatus = useSelector(getLedgerWebHidConnectedStatus); |
||||||
|
const ledgerTransportType = useSelector(getLedgerTransportType); |
||||||
|
const environmentType = getEnvironmentType(); |
||||||
|
const environmentTypeIsFullScreen = |
||||||
|
environmentType === ENVIRONMENT_TYPE_FULLSCREEN; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const initialConnectedDeviceCheck = async () => { |
||||||
|
if ( |
||||||
|
ledgerTransportType === LEDGER_TRANSPORT_TYPES.WEBHID && |
||||||
|
webHidConnectedStatus !== WEBHID_CONNECTED_STATUSES.CONNECTED |
||||||
|
) { |
||||||
|
const devices = await window.navigator.hid.getDevices(); |
||||||
|
const webHidIsConnected = devices.some( |
||||||
|
(device) => device.vendorId === Number(LEDGER_USB_VENDOR_ID), |
||||||
|
); |
||||||
|
dispatch( |
||||||
|
setLedgerWebHidConnectedStatus( |
||||||
|
webHidIsConnected |
||||||
|
? WEBHID_CONNECTED_STATUSES.CONNECTED |
||||||
|
: WEBHID_CONNECTED_STATUSES.NOT_CONNECTED, |
||||||
|
), |
||||||
|
); |
||||||
|
} |
||||||
|
}; |
||||||
|
initialConnectedDeviceCheck(); |
||||||
|
}, [dispatch, ledgerTransportType, webHidConnectedStatus]); |
||||||
|
|
||||||
|
const usingLedgerLive = ledgerTransportType === LEDGER_TRANSPORT_TYPES.LIVE; |
||||||
|
const usingWebHID = ledgerTransportType === LEDGER_TRANSPORT_TYPES.WEBHID; |
||||||
|
|
||||||
|
const isFirefox = getPlatform() === PLATFORM_FIREFOX; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div className="confirm-detail-row"> |
||||||
|
<Dialog type="message"> |
||||||
|
<div className="ledger-live-dialog"> |
||||||
|
{renderInstructionStep(t('ledgerConnectionInstructionHeader'))} |
||||||
|
{renderInstructionStep( |
||||||
|
`- ${t('ledgerConnectionInstructionStepOne')}`, |
||||||
|
!isFirefox && usingLedgerLive, |
||||||
|
)} |
||||||
|
{renderInstructionStep( |
||||||
|
`- ${t('ledgerConnectionInstructionStepTwo')}`, |
||||||
|
!isFirefox && usingLedgerLive, |
||||||
|
)} |
||||||
|
{renderInstructionStep( |
||||||
|
`- ${t('ledgerConnectionInstructionStepThree')}`, |
||||||
|
)} |
||||||
|
{renderInstructionStep( |
||||||
|
`- ${t('ledgerConnectionInstructionStepFour')}`, |
||||||
|
showDataInstruction, |
||||||
|
)} |
||||||
|
{renderInstructionStep( |
||||||
|
<span> |
||||||
|
<Button |
||||||
|
type="link" |
||||||
|
onClick={async () => { |
||||||
|
if (environmentTypeIsFullScreen) { |
||||||
|
const connectedDevices = await window.navigator.hid.requestDevice( |
||||||
|
{ |
||||||
|
filters: [{ vendorId: LEDGER_USB_VENDOR_ID }], |
||||||
|
}, |
||||||
|
); |
||||||
|
const webHidIsConnected = connectedDevices.some( |
||||||
|
(device) => |
||||||
|
device.vendorId === Number(LEDGER_USB_VENDOR_ID), |
||||||
|
); |
||||||
|
dispatch( |
||||||
|
setLedgerWebHidConnectedStatus({ |
||||||
|
webHidConnectedStatus: webHidIsConnected |
||||||
|
? WEBHID_CONNECTED_STATUSES.CONNECTED |
||||||
|
: WEBHID_CONNECTED_STATUSES.NOT_CONNECTED, |
||||||
|
}), |
||||||
|
); |
||||||
|
} else { |
||||||
|
global.platform.openExtensionInBrowser(null, null, true); |
||||||
|
} |
||||||
|
}} |
||||||
|
> |
||||||
|
{environmentTypeIsFullScreen |
||||||
|
? t('clickToConnectLedgerViaWebHID') |
||||||
|
: t('openFullScreenForLedgerWebHid')} |
||||||
|
</Button> |
||||||
|
</span>, |
||||||
|
usingWebHID && |
||||||
|
webHidConnectedStatus === |
||||||
|
WEBHID_CONNECTED_STATUSES.NOT_CONNECTED, |
||||||
|
COLORS.SECONDARY1, |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Dialog> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
LedgerInstructionField.propTypes = { |
||||||
|
showDataInstruction: PropTypes.bool, |
||||||
|
}; |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
.onboarding-metametrics { |
||||||
|
width: 600px; |
||||||
|
|
||||||
|
ul { |
||||||
|
margin: 24px 0 0 0; |
||||||
|
|
||||||
|
li { |
||||||
|
padding-bottom: 20px; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.fa { |
||||||
|
width: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.fa-check { |
||||||
|
margin-inline-end: 12px; |
||||||
|
color: #1acc56; |
||||||
|
} |
||||||
|
|
||||||
|
.fa-times { |
||||||
|
margin-inline-end: 12px; |
||||||
|
color: #d0021b; |
||||||
|
} |
||||||
|
|
||||||
|
&__terms a { |
||||||
|
color: $Blue-500; |
||||||
|
} |
||||||
|
|
||||||
|
&__buttons { |
||||||
|
margin: 24px auto 0 auto; |
||||||
|
justify-content: space-between; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
button { |
||||||
|
margin-bottom: 24px; |
||||||
|
width: 200px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,152 @@ |
|||||||
|
import React, { useContext } from 'react'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import { useHistory } from 'react-router-dom'; |
||||||
|
import Typography from '../../../components/ui/typography/typography'; |
||||||
|
import { |
||||||
|
TYPOGRAPHY, |
||||||
|
FONT_WEIGHT, |
||||||
|
TEXT_ALIGN, |
||||||
|
COLORS, |
||||||
|
} from '../../../helpers/constants/design-system'; |
||||||
|
import Button from '../../../components/ui/button'; |
||||||
|
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||||
|
import { setParticipateInMetaMetrics } from '../../../store/actions'; |
||||||
|
import { |
||||||
|
getFirstTimeFlowTypeRoute, |
||||||
|
getFirstTimeFlowType, |
||||||
|
getParticipateInMetaMetrics, |
||||||
|
} from '../../../selectors'; |
||||||
|
|
||||||
|
import { MetaMetricsContext } from '../../../contexts/metametrics'; |
||||||
|
|
||||||
|
const firstTimeFlowTypeNameMap = { |
||||||
|
create: 'Selected Create New Wallet', |
||||||
|
import: 'Selected Import Wallet', |
||||||
|
}; |
||||||
|
|
||||||
|
export default function OnboardingMetametrics() { |
||||||
|
const t = useI18nContext(); |
||||||
|
const dispatch = useDispatch(); |
||||||
|
const history = useHistory(); |
||||||
|
|
||||||
|
const nextRoute = useSelector(getFirstTimeFlowTypeRoute); |
||||||
|
const firstTimeFlowType = useSelector(getFirstTimeFlowType); |
||||||
|
|
||||||
|
const participateInMetaMetrics = useSelector(getParticipateInMetaMetrics); |
||||||
|
const firstTimeSelectionMetaMetricsName = |
||||||
|
firstTimeFlowTypeNameMap[firstTimeFlowType]; |
||||||
|
|
||||||
|
const metricsEvent = useContext(MetaMetricsContext); |
||||||
|
|
||||||
|
const onConfirm = async () => { |
||||||
|
const [, metaMetricsId] = await dispatch(setParticipateInMetaMetrics(true)); |
||||||
|
|
||||||
|
try { |
||||||
|
if (!participateInMetaMetrics) { |
||||||
|
metricsEvent({ |
||||||
|
eventOpts: { |
||||||
|
category: 'Onboarding', |
||||||
|
action: 'Metrics Option', |
||||||
|
name: 'Metrics Opt In', |
||||||
|
}, |
||||||
|
isOptIn: true, |
||||||
|
flushImmediately: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
metricsEvent({ |
||||||
|
eventOpts: { |
||||||
|
category: 'Onboarding', |
||||||
|
action: 'Import or Create', |
||||||
|
name: firstTimeSelectionMetaMetricsName, |
||||||
|
}, |
||||||
|
isOptIn: true, |
||||||
|
metaMetricsId, |
||||||
|
flushImmediately: true, |
||||||
|
}); |
||||||
|
} finally { |
||||||
|
history.push(nextRoute); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const onCancel = async () => { |
||||||
|
await dispatch(setParticipateInMetaMetrics(false)); |
||||||
|
|
||||||
|
try { |
||||||
|
if (!participateInMetaMetrics) { |
||||||
|
metricsEvent({ |
||||||
|
eventOpts: { |
||||||
|
category: 'Onboarding', |
||||||
|
action: 'Metrics Option', |
||||||
|
name: 'Metrics Opt Out', |
||||||
|
}, |
||||||
|
isOptIn: true, |
||||||
|
flushImmediately: true, |
||||||
|
}); |
||||||
|
} |
||||||
|
} finally { |
||||||
|
history.push(nextRoute); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="onboarding-metametrics"> |
||||||
|
<Typography |
||||||
|
variant={TYPOGRAPHY.H2} |
||||||
|
align={TEXT_ALIGN.CENTER} |
||||||
|
fontWeight={FONT_WEIGHT.BOLD} |
||||||
|
> |
||||||
|
{t('metametricsTitle')} |
||||||
|
</Typography> |
||||||
|
<Typography align={TEXT_ALIGN.CENTER}> |
||||||
|
{t('metametricsOptInDescription2')} |
||||||
|
</Typography> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<i className="fa fa-check" /> |
||||||
|
{t('metametricsCommitmentsAllowOptOut2')} |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<i className="fa fa-check" /> |
||||||
|
{t('metametricsCommitmentsSendAnonymizedEvents')} |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<i className="fa fa-times" /> |
||||||
|
{t('metametricsCommitmentsNeverCollect')} |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<i className="fa fa-times" /> |
||||||
|
{t('metametricsCommitmentsNeverIP')} |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<i className="fa fa-times" /> |
||||||
|
{t('metametricsCommitmentsNeverSell')} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<Typography |
||||||
|
color={COLORS.UI4} |
||||||
|
align={TEXT_ALIGN.CENTER} |
||||||
|
variant={TYPOGRAPHY.H6} |
||||||
|
className="onboarding-metametrics__terms" |
||||||
|
> |
||||||
|
{t('gdprMessage', [ |
||||||
|
<a |
||||||
|
key="metametrics-bottom-text-wrapper" |
||||||
|
href="https://metamask.io/privacy.html" |
||||||
|
target="_blank" |
||||||
|
rel="noopener noreferrer" |
||||||
|
> |
||||||
|
{t('gdprMessagePrivacyPolicy')} |
||||||
|
</a>, |
||||||
|
])} |
||||||
|
</Typography> |
||||||
|
<div className="onboarding-metametrics__buttons"> |
||||||
|
<Button type="secondary" onClick={onCancel}> |
||||||
|
{t('noThanks')} |
||||||
|
</Button> |
||||||
|
<Button type="primary" onClick={onConfirm}> |
||||||
|
{t('affirmAgree')} |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import OnboardingMetametrics from './metametrics'; |
||||||
|
|
||||||
|
export default { |
||||||
|
title: 'Onboarding', |
||||||
|
id: __filename, |
||||||
|
}; |
||||||
|
|
||||||
|
export const OnboardingComponent = () => <OnboardingMetametrics />; |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
.onboarding-pin-extension { |
||||||
|
max-width: 800px; |
||||||
|
|
||||||
|
.control-dots .dot { |
||||||
|
background: $ui-2; |
||||||
|
box-shadow: none; |
||||||
|
|
||||||
|
&.selected { |
||||||
|
background: $ui-4; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__diagram { |
||||||
|
margin: 24px auto; |
||||||
|
width: 799px; |
||||||
|
height: 320px; |
||||||
|
} |
||||||
|
|
||||||
|
&__buttons { |
||||||
|
max-width: 50%; |
||||||
|
margin: 40px auto 0 auto; |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,75 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import { useHistory } from 'react-router-dom'; |
||||||
|
|
||||||
|
import { Carousel } from 'react-responsive-carousel'; |
||||||
|
import Typography from '../../../components/ui/typography/typography'; |
||||||
|
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||||
|
import Button from '../../../components/ui/button'; |
||||||
|
import { |
||||||
|
TYPOGRAPHY, |
||||||
|
FONT_WEIGHT, |
||||||
|
TEXT_ALIGN, |
||||||
|
} from '../../../helpers/constants/design-system'; |
||||||
|
import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'; |
||||||
|
import OnboardingPinBillboard from './pin-billboard'; |
||||||
|
|
||||||
|
export default function OnboardingPinExtension() { |
||||||
|
const t = useI18nContext(); |
||||||
|
const [selectedIndex, setSelectedIndex] = useState(0); |
||||||
|
const history = useHistory(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="onboarding-pin-extension"> |
||||||
|
<Typography |
||||||
|
variant={TYPOGRAPHY.H2} |
||||||
|
align={TEXT_ALIGN.CENTER} |
||||||
|
fontWeight={FONT_WEIGHT.BOLD} |
||||||
|
> |
||||||
|
{t('onboardingPinExtensionTitle')} |
||||||
|
</Typography> |
||||||
|
<Carousel |
||||||
|
selectedItem={selectedIndex} |
||||||
|
showThumbs={false} |
||||||
|
showStatus={false} |
||||||
|
showArrows={false} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<Typography align={TEXT_ALIGN.CENTER}> |
||||||
|
{t('onboardingPinExtensionDescription')} |
||||||
|
</Typography> |
||||||
|
<div className="onboarding-pin-extension__diagram"> |
||||||
|
<OnboardingPinBillboard /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<Typography align={TEXT_ALIGN.CENTER}> |
||||||
|
{t('onboardingPinExtensionDescription2')} |
||||||
|
</Typography> |
||||||
|
<Typography align={TEXT_ALIGN.CENTER}> |
||||||
|
{t('onboardingPinExtensionDescription3')} |
||||||
|
</Typography> |
||||||
|
<img |
||||||
|
src="/images/onboarding-pin-browser.svg" |
||||||
|
width="799" |
||||||
|
height="320" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Carousel> |
||||||
|
<div className="onboarding-pin-extension__buttons"> |
||||||
|
<Button |
||||||
|
type="primary" |
||||||
|
onClick={() => { |
||||||
|
if (selectedIndex === 0) { |
||||||
|
setSelectedIndex(1); |
||||||
|
} else { |
||||||
|
history.push(DEFAULT_ROUTE); |
||||||
|
} |
||||||
|
}} |
||||||
|
> |
||||||
|
{selectedIndex === 0 ? t('next') : t('done')} |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import OnboardingPinExtension from './pin-extension'; |
||||||
|
|
||||||
|
export default { |
||||||
|
title: 'Onboarding', |
||||||
|
id: __filename, |
||||||
|
}; |
||||||
|
|
||||||
|
export const OnboardingComponent = () => <OnboardingPinExtension />; |
||||||
Loading…
Reference in new issue