lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

partial: Wizard css migration

Browse source
This commit is contained in:
Rafael Taranto 2025-05-08 09:10:52 +01:00
parent c425195ade
commit 2136e26de5
23 changed files with 166 additions and 323 deletions
Download patch file Download diff file Expand all files Collapse all files

2
new-lamassu-admin/src/components/Modal.jsx
View file

@ -53,7 +53,7 @@ const styles = {
padding: xl ? [[0, 60 + 28]] : small ? [[0, 16]] : [[0, 32]]
}),
button: ({ small, xl }) => ({
padding: [[0, 0, xl ? 26 : 0, 0]],
padding: [[0, 0, 0, 0]],
margin: xl
? [[0, 0, 'auto', 'auto']]
: small

43
new-lamassu-admin/src/pages/Wizard/Radio.module.css Normal file
View file

@ -0,0 +1,43 @@
.radioGroup {
flex-direction: row;
width: 600px;
}
.radioLabel {
width: 150px;
height: 48px;
}
.mailgunRadioGroup {
flex-direction: row;
width: 768px;
}
.mailgunRadioLabel {
width: 300px;
height: 48px;
}
.mdForm {
width: 385px;
}
.infoMessage {
display: flex;
margin-bottom: 20px;
}
.infoMessage > p {
width: 330px;
margin-top: 4px;
margin-left: 16px;
}
.actionButton {
margin-bottom: 32px;
}
.actionButtonLink {
text-decoration: none;
color: var(--zodiac);
}

33
new-lamassu-admin/src/pages/Wizard/Radio.styles.js
View file

@ -1,33 +0,0 @@
import { spacer, primaryColor } from 'src/styling/variables'
const LABEL_WIDTH = 150
export default {
radioGroup: {
flexDirection: 'row',
width: 600
},
radioLabel: {
width: LABEL_WIDTH,
height: 48
},
mdForm: {
width: 385
},
infoMessage: {
display: 'flex',
marginBottom: 20,
'& > p': {
width: 330,
marginTop: 4,
marginLeft: 16
}
},
actionButton: {
marginBottom: spacer * 4
},
actionButtonLink: {
textDecoration: 'none',
color: primaryColor
}
}

33
new-lamassu-admin/src/pages/Wizard/Wizard.jsx
View file

@ -1,36 +1,15 @@
import { useQuery, gql } from '@apollo/client'
import Dialog from '@mui/material/Dialog'
import DialogContent from '@mui/material/DialogContent'
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { useState, useContext } from 'react'
import { useHistory } from 'react-router-dom'
import { getWizardStep, STEPS } from 'src/pages/Wizard/helper'
import AppContext from 'src/AppContext'
import { backgroundColor } from 'src/styling/variables'
import Footer from './components/Footer'
const useStyles = makeStyles({
wrapper: {
display: 'flex',
padding: [[16, 0]],
flexDirection: 'column',
justifyContent: 'space-between',
backgroundColor: backgroundColor
},
welcomeBackground: {
background: 'url(/wizard-background.svg) no-repeat center center fixed',
backgroundColor: backgroundColor,
backgroundSize: 'cover'
},
blurred: {
filter: 'blur(4px)',
pointerEvents: 'none'
}
})
const GET_DATA = gql`
query getData {
config
@ -43,7 +22,6 @@ const GET_DATA = gql`
`
const Wizard = ({ fromAuthRegister }) => {
const classes = useStyles()
const { data, loading } = useQuery(GET_DATA)
const history = useHistory()
const { setWizardTested } = useContext(AppContext)
@ -68,11 +46,6 @@ const Wizard = ({ fromAuthRegister }) => {
}
const isWelcome = step === 0
const classNames = {
[classes.blurred]: footerExp,
[classes.wrapper]: true,
[classes.welcomeBackground]: isWelcome
}
const start = () => {
setFooterExp(false)
@ -91,6 +64,12 @@ const Wizard = ({ fromAuthRegister }) => {
}
const current = STEPS[step]
const classNames = {
'flex flex-col justify-between py-4 px-0 bg-white': true,
'bg-[url(/wizard-background.svg)] bg-no-repeat bg-center bg-fixed bg-cover':
isWelcome,
'blur-sm pointer-events-none': footerExp
}
return (
<Dialog fullScreen open={open}>

17
new-lamassu-admin/src/pages/Wizard/components/Commissions.jsx
View file

@ -1,5 +1,4 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import { useQuery, useMutation, gql } from '@apollo/client'
import * as R from 'ramda'
import React from 'react'
import Section from 'src/components/layout/Section'
@ -7,16 +6,8 @@ import TitleSection from 'src/components/layout/TitleSection'
import { mainFields, defaults, getSchema } from 'src/pages/Commissions/helper'
import { Table as EditableTable } from 'src/components/editableTable'
import styles from 'src/pages/AddMachine/styles'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
const useStyles = makeStyles(styles)
const useCommissionStyles = makeStyles({
autoComplete: {
width: '100%'
}
})
const GET_DATA = gql`
query getData {
config
@ -29,8 +20,6 @@ const SAVE_CONFIG = gql`
`
function Commissions({ isActive, doContinue }) {
const classes = useStyles()
const commissionClasses = useCommissionStyles()
const { data } = useQuery(GET_DATA)
const [saveConfig] = useMutation(SAVE_CONFIG, {
@ -49,7 +38,7 @@ function Commissions({ isActive, doContinue }) {
const locale = fromNamespace(namespaces.LOCALE)(data?.config)
return (
<div className={classes.wrapper}>
<div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
<TitleSection title="Commissions" />
<Section>
<EditableTable
@ -63,7 +52,7 @@ function Commissions({ isActive, doContinue }) {
save={save}
validationSchema={getSchema(locale)}
data={[]}
elements={mainFields(currency, locale, commissionClasses)}
elements={mainFields(currency)}
/>
</Section>
</div>

55
new-lamassu-admin/src/pages/Wizard/components/Footer.jsx
View file

@ -1,60 +1,27 @@
import Drawer from '@mui/material/Drawer'
import Grid from '@mui/material/Grid'
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { useState } from 'react'
import Modal from 'src/components/Modal'
import Stepper from 'src/components/Stepper'
import { P, H2, Info2 } from 'src/components/typography'
import { Button, Link } from 'src/components/buttons'
import { spacer } from 'src/styling/variables'
const useStyles = makeStyles(() => ({
drawer: {
borderTop: 'none',
boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)'
},
wrapper: {
padding: '32px 0',
flexGrow: 1,
height: 264
},
smallWrapper: {
height: 84
},
title: {
margin: [[0, spacer * 4, 0, 0]]
},
subtitle: {
marginTop: spacer,
marginBottom: 6,
lineHeight: 1.25,
display: 'inline'
},
modal: {
background: 'none',
boxShadow: 'none'
}
}))
function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
const classes = useStyles()
const [fullExample, setFullExample] = useState(false)
const wrapperClassNames = {
[classes.wrapper]: true,
[classes.smallWrapper]: !open
}
return (
<Drawer
anchor={'bottom'}
open={true}
variant={'persistent'}
classes={{ paperAnchorDockedBottom: classes.drawer }}>
<div className={classnames(wrapperClassNames)}>
<Grid container direction="row" justifyContent="center" alignItems="baseline">
classes={{ paperAnchorDockedBottom: 'border-t-0 shadow-sm' }}>
<div className={`py-8 flex-grow ${open ? 'h-[264px]' : 'h-[84px]'}`}>
<Grid
container
direction="row"
justifyContent="center"
alignItems="baseline">
<Grid
item
xs={5}
@ -62,8 +29,8 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
direction={open ? 'column' : 'row'}
justifyContent="flex-start"
alignItems="baseline">
<H2 className={classes.title}>Setup Lamassu Admin</H2>
<Info2 className={classes.subtitle}>{subtitle}</Info2>
<H2 className="m-0 mr-8">Setup Lamassu Admin</H2>
<Info2 className="mt-2 mb-2 leading-tight inline">{subtitle}</Info2>
{open && <P>{text}</P>}
</Grid>
<Grid
@ -121,7 +88,7 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
<Modal
closeOnEscape={true}
closeOnBackdropClick={true}
className={classes.modal}
className="bg-transparent shadow-none"
xl={true}
width={1152 + 120 + 56}
handleClose={() => {
@ -131,7 +98,7 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
<img width={1152} src={exImage} alt="" />
</Modal>
</Drawer>
);
)
}
export default Footer

11
new-lamassu-admin/src/pages/Wizard/components/Locales.jsx
View file

@ -1,12 +1,10 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import { useQuery, useMutation, gql } from '@apollo/client'
import * as R from 'ramda'
import React from 'react'
import Section from 'src/components/layout/Section'
import TitleSection from 'src/components/layout/TitleSection'
import { Table as EditableTable } from 'src/components/editableTable'
import styles from 'src/pages/AddMachine/styles'
import {
mainFields,
localeDefaults as defaults,
@ -16,8 +14,6 @@ import { toNamespace } from 'src/utils/config'
import { getConfiguredCoins } from '../helper'
const useStyles = makeStyles(styles)
const GET_DATA = gql`
query getData {
config
@ -52,7 +48,6 @@ const SAVE_CONFIG = gql`
`
function Locales({ isActive, doContinue }) {
const classes = useStyles()
const { data } = useQuery(GET_DATA)
const [saveConfig] = useMutation(SAVE_CONFIG, {
@ -72,7 +67,7 @@ function Locales({ isActive, doContinue }) {
const onChangeCoin = (prev, curr, setValue) => setValue(curr)
return (
<div className={classes.wrapper}>
<div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
<TitleSection title="Locales" />
<Section>
<EditableTable
@ -87,7 +82,7 @@ function Locales({ isActive, doContinue }) {
validationSchema={schema}
data={[]}
elements={mainFields(
R.merge(data, { cryptoCurrencies }),
R.mergeRight(data, { cryptoCurrencies }),
onChangeCoin
)}
/>

20
new-lamassu-admin/src/pages/Wizard/components/Mailgun.jsx
View file

@ -1,5 +1,4 @@
import { useMutation, useQuery, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import React, { useState, useEffect } from 'react'
import { H4, Info3 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
@ -10,21 +9,9 @@ import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
import { ActionButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import mailgunSchema from 'src/pages/Services/schemas/mailgun'
import styles from 'src/pages/Wizard/Radio.styles'
import classes from 'src/pages/Wizard/Radio.module.css'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
const useStyles = makeStyles({
...styles,
radioGroup: {
...styles.radioGroup,
width: 768
},
radioLabel: {
...styles.radioLabel,
width: 300
}
})
const GET_CONFIG = gql`
{
config
@ -55,7 +42,6 @@ const options = [
]
const Mailgun = () => {
const classes = useStyles()
const { data } = useQuery(GET_CONFIG)
const [saveConfig] = useMutation(SAVE_CONFIG)
const [saveAccounts] = useMutation(SAVE_ACCOUNTS)
@ -90,8 +76,8 @@ const Mailgun = () => {
<div className={classes.mdForm}>
<H4>Do you want to get notifications via email?</H4>
<RadioGroup
labelClassName={classes.radioLabel}
className={classes.radioGroup}
labelClassName={classes.mailgunRadioLabel}
className={classes.mailgunRadioGroup}
options={options}
value={emailActive}
onChange={event => handleRadio(event.target.value)}

23
new-lamassu-admin/src/pages/Wizard/components/Notifications.jsx
View file

@ -1,29 +1,13 @@
import { makeStyles } from '@mui/styles'
import Grid from '@mui/material/Grid'
import React, { useState } from 'react'
import Sidebar from 'src/components/layout/Sidebar'
import TitleSection from 'src/components/layout/TitleSection'
import Notifications from 'src/pages/Notifications/Notifications'
import addMachineStyles from 'src/pages/AddMachine/styles'
import { namespaces } from 'src/utils/config'
import Mailgun from './Mailgun'
const styles = {
...addMachineStyles,
grid: {
flex: 1,
height: '100%'
},
content: {
marginLeft: 48,
paddingTop: 15
}
}
const useStyles = makeStyles(styles)
const EMAIL = 'Email'
const SETUP_CHANNELS = 'Setup channels'
const TRANSACTION_ALERTS = 'Transaction alerts'
@ -40,21 +24,20 @@ const pages = [
const N = () => {
const [selected, setSelected] = useState(EMAIL)
const classes = useStyles()
const isSelected = it => selected === it
return (
<div className={classes.wrapper}>
<div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
<TitleSection title="Notifications"></TitleSection>
<Grid container className={classes.grid}>
<Grid container className="flex-1 h-full">
<Sidebar
data={pages}
isSelected={isSelected}
displayName={it => it}
onClick={it => setSelected(it)}
/>
<div className={classes.content}>
<div className="ml-12 pt-4">
{isSelected(EMAIL) && <Mailgun />}
{isSelected(SETUP_CHANNELS) && (
<Notifications

9
new-lamassu-admin/src/pages/Wizard/components/OperatorInfo.jsx
View file

@ -1,16 +1,9 @@
import { makeStyles } from '@mui/styles'
import React from 'react'
// import OperatorInfo from 'src/pages/OperatorInfo'
import styles from 'src/pages/AddMachine/styles'
const useStyles = makeStyles(styles)
function WizardOperatorInfo() {
const classes = useStyles()
return (
<div className={classes.wrapper}>
<div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
{/* <OperatorInfo wizard={true}></OperatorInfo> */}
</div>
)

42
new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx
View file

@ -1,5 +1,4 @@
import { useMutation, useQuery, gql } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import classnames from 'classnames'
import React, { useState } from 'react'
import { HelpTooltip } from 'src/components/Tooltip'
@ -11,7 +10,8 @@ import { Button, SupportLinkButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import twilio from 'src/pages/Services/schemas/twilio'
import styles from './Wallet/Shared.styles'
import sharedClasses from './Wallet/Shared.module.css'
import classes from './Twilio.module.css'
const GET_CONFIG = gql`
{
@ -26,30 +26,6 @@ const SAVE_ACCOUNTS = gql`
}
`
const useStyles = makeStyles({
...styles,
content: {
width: 820
},
radioLabel: {
...styles.radioLabel,
width: 280
},
wrapper: {
width: 1200,
height: 100,
margin: [[0, 'auto']]
},
title: {
marginLeft: 8,
marginBottom: 5
},
info: {
marginTop: 20,
marginBottom: 20
}
})
const options = [
{
code: 'enable',
@ -62,7 +38,6 @@ const options = [
]
function Twilio({ doContinue }) {
const classes = useStyles()
const [selected, setSelected] = useState(null)
const [error, setError] = useState(false)
@ -89,8 +64,8 @@ function Twilio({ doContinue }) {
}
const titleClasses = {
[classes.title]: true,
[classes.error]: error
'ml-2 mb-2': true,
[sharedClasses.error]: error
}
return (
@ -115,7 +90,7 @@ function Twilio({ doContinue }) {
<RadioGroup
labelClassName={classes.radioLabel}
className={classes.radioGroup}
className={sharedClasses.radioGroup}
options={options}
value={selected}
onChange={onSelect}
@ -143,12 +118,15 @@ function Twilio({ doContinue }) {
elements={twilio.elements}
validationSchema={twilio.getValidationSchema(accounts.twilio)}
buttonLabel={'Continue'}
buttonClass={classes.formButton}
buttonClass={sharedClasses.formButton}
/>
</>
)}
{selected !== 'enable' && (
<Button size="lg" onClick={clickContinue} className={classes.button}>
<Button
size="lg"
onClick={clickContinue}
className={sharedClasses.button}>
Continue
</Button>
)}

24
new-lamassu-admin/src/pages/Wizard/components/Twilio.module.css Normal file
View file

@ -0,0 +1,24 @@
.content {
width: 820px;
}
.radioLabel {
width: 280px;
height: 48px;
}
.wrapper {
width: 1200px;
height: 100px;
margin: 0 auto;
}
.title {
margin-left: 8px;
margin-bottom: 5px;
}
.info {
margin-top: 20px;
margin-bottom: 20px;
}

7
new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.jsx
View file

@ -1,5 +1,4 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import { P, H4 } from 'src/components/typography'
@ -9,9 +8,7 @@ import { Button } from 'src/components/buttons'
import { NamespacedTable as EditableTable } from 'src/components/editableTable'
import { toNamespace, namespaces } from 'src/utils/config'
import styles from './Shared.styles'
const useStyles = makeStyles(styles)
import classes from './Shared.module.css'
const GET_INFO = gql`
query getData {
config
@ -37,8 +34,6 @@ const SAVE_CONFIG = gql`
`
const AllSet = ({ data: currentData, doContinue }) => {
const classes = useStyles()
const { data } = useQuery(GET_INFO)
const [saveConfig] = useMutation(SAVE_CONFIG, {
onCompleted: doContinue

14
new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.jsx
View file

@ -1,5 +1,4 @@
import { useMutation, useQuery, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import React, { useState } from 'react'
import { P, H4 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
@ -8,16 +7,7 @@ import { SupportLinkButton, Button } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import blockcypherSchema from 'src/pages/Services/schemas/blockcypher'
import styles from './Shared.styles'
const useStyles = makeStyles({
...styles,
radioGroup: styles.radioGroup,
radioLabel: {
...styles.radioLabel,
width: 200
}
})
import classes from './Shared.module.css'
const GET_CONFIG = gql`
{
@ -42,8 +32,6 @@ const options = [
]
const Blockcypher = ({ addData }) => {
const classes = useStyles()
const { data } = useQuery(GET_CONFIG)
const [saveConfig] = useMutation(SAVE_ACCOUNTS, {
onCompleted: () => addData({ zeroConf: 'blockcypher' })

6
new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.jsx
View file

@ -1,5 +1,4 @@
import { useQuery, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import { Formik, Form, Field } from 'formik'
import React, { useState } from 'react'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
@ -9,9 +8,7 @@ import * as Yup from 'yup'
import { Button } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs/formik'
import styles from './Shared.styles'
const useStyles = makeStyles(styles)
import classes from './Shared.module.css'
const GET_CONFIG = gql`
{
@ -27,7 +24,6 @@ const schema = Yup.object().shape({
})
const ChooseCoin = ({ addData }) => {
const classes = useStyles()
const [error, setError] = useState(false)
const { data } = useQuery(GET_CONFIG)

6
new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.jsx
View file

@ -1,6 +1,5 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { getEquivalentCode } from '@lamassu/coins/lightUtils'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import { H4, Info3 } from 'src/components/typography'
@ -11,11 +10,9 @@ import { Button, SupportLinkButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import _schema from 'src/pages/Services/schemas'
import styles from './Shared.styles'
import classes from './Shared.module.css'
import { getItems } from './getItems'
const useStyles = makeStyles(styles)
const GET_CONFIG = gql`
{
accounts
@ -42,7 +39,6 @@ const isConfigurable = it =>
!R.isNil(it) && !R.contains(it)(['mock-exchange', 'no-exchange'])
const ChooseExchange = ({ data: currentData, addData }) => {
const classes = useStyles()
const { data } = useQuery(GET_CONFIG)
const [saveAccounts] = useMutation(SAVE_ACCOUNTS, {
onCompleted: () => submit()

6
new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.jsx
View file

@ -1,6 +1,5 @@
import { useQuery, gql } from "@apollo/client";
import { getEquivalentCode } from '@lamassu/coins/lightUtils'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import { H4 } from 'src/components/typography'
@ -8,11 +7,9 @@ import { H4 } from 'src/components/typography'
import { Button } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import styles from './Shared.styles'
import classes from './Shared.module.css'
import { getItems } from './getItems'
const useStyles = makeStyles(styles)
const GET_CONFIG = gql`
{
accountsConfig {
@ -25,7 +22,6 @@ const GET_CONFIG = gql`
`
const ChooseTicker = ({ data: currentData, addData }) => {
const classes = useStyles()
const { data } = useQuery(GET_CONFIG)
const [selected, setSelected] = useState(null)

6
new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.jsx
View file

@ -1,5 +1,4 @@
import { useQuery, useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import { H4, Info3 } from 'src/components/typography'
@ -11,11 +10,9 @@ import { RadioGroup } from 'src/components/inputs'
import _schema from 'src/pages/Services/schemas'
import bitgo from 'src/pages/Services/schemas/singlebitgo'
import styles from './Shared.styles'
import classes from './Shared.module.css'
import { getItems } from './getItems'
const useStyles = makeStyles(styles)
const GET_CONFIG = gql`
{
accounts
@ -52,7 +49,6 @@ const isLocalHosted = it =>
])
const ChooseWallet = ({ data: currentData, addData }) => {
const classes = useStyles()
// no need to fetch exchange config here
const schema = _schema()
const { data } = useQuery(GET_CONFIG)

45
new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.module.css Normal file
View file

@ -0,0 +1,45 @@
.radioGroup {
flex-direction: row;
width: 600px;
}
.radioLabel {
width: 150px;
height: 48px;
}
.mdForm {
width: 385px;
}
.infoMessage {
display: flex;
margin-bottom: 20px;
}
.infoMessage > p {
width: 330px;
margin-top: 4px;
margin-left: 16px;
}
.actionButton {
margin-bottom: 32px;
}
.actionButtonLink {
text-decoration: none;
color: var(--zodiac);
}
.error {
color: var(--tomato);
}
.button {
margin-top: 40px;
}
.formButton {
margin: 24px 0 0;
}

42
new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js
View file

@ -1,42 +0,0 @@
import { errorColor, spacer, primaryColor } from 'src/styling/variables'
const LABEL_WIDTH = 150
export default {
radioGroup: {
flexDirection: 'row',
width: 600
},
radioLabel: {
width: LABEL_WIDTH,
height: 48
},
mdForm: {
width: 385
},
infoMessage: {
display: 'flex',
marginBottom: 20,
'& > p': {
width: 330,
marginTop: 4,
marginLeft: 16
}
},
actionButton: {
marginBottom: spacer * 4
},
actionButtonLink: {
textDecoration: 'none',
color: primaryColor
},
error: {
color: errorColor
},
button: {
marginTop: spacer * 5
},
formButton: {
margin: [[spacer * 3, 0, 0]]
}
}

14
new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.jsx
View file

@ -1,11 +1,8 @@
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import Sidebar, { Stepper } from 'src/components/layout/Sidebar'
import TitleSection from 'src/components/layout/TitleSection'
import styles from 'src/pages/AddMachine/styles'
import AllSet from './AllSet'
import Blockcypher from './Blockcypher'
import ChooseCoin from './ChooseCoin'
@ -13,8 +10,6 @@ import ChooseExchange from './ChooseExchange'
import ChooseTicker from './ChooseTicker'
import ChooseWallet from './ChooseWallet'
const useStyles = makeStyles(styles)
const steps = [
{
label: 'Choose cryptocurrency',
@ -46,7 +41,6 @@ const Wallet = ({ doContinue }) => {
const [step, setStep] = useState(0)
const [data, setData] = useState({})
const classes = useStyles()
const mySteps = data?.coin === 'BTC' ? steps : R.remove(4, 1, steps)
const Component = mySteps[step].component
@ -57,17 +51,17 @@ const Wallet = ({ doContinue }) => {
}
return (
<div className={classes.wrapper}>
<div className={classes.headerDiv}>
<div className="w-[1132px] h-full mx-auto flex-1 flex flex-col">
<div className="flex justify-between items-center">
<TitleSection title="Wallet settings"></TitleSection>
</div>
<div className={classes.contentDiv}>
<div className="flex flex-1 flex-row">
<Sidebar>
{mySteps.map((it, idx) => (
<Stepper key={idx} step={step} it={it} idx={idx} steps={mySteps} />
))}
</Sidebar>
<div className={classes.contentWrapper}>
<div className="ml-12">
<Component data={data} addData={addData} doContinue={doContinue} />
</div>
</div>

29
new-lamassu-admin/src/pages/Wizard/components/Welcome.jsx
View file

@ -1,36 +1,13 @@
import { makeStyles } from '@mui/styles'
import React from 'react'
import { H1, P } from 'src/components/typography'
import { Button } from 'src/components/buttons'
import { comet } from 'src/styling/variables'
const styles = {
welcome: {
textAlign: 'center',
paddingTop: 256
},
title: {
lineHeight: 1,
fontSize: 48
},
getStarted: {
fontSize: 24,
fontWeight: 500,
marginBottom: 54,
color: comet
}
}
const useStyles = makeStyles(styles)
function Welcome({ doContinue }) {
const classes = useStyles()
return (
<div className={classes.welcome}>
<H1 className={classes.title}>Welcome to the Lamassu Admin</H1>
<P className={classes.getStarted}>
<div className="text-center flex flex-col items-center justify-center w-full h-full">
<H1 className="text-5xl">Welcome to the Lamassu Admin</H1>
<P className="text-2xl mb-14 text-comet">
To get you started, we’ve put together a wizard that will
<br />
help set up what you need before pairing your machines.

2
new-lamassu-admin/src/pages/Wizard/helper.jsx
View file

@ -8,8 +8,6 @@ import { fromNamespace, namespaces } from 'src/utils/config'
import Commissions from './components/Commissions'
import Locale from './components/Locales'
// import Notifications from './components/Notifications'
// import WizardOperatorInfo from './components/OperatorInfo'
import Twilio from './components/Twilio'
import Wallet from './components/Wallet/Wallet'
import Welcome from './components/Welcome'