+
}
+ testId='mining-action-setup-mining-hours'
+ disabled={!canAnyMiningBeRun}
+ onClick={openScheduling}
+ style={{ paddingLeft: 0, color: theme.helpTipText }}
+ >
+ {t.mining.viewActions.setUpMiningHours}
+
+
+ }
+ style={{ paddingLeft: 0, paddingRight: 12, color: theme.helpTipText }}
+ onClick={openSettings}
+ testId='mining-view-actions-settings-btn'
+ >
+ {t.mining.viewActions.miningSettings}
+
+
+ {t.common.nouns.expert}
+
+
+
}
+ onClick={toggleStatistics}
+ style={{ paddingLeft: 0, color: theme.helpTipText }}
+ >
+ {t.mining.viewActions.statistics}
+
+
+ {days &&
+ Object.values(t.common.weekdayCapitals).map((capital, index) => (
+
+ {capital}
+
+ ))}
+ {date && {day(date)}}
+
+ )
+}
+export default When
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/Schedule/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/Schedule/index.tsx
new file mode 100644
index 0000000000..b435f89e2c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/Schedule/index.tsx
@@ -0,0 +1,62 @@
+import Switch from '../../../../components/Switch'
+import { Schedule as ScheduleType } from '../../../../types/general'
+import useSingleAndDoubleClick from '../../../../utils/useSingleAndDoubleClick'
+
+import { ScheduleWrapper, ScheduleContainer, ScheduleInfo } from './styles'
+import When from './When'
+import MiningType from './MiningType'
+import Interval from './Interval'
+
+type ScheduleActions = {
+ toggle: () => void
+ select: () => void
+ edit: () => void
+}
+
+/**
+ * @name Schedule
+ * @description Container rendering a single schedule on schedule list
+ *
+ * @prop {string} id - id of schedule, used only for test-id
+ * @prop {boolean} enabled - indicates if the schedule is in enabled state
+ * @prop {number[]} [days] - days of the week when schedule is active
+ * @prop {Date} [date] - date when schedule is active
+ * @prop {Interval} interval - the time window when application should be mining according to this schedule
+ * @prop {MiningNodeType[]} type - the types of mining that should be done on this schedule
+ * @prop {() => void} toggle - called when user toggles enabled state of the schedule
+ * @prop {() => void} select - called when user selects schedule (on single click)
+ * @prop {boolean} selected - indicates whether schedule is in selected state
+ * @prop {() => void} edit - called when user wants to edit schedule (on double click)
+ */
+const Schedule = ({
+ id,
+ enabled,
+ days,
+ date,
+ interval,
+ type,
+ toggle,
+ selected,
+ select,
+ edit,
+}: ScheduleType & { selected: boolean } & ScheduleActions) => {
+ const clickHandler = useSingleAndDoubleClick({
+ single: select,
+ double: edit,
+ })
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Schedule
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/Schedule/styles.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/Schedule/styles.ts
new file mode 100644
index 0000000000..f50ad8f2ea
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/Schedule/styles.ts
@@ -0,0 +1,65 @@
+import styled from 'styled-components'
+
+export const StyledIndicatorContainer = styled.div<{
+ enabled: boolean
+ disabled: boolean
+}>`
+ color: ${({ theme, enabled, disabled }) => {
+ if (disabled) {
+ return theme.inputPlaceholder
+ }
+
+ if (enabled) {
+ return theme.onTextLight
+ }
+
+ return theme.nodeWarningText
+ }};
+ display: inline-block;
+ position: relative;
+ &:not(:last-of-type) {
+ margin-right: ${({ theme }) => theme.spacing(0.3)};
+ }
+`
+
+export const EnabledDot = styled.div<{ disabled: boolean }>`
+ background-color: ${({ theme, disabled }) =>
+ disabled ? theme.inputPlaceholder : theme.onTextLight};
+ position: absolute;
+ border-radius: 50%;
+ width: 3px;
+ height: 3px;
+ left: 50%;
+ transform: translate(-50%, -75%);
+`
+
+export const ScheduleWrapper = styled.div<{ selected: boolean }>`
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 ${({ theme }) => theme.spacing()};
+ background-color: ${({ theme, selected }) =>
+ selected ? theme.selectOptionHover : 'none'};
+ border-radius: ${({ theme, selected }) =>
+ selected ? theme.borderRadius() : 0};
+ &:not(:first-of-type) > div {
+ border-top: 1px solid
+ ${({ theme, selected }) => (selected ? 'transparent' : theme.borderColor)};
+ }
+ *[data-selected='true'] + & > div {
+ border-color: transparent;
+ }
+`
+
+export const ScheduleContainer = styled.div`
+ cursor: pointer;
+ user-select: none;
+ width: 100%;
+ box-sizing: border-box;
+ display: flex;
+ padding: ${({ theme }) => theme.spacing()} 0;
+ margin: 0;
+ justify-content: space-between;
+ align-items: center;
+`
+
+export const ScheduleInfo = styled.div``
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/index.test.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/index.test.tsx
new file mode 100644
index 0000000000..6bb49954b9
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/index.test.tsx
@@ -0,0 +1,53 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import themes from '../../../../../styles/themes'
+import t from '../../../../../locales'
+
+import DateScheduler from './'
+
+describe('DateScheduler', () => {
+ it('should return selected days', () => {
+ const onChange = jest.fn()
+ render(
+
+
+ ,
+ )
+
+ fireEvent.click(screen.getByText(t.common.weekdayCapitals.monday))
+ fireEvent.click(screen.getByText(t.common.weekdayCapitals.wednesday))
+
+ expect(onChange).toHaveBeenCalledTimes(2)
+ expect(onChange).toHaveBeenCalledWith({ days: [1], date: undefined })
+ expect(onChange).toHaveBeenCalledWith({ days: [3], date: undefined })
+ })
+
+ it('should return selected days in order', () => {
+ const onChange = jest.fn()
+ render(
+
+
+ ,
+ )
+
+ fireEvent.click(screen.getByText(t.common.weekdayCapitals.monday))
+
+ expect(onChange).toHaveBeenCalledTimes(1)
+ expect(onChange).toHaveBeenCalledWith({ days: [1, 3], date: undefined })
+ })
+
+ it('should clear the date when user selects a day', () => {
+ const onChange = jest.fn()
+ render(
+
+
+ ,
+ )
+
+ fireEvent.click(screen.getByText(t.common.weekdayCapitals.monday))
+
+ expect(onChange).toHaveBeenCalledTimes(1)
+ expect(onChange).toHaveBeenCalledWith({ days: [1], date: undefined })
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/index.tsx
new file mode 100644
index 0000000000..81733f2e94
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/index.tsx
@@ -0,0 +1,115 @@
+import { useState } from 'react'
+import { useTheme } from 'styled-components'
+
+import Text from '../../../../../components/Text'
+import Button from '../../../../../components/Button'
+import DatePicker from '../../../../../components/DatePicker'
+import { day } from '../../../../../utils/Format'
+import CalendarIcon from '../../../../../styles/Icons/Calendar'
+import t from '../../../../../locales'
+import WeekdaySelector from '../WeekdaySelector'
+
+import { HumanReadableScheduledDate } from './styles'
+
+/**
+ * @name DateScheduler
+ * @description Allows to select schedule - either a specific date or week days for recurring schedules
+ *
+ * @prop {number[]} [days] - selected days (where 0 - Sunday, 1 - Monday etc.)
+ * @prop {Date} [date] - selected date
+ * @prop {(schedule: { days?: number[]; date?: Date }) => void} onChange - called with either selected days array or selected day
+ */
+const DateScheduler = ({
+ days,
+ date,
+ onChange,
+}: {
+ days: number[]
+ date?: Date
+ onChange: (schedule: { days?: number[]; date?: Date }) => void
+}) => {
+ const theme = useTheme()
+ const [calendarOpen, setCalendarOpen] = useState(false)
+
+ const toggleCalendar = () => setCalendarOpen(s => !s)
+
+ const scheduleDays = (newDays: number[]) => {
+ const d = [...newDays]
+ d.sort((a, b) => a - b)
+ onChange({
+ days: d,
+ date: undefined,
+ })
+ setCalendarOpen(false)
+ }
+
+ const scheduleDate = (newDate: Date) => {
+ onChange({
+ date: newDate,
+ days: undefined,
+ })
+ setCalendarOpen(false)
+ }
+
+ return (
+ <>
+ scheduleDays(days)} />
+
+
+ {!date && days && (
+ <>
+
+ Every
+ {' '}
+
+ {days &&
+ days
+ .map(
+ selectedDay =>
+ Object.values(t.common.weekdayShort)[selectedDay],
+ )
+ .join(', ')}
+
+
+ )}
+ {date && (
+
+ )}
+
+
+
+
+
+
+
+ )
+}
+DateScheduler.defaultProps = {
+ days: [],
+}
+
+export default DateScheduler
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/styles.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/styles.ts
new file mode 100644
index 0000000000..90f55c1884
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/DateScheduler/styles.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const HumanReadableScheduledDate = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: 'center';
+`
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/DayTimePicker/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/DayTimePicker/index.tsx
new file mode 100644
index 0000000000..a0ba9da717
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/DayTimePicker/index.tsx
@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import { useTheme } from 'styled-components'
+import TimePicker from 'react-time-picker-input'
+
+import { Time } from '../../../../../../types/general'
+import Text from '../../../../../../components/Text'
+import Button from '../../../../../../components/Button'
+import { utcTimeToString, stringToUTCTime } from '../../utils'
+
+import { DayTimePickerWrapper } from './styles'
+
+/**
+ * @name DayTimePicker
+ * @description form input for 12 hour clock with am/pm toggle
+ *
+ * @prop {Time} [value] - initial value for the picker
+ * @prop {string} [label] - label for the value
+ * @prop {(t: Time) => void} onChange - callback called when value changes
+ */
+const DayTimePicker = ({
+ value,
+ label,
+ onChange,
+}: {
+ value?: Time
+ label?: string
+ onChange: (t: Time) => void
+}) => {
+ const theme = useTheme()
+
+ const [time, setTime] = useState(() => utcTimeToString(value))
+
+ const onTimeChangeHandler = (value: string) => {
+ setTime(value)
+ onChange(stringToUTCTime(value))
+ }
+
+ const isAm = Number(time.substring(0, 2)) < 12
+ const toggleAM = () => {
+ const hour = Number(time.substring(0, 2))
+ const minute = time.substring(3, 5)
+
+ if (hour >= 12) {
+ setTime(`${(hour - 12).toString().padStart(2, '0')}:${minute}`)
+ return
+ }
+
+ setTime(`${(hour + 12).toString().padStart(2, '0')}:${minute}`)
+ }
+
+ return (
+
+ {label && (
+
+ )}
+
+
+
+
+
+
+
+ )
+}
+
+export default DayTimePicker
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/DayTimePicker/styles.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/DayTimePicker/styles.ts
new file mode 100644
index 0000000000..878ae644d0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/DayTimePicker/styles.ts
@@ -0,0 +1,63 @@
+import styled from 'styled-components'
+
+export const DayTimePickerWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+
+ & .react-time-input-picker {
+ display: flex;
+ }
+
+ & .react-time-input-picker input {
+ border: 0;
+ outline: none;
+ margin: 0;
+ text-align: center;
+ font-family: AvenirHeavy;
+ font-size: 32px;
+ color: ${({ theme }) => theme.primary};
+ background: inherit;
+
+ &::-webkit-calendar-picker-indicator {
+ background: none;
+ display: none;
+ }
+
+ &::-webkit-datetime-edit-ampm-field {
+ display: none;
+ }
+ }
+
+ & .react-time-input-picker .inputWrapper:nth-child(2)::before {
+ content: ':';
+ font-size: 32px;
+ font-family: AvenirHeavy;
+ color: ${({ theme }) => theme.primary};
+ }
+
+ &
+ .react-time-input-picker
+ .inputWrapper:first-of-type
+ input::-webkit-outer-spin-button,
+ &
+ .react-time-input-picker
+ .inputWrapper:first-of-type
+ input::-webkit-inner-spin-button,
+ &
+ .react-time-input-picker
+ .inputWrapper:nth-child(2)
+ input::-webkit-outer-spin-button,
+ &
+ .react-time-input-picker
+ .inputWrapper:nth-child(2)
+ input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ & .react-time-input-picker .inputWrapper:nth-child(3) {
+ display: none !important;
+ }
+`
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/index.tsx
new file mode 100644
index 0000000000..829ff76f1c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/IntervalPicker/index.tsx
@@ -0,0 +1,58 @@
+import { useTheme } from 'styled-components'
+
+import { Interval } from '../../../../../types/general'
+
+import DayTimePicker from './DayTimePicker'
+
+const IntervalPicker = ({
+ value,
+ onChange,
+}: {
+ value: Interval
+ onChange: (v: Interval) => void
+}) => {
+ const theme = useTheme()
+
+ return (
+
+
+ onChange({
+ ...value,
+ from,
+ })
+ }
+ />
+
+
+ onChange({
+ ...value,
+ to,
+ })
+ }
+ />
+
+ toggle('tari')}
+ style={{ marginBottom: theme.spacing(0.75) }}
+ disabled={!miningTypesActive.includes('tari')}
+ >
+ {t.common.miningType['tari']}
+
+ toggle('merged')}
+ disabled={!miningTypesActive.includes('merged')}
+ >
+ {t.common.miningType['merged']}
+
+
+ )
+}
+MiningTypeSelector.defaultProps = {
+ value: [],
+}
+
+export default MiningTypeSelector
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/RemoveSchedule/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/RemoveSchedule/index.tsx
new file mode 100644
index 0000000000..8c28aec614
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/RemoveSchedule/index.tsx
@@ -0,0 +1,40 @@
+import { useTheme } from 'styled-components'
+
+import TrashIcon from '../../../../../styles/Icons/Trash2'
+import Text from '../../../../../components/Text'
+import Button from '../../../../../components/Button'
+import t from '../../../../../locales'
+
+/**
+ * @name RemoveSchedule
+ * @description button for removing schedule
+ *
+ * @prop {() => void} remove - callback on click
+ */
+const RemoveSchedule = ({ remove }: { remove: () => void }) => {
+ const theme = useTheme()
+ return (
+
+ }
+ onClick={remove}
+ style={{
+ paddingLeft: 0,
+ display: 'flex',
+ color: theme.helpTipText,
+ }}
+ >
+
+ {t.mining.scheduling.removeSchedule}
+
+
+
+ )
+}
+
+export default RemoveSchedule
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/ScheduleFormError/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/ScheduleFormError/index.tsx
new file mode 100644
index 0000000000..64acad04bf
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/ScheduleFormError/index.tsx
@@ -0,0 +1,69 @@
+import { useTheme } from 'styled-components'
+
+import Button from '../../../../../components/Button'
+import Text from '../../../../../components/Text'
+import Backdrop from '../../../../../components/Backdrop'
+import t from '../../../../../locales'
+import Actions from '../../Actions'
+
+import { ScheduleFormErrorWrapper } from './styles'
+
+/**
+ * @name ScheduleFormError
+ * @description component rendering errors in ScheduleForm modal
+ *
+ * @prop {string} [error] - error to render
+ * @prop {() => void} clearError - callback to call when user elects to fix the error
+ * @prop {() => void} cancel - callback to call when user elects to discard their updates
+ */
+const ScheduleFormError = ({
+ error,
+ clearError,
+ cancel,
+}: {
+ error?: string
+ clearError: () => void
+ cancel: () => void
+}) => {
+ const theme = useTheme()
+
+ if (!error) {
+ return null
+ }
+
+ return (
+ <>
+
+
+
+
+ {t.mining.scheduling.ops}
+ {' '}
+
+ {error}
+
+
+ }
+ >
+
+
+
+
+
+ )
+}
+
+export default ScheduleFormError
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/ScheduleFormError/styles.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/ScheduleFormError/styles.ts
new file mode 100644
index 0000000000..99693b02c8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/ScheduleFormError/styles.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const ScheduleFormErrorWrapper = styled.div`
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 2;
+`
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/WeekdaySelector/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/WeekdaySelector/index.tsx
new file mode 100644
index 0000000000..44caf5e399
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/WeekdaySelector/index.tsx
@@ -0,0 +1,55 @@
+import { useTheme } from 'styled-components'
+
+import Text from '../../../../../components/Text'
+import t from '../../../../../locales'
+
+import { Weekday } from './styles'
+
+/**
+ * @name WeekdaySelector
+ * @description controlled form to allow users select weekdays
+ *
+ * @prop {number[]} days - selected days
+ * @prop {(days: number[]) => void} onChange - callback on weekdays change
+ */
+const WeekdaySelector = ({
+ days,
+ onChange,
+}: {
+ days: number[]
+ onChange: (days: number[]) => void
+}) => {
+ const theme = useTheme()
+
+ const toggle = (index: number) => {
+ if (days.includes(index)) {
+ onChange(days.filter(a => a !== index))
+ return
+ }
+
+ onChange([...days, index])
+ }
+
+ return (
+
+ {Object.values(t.common.weekdayCapitals).map((capital, index) => {
+ const color = days.includes(index)
+ ? theme.accent
+ : theme.inputPlaceholder
+
+ return (
+ toggle(index)}>
+ {capital}
+
+ )
+ })}
+
+ )
+}
+
+export default WeekdaySelector
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/WeekdaySelector/styles.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/WeekdaySelector/styles.ts
new file mode 100644
index 0000000000..2529863ca6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/WeekdaySelector/styles.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const Weekday = styled.div`
+ width: 48px;
+ height: 48px;
+ background-color: ${({ theme }) => theme.selectOptionHover};
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+ cursor: pointer;
+`
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/index.test.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/index.test.tsx
new file mode 100644
index 0000000000..9e0f3786b7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/index.test.tsx
@@ -0,0 +1,160 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import { Schedule, MiningNodeType } from '../../../../types/general'
+import themes from '../../../../styles/themes'
+import t from '../../../../locales'
+
+import ScheduleForm from './'
+
+const ALL_MINING_ACTIVE = ['tari', 'merged'] as MiningNodeType[]
+
+describe('ScheduleForm', () => {
+ it('should not activate save button until mining type and schedule is selected', () => {
+ const onChange = jest.fn()
+ const schedule = {
+ id: 'scheduleId',
+ interval: {
+ from: { hours: 8, minutes: 0 },
+ to: { hours: 9, minutes: 0 },
+ },
+ } as unknown as Schedule
+ render(
+
+ null}
+ remove={() => null}
+ onChange={onChange}
+ miningTypesActive={ALL_MINING_ACTIVE}
+ />
+ ,
+ )
+
+ expect(
+ screen.getByText(t.common.verbs.save).closest('button'),
+ ).toBeDisabled()
+
+ fireEvent.click(screen.getByText(t.common.miningType.tari))
+ expect(
+ screen.getByText(t.common.verbs.save).closest('button'),
+ ).toBeDisabled()
+
+ fireEvent.click(screen.getByText(t.common.weekdayCapitals.monday))
+ expect(
+ screen.getByText(t.common.verbs.save).closest('button'),
+ ).not.toBeDisabled()
+
+ fireEvent.click(screen.getByText(t.common.verbs.save))
+ expect(onChange).toHaveBeenCalledTimes(1)
+ })
+
+ it('should not render remove schedule button if no initial schedule values were passed', () => {
+ render(
+
+ null}
+ remove={() => null}
+ onChange={() => null}
+ miningTypesActive={ALL_MINING_ACTIVE}
+ />
+ ,
+ )
+
+ expect(
+ screen.queryByText(t.mining.scheduling.removeSchedule),
+ ).not.toBeInTheDocument()
+ })
+
+ it('should allow removing schedule when it is passed to edit', () => {
+ const remove = jest.fn()
+ const schedule = { id: 'scheduleId' } as unknown as Schedule
+ render(
+
+ null}
+ remove={remove}
+ onChange={() => null}
+ miningTypesActive={ALL_MINING_ACTIVE}
+ />
+ ,
+ )
+
+ const removeButton = screen.getByText(t.mining.scheduling.removeSchedule)
+ expect(removeButton).toBeInTheDocument()
+
+ fireEvent.click(removeButton)
+ expect(remove).toHaveBeenCalledTimes(1)
+ })
+
+ it('attempting to save schedule with invalid interval should raise error', () => {
+ const schedule = {
+ id: 'scheduleId',
+ type: ['tari'],
+ days: [2],
+ interval: {
+ from: { hours: 8, minutes: 0 },
+ to: { hours: 8, minutes: 0 },
+ },
+ } as unknown as Schedule
+ render(
+
+ null}
+ remove={() => null}
+ onChange={() => null}
+ miningTypesActive={ALL_MINING_ACTIVE}
+ />
+ ,
+ )
+
+ expect(screen.queryByText(t.mining.scheduling.ops)).not.toBeInTheDocument()
+
+ const saveButton = screen.getByText(t.common.verbs.save)
+ fireEvent.click(saveButton)
+
+ expect(screen.queryByText(t.mining.scheduling.ops)).toBeInTheDocument()
+ expect(screen.queryByText(t.common.verbs.tryAgain)).toBeInTheDocument()
+ })
+
+ it('cancelling on error should get you back to list', () => {
+ const cancel = jest.fn()
+ const schedule = {
+ id: 'scheduleId',
+ type: ['tari'],
+ days: [2],
+ interval: {
+ from: { hours: 8, minutes: 0 },
+ to: { hours: 8, minutes: 0 },
+ },
+ } as unknown as Schedule
+ render(
+
+ null}
+ onChange={() => null}
+ miningTypesActive={ALL_MINING_ACTIVE}
+ />
+ ,
+ )
+
+ const saveButton = screen.getByText(t.common.verbs.save)
+ fireEvent.click(saveButton)
+
+ const errorBox = screen
+ .queryByText(t.common.verbs.tryAgain)
+ ?.closest('[data-testid="box-cmp"]')
+ const buttons = Array.from(errorBox?.querySelectorAll('button') || [])
+ const cancelButton = buttons?.find(
+ (b: HTMLElement) => b.textContent === t.common.verbs.cancel,
+ )
+ expect(cancelButton).toBeInTheDocument()
+
+ fireEvent.click(cancelButton as HTMLElement)
+ expect(cancel).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/index.tsx
new file mode 100644
index 0000000000..399ea18681
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/index.tsx
@@ -0,0 +1,142 @@
+import { useState, useCallback } from 'react'
+import { useTheme } from 'styled-components'
+
+import { MiningNodeType, Schedule, Interval } from '../../../../types/general'
+import Button from '../../../../components/Button'
+import Box from '../../../../components/Box'
+import t from '../../../../locales'
+import Actions from '../Actions'
+
+import DateScheduler from './DateScheduler'
+import MiningTypeSelector from './MiningTypeSelector'
+import RemoveSchedule from './RemoveSchedule'
+import IntervalPicker from './IntervalPicker'
+import ScheduleFormError from './ScheduleFormError'
+import { validate } from './validation'
+
+const getIntervalWithZeros = (): Interval => {
+ const timezoneOffsetInHours = new Date().getTimezoneOffset() / 60
+
+ return {
+ from: {
+ hours: timezoneOffsetInHours,
+ minutes: 0,
+ },
+ to: {
+ hours: timezoneOffsetInHours,
+ minutes: 0,
+ },
+ }
+}
+
+/**
+ * @name ScheduleForm
+ * @description renders add/edit form for Schedule in mining scheduling
+ *
+ * @prop {Schedule} [value] - initial values of schedule being edited
+ * @prop {() => void} cancel - callback for user action of cancelling editing
+ * @prop {() => void} remove - callback for user action of removing edited schedule
+ * @prop {(s: Schedule) => void} onChange - called with new Schedule after user accepts changes
+ * @prop {MiningNodeType[]} miningTypesActive - which mining types are correctly set up and can be scheduled
+ */
+const ScheduleForm = ({
+ value,
+ cancel,
+ onChange,
+ remove,
+ miningTypesActive,
+}: {
+ value?: Schedule
+ cancel: () => void
+ remove: () => void
+ onChange: (s: Schedule) => void
+ miningTypesActive: MiningNodeType[]
+}) => {
+ const editing = Boolean(value)
+ const theme = useTheme()
+ const [error, setError] = useState()
+ const [days, setDays] = useState(value?.days)
+ const [date, setDate] = useState(value?.date)
+ const [miningType, setMiningType] = useState(value?.type || [])
+ const [interval, setInterval] = useState(
+ value?.interval || getIntervalWithZeros(),
+ )
+
+ const enableSave =
+ ((days?.length || 0) > 0 || date) && (miningType.length || 0) > 0
+
+ const updateSchedule = useCallback(() => {
+ const updatedSchedule: Schedule = {
+ id: value?.id || Date.now().toString(),
+ enabled: value ? value.enabled : true,
+ days,
+ date,
+ interval,
+ type: miningType,
+ }
+
+ const error = validate(updatedSchedule)
+ if (error) {
+ setError(error)
+
+ return
+ }
+
+ onChange(updatedSchedule)
+ }, [value, days, date, interval, miningType])
+
+ return (
+ <>
+
+
+ {
+ setDays(days)
+ setDate(date)
+ }}
+ />
+
+ {editing && }
+
+
+
+
+
+ setError(undefined)}
+ cancel={cancel}
+ />
+
+ )
+}
+
+export default ScheduleForm
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/utils.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/utils.ts
new file mode 100644
index 0000000000..92216759e1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/utils.ts
@@ -0,0 +1,18 @@
+import { Time } from '../../../../types/general'
+
+export const utcTimeToString = (t?: Time) => {
+ const timezoneHourOffset = new Date().getTimezoneOffset() / 60
+ const hours = t ? t?.hours - timezoneHourOffset : 0
+
+ return `${hours.toString().padStart(2, '0') || '00'}:${
+ t?.minutes.toString().padStart(2, '0') || '00'
+ }`
+}
+export const stringToUTCTime = (s: string): Time => {
+ const timezoneHourOffset = new Date().getTimezoneOffset() / 60
+
+ return {
+ hours: Number(s.substring(0, 2)) + timezoneHourOffset,
+ minutes: Number(s.substring(3, 5)),
+ }
+}
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/validation.test.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/validation.test.ts
new file mode 100644
index 0000000000..84f4cc4bdd
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/validation.test.ts
@@ -0,0 +1,163 @@
+import { Interval, Schedule } from '../../../../types/general'
+import t from '../../../../locales'
+
+import { validate } from './validation'
+import { utcTimeToString } from './utils'
+
+describe('validate', () => {
+ describe('interval', () => {
+ const testCases: Array<[Interval, string | undefined]> = [
+ [
+ {
+ from: { hours: 7, minutes: 23 },
+ to: { hours: 8, minutes: 0 },
+ },
+ undefined,
+ ],
+ [
+ {
+ from: { hours: 7, minutes: 23 },
+ to: { hours: 6, minutes: 0 },
+ },
+ t.mining.scheduling.error_miningEndsBeforeItStarts,
+ ],
+ [
+ {
+ from: { hours: 7, minutes: 23 },
+ to: { hours: 7, minutes: 12 },
+ },
+ t.mining.scheduling.error_miningEndsBeforeItStarts,
+ ],
+ [
+ {
+ from: { hours: 7, minutes: 23 },
+ to: { hours: 7, minutes: 23 },
+ },
+ t.mining.scheduling.error_miningEndsWhenItStarts,
+ ],
+ ]
+
+ testCases.forEach(([interval, expected]) =>
+ it(`from: ${utcTimeToString(interval.from)} to: ${utcTimeToString(
+ interval.to,
+ )} expected: ${expected}`, () => {
+ const schedule: Schedule = {
+ id: Date.now().toString(),
+ enabled: true,
+ days: [0],
+ interval,
+ type: ['tari'],
+ }
+ const error = validate(schedule)
+
+ if (expected) {
+ expect(error).toBe(expected)
+ } else {
+ expect(error).toBeUndefined()
+ }
+ }),
+ )
+ })
+
+ describe('date', () => {
+ it('should validate undefined date as long as any day is selected', () => {
+ const schedule: Schedule = {
+ id: Date.now().toString(),
+ enabled: true,
+ days: [0],
+ interval: {
+ from: { hours: 7, minutes: 23 },
+ to: { hours: 8, minutes: 12 },
+ },
+ type: ['tari'],
+ }
+
+ const error = validate(schedule)
+
+ expect(error).toBeUndefined()
+ })
+
+ /* eslint-disable-next-line quotes */
+ it(`should validate today's date if interval ends later than now`, () => {
+ const now = new Date('2022-05-12T12:00:00.000Z')
+ jest.useFakeTimers().setSystemTime(now)
+
+ const schedule: Schedule = {
+ id: Date.now().toString(),
+ enabled: true,
+ date: now,
+ interval: {
+ from: { hours: 11, minutes: 0 },
+ to: { hours: 12, minutes: 30 },
+ },
+ type: ['tari'],
+ }
+
+ const error = validate(schedule)
+
+ expect(error).toBeUndefined()
+ })
+
+ /* eslint-disable-next-line quotes */
+ it(`should validate today's date if interval is still in the future`, () => {
+ const now = new Date('2022-05-12T12:00:00.000Z')
+ jest.useFakeTimers().setSystemTime(now)
+
+ const schedule: Schedule = {
+ id: Date.now().toString(),
+ enabled: true,
+ date: now,
+ interval: {
+ from: { hours: 17, minutes: 23 },
+ to: { hours: 19, minutes: 12 },
+ },
+ type: ['tari'],
+ }
+
+ const error = validate(schedule)
+
+ expect(error).toBeUndefined()
+ })
+
+ it('should return error for a date in the past', () => {
+ const dateInThePast = new Date()
+ dateInThePast.setDate(-1)
+
+ const schedule: Schedule = {
+ id: Date.now().toString(),
+ enabled: true,
+ date: dateInThePast,
+ interval: {
+ from: { hours: 7, minutes: 23 },
+ to: { hours: 8, minutes: 12 },
+ },
+ type: ['tari'],
+ }
+
+ const error = validate(schedule)
+
+ expect(error).toBe(t.mining.scheduling.error_miningInThePast)
+ })
+
+ /* eslint-disable-next-line quotes */
+ it(`should return error for today's date but interval is in the past`, () => {
+ const now = new Date('2022-05-12T12:00:00.000Z')
+ jest.useFakeTimers().setSystemTime(now)
+
+ const schedule: Schedule = {
+ id: Date.now().toString(),
+ enabled: true,
+ date: now,
+ interval: {
+ from: { hours: 7, minutes: 23 },
+ to: { hours: 8, minutes: 12 },
+ },
+ type: ['tari'],
+ }
+
+ const error = validate(schedule)
+
+ expect(error).toBe(t.mining.scheduling.error_miningInThePast)
+ })
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/validation.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/validation.ts
new file mode 100644
index 0000000000..8ed9798419
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleForm/validation.ts
@@ -0,0 +1,51 @@
+import { Schedule, Interval } from '../../../../types/general'
+import { startOfUTCDay } from '../../../../utils/Date'
+import t from '../../../../locales'
+
+const validateInterval = (interval: Interval): string | undefined => {
+ if (interval.from.hours === interval.to.hours) {
+ if (interval.from.minutes > interval.to.minutes) {
+ return t.mining.scheduling.error_miningEndsBeforeItStarts
+ }
+
+ if (interval.from.minutes === interval.to.minutes) {
+ return t.mining.scheduling.error_miningEndsWhenItStarts
+ }
+ }
+
+ if (interval.from.hours > interval.to.hours) {
+ return t.mining.scheduling.error_miningEndsBeforeItStarts
+ }
+}
+
+const validateDate = (interval: Interval, date?: Date): string | undefined => {
+ if (!date) {
+ return
+ }
+
+ if (startOfUTCDay(date) < startOfUTCDay(new Date())) {
+ return t.mining.scheduling.error_miningInThePast
+ }
+
+ if (startOfUTCDay(date).getTime() === startOfUTCDay(new Date()).getTime()) {
+ if (interval.to.hours > date.getUTCHours()) {
+ return
+ }
+
+ if (
+ interval.to.hours === date.getUTCHours() &&
+ interval.to.minutes > date.getUTCMinutes()
+ ) {
+ return
+ }
+
+ return t.mining.scheduling.error_miningInThePast
+ }
+}
+
+export const validate = (schedule: Schedule): string | undefined => {
+ const intervalError = validateInterval(schedule.interval)
+ const dateError = validateDate(schedule.interval, schedule.date)
+
+ return intervalError || dateError
+}
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleList.test.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleList.test.tsx
new file mode 100644
index 0000000000..08fee20fdc
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleList.test.tsx
@@ -0,0 +1,194 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import themes from '../../../styles/themes'
+import { MiningNodeType } from '../../../types/general'
+import t from '../../../locales'
+
+import ScheduleList from './ScheduleList'
+
+const exampleSchedules = [
+ {
+ id: 'example-schedule',
+ testId: 'schedule-example-schedule',
+ enabled: true,
+ days: [0, 1, 2],
+ interval: {
+ from: { hours: 3, minutes: 0 },
+ to: { hours: 19, minutes: 35 },
+ },
+ type: ['merged'] as MiningNodeType[],
+ },
+ {
+ id: 'example-schedule-2',
+ testId: 'schedule-example-schedule-2',
+ enabled: true,
+ days: [0, 1, 2],
+ interval: {
+ from: { hours: 3, minutes: 0 },
+ to: { hours: 19, minutes: 35 },
+ },
+ type: ['merged'] as MiningNodeType[],
+ },
+]
+
+describe('ScheduleList', () => {
+ it('should render Add schedule button when list of schedules is empty', () => {
+ const addSchedule = jest.fn()
+ render(
+
+ null}
+ addSchedule={addSchedule}
+ toggle={() => null}
+ edit={() => null}
+ remove={() => null}
+ />
+ ,
+ )
+
+ const addScheduleButton = screen.getByText(t.mining.scheduling.add)
+ expect(addScheduleButton).toBeInTheDocument()
+
+ fireEvent.click(addScheduleButton)
+ expect(addSchedule).toHaveBeenCalledTimes(1)
+ })
+
+ it('should still render Add schedule button when non empty schedule list is provided', () => {
+ const addSchedule = jest.fn()
+ render(
+
+ null}
+ addSchedule={addSchedule}
+ toggle={() => null}
+ edit={() => null}
+ remove={() => null}
+ />
+ ,
+ )
+
+ const addScheduleButton = screen.getByText(t.mining.scheduling.add)
+ expect(addScheduleButton).toBeInTheDocument()
+
+ fireEvent.click(addScheduleButton)
+ expect(addSchedule).toHaveBeenCalledTimes(1)
+ })
+
+ it('should render all schedules', () => {
+ render(
+
+ null}
+ addSchedule={() => null}
+ toggle={() => null}
+ edit={() => null}
+ remove={() => null}
+ />
+ ,
+ )
+
+ expect(screen.getByTestId(exampleSchedules[0].testId)).toBeInTheDocument()
+ expect(screen.getByTestId(exampleSchedules[1].testId)).toBeInTheDocument()
+ })
+
+ it('should select schedule on single click', () => {
+ const { container } = render(
+
+ null}
+ addSchedule={() => null}
+ toggle={() => null}
+ edit={() => null}
+ remove={() => null}
+ />
+ ,
+ )
+
+ const schedule = screen.getByTestId(exampleSchedules[0].testId)
+ fireEvent.click(schedule)
+
+ const selectedSchedule = container.querySelector('[data-selected="true"]')
+ expect(selectedSchedule).toBeInTheDocument()
+ })
+
+ it('should both select and call for edit on double click ', () => {
+ const edit = jest.fn()
+ const { container } = render(
+
+ null}
+ addSchedule={() => null}
+ toggle={() => null}
+ edit={edit}
+ remove={() => null}
+ />
+ ,
+ )
+
+ const schedule = screen.getByTestId(exampleSchedules[0].testId)
+ fireEvent.click(schedule)
+ fireEvent.click(schedule)
+
+ const selectedSchedule = container.querySelector('[data-selected="true"]')
+ expect(selectedSchedule).toBeInTheDocument()
+
+ expect(edit).toHaveBeenCalledTimes(1)
+ expect(edit).toHaveBeenCalledWith(exampleSchedules[0].id)
+ })
+
+ it('should toggle schedule on switch click', () => {
+ const toggle = jest.fn()
+ render(
+
+ null}
+ addSchedule={() => null}
+ toggle={toggle}
+ edit={() => null}
+ remove={() => null}
+ />
+ ,
+ )
+
+ const switchComponent = screen.getAllByTestId('switch-input-cmp')[0]
+ fireEvent.click(switchComponent)
+
+ expect(toggle).toHaveBeenCalledTimes(1)
+ expect(toggle).toHaveBeenCalledWith(exampleSchedules[0].id)
+ })
+
+ it('should remove schedule on delete or backspace', () => {
+ const remove = jest.fn()
+ render(
+
+ null}
+ addSchedule={() => null}
+ toggle={() => null}
+ edit={() => null}
+ remove={remove}
+ />
+ ,
+ )
+
+ const schedule1 = screen.getByTestId(exampleSchedules[0].testId)
+ fireEvent.click(schedule1)
+ fireEvent.keyDown(schedule1, { key: 'Delete' })
+
+ const schedule2 = screen.getByTestId(exampleSchedules[1].testId)
+ fireEvent.click(schedule2)
+ fireEvent.keyDown(schedule2, { key: 'Backspace' })
+
+ expect(remove).toHaveBeenCalledTimes(2)
+ expect(remove).toHaveBeenCalledWith(exampleSchedules[0].id)
+ expect(remove).toHaveBeenCalledWith(exampleSchedules[1].id)
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleList.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleList.tsx
new file mode 100644
index 0000000000..be4f9abe6a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/ScheduleList.tsx
@@ -0,0 +1,131 @@
+import { useState, useCallback, KeyboardEvent } from 'react'
+import { useTheme } from 'styled-components'
+
+import Text from '../../../components/Text'
+import Box from '../../../components/Box'
+import Button from '../../../components/Button'
+import { Schedule } from '../../../types/general'
+import t from '../../../locales'
+
+import { SchedulesListContainer, NoSchedulesContainer } from './styles'
+import Actions from './Actions'
+import SchedulePresentation from './Schedule'
+
+type ScheduleId = string
+type ScheduleActions = {
+ toggle: (id: ScheduleId) => void
+ edit: (id: ScheduleId) => void
+ remove: (id: ScheduleId) => void
+}
+
+/**
+ * @name ScheduleList
+ * @description renders list of schedules and handles adding/editing/remove events
+ *
+ * @prop {Schedule[]} schedules - list of schedules to render
+ * @prop {() => void} addSchedule - event called when user wants to add a new schedule
+ * @prop {() => void} cancel - event called to close the list
+ * @prop {(scheduleId: string) => void} toggle - event called to toggle selection of schedule
+ * @prop {(scheduleId: string) => void} edit - event called to edit schedule
+ * @prop {(scheduleId: string) => void} remove - event called to remove schedule
+ */
+const ScheduleList = ({
+ schedules,
+ addSchedule,
+ cancel,
+ toggle,
+ edit,
+ remove,
+}: {
+ schedules: Schedule[]
+ cancel: () => void
+ addSchedule: () => void
+} & ScheduleActions) => {
+ const theme = useTheme()
+ const [selectedSchedule, setSelected] = useState('')
+
+ const onListKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ const { key } = event
+ if (['Delete', 'Backspace'].includes(key)) {
+ remove(selectedSchedule)
+ }
+ },
+ [remove, selectedSchedule],
+ )
+
+ return (
+ <>
+
+ {t.mining.scheduling.title}
+
+ {t.mining.scheduling.launchpadOpen}
+
+
+ {schedules.length === 0 && (
+
+
+ {t.mining.scheduling.noSchedules}
+
+
+
+ )}
+ {schedules.length !== 0 && (
+
+
+ {t.mining.scheduling.doubleClick}
+
+ {schedules.map(schedule => (
+ toggle(schedule.id)}
+ edit={() => edit(schedule.id)}
+ selected={selectedSchedule === schedule.id}
+ select={() => setSelected(schedule.id)}
+ />
+ ))}
+
+ )}
+
+
+ {schedules.length !== 0 && (
+
+ )}
+
+
+ )
+}
+
+export default ScheduleList
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/index.tsx
new file mode 100644
index 0000000000..2e3799315b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/index.tsx
@@ -0,0 +1,103 @@
+import { useState } from 'react'
+
+import Modal from '../../../components/Modal'
+import { useAppSelector, useAppDispatch } from '../../../store/hooks'
+import {
+ selectSchedules,
+ selectSchedule,
+ selectActiveMiningTypes,
+} from '../../../store/app/selectors'
+import {
+ toggleSchedule,
+ removeSchedule,
+ updateSchedule,
+} from '../../../store/app'
+
+import ScheduleList from './ScheduleList'
+import ScheduleForm from './ScheduleForm'
+import { ScheduleContainer } from './styles'
+import { useTheme } from 'styled-components'
+
+/**
+ * @name SchedulingContainer
+ * @description container component that renders scheduling info and allows to modify it
+ *
+ * @prop {boolean} open - indicates whether scheduling info should be rendered on screen
+ * @prop {() => void} onClose - called to close scheduling info container
+ */
+const SchedulingContainer = ({
+ open,
+ onClose,
+}: {
+ open: boolean
+ onClose: () => void
+}) => {
+ const [idToEdit, setScheduleToEdit] = useState('')
+ const [editOpen, setEditOpen] = useState(false)
+ const schedules = useAppSelector(selectSchedules)
+ const scheduleToEdit = useAppSelector(selectSchedule(idToEdit))
+ const miningTypesActive = useAppSelector(selectActiveMiningTypes)
+ const dispatch = useAppDispatch()
+ const theme = useTheme()
+
+ const stopEditing = () => {
+ setEditOpen(false)
+ setScheduleToEdit('')
+ }
+
+ const editSchedule = (scheduleId: string) => {
+ setScheduleToEdit(scheduleId)
+ setEditOpen(true)
+ }
+
+ const addSchedule = () => {
+ setScheduleToEdit('')
+ setEditOpen(true)
+ }
+
+ const close = () => {
+ stopEditing()
+ onClose()
+ }
+
+ const removeScheduleBeingEdited = () => {
+ dispatch(removeSchedule(idToEdit))
+ stopEditing()
+ }
+
+ return (
+
+
+ {!editOpen && (
+ dispatch(toggleSchedule(scheduleId))}
+ edit={editSchedule}
+ remove={scheduleId => dispatch(removeSchedule(scheduleId))}
+ />
+ )}
+ {editOpen && (
+ {
+ dispatch(updateSchedule({ value, scheduleId: value.id }))
+ stopEditing()
+ }}
+ miningTypesActive={miningTypesActive}
+ />
+ )}
+
+
+ )
+}
+
+export default SchedulingContainer
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/styles.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/styles.ts
new file mode 100644
index 0000000000..dc2033de5e
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Scheduling/styles.ts
@@ -0,0 +1,55 @@
+import styled from 'styled-components'
+
+export const ScheduleContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ height: 100%;
+ max-height: 100%;
+`
+
+export const NoSchedulesContainer = styled.div`
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+`
+
+export const SchedulesListContainer = styled.div`
+ outline: none;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ width: 100%;
+ overflow: auto;
+ box-sizing: border-box;
+ padding: 0 ${({ theme }) => theme.spacing()};
+ ::-webkit-scrollbar {
+ width: 15px;
+ }
+
+ /* Track */
+ ::-webkit-scrollbar-track {
+ background: ${({ theme }) => theme.scrollBarTrack};
+ }
+
+ /* Handle */
+ ::-webkit-scrollbar-thumb {
+ background: ${({ theme }) => theme.scrollBarThumb};
+ border-radius: 6px;
+ border: 3px solid transparent;
+ background-clip: padding-box;
+ }
+
+ /* Handle on hover */
+ ::-webkit-scrollbar-thumb:hover {
+ background: ${({ theme }) => theme.scrollBarHover};
+ border-radius: 6px;
+ border: 3px solid transparent;
+ background-clip: padding-box;
+ }
+`
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Account/index.test.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Account/index.test.tsx
new file mode 100644
index 0000000000..aa4c431a8f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Account/index.test.tsx
@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import themes from '../../../../styles/themes'
+import t from '../../../../locales'
+import { AccountData } from '../types'
+
+import Account from '.'
+
+describe('Account', () => {
+ it('should render all the balances', () => {
+ const accountData = [
+ {
+ balance: { value: 100, currency: 'xtr' },
+ delta: { percentage: true, value: 1, interval: 'monthly' },
+ },
+ {
+ balance: { value: 200, currency: 'xmr' },
+ delta: { percentage: true, value: 2, interval: 'monthly' },
+ },
+ ] as AccountData
+ render(
+
+
+ ,
+ )
+
+ expect(screen.getByText('100')).toBeInTheDocument()
+ expect(screen.getByText('xtr')).toBeInTheDocument()
+ expect(screen.getByText('200')).toBeInTheDocument()
+ expect(screen.getByText('xmr')).toBeInTheDocument()
+ expect(screen.getAllByText(t.mining.statistics.deltas.monthly).length).toBe(
+ 2,
+ )
+ })
+
+ it('should not render deltas if percentage is 0', () => {
+ const accountData = [
+ {
+ balance: { value: 100, currency: 'xtr' },
+ delta: { percentage: true, value: 0, interval: 'monthly' },
+ },
+ {
+ balance: { value: 200, currency: 'xmr' },
+ delta: { percentage: true, value: 0, interval: 'monthly' },
+ },
+ ] as AccountData
+ render(
+
+
+ ,
+ )
+ expect(
+ screen.queryByText(t.mining.statistics.deltas.monthly),
+ ).not.toBeInTheDocument()
+ })
+
+ it('should render non percentage delta', () => {
+ const accountData = [
+ {
+ balance: { value: 100, currency: 'xtr' },
+ delta: { percentage: false, value: 236, interval: 'monthly' },
+ },
+ ] as AccountData
+ render(
+
+
+ ,
+ )
+
+ expect(screen.getByText('100')).toBeInTheDocument()
+ expect(screen.getByText('236')).toBeInTheDocument()
+ expect(screen.getAllByText('xtr').length).toBe(2)
+ expect(
+ screen.getByText(t.mining.statistics.deltas.monthly),
+ ).toBeInTheDocument()
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Account/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Account/index.tsx
new file mode 100644
index 0000000000..fe04f104ff
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Account/index.tsx
@@ -0,0 +1,105 @@
+import { useTheme } from 'styled-components'
+
+import Text from '../../../../components/Text'
+import CoinsList from '../../../../components/CoinsList'
+import ArrowDown from '../../../../styles/Icons/ArrowBottom2'
+import ArrowUp from '../../../../styles/Icons/ArrowTop2'
+import t from '../../../../locales'
+import { AccountData } from '../types'
+
+/**
+ * @name Account
+ * @description presentation component showing a row of multiple coin balances together with percentage changes comparing period to period
+ *
+ * @prop {AccountData} data - data of the account
+ */
+const Account = ({ data }: { data: AccountData }) => {
+ const theme = useTheme()
+
+ return (
+
+ {data.map(({ balance, delta }) => {
+ const deltaColor = delta.value <= 0 ? theme.error : theme.onTextLight
+
+ return (
+
+
+ {delta.percentage && delta.value !== 0 && (
+
+ {delta.value < 0 && (
+
+ )}
+ {delta.value > 0 && (
+
+ )}
+
+ {delta.value.toFixed(2)}%
+
+
+ {t.mining.statistics.deltas[delta.interval as string]}
+
+
+ )}
+ {!delta.percentage && delta.value !== 0 && (
+
+ {delta.value < 0 && (
+
+ )}
+ {delta.value > 0 && (
+
+ )}
+
+
+ {t.mining.statistics.deltas[delta.interval as string]}
+
+
+ )}
+
+ )
+ })}
+
+
+
+
+ )
+}
+
+export default MiningIntervalPickerComponent
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/MiningIntervalPicker/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/MiningIntervalPicker/index.tsx
new file mode 100644
index 0000000000..08c8824aa1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/MiningIntervalPicker/index.tsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react'
+
+import useTransactionsRepository from '../../../../persistence/transactionsRepository'
+
+import { MiningIntervalPickerComponentProps } from './types'
+import MiningIntervalPickerComponent from './MiningIntervalPickerComponent'
+
+/**
+ * @name MiningIntervalPicker
+ * @description controlled component that allows user to change currently picked interval - if it is a month, user iterates over months, if it is a year, years
+ *
+ * @prop {Date} value - value of current interval picked
+ * @prop {MiningStatisticsInterval} interval - what intervals we are showing (month of year)
+ * @prop {(d: Date) => void} onChange - callback called with new values when user iterates over intervals
+ */
+const MiningIntervalPicker = ({
+ value,
+ interval,
+ onChange,
+}: Omit) => {
+ const transactionsRepository = useTransactionsRepository()
+
+ const [{ from: dataFrom, to: dataTo }, setDates] = useState<{
+ from: Date
+ to: Date
+ }>({ from: new Date(), to: new Date() })
+ useEffect(() => {
+ const getData = async () => {
+ const dates = await transactionsRepository.getMinedTransactionsDataSpan()
+
+ setDates(dates)
+ }
+ getData()
+ }, [])
+
+ return (
+
+ )
+}
+
+export default MiningIntervalPicker
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/MiningIntervalPicker/types.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/MiningIntervalPicker/types.ts
new file mode 100644
index 0000000000..9be0b0bd08
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/MiningIntervalPicker/types.ts
@@ -0,0 +1,9 @@
+import { MiningStatisticsInterval } from '../types'
+
+export type MiningIntervalPickerComponentProps = {
+ value: Date
+ interval: MiningStatisticsInterval
+ onChange: (d: Date) => void
+ dataFrom: Date
+ dataTo: Date
+}
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Statistics.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Statistics.tsx
new file mode 100644
index 0000000000..a71b6fbb71
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/Statistics.tsx
@@ -0,0 +1,115 @@
+import { useTheme } from 'styled-components'
+
+import Box from '../../../components/Box'
+import ButtonRadio from '../../../components/ButtonRadio'
+import Text from '../../../components/Text'
+import BarChart from '../../../components/Charts/Bar'
+import CloseIcon from '../../../styles/Icons/Close'
+import t from '../../../locales'
+import { MinedTariEntry } from '../../../persistence/transactionsRepository'
+
+import { MiningStatisticsInterval, AccountData } from './types'
+import MiningIntervalPicker from './MiningIntervalPicker'
+import Account from './Account'
+
+const intervalOptions = (disableAllFilter?: boolean) => [
+ { option: 'monthly', label: t.mining.statistics.intervals.monthly },
+ { option: 'yearly', label: t.mining.statistics.intervals.yearly },
+ {
+ option: 'all',
+ label: t.mining.statistics.intervals.all,
+ disabled: disableAllFilter,
+ },
+]
+
+/**
+ * @name Statistics
+ * @description Presentation component for showing mining statistics data
+ *
+ * @prop {MiningStatisticsInterval} interval - what time period statistics relate to
+ * @prop {(i: MiningStatisticsInterval) => void} setInterval - setter of statistics time period
+ * @prop {Date} intervalToShow - representation of time period (month / year) to allow user to navigate between different periods
+ * @prop {(d: Date) => void} setIntervalToShow - setter for intervalToShow
+ * @prop {() => void} onClose - callback when user closes statistics
+ * @prop {MinedTariEntry[]} data - period data
+ * @prop {AccountData} accountData - data regarding coin balances and percentage changes period to period
+ * @prop {boolean} [disableAllFilter] - whether 'all' filter should be disabled - happens when there is only data for one year
+ */
+const Statistics = ({
+ interval,
+ setInterval,
+ intervalToShow,
+ setIntervalToShow,
+ onClose,
+ data,
+ accountData,
+ disableAllFilter,
+}: {
+ interval: MiningStatisticsInterval
+ setInterval: (i: MiningStatisticsInterval) => void
+ intervalToShow: Date
+ setIntervalToShow: (d: Date) => void
+ onClose: () => void
+ data: MinedTariEntry[]
+ accountData: AccountData
+ disableAllFilter?: boolean
+}) => {
+ const theme = useTheme()
+
+ return (
+
+
+
{t.mining.statistics.title}
+
+
+
+
+
+ setInterval(intervalString as MiningStatisticsInterval)
+ }
+ options={intervalOptions(disableAllFilter)}
+ />
+
+
+
+ []}
+ indexBy={'when'}
+ keys={['xtr']}
+ style={{ width: '100%', height: 250 }}
+ />
+
+ )
+}
+
+export default Statistics
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/index.tsx
new file mode 100644
index 0000000000..c339aaa9ed
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/index.tsx
@@ -0,0 +1,114 @@
+import { useMemo, useState, useEffect } from 'react'
+
+import * as DateUtils from '../../../utils/Date'
+import useTransactionsRepository from '../../../persistence/transactionsRepository'
+
+import { MiningStatisticsInterval } from './types'
+import Statistics from './Statistics'
+import useStatisticsData from './useStatisticsData'
+import useAccountData from './useAccountData'
+
+const getFrom = (
+ interval: MiningStatisticsInterval,
+ dateInInterval: Date,
+): Date => {
+ switch (interval) {
+ case 'monthly':
+ return DateUtils.startOfMonth(dateInInterval)
+ case 'yearly':
+ return DateUtils.startOfYear(dateInInterval)
+ case 'all':
+ return new Date('1970')
+ }
+}
+
+const getTo = (
+ interval: MiningStatisticsInterval,
+ dateInInterval: Date,
+): Date => {
+ switch (interval) {
+ case 'monthly':
+ return DateUtils.endOfMonth(dateInInterval)
+ case 'yearly':
+ return DateUtils.endOfYear(dateInInterval)
+ case 'all':
+ return new Date()
+ }
+}
+
+/**
+ * @name StatisticsContainer
+ * @description component responsible for getting statistics data from backend and passing them correctly to presentation component
+ *
+ * @prop {() => void} onClose - callback to be called when user wants to close statistics
+ * @prop {() => void} [onReady] - callback to be called when presentation component is mounted and rendered for the first time
+ */
+const StatisticsContainer = ({
+ onClose,
+ onReady,
+}: {
+ onClose: () => void
+ onReady?: () => void
+}) => {
+ const transactionsRepository = useTransactionsRepository()
+ const [interval, setInterval] = useState('monthly')
+ const [intervalToShow, setIntervalToShow] = useState(new Date())
+ useEffect(() => {
+ onReady && onReady()
+ }, [])
+
+ const [disableAllFilter, setDisableAllFilter] = useState(false)
+ useEffect(() => {
+ const calculateAllFilterDisabled = async () => {
+ const hasDataBeforeCurrentYear =
+ await transactionsRepository.hasDataBefore(
+ DateUtils.startOfYear(new Date()),
+ )
+ setDisableAllFilter(!hasDataBeforeCurrentYear)
+ }
+ calculateAllFilterDisabled()
+ }, [])
+
+ const from = useMemo(
+ () => getFrom(interval, intervalToShow),
+ [interval, intervalToShow],
+ )
+ const to = useMemo(
+ () => getTo(interval, intervalToShow),
+ [interval, intervalToShow],
+ )
+
+ const data = useStatisticsData({ from, to, interval, intervalToShow })
+ const accountData = useAccountData({ from, to, interval, intervalToShow })
+
+ return (
+
+ )
+}
+
+const StatisticsWrapper = ({
+ open,
+ onClose,
+ onReady,
+}: {
+ open: boolean
+ onClose: () => void
+ onReady?: () => void
+}) => {
+ if (!open) {
+ return null
+ }
+
+ return
+}
+
+export default StatisticsWrapper
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/types.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/types.ts
new file mode 100644
index 0000000000..4efb0dfc85
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/types.ts
@@ -0,0 +1,15 @@
+import { CoinType } from '../../../types/general'
+
+export type MiningStatisticsInterval = 'monthly' | 'yearly' | 'all'
+
+export type AccountData = {
+ balance: {
+ value: number
+ currency: CoinType
+ }
+ delta: {
+ value: number
+ percentage: boolean
+ interval: MiningStatisticsInterval
+ }
+}[]
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/useAccountData.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/useAccountData.ts
new file mode 100644
index 0000000000..56e403e224
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/useAccountData.ts
@@ -0,0 +1,148 @@
+import { useState, useEffect } from 'react'
+
+import useTransactionsRepository, {
+ DataResolution,
+} from '../../../persistence/transactionsRepository'
+import * as DateUtils from '../../../utils/Date'
+
+import { MiningStatisticsInterval, AccountData } from './types'
+
+const useAccountData = ({
+ interval,
+ intervalToShow,
+ from,
+ to,
+}: {
+ interval: MiningStatisticsInterval
+ intervalToShow: Date
+ from: Date
+ to: Date
+}) => {
+ const transactionsRepository = useTransactionsRepository()
+ const [accountData, setAccountData] = useState([])
+ useEffect(() => {
+ const getAccountData = async () => {
+ if (interval === 'monthly') {
+ const currentMonthStart = DateUtils.startOfMonth(intervalToShow)
+ const currentMonthPromise = transactionsRepository
+ .getMinedXtr(
+ currentMonthStart,
+ DateUtils.endOfMonth(intervalToShow),
+ DataResolution.Monthly,
+ )
+ .then(Object.values)
+ const previousMonthStart = new Date(
+ `${currentMonthStart.getFullYear()}-${currentMonthStart
+ .getMonth()
+ .toString()
+ .padStart(2, '0')}`,
+ )
+ const previousMonthPromise = transactionsRepository
+ .getMinedXtr(
+ previousMonthStart,
+ DateUtils.endOfMonth(previousMonthStart),
+ DataResolution.Monthly,
+ )
+ .then(Object.values)
+
+ const [currentMonth, previousMonth] = await Promise.all([
+ currentMonthPromise,
+ previousMonthPromise,
+ ])
+
+ const currentMonthBalance = currentMonth[0]?.xtr || 0
+ const previousMonthBalance = previousMonth[0]?.xtr || 0
+ const monthlyAccountData: AccountData = [
+ {
+ balance: {
+ value: currentMonthBalance,
+ currency: 'xtr',
+ },
+ delta: {
+ percentage: Boolean(previousMonthBalance),
+ value: previousMonthBalance
+ ? ((currentMonthBalance - previousMonthBalance) /
+ previousMonthBalance) *
+ 100
+ : currentMonthBalance,
+ interval,
+ },
+ },
+ ]
+ setAccountData(monthlyAccountData)
+ }
+
+ if (interval === 'yearly') {
+ const currentYearStart = DateUtils.startOfYear(intervalToShow)
+ const currentYearPromise = transactionsRepository
+ .getMinedXtr(
+ currentYearStart,
+ DateUtils.endOfYear(intervalToShow),
+ DataResolution.Yearly,
+ )
+ .then(Object.values)
+ const previousYearStart = new Date(
+ `${currentYearStart.getFullYear() - 1}`,
+ )
+ const previousYearPromise = transactionsRepository
+ .getMinedXtr(
+ previousYearStart,
+ DateUtils.endOfYear(previousYearStart),
+ DataResolution.Yearly,
+ )
+ .then(Object.values)
+
+ const [currentYear, previousYear] = await Promise.all([
+ currentYearPromise,
+ previousYearPromise,
+ ])
+
+ const currentYearBalance = currentYear[0]?.xtr || 0
+ const previousYearBalance = previousYear[0]?.xtr || 0
+ const yearlyAccountData: AccountData = [
+ {
+ balance: {
+ value: currentYear[0].xtr,
+ currency: 'xtr',
+ },
+ delta: {
+ percentage: Boolean(previousYearBalance),
+ value: previousYearBalance
+ ? ((currentYearBalance - previousYearBalance) /
+ previousYearBalance) *
+ 100
+ : previousYearBalance,
+ interval,
+ },
+ },
+ ]
+ setAccountData(yearlyAccountData)
+ }
+
+ if (interval === 'all') {
+ const currentBalance =
+ await transactionsRepository.getLifelongMinedBalance()
+
+ const yearlyAccountData: AccountData = [
+ {
+ balance: {
+ value: currentBalance,
+ currency: 'xtr',
+ },
+ delta: {
+ percentage: false,
+ value: 0,
+ interval,
+ },
+ },
+ ]
+ setAccountData(yearlyAccountData)
+ }
+ }
+ getAccountData()
+ }, [from, to, interval, intervalToShow])
+
+ return accountData
+}
+
+export default useAccountData
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/useStatisticsData.ts b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/useStatisticsData.ts
new file mode 100644
index 0000000000..9451810eda
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/Statistics/useStatisticsData.ts
@@ -0,0 +1,94 @@
+import { useState, useEffect } from 'react'
+
+import useTransactionsRepository, {
+ DataResolution,
+ MinedTariEntry,
+} from '../../../persistence/transactionsRepository'
+
+import { MiningStatisticsInterval } from './types'
+
+const useStatisticsData = ({
+ interval,
+ intervalToShow,
+ from,
+ to,
+}: {
+ interval: MiningStatisticsInterval
+ intervalToShow: Date
+ from: Date
+ to: Date
+}) => {
+ const transactionsRepository = useTransactionsRepository()
+ const [data, setData] = useState([])
+ useEffect(() => {
+ const resolution = {
+ monthly: DataResolution.Daily,
+ yearly: DataResolution.Monthly,
+ all: DataResolution.Yearly,
+ }[interval]
+
+ const getData = async () => {
+ const results = await transactionsRepository.getMinedXtr(
+ from,
+ to,
+ resolution,
+ )
+
+ if (interval === 'monthly') {
+ const year = intervalToShow.getFullYear()
+ const month = intervalToShow.getMonth() + 1
+ setData(
+ [...Array(new Date(year, month, 0).getDate()).keys()]
+ .map(day => {
+ const when = `${year}-${month.toString().padStart(2, '0')}-${(
+ day + 1
+ )
+ .toString()
+ .padStart(2, '0')}`
+
+ return (
+ results[when] || {
+ when,
+ xtr: 0,
+ }
+ )
+ })
+ .map(({ when, xtr }) => ({
+ xtr,
+ when: when.substring(8),
+ })),
+ )
+ }
+
+ if (interval === 'yearly') {
+ const year = intervalToShow.getFullYear()
+ setData(
+ [...Array(12).keys()]
+ .map(month => {
+ const when = `${year}-${(month + 1).toString().padStart(2, '0')}`
+
+ return (
+ results[when] || {
+ when,
+ xtr: 0,
+ }
+ )
+ })
+ .map(({ when, xtr }) => ({
+ xtr,
+ when: when.substring(5),
+ })),
+ )
+ }
+
+ if (interval === 'all') {
+ setData(Object.values(results))
+ }
+ }
+ getData()
+ }, [from, to, interval, intervalToShow])
+
+ return data
+}
+
+export default useStatisticsData
diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/index.tsx
new file mode 100644
index 0000000000..2f241e9daf
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/MiningContainer/index.tsx
@@ -0,0 +1,59 @@
+import { useState, useRef } from 'react'
+
+import MiningHeaderTip from './MiningHeaderTip'
+import MiningViewActions from './MiningViewActions'
+
+import { useAppDispatch } from '../../store/hooks'
+import { actions as settingsActions } from '../../store/settings'
+
+import { NodesContainer } from './styles'
+import MiningBoxTari from './MiningBoxTari'
+import MiningBoxMerged from './MiningBoxMerged'
+import Scheduling from './Scheduling'
+import Statistics from './Statistics'
+
+/**
+ * The Mining dashboard
+ */
+const MiningContainer = () => {
+ const dispatch = useAppDispatch()
+ const [schedulingOpen, setSchedulingOpen] = useState(false)
+ const [statisticsOpen, setStatisticsOpen] = useState(false)
+ const anchorElRef = useRef(null)
+
+ return (
+
+
+
+
+
+
+
+
+
setSchedulingOpen(true)}
+ toggleStatistics={() => {
+ setStatisticsOpen(o => !o)
+ }}
+ openSettings={() => dispatch(settingsActions.open({}))}
+ />
+ setSchedulingOpen(false)}
+ />
+ setStatisticsOpen(false)}
+ onReady={() => {
+ anchorElRef.current?.scrollIntoView({
+ behavior: 'smooth',
+ block: 'end',
+ })
+ }}
+ />
+
+
+
+ {t.passwordPrompt.allCredentials.title}
+
+
+ {t.passwordPrompt.scheduleCTA} {t.passwordPrompt.allCredentials.cta}
+
+
+
+
+ )
+}
+
+export default AllCredentialsBox
diff --git a/applications/launchpad/gui-react/src/containers/PasswordPrompt/MoneroCredentialsBox.tsx b/applications/launchpad/gui-react/src/containers/PasswordPrompt/MoneroCredentialsBox.tsx
new file mode 100644
index 0000000000..f5fe180f45
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/PasswordPrompt/MoneroCredentialsBox.tsx
@@ -0,0 +1,95 @@
+import { useState, SyntheticEvent } from 'react'
+import { useTheme } from 'styled-components'
+
+import PasswordInput from '../../components/Inputs/PasswordInput'
+import Input from '../../components/Inputs/TextInput'
+import Box from '../../components/Box'
+import Text from '../../components/Text'
+import Button from '../../components/Button'
+import t from '../../locales'
+
+import { SignetsContainer, MoneroBackgroundSignet } from './styles'
+
+const MINIMAL_PASSWORD_LENGTH = 4
+
+import { MoneroCredentials } from './types'
+
+const MoneroCredentialsBox = ({
+ onSubmit,
+ pending,
+}: {
+ onSubmit: (monero: MoneroCredentials) => void
+ pending?: boolean
+}) => {
+ const theme = useTheme()
+ const [moneroUsername, setMoneroUsername] = useState('')
+ const [moneroPassword, setMoneroPassword] = useState('')
+
+ const formSubmitHandler = (event: SyntheticEvent) => {
+ event.preventDefault()
+
+ onSubmit({
+ username: moneroUsername,
+ password: moneroPassword,
+ })
+ }
+
+ const disableSubmit =
+ pending ||
+ moneroPassword.length < MINIMAL_PASSWORD_LENGTH ||
+ !moneroUsername
+
+ return (
+
+
+
+
+
+
+ {t.passwordPrompt.moneroCredentials.title}
+
+
+ {t.passwordPrompt.scheduleCTA}{' '}
+ {t.passwordPrompt.moneroCredentials.cta}
+
+
+
+
+ )
+}
+
+export default MoneroCredentialsBox
diff --git a/applications/launchpad/gui-react/src/containers/PasswordPrompt/WalletPasswordBox.tsx b/applications/launchpad/gui-react/src/containers/PasswordPrompt/WalletPasswordBox.tsx
new file mode 100644
index 0000000000..a2bfe63ed0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/PasswordPrompt/WalletPasswordBox.tsx
@@ -0,0 +1,76 @@
+import { useState, SyntheticEvent } from 'react'
+import { useTheme } from 'styled-components'
+
+import PasswordInput from '../../components/Inputs/PasswordInput'
+import Box from '../../components/Box'
+import Text from '../../components/Text'
+import Button from '../../components/Button'
+import t from '../../locales'
+
+import { SignetsContainer, TariBackgroundSignet } from './styles'
+import { WalletParole } from './types'
+
+const MINIMAL_PASSWORD_LENGTH = 4
+
+const WalletPasswordBox = ({
+ pending,
+ onSubmit,
+}: {
+ pending: boolean
+ onSubmit: (password: WalletParole) => void
+}) => {
+ const theme = useTheme()
+ const [walletPassword, setWalletPassword] = useState('')
+
+ const formSubmitHandler = (event: SyntheticEvent) => {
+ event.preventDefault()
+
+ onSubmit(walletPassword)
+ }
+
+ const disableSubmit =
+ pending || walletPassword.length < MINIMAL_PASSWORD_LENGTH
+
+ return (
+
+
+
+
+
+
+ {t.passwordPrompt.walletPassword.title}
+
+
+ {t.passwordPrompt.scheduleCTA} {t.passwordPrompt.walletPassword.cta}
+
+
+
+
+ )
+}
+
+export default WalletPasswordBox
diff --git a/applications/launchpad/gui-react/src/containers/PasswordPrompt/index.tsx b/applications/launchpad/gui-react/src/containers/PasswordPrompt/index.tsx
new file mode 100644
index 0000000000..c2fe277988
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/PasswordPrompt/index.tsx
@@ -0,0 +1,148 @@
+import React, { useCallback, useMemo, useState } from 'react'
+
+import { useAppSelector, useAppDispatch } from '../../store/hooks'
+import { actions as credentialsActions } from '../../store/credentials'
+import {
+ selectIsParoleSet,
+ selectAreMoneroCredentialsPresent,
+} from '../../store/credentials/selectors'
+import Modal from '../../components/Modal'
+
+import WalletPasswordBox from './WalletPasswordBox'
+import AllCredentialsBox from './AllCredentialsBox'
+import MoneroCredentialsBox from './MoneroCredentialsBox'
+import { WalletParole, MoneroCredentials } from './types'
+import { selectWalletPasswordConfirmation } from '../../store/temporary/selectors'
+
+export const EnsurePasswordsContext = React.createContext<{
+ ensureWalletPasswordInStore: (
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ callback: (...a: any[]) => void,
+ required: {
+ wallet?: boolean
+ monero?: boolean
+ },
+ ) => void
+}>({ ensureWalletPasswordInStore: () => null })
+
+const PasswordsPrompt = ({
+ children,
+ local,
+}: {
+ children: JSX.Element
+ local?: boolean
+}) => {
+ const dispatch = useAppDispatch()
+ const isParoleSet = useAppSelector(selectIsParoleSet)
+ const walletPassConfirm = useAppSelector(selectWalletPasswordConfirmation)
+ const areMoneroCredentialsPresent = useAppSelector(
+ selectAreMoneroCredentialsPresent,
+ )
+
+ const [modalOpen, setModalOpen] = useState(false)
+ const [action, setAction] = useState<() => void>(() => null)
+ const [showWalletForm, setShowWalletForm] = useState(true)
+ const [showMoneroForm, setShowMoneroForm] = useState(true)
+
+ const ensureWalletPasswordInStore = useCallback(
+ (
+ callback: () => void,
+ required: {
+ wallet?: boolean
+ monero?: boolean
+ },
+ ) => {
+ if (modalOpen) {
+ return
+ }
+
+ if (!required.wallet && !required.monero) {
+ callback()
+
+ return
+ }
+
+ setShowWalletForm(
+ Boolean(
+ (required.wallet && !isParoleSet) || walletPassConfirm !== 'success',
+ ),
+ )
+ setShowMoneroForm(
+ Boolean(required.monero && !areMoneroCredentialsPresent),
+ )
+ if (
+ (required.wallet && !isParoleSet) ||
+ walletPassConfirm !== 'success' ||
+ (required.monero && !areMoneroCredentialsPresent)
+ ) {
+ setAction(() => callback)
+ setModalOpen(true)
+ return
+ }
+
+ callback()
+ },
+ [modalOpen, isParoleSet, areMoneroCredentialsPresent],
+ )
+
+ const contextValue = useMemo(
+ () => ({
+ ensureWalletPasswordInStore,
+ }),
+ [ensureWalletPasswordInStore],
+ )
+
+ const saveCredentials = ({
+ wallet,
+ monero,
+ }: {
+ wallet?: WalletParole
+ monero?: MoneroCredentials
+ }) => {
+ if (wallet) {
+ dispatch(credentialsActions.setWallet(wallet))
+ }
+ if (monero) {
+ dispatch(credentialsActions.setMoneroCredentials(monero))
+ }
+ setModalOpen(false)
+ action()
+ }
+
+ return (
+ <>
+
+ {children}
+
+ setModalOpen(false)}
+ local={local}
+ size='auto'
+ >
+ {showWalletForm && !showMoneroForm && (
+ saveCredentials({ wallet })}
+ pending={false}
+ />
+ )}
+ {showWalletForm && showMoneroForm && (
+
+ saveCredentials({ wallet, monero })
+ }
+ />
+ )}
+ {!showWalletForm && showMoneroForm && (
+
+ saveCredentials({ monero })
+ }
+ />
+ )}
+
+
+ )
+}
+
+export default PasswordsPrompt
diff --git a/applications/launchpad/gui-react/src/containers/PasswordPrompt/styles.ts b/applications/launchpad/gui-react/src/containers/PasswordPrompt/styles.ts
new file mode 100644
index 0000000000..af13f7c4c7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/PasswordPrompt/styles.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+import SvgTariSignet from '../../styles/Icons/TariSignet'
+import SvgMoneroSignet from '../../styles/Icons/MoneroSignet'
+
+export const SignetsContainer = styled.div`
+ position: absolute;
+ z-index: 0;
+ pointer-events: none;
+ right: ${({ theme }) => theme.spacing()};
+ top: ${({ theme }) => theme.spacing()};
+ display: flex;
+ flex-direction: column;
+ row-gap: ${({ theme }) => theme.spacing(0.5)};
+`
+
+export const TariBackgroundSignet = styled(SvgTariSignet)`
+ color: ${({ theme }) => theme.disabledPrimaryButton};
+ height: 80px;
+ width: 80px;
+`
+
+export const MoneroBackgroundSignet = styled(SvgMoneroSignet)`
+ color: ${({ theme }) => theme.disabledPrimaryButton};
+ height: 80px;
+ width: 80px;
+`
diff --git a/applications/launchpad/gui-react/src/containers/PasswordPrompt/types.ts b/applications/launchpad/gui-react/src/containers/PasswordPrompt/types.ts
new file mode 100644
index 0000000000..30ba0a1dad
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/PasswordPrompt/types.ts
@@ -0,0 +1,2 @@
+export type WalletParole = string
+export type MoneroCredentials = { username: string; password: string }
diff --git a/applications/launchpad/gui-react/src/containers/PasswordPrompt/useWithPasswordPrompt.tsx b/applications/launchpad/gui-react/src/containers/PasswordPrompt/useWithPasswordPrompt.tsx
new file mode 100644
index 0000000000..c1aad02a55
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/PasswordPrompt/useWithPasswordPrompt.tsx
@@ -0,0 +1,34 @@
+import { useCallback, useContext } from 'react'
+
+import { EnsurePasswordsContext } from '.'
+
+export type WithRequiredCredentials = {
+ wallet?: boolean
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ monero?: boolean | ((...args: any[]) => boolean)
+}
+
+const useWithPasswordPrompt = (
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ action: (...args: any[]) => void,
+ required: WithRequiredCredentials,
+) => {
+ const { ensureWalletPasswordInStore } = useContext(EnsurePasswordsContext)
+
+ return useCallback(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (...args: any[]) => {
+ ensureWalletPasswordInStore(() => action(...args), {
+ wallet: required.wallet,
+ monero:
+ required.monero &&
+ (typeof required.monero === 'function'
+ ? required.monero(...args)
+ : required.monero),
+ })
+ },
+ [required, ensureWalletPasswordInStore],
+ )
+}
+
+export default useWithPasswordPrompt
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/BaseNodeSettings.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/BaseNodeSettings.tsx
new file mode 100644
index 0000000000..c9c829cdb5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/BaseNodeSettings.tsx
@@ -0,0 +1,124 @@
+import { useCallback } from 'react'
+import { Controller, Control, UseFormSetValue } from 'react-hook-form'
+import { open } from '@tauri-apps/api/dialog'
+import { appDir } from '@tauri-apps/api/path'
+
+import Select from '../../../components/Select'
+import Text from '../../../components/Text'
+import SettingsSectionHeader from '../../../components/SettingsSectionHeader'
+
+import t from '../../../locales'
+import { Network } from '../../BaseNodeContainer/types'
+import { networkOptions } from '../../BaseNodeContainer/constants'
+
+import { SettingsInputs } from '../types'
+import { useTheme } from 'styled-components'
+import { Label } from '../../../components/Inputs/Input/styles'
+import { ConnectionRow, InputRow, SelectRow, TextWrapper } from './styles'
+import Input from '../../../components/Inputs/Input'
+import Button from '../../../components/Button'
+import SvgInfo1 from '../../../styles/Icons/Info1'
+import { useAppDispatch } from '../../../store/hooks'
+import { tbotactions } from '../../../store/tbot'
+import MessagesConfig from '../../../config/helpMessagesConfig'
+
+const BaseNodeSettings = ({
+ control,
+ onBaseNodeConnectClick,
+ setValue,
+}: {
+ control: Control
+ onBaseNodeConnectClick: () => void
+ setValue: UseFormSetValue
+}) => {
+ const theme = useTheme()
+ const dispatch = useAppDispatch()
+ const selectDirectory = useCallback(async (lastPath?: string) => {
+ const selectedFolder = await open({
+ directory: true,
+ defaultPath: lastPath || (await appDir()),
+ })
+
+ if (selectedFolder === null) {
+ return
+ } else if (typeof selectedFolder === 'string') {
+ setValue('baseNode.rootFolder', selectedFolder, {
+ shouldDirty: true,
+ })
+ }
+ }, [])
+
+ return (
+ <>
+
+ {t.baseNode.settings.title}
+
+ (
+
+
+
+
+
+ )}
+ />
+
+ {t.common.nouns.expert}
+
+ (
+
+
+ selectDirectory(field.value)}
+ onChange={field.onChange}
+ value={field?.value?.toString() || ''}
+ containerStyle={{ width: '50%' }}
+ withError={false}
+ style={{ color: theme.nodeWarningText }}
+ />
+
+ )}
+ />
+
+
+
+ {' '}
+ {t.baseNode.settings.aurora}
+
+
+
+
+
+ )
+}
+
+export default BaseNodeSettings
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/index.tsx
new file mode 100644
index 0000000000..ee600e0bb8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/index.tsx
@@ -0,0 +1,23 @@
+import BaseNodeSettings from './BaseNodeSettings'
+import { Control, UseFormSetValue } from 'react-hook-form'
+import { SettingsInputs } from '../types'
+
+const BaseNodeSettingsContainer = ({
+ control,
+ onBaseNodeConnectClick,
+ setValue,
+}: {
+ control: Control
+ onBaseNodeConnectClick: () => void
+ setValue: UseFormSetValue
+}) => {
+ return (
+
+ )
+}
+
+export default BaseNodeSettingsContainer
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/styles.ts b/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/styles.ts
new file mode 100644
index 0000000000..33d43842f4
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/BaseNodeSettings/styles.ts
@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+
+export const SelectRow = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: ${({ theme }) => theme.spacingVertical(2.5)};
+`
+
+export const InputRow = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`
+
+export const ConnectionRow = styled.div`
+ margin-top: ${({ theme }) => theme.spacingVertical(1.5)};
+ display: flex;
+`
+
+export const TextWrapper = styled.div`
+ display: flex;
+ align-items: center;
+ margin-right: ${({ theme }) => theme.spacingHorizontal(0.25)};
+`
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/DockerSettings/DockerSettings.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/DockerSettings/DockerSettings.tsx
new file mode 100644
index 0000000000..41b1d9060d
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/DockerSettings/DockerSettings.tsx
@@ -0,0 +1,105 @@
+import {
+ Controller,
+ Control,
+ UseFormSetValue,
+ FormState,
+} from 'react-hook-form'
+import { useTheme } from 'styled-components'
+
+import Input from '../../../components/Inputs/Input'
+import { Label } from '../../../components/Inputs/Input/styles'
+import SettingsSectionHeader from '../../../components/SettingsSectionHeader'
+import Text from '../../../components/Text'
+import DockerImagesList from '../../../components/DockerImagesList'
+import t from '../../../locales'
+import { SettingsHeader } from '../styles'
+import { SettingsInputs } from '../types'
+
+const DockerSettings = ({
+ control,
+}: {
+ formState: FormState
+ control: Control
+ values: SettingsInputs
+ setValue: UseFormSetValue
+ setOpenMiningAuthForm: (value: boolean) => void
+}) => {
+ const theme = useTheme()
+
+ return (
+ <>
+
+
+ {t.docker.settings.title}
+
+
+
+
+ {t.common.nouns.expert}
+
+
+
+
+ (
+
+ )}
+ />
+
+
+
+
+ (
+
+ )}
+ />
+
+
+
+ {t.docker.settings.imageStatuses}
+
+
+
+
+ )
+}
+
+export default DockerSettings
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/DockerSettings/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/DockerSettings/index.tsx
new file mode 100644
index 0000000000..7aac296b56
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/DockerSettings/index.tsx
@@ -0,0 +1,31 @@
+import { Control, FormState, UseFormSetValue } from 'react-hook-form'
+
+import { SettingsInputs } from '../types'
+
+import DockerSettings from './DockerSettings'
+
+const DockerSettingsContainer = ({
+ formState,
+ control,
+ values,
+ setValue,
+ setOpenMiningAuthForm,
+}: {
+ formState: FormState
+ control: Control
+ values: SettingsInputs
+ setValue: UseFormSetValue
+ setOpenMiningAuthForm: (value: boolean) => void
+}) => {
+ return (
+
+ )
+}
+
+export default DockerSettingsContainer
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings.test.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings.test.tsx
new file mode 100644
index 0000000000..6534ce247e
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings.test.tsx
@@ -0,0 +1,139 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { configureStore } from '@reduxjs/toolkit'
+import { ThemeProvider } from 'styled-components'
+
+import themes from '../../styles/themes'
+import { rootReducer } from '../../store'
+import { actions as settingsActions } from '../../store/settings'
+
+import SettingsContainer from '.'
+import { Settings } from '../../store/settings/types'
+
+describe('MiningSettings', () => {
+ it('should set mining settings using Settings', async () => {
+ const store = configureStore({
+ reducer: rootReducer,
+ preloadedState: {
+ mining: {
+ notifications: [],
+ tari: {},
+ merged: {
+ address: 'initial-address-value',
+ threads: 1,
+ urls: [],
+ useAuth: false,
+ },
+ },
+ },
+ })
+
+ render(
+
+
+
+
+ ,
+ )
+
+ // 1. Open mining settings
+ act(() => {
+ store.dispatch(settingsActions.open({}))
+ store.dispatch(settingsActions.goTo(Settings.Mining))
+ })
+
+ expect(screen.getByTestId('settings-modal-container')).toBeInTheDocument()
+
+ // 2. Find Monero address input, check its current value and set new value
+ let addressInput = screen.getByTestId('address-input')
+ expect(addressInput).toBeInTheDocument()
+ expect((addressInput as HTMLInputElement).value).toBe(
+ 'initial-address-value',
+ )
+
+ await act(async () => {
+ fireEvent.input(addressInput, { target: { value: 'new-address-value' } })
+ })
+
+ addressInput = screen.getByTestId('address-input')
+ expect((addressInput as HTMLInputElement).value).toBe('new-address-value')
+
+ // 3. Change threads value
+ const threadsInput = screen.getByTestId('mining-merged-threads-input')
+ await act(async () => {
+ fireEvent.input(threadsInput, { target: { value: 3 } })
+ })
+
+ // 4. Add 2 URLs and then remove one
+ const addUrlBtn = screen.getByTestId('add-new-monero-url-btn')
+ await act(async () => {
+ fireEvent.click(addUrlBtn)
+ fireEvent.click(addUrlBtn)
+ })
+
+ let firstUrl = screen.getByTestId('mining-url-input-0')
+ let secondUrl = screen.getByTestId('mining-url-input-1')
+
+ expect(firstUrl).toBeInTheDocument()
+ expect(secondUrl).toBeInTheDocument()
+
+ await act(async () => {
+ fireEvent.input(firstUrl, {
+ target: { value: 'http://new-monero-url-0.co' },
+ })
+ fireEvent.input(secondUrl, {
+ target: { value: 'http://new-monero-url-1.co' },
+ })
+ })
+
+ firstUrl = screen.getByTestId('mining-url-input-0')
+ secondUrl = screen.getByTestId('mining-url-input-1')
+ expect((firstUrl as HTMLInputElement).value).toBe(
+ 'http://new-monero-url-0.co',
+ )
+ expect((secondUrl as HTMLInputElement).value).toBe(
+ 'http://new-monero-url-1.co',
+ )
+
+ // remove first url
+ const removeFirstUrlBtn = screen.getByTestId('mining-url-remove-0')
+
+ await act(async () => {
+ fireEvent.click(removeFirstUrlBtn)
+ })
+
+ // 5. Submit form
+ const submitBtn = screen.getByTestId('settings-submit-btn')
+ expect(submitBtn).toBeInTheDocument()
+
+ // React-hook-form's valdiation is async, so may need to wait a bit until button is unlocked
+ waitFor(() => {
+ expect(submitBtn).not.toBeDisabled()
+ })
+
+ await act(async () => {
+ fireEvent.click(submitBtn)
+ })
+
+ // Wait for the form submit...
+ waitFor(() => {
+ expect(submitBtn).not.toBeDisabled()
+ })
+
+ // 6. Check state
+ const storeState = store.getState()
+
+ expect(storeState.mining.merged.address).toBe('new-address-value')
+ expect(storeState.mining.merged.threads).toBe(3)
+ expect(
+ storeState.mining.merged.urls?.find(
+ u => u.url === 'http://new-monero-url-0.co',
+ )?.url,
+ ).not.toBe('http://new-monero-url-0.co')
+ expect(
+ storeState.mining.merged.urls?.find(
+ u => u.url === 'http://new-monero-url-1.co',
+ )?.url,
+ ).toBe('http://new-monero-url-1.co')
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MiningSettings.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MiningSettings.tsx
new file mode 100644
index 0000000000..c49798d4f6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MiningSettings.tsx
@@ -0,0 +1,183 @@
+import { useEffect, useState } from 'react'
+import {
+ Controller,
+ Control,
+ UseFormSetValue,
+ FormState,
+} from 'react-hook-form'
+import { useTheme } from 'styled-components'
+import Button from '../../../components/Button'
+import IconButton from '../../../components/IconButton'
+
+import Input from '../../../components/Inputs/Input'
+import { Label } from '../../../components/Inputs/Input/styles'
+import SettingsSectionHeader from '../../../components/SettingsSectionHeader'
+import Text from '../../../components/Text'
+import MiningConfig from '../../../config/mining'
+
+import t from '../../../locales'
+import SvgShieldCheck from '../../../styles/Icons/ShieldCheck'
+import SvgTrash2 from '../../../styles/Icons/Trash2'
+import { RowSpacedBetween, SettingsHeader } from '../styles'
+import { SettingsInputs } from '../types'
+import MoneroURLs from './MoneroURLs'
+import { AddressDescription, NarrowInlineInput } from './styles'
+
+const isAuthenticationApplied = (values: SettingsInputs): boolean => {
+ const { useAuth } = values.mining.merged
+
+ return useAuth
+}
+
+const MiningSettings = ({
+ formState,
+ control,
+ values,
+ setValue,
+ setOpenMiningAuthForm,
+}: {
+ formState: FormState
+ control: Control
+ values: SettingsInputs
+ setValue: UseFormSetValue
+ setOpenMiningAuthForm: (value: boolean) => void
+}) => {
+ const theme = useTheme()
+
+ const [isAuthApplied, setIsAuthApplied] = useState(
+ isAuthenticationApplied(values),
+ )
+
+ useEffect(() => {
+ setIsAuthApplied(isAuthenticationApplied(values))
+ }, [values])
+
+ return (
+ <>
+
+
+ {t.mining.settings.title}
+
+
+
+
+ (
+ field.onChange(v)}
+ autoFocus
+ error={formState.errors.mining?.merged?.address?.message}
+ />
+ )}
+ />
+
+
+
+
+ {t.mining.settings.moneroAddressDesc1.regular}{' '}
+
+ {t.mining.settings.moneroAddressDesc1.bold}
+
+
+
+
+ {t.mining.settings.moneroAddressDesc2.regular}{' '}
+
+ {t.mining.settings.moneroAddressDesc2.bold}
+
+
+
+
+
+ {t.common.nouns.expert}
+
+
+
+
+ (
+ {
+ // convert string into number
+ const stripped = value.replace(/\D/g, '')
+ let val = !stripped
+ ? ''
+ : Math.abs(Math.round(parseInt(stripped)))
+
+ // limit the number of threads to maxThreads
+ if (val > MiningConfig.maxThreads) {
+ val = MiningConfig.maxThreads
+ }
+ field.onChange(val)
+ }}
+ value={field?.value?.toString() || ''}
+ containerStyle={{ maxWidth: 96 }}
+ withError={false}
+ />
+ )}
+ />
+
+
+ {isAuthApplied ? (
+
+
+ {' '}
+
+
+ {
+ setValue('mining.merged.authentication', undefined, {
+ shouldDirty: true,
+ })
+ setValue('mining.merged.useAuth', false, {
+ shouldDirty: true,
+ })
+ setIsAuthApplied(false)
+ }}
+ style={{ color: theme.warningDark }}
+ >
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+
+ )
+}
+
+export default MiningSettings
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/MoneroAuthentication.test.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/MoneroAuthentication.test.tsx
new file mode 100644
index 0000000000..37806276a4
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/MoneroAuthentication.test.tsx
@@ -0,0 +1,64 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import themes from '../../../../styles/themes'
+
+import MoneroAuthentication from '.'
+
+describe('MoneroAuthentication', () => {
+ it('should pass username and password on form submit', async () => {
+ const closeFn = jest.fn()
+ const onSubmitFn = jest.fn()
+
+ render(
+
+
+ ,
+ )
+
+ const usernameInput = screen.getByTestId('monero-auth-username-input')
+ const passwordInput = screen.getByTestId('monero-auth-password-input')
+
+ await act(async () => {
+ fireEvent.input(usernameInput, { target: { value: 'test-username-123' } })
+ fireEvent.input(passwordInput, { target: { value: 'test-password-123' } })
+ })
+
+ const cancelBtn = screen.getByTestId('monero-auth-submit-btn')
+ await act(async () => {
+ fireEvent.click(cancelBtn)
+ })
+
+ expect(onSubmitFn).toBeCalledTimes(1)
+ expect(onSubmitFn).toHaveBeenCalledWith({
+ username: 'test-username-123',
+ password: 'test-password-123',
+ })
+ })
+
+ it('should call close function when cancel button is clicked', async () => {
+ const closeFn = jest.fn()
+ const onSubmitFn = jest.fn()
+
+ render(
+
+
+ ,
+ )
+
+ const cancelBtn = screen.getByTestId('monero-auth-close-btn')
+ act(() => {
+ fireEvent.click(cancelBtn)
+ })
+
+ expect(closeFn).toBeCalledTimes(1)
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/index.tsx
new file mode 100644
index 0000000000..fa64f246a2
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/index.tsx
@@ -0,0 +1,118 @@
+import { Controller, SubmitHandler, useForm } from 'react-hook-form'
+import { useTheme } from 'styled-components'
+import Button from '../../../../components/Button'
+import Input from '../../../../components/Inputs/Input'
+import PasswordInput from '../../../../components/Inputs/PasswordInput'
+import Text from '../../../../components/Text'
+
+import t from '../../../../locales'
+import { AuthenticationInputs } from '../../types'
+
+import {
+ Description,
+ InputWrapper,
+ ModalContainer,
+ ModalContent,
+ ModalFooter,
+} from './styles'
+
+/**
+ * The Authentication form (username & password) dedicated to the Monero URL authentication.
+ *
+ * @param {AuthenticationInputs} [defaultValues] - initial values of `username` and `password`
+ * @param {(data: AuthenticationInputs) => void} onSubmit - it is being called on the form submit
+ * @param {(value: boolean) => void} close - cancel the form
+ */
+const MoneroAuthentication = ({
+ defaultValues,
+ onSubmit,
+ close,
+}: {
+ defaultValues?: AuthenticationInputs
+ onSubmit: (data: AuthenticationInputs) => void
+ close: () => void
+}) => {
+ const theme = useTheme()
+ const { control, handleSubmit } = useForm({
+ mode: 'onChange',
+ defaultValues,
+ })
+
+ const onSubmitForm: SubmitHandler = data => {
+ onSubmit(data)
+ close()
+ }
+
+ return (
+
+
+
+ {t.mining.settings.moneroAuthFormTitle}
+
+
+
+ {t.mining.settings.moneroAuthFormDesc}
+
+
+
+
+ (
+ field.onChange(v)}
+ autoFocus
+ />
+ )}
+ />
+
+
+
+ (
+ field.onChange(v)}
+ useReveal
+ />
+ )}
+ />
+
+
+
+
+
+
+
+ )
+}
+
+export default MoneroAuthentication
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/styles.ts b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/styles.ts
new file mode 100644
index 0000000000..397c6519c9
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroAuthentication/styles.ts
@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+
+export const ModalContainer = styled.div`
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+`
+
+export const ModalContent = styled.div`
+ overflow: auto;
+ flex: 1;
+ padding: ${({ theme }) => theme.spacingHorizontal(1.6)};
+`
+
+export const ModalFooter = styled.div`
+ display: flex;
+ padding: ${({ theme }) =>
+ `${theme.spacingVertical(2)} ${theme.spacingHorizontal(1.6)}`};
+ gap: ${({ theme }) => theme.spacingHorizontal(1)};
+ border-top: 1px solid ${({ theme }) => theme.borderColor};
+
+ & > button:last-child {
+ flex: 1;
+ justify-content: center;
+ }
+`
+
+export const Description = styled.div`
+ margin: ${({ theme }) => `${theme.spacingHorizontal(1.6)} 0`};
+`
+
+export const InputWrapper = styled.div`
+ margin: ${({ theme }) => `${theme.spacingHorizontal(1.6)} 0`};
+`
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURL/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURL/index.tsx
new file mode 100644
index 0000000000..63ec0e9c98
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURL/index.tsx
@@ -0,0 +1,69 @@
+import { Control, Controller, UseFieldArrayRemove } from 'react-hook-form'
+import Button from '../../../../components/Button'
+import Input from '../../../../components/Inputs/Input'
+import { SettingsInputs } from '../../types'
+import { HeaderRow, StyledMoneroURL } from './styles'
+
+import t from '../../../../locales'
+import { Label } from '../../../../components/Inputs/Input/styles'
+import SvgTrash2 from '../../../../styles/Icons/Trash2'
+import { useTheme } from 'styled-components'
+import { isUrl } from '../../../../utils/Validators'
+
+const MoneroURL = ({
+ url,
+ control,
+ remove,
+ index,
+}: {
+ url: string
+ username?: string
+ password?: string
+ control: Control
+ remove: UseFieldArrayRemove
+ index: number
+}) => {
+ const theme = useTheme()
+
+ const urlFormat = (value: string) => {
+ return isUrl(value) ? undefined : t.mining.settings.wrongUrlFormat
+ }
+
+ return (
+
+
+
+
+ }
+ onClick={() => remove(index)}
+ testId={`mining-url-remove-${index}`}
+ />
+
+
+ (
+ field.onChange(value)}
+ value={field.value}
+ containerStyle={{ width: '100%' }}
+ error={fieldState.error ? fieldState.error.message : ''}
+ />
+ )}
+ />
+
+ )
+}
+
+export default MoneroURL
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURL/styles.ts b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURL/styles.ts
new file mode 100644
index 0000000000..38ea781ee8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURL/styles.ts
@@ -0,0 +1,32 @@
+import styled from 'styled-components'
+
+export const StyledMoneroURL = styled.div`
+ border: 1px solid ${({ theme }) => theme.borderColor};
+ border-radius: ${({ theme }) => theme.borderRadius()};
+ padding: ${({ theme }) => theme.spacingHorizontal(0.67)};
+ margin-bottom: ${({ theme }) => theme.spacingVertical(1)};
+ padding-bottom: ${({ theme }) => theme.spacingHorizontal(1.8)};
+
+ &:hover {
+ background: ${({ theme }) => theme.backgroundSecondary};
+ }
+
+ & > input {
+ width: 100%;
+ }
+
+ &:hover .header-buttons {
+ display: flex !important;
+ }
+`
+
+export const HeaderRow = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ & > .header-buttons {
+ margin-bottom: ${({ theme }) => theme.spacingVertical(0.67)};
+ display: none;
+ }
+`
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURLs/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURLs/index.tsx
new file mode 100644
index 0000000000..0eace07db7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/MoneroURLs/index.tsx
@@ -0,0 +1,44 @@
+import { Control, useFieldArray } from 'react-hook-form'
+
+import Button from '../../../../components/Button'
+
+import MoneroURL from '../MoneroURL'
+import { SettingsInputs } from '../../types'
+
+import MiningConfig from '../../../../config/mining'
+import t from '../../../../locales'
+import { ActionsContainer, UrlList } from '../styles'
+
+const MoneroURLs = ({ control }: { control: Control }) => {
+ const { fields, append, remove } = useFieldArray({
+ control,
+ name: 'mining.merged.urls',
+ })
+
+ return (
+
+ {fields.map((field, index) => (
+
+ ))}
+ {fields.length < MiningConfig.maxMoneroUrls && (
+
+
+
+ )}
+
+ )
+}
+
+export default MoneroURLs
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/index.tsx
new file mode 100644
index 0000000000..8eca836368
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/index.tsx
@@ -0,0 +1,29 @@
+import MiningSettings from './MiningSettings'
+import { Control, FormState, UseFormSetValue } from 'react-hook-form'
+import { SettingsInputs } from '../types'
+
+const MiningSettingsContainer = ({
+ formState,
+ control,
+ values,
+ setValue,
+ setOpenMiningAuthForm,
+}: {
+ formState: FormState
+ control: Control
+ values: SettingsInputs
+ setValue: UseFormSetValue
+ setOpenMiningAuthForm: (value: boolean) => void
+}) => {
+ return (
+
+ )
+}
+
+export default MiningSettingsContainer
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/styles.ts b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/styles.ts
new file mode 100644
index 0000000000..6162bcd2bc
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/MiningSettings/styles.ts
@@ -0,0 +1,41 @@
+import styled from 'styled-components'
+
+export const AddressDescription = styled.div`
+ & > p {
+ color: ${({ theme }) => theme.nodeWarningText};
+ }
+`
+
+export const NarrowInlineInput = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: ${({ theme }) => theme.spacingHorizontal(0.5)};
+ margin: ${({ theme }) => theme.spacingVertical(0.5)} 0;
+
+ & > label {
+ margin-bottom: 0;
+ }
+
+ & input {
+ max-width: 96px;
+ min-width: auto;
+ }
+`
+
+export const ActionsContainer = styled.div`
+ color: ${({ theme }) => theme.greenMedium};
+ display: flex;
+ justify-content: flex-end;
+ padding-top: ${({ theme }) => theme.spacingVertical(1)};
+ padding-bottom: ${({ theme }) => theme.spacingVertical(1)};
+ margin-bottom: ${({ theme }) => theme.spacingVertical(2)};
+
+ & > button {
+ text-decoration: none;
+ }
+`
+
+export const UrlList = styled.div`
+ margin-top: ${({ theme }) => theme.spacingVertical(1)};
+`
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/SecuritySettings/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/SecuritySettings/index.tsx
new file mode 100644
index 0000000000..07e0ad8aae
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/SecuritySettings/index.tsx
@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { useTheme } from 'styled-components'
+
+import Text from '../../../components/Text'
+
+import { useAppSelector } from '../../../store/hooks'
+import { selectRecoveryPhraseCreated } from '../../../store/wallet/selectors'
+
+import t from '../../../locales'
+
+import { RowFlex, SettingsHeader, StyledList } from '../styles'
+import SeedPhraseModal from '../../../components/SeedPhraseModal'
+import Button from '../../../components/Button'
+import Tag from '../../../components/Tag'
+import SvgTick from '../../../styles/Icons/Tick'
+
+const SecuritySettingsContainer = () => {
+ const theme = useTheme()
+
+ const alreadyCreated = useAppSelector(selectRecoveryPhraseCreated)
+
+ const [openSeedPhraseModal, setOpenSeedPhraseModal] = useState(false)
+
+ return (
+ <>
+
+
+ {t.settings.security.title}
+
+
+
+
+
+ {t.settings.security.backupRecoveryPhrase}
+
+ {alreadyCreated ? (
+ }>
+ {t.common.adjectives.created}
+
+ ) : (
+
+ {t.common.adjectives.recommended}
+
+ )}
+
+
+
+ {t.settings.security.tab.desc}
+
+
+ {t.settings.security.tab.list1}
+
+
+ {t.settings.security.tab.list2}
+
+
+ {t.settings.security.tab.list3}
+
+
+
+
+
+ {alreadyCreated ? (
+
+ ) : (
+
+ )}
+
+ setOpenSeedPhraseModal(false)}
+ />
+
+ )
+}
+
+export default SecuritySettingsContainer
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/SettingsComponent.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/SettingsComponent.tsx
new file mode 100644
index 0000000000..6a81cc96a4
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/SettingsComponent.tsx
@@ -0,0 +1,243 @@
+import { ReactNode } from 'react'
+
+import { Settings } from '../../store/settings/types'
+import Modal from '../../components/Modal'
+import Button from '../../components/Button'
+import Switch from '../../components/Switch'
+import Text from '../../components/Text'
+
+import SvgSun from '../../styles/Icons/Sun'
+import SvgMoon from '../../styles/Icons/Moon'
+
+import t from '../../locales'
+
+import {
+ MainContainer,
+ MainContentContainer,
+ Sidebar,
+ MenuItem,
+ MainContent,
+ Footer,
+ DiscardWarning,
+ SidebarTabs,
+ SidebarSelectTheme,
+ SwitchBg,
+} from './styles'
+import BaseNodeSettings from './BaseNodeSettings'
+import MiningSettings from './MiningSettings'
+import DockerSettings from './DockerSettings'
+import WalletSettings from './WalletSettings'
+import {
+ SettingsProps,
+ SettingsComponentProps,
+ AuthenticationInputs,
+} from './types'
+import MoneroAuthentication from './MiningSettings/MoneroAuthentication'
+import { useTheme } from 'styled-components'
+import BaseNodeQRModal from '../BaseNodeQRModal'
+import SecuritySettings from './SecuritySettings'
+
+const renderSettings = (
+ settings: Settings,
+ props: SettingsProps,
+): ReactNode => {
+ switch (settings) {
+ case Settings.Wallet:
+ return
+ case Settings.Mining:
+ return (
+
+ )
+ case Settings.BaseNode:
+ return (
+
+ )
+ case Settings.Docker:
+ return (
+
+ )
+ case Settings.Security:
+ return
+ default:
+ return null
+ }
+}
+
+const SettingsComponent = ({
+ open,
+ onClose,
+ activeSettings,
+ goToSettings,
+ formState,
+ values,
+ setValue,
+ control,
+ defaultMiningMergedValues,
+ onSubmit,
+ confirmCancel,
+ cancelDiscard,
+ discardChanges,
+ openMiningAuthForm,
+ setOpenMiningAuthForm,
+ openBaseNodeConnect,
+ setOpenBaseNodeConnect,
+ currentTheme,
+ changeTheme,
+}: SettingsComponentProps) => {
+ const theme = useTheme()
+ // Render Monero Authentication form if open:
+ if (openMiningAuthForm) {
+ return (
+
+ {
+ setValue('mining.merged.authentication', val, { shouldDirty: true })
+ setValue(
+ 'mining.merged.useAuth',
+ Boolean(val.username || val.password),
+ { shouldDirty: true },
+ )
+ }}
+ close={() => setOpenMiningAuthForm(false)}
+ />
+
+ )
+ }
+
+ // Render Base Node QR code
+ if (openBaseNodeConnect) {
+ return (
+ setOpenBaseNodeConnect(false)} />
+ )
+ }
+
+ // Render main Settings modal:
+ return (
+
+
+
+
+
+ {Object.values(Settings)
+ .filter(settingPage => t.common.nouns[settingPage])
+ .map(settingPage => (
+
+ ))}
+
+
+
+ {t.settings.selectTheme}
+
+
+ }
+ rightLabel={}
+ value={currentTheme === 'dark'}
+ onClick={v => changeTheme(v ? 'dark' : 'light')}
+ />
+
+
+
+
+ {renderSettings(activeSettings, {
+ formState,
+ control,
+ values,
+ setValue,
+ setOpenMiningAuthForm,
+ onBaseNodeConnectClick: () => setOpenBaseNodeConnect(true),
+ })}
+
+
+ {confirmCancel && (
+
+ )}
+ {!confirmCancel && (
+
+ )}
+
+
+ )
+}
+
+SettingsComponent.defaultProps = {
+ open: false,
+ onClose: () => null,
+}
+
+export default SettingsComponent
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/WalletSettings.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/WalletSettings.tsx
new file mode 100644
index 0000000000..25eb5c0ae6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/WalletSettings.tsx
@@ -0,0 +1,77 @@
+import { useTheme } from 'styled-components'
+
+import Tag from '../../../components/Tag'
+import Text from '../../../components/Text'
+import Button from '../../../components/Button'
+import CopyBox from '../../../components/CopyBox'
+import t from '../../../locales'
+import useWithPasswordPrompt from '../../../containers/PasswordPrompt/useWithPasswordPrompt'
+
+import { IsWalletRunningRow, WalletRunningContainer } from './styles'
+
+const WalletSettings = ({
+ running,
+ pending,
+ address,
+ stop,
+ start,
+}: {
+ running: boolean
+ pending: boolean
+ address: string
+ stop: () => void
+ start: () => void
+}) => {
+ const theme = useTheme()
+ const startWallet = useWithPasswordPrompt(start, { wallet: true })
+
+ return (
+ <>
+
+ {t.wallet.settings.title}
+
+
+
+ {t.common.nouns.wallet}
+ {running && (
+
+ {t.common.adjectives.running}
+
+ )}
+
+ {running && (
+
+ )}
+ {!running && (
+
+ )}
+
+
+
+ {t.wallet.settings.explanations.storage}{' '}
+ {t.wallet.settings.explanations.send} (
+ {t.wallet.settings.explanations.try}{' '}
+ {' '}
+ - {t.wallet.settings.explanations.itsGreat}){' '}
+ {t.wallet.settings.explanations.extendedFunctionality}{' '}
+ {t.wallet.settings.explanations.convert}
+
+
+ )
+}
+
+export default WalletSettings
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/index.tsx
new file mode 100644
index 0000000000..51d25971e4
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/index.tsx
@@ -0,0 +1,31 @@
+import { useAppSelector, useAppDispatch } from '../../../store/hooks'
+import {
+ selectIsPending,
+ selectIsRunning,
+ selectWalletAddress,
+} from '../../../store/wallet/selectors'
+import { actions as walletActions } from '../../../store/wallet'
+import PasswordPrompt from '../../../containers/PasswordPrompt'
+
+import WalletSettings from './WalletSettings'
+
+const WalletSettingsContainer = () => {
+ const dispatch = useAppDispatch()
+ const address = useAppSelector(selectWalletAddress)
+ const running = useAppSelector(selectIsRunning)
+ const pending = useAppSelector(selectIsPending)
+
+ return (
+
+ dispatch(walletActions.stop())}
+ start={() => dispatch(walletActions.start())}
+ address={address}
+ />
+
+ )
+}
+
+export default WalletSettingsContainer
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/styles.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/styles.tsx
new file mode 100644
index 0000000000..fd07c4cd0f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/WalletSettings/styles.tsx
@@ -0,0 +1,32 @@
+import { ReactNode } from 'react'
+import styled, { useTheme } from 'styled-components'
+
+import Box from '../../../components/Box'
+
+export const IsWalletRunningRow = ({ children }: { children: ReactNode }) => {
+ const theme = useTheme()
+ return (
+
+ {children}
+
+ )
+}
+
+export const WalletRunningContainer = styled.span`
+ display: flex;
+ align-items: baseline;
+ column-gap: ${({ theme }) => theme.spacingVertical()};
+`
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/index.tsx b/applications/launchpad/gui-react/src/containers/SettingsContainer/index.tsx
new file mode 100644
index 0000000000..252d8c2fa9
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/index.tsx
@@ -0,0 +1,126 @@
+import { useMemo, useEffect, useState } from 'react'
+import { useForm, SubmitHandler } from 'react-hook-form'
+import { setTheme } from '../../store/app'
+import { selectTheme } from '../../store/app/selectors'
+
+import { useAppSelector, useAppDispatch } from '../../store/hooks'
+import { selectMergedMiningState } from '../../store/mining/selectors'
+import { actions } from '../../store/settings'
+import {
+ selectSettingsOpen,
+ selectActiveSettings,
+ selectServiceSettings,
+} from '../../store/settings/selectors'
+import { selectNetwork, selectRootFolder } from '../../store/baseNode/selectors'
+import { saveSettings } from '../../store/settings/thunks'
+import { ThemeType } from '../../styles/themes/types'
+
+import SettingsComponent from './SettingsComponent'
+import { SettingsInputs } from './types'
+
+const SettingsContainer = () => {
+ const dispatch = useAppDispatch()
+ const settingsOpen = useAppSelector(selectSettingsOpen)
+ const activeSettings = useAppSelector(selectActiveSettings)
+
+ const miningMerged = useAppSelector(selectMergedMiningState)
+ const serviceSettings = useAppSelector(selectServiceSettings)
+ const baseNodeNetwork = useAppSelector(selectNetwork)
+ const baseNodeRootFolder = useAppSelector(selectRootFolder)
+ const currentTheme = useAppSelector(selectTheme)
+
+ const [openMiningAuthForm, setOpenMiningAuthForm] = useState(false)
+ const [openBaseNodeConnect, setOpenBaseNodeConnect] = useState(false)
+ const [confirmCancel, setConfirmCancel] = useState(false)
+
+ const defaultValues = useMemo(
+ () => ({
+ mining: {
+ merged: {
+ address: miningMerged.address,
+ threads: miningMerged.threads,
+ urls: miningMerged.urls,
+ useAuth: miningMerged.useAuth,
+ },
+ },
+ docker: {
+ tag: serviceSettings.dockerTag,
+ registry: serviceSettings.dockerRegistry,
+ },
+ baseNode: {
+ rootFolder: baseNodeRootFolder,
+ network: baseNodeNetwork,
+ },
+ }),
+ [miningMerged, serviceSettings],
+ )
+
+ const { control, handleSubmit, formState, reset, setValue, getValues } =
+ useForm({
+ mode: 'onChange',
+ defaultValues: defaultValues,
+ })
+
+ useEffect(() => {
+ if (settingsOpen === true) {
+ reset(defaultValues)
+ }
+ }, [settingsOpen])
+
+ const onSubmit: SubmitHandler = async data => {
+ await dispatch(saveSettings({ newSettings: data }))
+ reset(data)
+ dispatch(actions.close())
+ }
+
+ const tryToClose = () => {
+ if (formState.isSubmitting) {
+ return
+ }
+
+ if (!formState.isDirty) {
+ dispatch(actions.close())
+ return
+ }
+
+ setConfirmCancel(true)
+ }
+
+ const changeTheme = (theme: ThemeType) => {
+ dispatch(setTheme(theme))
+ }
+
+ const closeAndDiscard = () => {
+ setConfirmCancel(false)
+ if (formState.isDirty) {
+ reset()
+ }
+ dispatch(actions.close())
+ }
+
+ return (
+ dispatch(actions.goTo(settingsPage))}
+ formState={formState}
+ values={getValues()}
+ setValue={setValue}
+ onSubmit={() => handleSubmit(onSubmit)()}
+ control={control}
+ defaultMiningMergedValues={getValues().mining.merged}
+ confirmCancel={confirmCancel}
+ cancelDiscard={() => setConfirmCancel(false)}
+ discardChanges={closeAndDiscard}
+ openMiningAuthForm={openMiningAuthForm}
+ setOpenMiningAuthForm={setOpenMiningAuthForm}
+ openBaseNodeConnect={openBaseNodeConnect}
+ setOpenBaseNodeConnect={setOpenBaseNodeConnect}
+ currentTheme={currentTheme}
+ changeTheme={changeTheme}
+ />
+ )
+}
+
+export default SettingsContainer
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/styles.ts b/applications/launchpad/gui-react/src/containers/SettingsContainer/styles.ts
new file mode 100644
index 0000000000..fd9d5160f4
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/styles.ts
@@ -0,0 +1,135 @@
+import styled from 'styled-components'
+
+// Preserve the space in the modal for the bottom bar with buttons.
+const SettingsBottomBarHeight = '70px'
+
+export const MainContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+`
+
+export const MainContentContainer = styled.div`
+ display: flex;
+ flex-grow: 1;
+ max-height: calc(100% - ${SettingsBottomBarHeight});
+`
+
+export const Sidebar = styled.aside`
+ width: 160px;
+ min-width: 160px;
+ height: 100%;
+ border-right: 1px solid ${({ theme }) => theme.balanceBoxBorder};
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+`
+
+export const SidebarTabs = styled.div`
+ width: 160px;
+ min-width: 160px;
+ border-right: 1px solid ${({ theme }) => theme.balanceBoxBorder};
+ padding-top: ${({ theme }) => theme.spacing(2)};
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ row-gap: ${({ theme }) => theme.spacing(0.75)};
+ justify-content: space-between;
+ align-items: flex-end;
+`
+
+export const SidebarSelectTheme = styled.div`
+ padding: ${({ theme }) => theme.spacingVertical(0.67)} 0;
+ padding-left: ${({ theme }) => theme.spacingHorizontal()};
+ box-sizing: border-box;
+ width: 136px;
+ align-self: flex-end;
+`
+
+export const MenuItem = styled.button<{ active?: boolean }>`
+ margin: 0;
+ padding: 0;
+ outline: none;
+ border: none;
+ text-align: left;
+ cursor: pointer;
+ border-top-left-radius: ${({ theme }) => theme.tightBorderRadius(0.75)};
+ border-bottom-left-radius: ${({ theme }) => theme.tightBorderRadius(0.75)};
+ background: ${({ theme, active }) =>
+ active ? theme.settingsMenuItemActive : 'none'};
+ box-sizing: border-box;
+ padding: ${({ theme }) => theme.spacingVertical(0.67)} 0;
+ padding-left: ${({ theme }) => theme.spacingHorizontal()};
+ width: 136px;
+ color: ${({ theme, active }) =>
+ active ? theme.accent : theme.settingsMenuItem};
+ height: 39px;
+
+ &:hover {
+ background: ${({ theme }) => theme.settingsMenuItemActive};
+ }
+`
+
+export const MainContent = styled.main`
+ position: relative;
+ flex-grow: 1;
+ max-height: 100%;
+ padding-top: ${({ theme }) => theme.spacing(2)};
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ overflow: auto;
+ & > * {
+ max-width: 100%;
+ width: 70%;
+ }
+`
+
+export const Footer = styled.footer`
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: ${({ theme }) => theme.spacingVertical()};
+ ${({ theme }) => theme.spacingHorizontal()};
+ column-gap: ${({ theme }) => theme.spacing()};
+ border-top: 1px solid ${({ theme }) => theme.selectBorderColor};
+`
+
+export const DiscardWarning = styled.div`
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ gap: ${({ theme }) => theme.spacingHorizontal(0.2)};
+`
+
+export const SettingsHeader = styled.div`
+ margin-bottom: ${({ theme }) => theme.spacingVertical(2.5)};
+`
+
+export const RowSpacedBetween = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: ${({ theme }) => theme.spacingVertical(0.6)} 0;
+`
+
+export const SwitchBg = styled.div<{ $transparent?: boolean }>`
+ display: inline-flex;
+ background: ${({ theme, $transparent }) =>
+ $transparent ? 'transparent' : theme.backgroundImage};
+ margin-top: ${({ theme }) => theme.spacingVertical(0.67)};
+ padding: ${({ theme }) => theme.spacingVertical(0.5)};
+ border-radius: ${({ theme }) => theme.borderRadius(0.67)};
+`
+
+export const RowFlex = styled.div`
+ display: flex;
+ align-tiems: center;
+ column-gap: ${({ theme }) => theme.spacingHorizontal(0.5)};
+`
+
+export const StyledList = styled.ul`
+ padding-left: 20px;
+`
diff --git a/applications/launchpad/gui-react/src/containers/SettingsContainer/types.ts b/applications/launchpad/gui-react/src/containers/SettingsContainer/types.ts
new file mode 100644
index 0000000000..28d13a4be0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/SettingsContainer/types.ts
@@ -0,0 +1,65 @@
+import { Control, FormState, UseFormSetValue } from 'react-hook-form'
+import { MergedMiningNodeState, MoneroUrl } from '../../store/mining/types'
+import { Settings } from '../../store/settings/types'
+import { ThemeType } from '../../styles/themes/types'
+import { Network } from '../BaseNodeContainer/types'
+
+export type SettingsProps = {
+ formState: FormState
+ control: Control
+ values: SettingsInputs
+ setValue: UseFormSetValue
+ setOpenMiningAuthForm: (value: boolean) => void
+ onBaseNodeConnectClick: () => void
+}
+
+export interface SettingsInputs {
+ mining: {
+ merged: MiningSettingsInputs
+ }
+ docker: {
+ tag: string
+ registry: string
+ }
+ baseNode: BaseNodeSettingsInputs
+}
+
+export interface AuthenticationInputs {
+ username: string
+ password: string
+}
+
+export interface MiningSettingsInputs {
+ address: string
+ threads: number
+ urls: MoneroUrl[]
+ authentication?: AuthenticationInputs
+ useAuth: boolean
+}
+
+export interface BaseNodeSettingsInputs {
+ network: Network
+ rootFolder: string
+}
+
+export type SettingsComponentProps = {
+ open?: boolean
+ onClose: () => void
+ goToSettings: (s: Settings) => void
+ activeSettings: Settings
+ formState: FormState
+ defaultMiningMergedValues?: MergedMiningNodeState
+ values: SettingsInputs
+ setValue: UseFormSetValue
+ onSubmit: () => void
+ control: Control
+ confirmCancel: boolean
+ cancelDiscard: () => void
+ discardChanges: () => void
+ openMiningAuthForm: boolean
+ setOpenMiningAuthForm: (value: boolean) => void
+ openBaseNodeConnect: boolean
+ setOpenBaseNodeConnect: (value: boolean) => void
+ currentTheme: ThemeType
+ changeTheme: (theme: ThemeType) => void
+}
diff --git a/applications/launchpad/gui-react/src/containers/TBotContainer/index.tsx b/applications/launchpad/gui-react/src/containers/TBotContainer/index.tsx
new file mode 100644
index 0000000000..cc2ee903f5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/TBotContainer/index.tsx
@@ -0,0 +1,26 @@
+import { useMemo, ReactNode } from 'react'
+import TBotPrompt from '../../components/TBot/TBotPrompt'
+import { useAppSelector } from '../../store/hooks'
+import { selectTBotQueue } from '../../store/tbot/selectors'
+import { TBotMessage } from '../../components/TBot/TBotPrompt/types'
+import { HelpMessagesMap } from '../../config/helpMessagesConfig'
+import { selectExpertView } from '../../store/app/selectors'
+
+const TBotContainer = () => {
+ const tbotQueue = useAppSelector(selectTBotQueue)
+ const expertView = useAppSelector(selectExpertView)
+
+ const messages: (string | ReactNode | TBotMessage)[] = useMemo(() => {
+ return tbotQueue.map(msg => HelpMessagesMap[msg])
+ }, [tbotQueue])
+ return (
+ 0}
+ messages={messages}
+ floating
+ onDarkBg={expertView !== 'hidden'}
+ />
+ )
+}
+
+export default TBotContainer
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/AvailableBalanceHelp.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/AvailableBalanceHelp.tsx
new file mode 100644
index 0000000000..83529f98ec
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/AvailableBalanceHelp.tsx
@@ -0,0 +1,19 @@
+import { useAppDispatch } from '../../store/hooks'
+import { tbotactions } from '../../store/tbot'
+import MessagesConfig from '../../config/helpMessagesConfig'
+import IconButton from '../../components/IconButton'
+import SvgInfo1 from '../../styles/Icons/Info1'
+
+const AvailableBalanceHelp = () => {
+ const dispatch = useAppDispatch()
+ const showAvailableBalanceHelp = () =>
+ dispatch(tbotactions.push(MessagesConfig.WalletBalanceHelp))
+
+ return (
+
+
+
+ )
+}
+
+export default AvailableBalanceHelp
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/ChartDark.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/ChartDark.tsx
new file mode 100644
index 0000000000..8741271419
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/ChartDark.tsx
@@ -0,0 +1,46 @@
+import { SVGProps } from 'react'
+
+const ChartDark = (props: SVGProps) => (
+
+)
+
+export default ChartDark
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/ChartLight.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/ChartLight.tsx
new file mode 100644
index 0000000000..8638495b08
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/ChartLight.tsx
@@ -0,0 +1,46 @@
+import { SVGProps } from 'react'
+
+const Chart = (props: SVGProps) => (
+
+)
+
+export default Chart
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/PasswordBox.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/PasswordBox.tsx
new file mode 100644
index 0000000000..65d0d48482
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/PasswordBox.tsx
@@ -0,0 +1,97 @@
+import { CSSProperties, useState, SyntheticEvent } from 'react'
+import { useTheme } from 'styled-components'
+
+import PasswordInput from '../../components/Inputs/PasswordInput'
+import Box from '../../components/Box'
+import Text from '../../components/Text'
+import Button from '../../components/Button'
+import t from '../../locales'
+
+import { TariBackgroundSignet } from './styles'
+import { WalletPasswordConfirmationStatus } from '../../store/temporary/types'
+import { useAppSelector } from '../../store/hooks'
+import { selectTheme } from '../../store/app/selectors'
+
+const MINIMAL_PASSWORD_LENGTH = 4
+
+const PasswordBox = ({
+ pending,
+ passwordConfirmStatus,
+ onSubmit,
+ style,
+}: {
+ pending: boolean
+ passwordConfirmStatus?: WalletPasswordConfirmationStatus
+ onSubmit: (password: string) => void
+ style?: CSSProperties
+}) => {
+ const theme = useTheme()
+ const currentTheme = useAppSelector(selectTheme)
+ const [password, setPassword] = useState('')
+ const updatePassword = (v: string) => {
+ setPassword(v)
+ }
+
+ const formSubmitHandler = (event: SyntheticEvent) => {
+ event.preventDefault()
+
+ onSubmit(password)
+ }
+
+ const disableSubmit = pending || password.length < MINIMAL_PASSWORD_LENGTH
+ const failed =
+ passwordConfirmStatus === 'failed' ||
+ passwordConfirmStatus === 'wrong_password'
+
+ return (
+
+
+
+
+ {t.wallet.password.title}
+
+ {t.wallet.password.cta}
+
+
+
+ )
+}
+
+export default PasswordBox
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/RecentTransactions/index.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/RecentTransactions/index.tsx
new file mode 100644
index 0000000000..aeb8cfcb44
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/RecentTransactions/index.tsx
@@ -0,0 +1,124 @@
+import { useState, useEffect } from 'react'
+import { useTheme } from 'styled-components'
+import Button from '../../../components/Button'
+
+import Text from '../../../components/Text'
+import TransactionsList from '../../../components/TransactionsList'
+
+import useTransactionsRepository, {
+ TransactionDBRecord,
+} from '../../../persistence/transactionsRepository'
+
+import SvgArrowSwap from '../../../styles/Icons/ArrowSwap'
+import SvgClose from '../../../styles/Icons/Close'
+
+import t from '../../../locales'
+
+import {
+ Header,
+ LeftHeader,
+ RightHeader,
+ StyledTransactionsList,
+ PaginationContainer,
+} from './styles'
+import Pagination from '../../../components/Pagination'
+import { useAppSelector } from '../../../store/hooks'
+import { selectLastTxHistoryUpdate } from '../../../store/wallet/selectors'
+import { selectTheme } from '../../../store/app/selectors'
+
+const CLOSE_HISTORY_PAGE_SIZE = 3
+const ALL_HISTORY_PAGE_SIZE = 10
+
+const RecentTransactions = () => {
+ const transactionsRepository = useTransactionsRepository()
+ const theme = useTheme()
+
+ const lastTxHistoryUpdate = useAppSelector(selectLastTxHistoryUpdate)
+ const currentTheme = useAppSelector(selectTheme)
+
+ const [txs, setTxs] = useState([])
+ const [total, setTotal] = useState(0)
+ const [currentPage, setCurrentPage] = useState(0)
+ const [seeAllHistory, setSeeAllHistory] = useState(false)
+
+ useEffect(() => {
+ const countRecords = async () => {
+ const totalRecords = await transactionsRepository.count()
+ setTotal(totalRecords)
+ }
+
+ countRecords()
+ }, [lastTxHistoryUpdate])
+
+ useEffect(() => {
+ const selectTxs = async () => {
+ const records = await transactionsRepository.list(
+ seeAllHistory ? ALL_HISTORY_PAGE_SIZE : CLOSE_HISTORY_PAGE_SIZE,
+ currentPage,
+ )
+ setTxs(records)
+ }
+
+ selectTxs()
+ }, [seeAllHistory, currentPage, lastTxHistoryUpdate])
+
+ if (txs.length === 0) {
+ return null
+ }
+
+ return (
+
+
+
+
+
+ {t.wallet.recentTransactions}
+
+
+
+ {seeAllHistory ? (
+
+ ) : (
+
+ )}
+
+
+
+ {seeAllHistory && total > ALL_HISTORY_PAGE_SIZE ? (
+
+ setCurrentPage(selected)}
+ />
+
+ ) : null}
+
+ )
+}
+
+export default RecentTransactions
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/RecentTransactions/styles.ts b/applications/launchpad/gui-react/src/containers/WalletContainer/RecentTransactions/styles.ts
new file mode 100644
index 0000000000..6d00a15a03
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/RecentTransactions/styles.ts
@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const StyledTransactionsList = styled.div``
+
+export const Header = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: ${({ theme }) =>
+ `${theme.spacingVertical(1.23)} ${theme.spacingHorizontal(0.333)}`};
+ margin-top: ${({ theme }) => theme.spacingVertical(5)};
+`
+
+export const LeftHeader = styled.div`
+ display: flex;
+ column-gap: ${({ theme }) => theme.spacing(0.2)};
+`
+
+export const RightHeader = styled.div``
+
+export const PaginationContainer = styled.div`
+ margin-top: ${({ theme }) => theme.spacingVertical(5)};
+`
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/Send/SendModal.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/Send/SendModal.tsx
new file mode 100644
index 0000000000..5c2d579137
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/Send/SendModal.tsx
@@ -0,0 +1,431 @@
+import { useEffect, useRef, useState } from 'react'
+import { useTheme } from 'styled-components'
+import { useForm, Controller, SubmitHandler } from 'react-hook-form'
+import { invoke } from '@tauri-apps/api'
+
+import Button from '../../../components/Button'
+import Input from '../../../components/Inputs/Input'
+import Modal from '../../../components/Modal'
+import Text from '../../../components/Text'
+import Textarea from '../../../components/Inputs/Textarea'
+import AmountInput from '../../../components/Inputs/AmountInput'
+import Tag from '../../../components/Tag'
+
+import t from '../../../locales'
+import { formatAmount, toMicroT, toT } from '../../../utils/Format'
+
+import { SendForm, SendModalProps } from './types'
+import {
+ StyledSendForm,
+ SendFormContent,
+ FormButtons,
+ TagWrapper,
+ TagBox,
+ PleaseWaitContainer,
+ CtaButtonContainer,
+ ResultModal,
+ ResultModalContent,
+ ResultHeader,
+ ErrorContainer,
+} from './styles'
+
+import SvgTariSignetGradient from '../../../styles/Icons/TariSignetGradient'
+import SvgTBotLoading from '../../../styles/Icons/TBotLoading'
+import SvgTBotSearch from '../../../styles/Icons/TBotSearch'
+import SvgCloseCross from '../../../styles/Icons/CloseCross'
+
+import WalletConfig from '../../../config/wallet'
+import useTransactionsRepository from '../../../persistence/transactionsRepository'
+import {
+ TransactionDirection,
+ TransactionEvent,
+} from '../../../useWalletEvents'
+import { useAppSelector } from '../../../store/hooks'
+import { selectWalletPublicKey } from '../../../store/wallet/selectors'
+
+const defaultValues = {
+ amount: 0,
+ address: '',
+ message: '',
+}
+
+interface SendTransferRecord {
+ address: string
+ failure_message?: string
+ is_success: boolean
+ transaction_id: number
+}
+
+interface SendTransferResponse {
+ payments: SendTransferRecord[]
+}
+
+/**
+ * Modal with the send transaction form.
+ * @param {boolean} open - is modal open
+ * @param {() => void} onClose - close the modal
+ * @param {number} available - available
+ */
+const SendModal = ({ open, onClose, available }: SendModalProps) => {
+ const theme = useTheme()
+ const transactionsRepository = useTransactionsRepository()
+ const intervalRef = useRef | undefined>()
+
+ const walletPublicKey = useAppSelector(selectWalletPublicKey)
+
+ const [fee, setFee] = useState(
+ WalletConfig.defaultFee * WalletConfig.defaultFeePerGram,
+ )
+ const [isProcessing, setIsProcessing] = useState(false)
+ const [result, setResult] = useState<
+ null | 'processing' | 'pending' | 'completing'
+ >(null)
+ const [error, setError] = useState(undefined)
+ const [counter, setCounter] = useState(0)
+ const [tx, setTx] = useState(undefined)
+
+ const { control, handleSubmit, reset, formState } = useForm({
+ mode: 'onChange',
+ defaultValues,
+ })
+
+ const cancel = () => {
+ reset(defaultValues)
+ setIsProcessing(false)
+ setResult(null)
+ setCounter(0)
+ onClose()
+ }
+
+ const onSubmitForm: SubmitHandler = async (data: SendForm) => {
+ setError(undefined)
+ setIsProcessing(true)
+
+ try {
+ const sendResult: SendTransferResponse = await invoke('transfer', {
+ funds: {
+ payments: [
+ {
+ address: data.address,
+ amount: toMicroT(data.amount),
+ fee_per_gram: 1,
+ message: data.message,
+ payment_type: 0,
+ },
+ ],
+ },
+ })
+
+ if (sendResult?.payments?.length > 0) {
+ const sendTx = sendResult.payments[0]
+ if (sendTx.is_success) {
+ setTx(sendTx)
+ setResult('processing')
+ transactionsRepository.addOrReplace({
+ event: TransactionEvent.Initialized,
+ tx_id: sendTx.transaction_id.toString(),
+ source_pk: walletPublicKey,
+ dest_pk: sendTx.address,
+ status: 'initialized',
+ direction: TransactionDirection.Outbound,
+ amount: toMicroT(data.amount),
+ message: data.message || '',
+ is_coinbase: false,
+ })
+ } else {
+ setError(sendTx.failure_message)
+ }
+ }
+ setIsProcessing(false)
+ } catch (err) {
+ setError((err as unknown as Error).toString())
+ setIsProcessing(false)
+ }
+ }
+
+ const validateAmount = (amount: number) => {
+ if (amount === 0) {
+ return
+ }
+
+ if (amount + fee >= available) {
+ return t.wallet.transaction.errors.exceedsAvailableAndFee
+ }
+
+ return
+ }
+
+ useEffect(() => {
+ const getTxFee = async () => {
+ try {
+ const txFee: number = await invoke('transaction_fee')
+ setFee(txFee * WalletConfig.defaultFeePerGram)
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.log('Cannot get latest transaction fee', err)
+ }
+ }
+
+ if (open) {
+ getTxFee()
+ }
+ }, [open])
+
+ useEffect(() => {
+ if (result === 'processing' && tx) {
+ intervalRef.current = setInterval(async () => {
+ if (counter > 5) {
+ setResult('pending')
+ setCounter(0)
+ clearInterval(intervalRef.current)
+ } else {
+ const foundTx = await transactionsRepository.findById(
+ tx.transaction_id.toString(),
+ )
+ if (foundTx && foundTx.event !== TransactionEvent.Initialized) {
+ setResult('completing')
+ clearInterval(intervalRef.current)
+ setCounter(0)
+ }
+ }
+
+ setCounter(c => c + 1)
+ }, 500)
+ }
+
+ return () => {
+ if (intervalRef?.current) {
+ clearInterval(intervalRef.current)
+ }
+ }
+ }, [result, counter])
+
+ if (result === 'pending') {
+ return (
+
+
+
+
+
+ {t.common.phrases.yourJobIsDoneHere}!
+
+ {t.wallet.transaction.transactionPending}
+
+ {t.wallet.transaction.transactionPendingDesc1}
+
+
+
+
+ {t.wallet.transaction.transactionPendingDesc2}
+
+
+
+
+
+
+
+ )
+ }
+
+ if (result === 'completing') {
+ return (
+
+
+
+
+
+ {t.common.phrases.yourJobIsDoneHere}!
+
+ {t.wallet.transaction.completingFinalProcessing}
+
+
+
+ {t.wallet.transaction.completingDescription}
+
+
+
+
+
+
+
+ )
+ }
+
+ if (isProcessing || result === 'processing') {
+ return (
+
+
+
+
+ {t.common.phrases.pleaseWait}
+
+
+ {t.wallet.transaction.searchingForRecipient}
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+ {t.wallet.balance.available}{' '}
+
+ {formatAmount(available)}
+ {' '}
+ XTR
+
+
+
+
+ (
+ }
+ onChange={field.onChange}
+ value={field.value}
+ currency='XTR'
+ autoFocus
+ withFee
+ fee={toT(fee)}
+ withError
+ error={formState.errors.amount?.message}
+ />
+ )}
+ />
+
+ (
+
+ )}
+ />
+
+ (
+
+ )}
+ />
+
+
+
+ {error && (
+ setError(undefined)}>
+ {error}
+
+
+ )}
+
+
+
+
+
+ )
+}
+
+export default SendModal
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/Send/styles.ts b/applications/launchpad/gui-react/src/containers/WalletContainer/Send/styles.ts
new file mode 100644
index 0000000000..c35471c420
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/Send/styles.ts
@@ -0,0 +1,87 @@
+import styled from 'styled-components'
+
+export const StyledSendForm = styled.form`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: auto;
+ box-sizing: border-box;
+`
+
+export const SendFormContent = styled.div`
+ flex: 1;
+ padding: ${({ theme }) => theme.spacing(1.67)};
+ padding-bottom: ${({ theme }) => theme.spacing(0.67)};
+`
+
+export const TagWrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ margin-bottom: ${({ theme }) => theme.spacingVertical(1)};
+`
+
+export const FormButtons = styled.div`
+ display: flex;
+ position: relative;
+ justify-content: space-between;
+ padding: ${({ theme }) => `${theme.spacing(0.67)} ${theme.spacing(1.67)}`};
+ column-gap: ${({ theme }) => theme.spacingHorizontal(1)};
+ border-top: 1px solid ${({ theme }) => theme.selectBorderColor};
+`
+
+export const TagBox = styled.div`
+ background: ${({ theme }) => theme.backgroundSecondary};
+ border-radius: ${({ theme }) => theme.borderRadius()};
+ padding: ${({ theme }) =>
+ `${theme.spacingVertical(1)} ${theme.spacingHorizontal(1)}`};
+`
+
+export const PleaseWaitContainer = styled.div`
+ padding: ${({ theme }) => theme.spacing(1.67)};
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ row-gap: ${({ theme }) => theme.spacingVertical(0.1)};
+ box-sizing: border-box;
+`
+
+export const ResultModal = styled.div`
+ padding: ${({ theme }) => theme.spacing(1.67)};
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+`
+
+export const ResultModalContent = styled.div`
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+`
+
+export const ResultHeader = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ row-gap: ${({ theme }) => theme.spacingVertical(1)};
+ margin-bottom: ${({ theme }) => theme.spacingVertical(2)};
+`
+
+export const CtaButtonContainer = styled.div``
+
+export const ErrorContainer = styled.div`
+ cursor: pointer;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ color: #fff;
+ background: ${({ theme }) => theme.warningDark};
+ padding: ${({ theme }) => `${theme.spacing(0.67)} ${theme.spacing(1.67)}`};
+ box-sizing: border-box;
+ bottom: 100%;
+`
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/Send/types.ts b/applications/launchpad/gui-react/src/containers/WalletContainer/Send/types.ts
new file mode 100644
index 0000000000..604cbe92a7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/Send/types.ts
@@ -0,0 +1,11 @@
+export interface SendModalProps {
+ open: boolean
+ onClose: () => void
+ available: number
+}
+
+export interface SendForm {
+ amount: number
+ address: string
+ message?: string
+}
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/Smiley.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/Smiley.tsx
new file mode 100644
index 0000000000..a7de4e97c0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/Smiley.tsx
@@ -0,0 +1,17 @@
+import { SVGProps } from 'react'
+
+import SmileyIcon from '../../../styles/Icons/Smiley'
+import SmileyNot from '../../../styles/Icons/SmileyNot'
+
+const Smiley = ({
+ on,
+ ...props
+}: { on: boolean } & SVGProps) => {
+ if (on) {
+ return
+ }
+
+ return
+}
+
+export default Smiley
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/TariId.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/TariId.tsx
new file mode 100644
index 0000000000..df7bc034ad
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/TariId.tsx
@@ -0,0 +1,101 @@
+import { useState, useMemo } from 'react'
+import { useTheme } from 'styled-components'
+
+import t from '../../../locales'
+
+import Text from '../../../components/Text'
+import CopyBox from '../../../components/CopyBox'
+
+import Smiley from './Smiley'
+import { TariIdContainer } from './styles'
+import Button from '../../../components/Button'
+import SvgInfo1 from '../../../styles/Icons/Info1'
+import { tbotactions } from '../../../store/tbot'
+import MessagesConfig from '../../../config/helpMessagesConfig'
+import { useAppDispatch } from '../../../store/hooks'
+
+const SEPARATOR = ' | '
+
+const removeSeparators = (v: string) => v.replaceAll(SEPARATOR, '')
+
+const TariId = ({
+ tariId,
+ emojiTariId,
+}: {
+ tariId: string
+ emojiTariId: string
+}) => {
+ const [showEmoji, setShowEmoji] = useState(false)
+ const theme = useTheme()
+ const dispatch = useAppDispatch()
+
+ const displayedEmojiTariId = useMemo(() => {
+ const emojis = Array.from(emojiTariId)
+ const emojiChunks = []
+ for (let i = 0; i < emojis.length; i += 3) {
+ emojiChunks.push(emojis.slice(i, i + 3).join(''))
+ }
+
+ return emojiChunks.join(SEPARATOR)
+ }, [emojiTariId])
+
+ return (
+ <>
+
+
+ {t.wallet.wallet.walletId}{' '}
+
+ ({t.wallet.wallet.address})
+
+
+
+
+
+
+ setShowEmoji(a => !a)}
+ style={{
+ cursor: 'pointer',
+ textAlign: 'center',
+ position: 'relative',
+ top: '0.4em',
+ }}
+ >
+
+
+
+
+ )
+}
+
+export default TariId
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/index.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/index.tsx
new file mode 100644
index 0000000000..ea3ae2ef67
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/index.tsx
@@ -0,0 +1,51 @@
+import { useTheme } from 'styled-components'
+
+import Box from '../../../components/Box'
+import Text from '../../../components/Text'
+import Tag from '../../../components/Tag'
+import t from '../../../locales'
+import { TariBackgroundSignet } from '../styles'
+
+import TariId from './TariId'
+
+const TariWallet = ({
+ address,
+ emojiId,
+ running,
+}: {
+ address: string
+ emojiId: string
+ running: boolean
+}) => {
+ const theme = useTheme()
+
+ return (
+
+
+ {running && (
+
+ {t.common.adjectives.running}
+
+ )}
+
+ {t.wallet.wallet.title}
+
+
+
+ )
+}
+
+export default TariWallet
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/styles.ts b/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/styles.ts
new file mode 100644
index 0000000000..d0930b1f33
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/TariWallet/styles.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const SemiTransparent = styled.span`
+ opacity: 0.7;
+`
+
+export const TariIdContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ column-gap: ${({ theme }) => theme.spacing(0.5)};
+`
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/WalletBalance.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/WalletBalance.tsx
new file mode 100644
index 0000000000..50af57e2f9
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/WalletBalance.tsx
@@ -0,0 +1,135 @@
+import { useTheme } from 'styled-components'
+
+import Box from '../../components/Box'
+import CoinsList from '../../components/CoinsList'
+import Text from '../../components/Text'
+import Loading from '../../components/Loading'
+import t from '../../locales'
+
+import Chart from './ChartLight'
+import AvailableBalanceHelp from './AvailableBalanceHelp'
+
+import { useAppSelector } from '../../store/hooks'
+import { selectTheme } from '../../store/app/selectors'
+import ChartDark from './ChartDark'
+
+import {
+ TariSignet,
+ TariAmountContainer,
+ BoxTopContainer,
+ BoxBottomContainer,
+} from './styles'
+import Button from '../../components/Button'
+import SvgArrowRight from '../../styles/Icons/ArrowRight'
+import SendModal from './Send/SendModal'
+import { useState } from 'react'
+
+const WalletBalance = ({
+ balance,
+ available,
+ pending,
+}: {
+ balance: number
+ available: number
+ pending: boolean
+}) => {
+ const theme = useTheme()
+ const currentTheme = useAppSelector(selectTheme)
+
+ const [showSendModal, setShowSendModal] = useState(false)
+
+ return (
+
+
+
+ {t.wallet.balance.title}
+
+
+
+
+
+
+
+ {currentTheme === 'light' ? : }
+
+
+
+
+
+
+ {t.wallet.balance.available}
+ {' '}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default WalletContent
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/WalletContent/useWalletBalance.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/WalletContent/useWalletBalance.tsx
new file mode 100644
index 0000000000..588df43016
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/WalletContent/useWalletBalance.tsx
@@ -0,0 +1,17 @@
+import { useEffect } from 'react'
+
+import { useAppSelector, useAppDispatch } from '../../../store/hooks'
+import { selectTariBalance } from '../../../store/wallet/selectors'
+import { actions } from '../../../store/wallet'
+
+const useWalletBalance = () => {
+ const dispatch = useAppDispatch()
+ useEffect(() => {
+ dispatch(actions.updateWalletBalance())
+ }, [])
+
+ const balance = useAppSelector(selectTariBalance)
+ return balance
+}
+
+export default useWalletBalance
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/WalletHelp.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/WalletHelp.tsx
new file mode 100644
index 0000000000..e4789d1b87
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/WalletHelp.tsx
@@ -0,0 +1,20 @@
+import HelpTip from '../../components/HelpTip'
+import { HelpTipProps } from '../../components/HelpTip/types'
+import t from '../../locales'
+import { useAppDispatch } from '../../store/hooks'
+import { tbotactions } from '../../store/tbot'
+import MessagesConfig from '../../config/helpMessagesConfig'
+
+const WalletHelp = ({ header }: Pick) => {
+ const dispatch = useAppDispatch()
+
+ return (
+ dispatch(tbotactions.push(MessagesConfig.WalletHelp))}
+ header={header}
+ />
+ )
+}
+
+export default WalletHelp
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/WalletSetupBox.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/WalletSetupBox.tsx
new file mode 100644
index 0000000000..2fc1f0aa0b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/WalletSetupBox.tsx
@@ -0,0 +1,51 @@
+import { useTheme } from 'styled-components'
+
+import SvgTariSignet from '../../styles/Icons/TariSignet'
+import WalletPasswordWizard from '../../containers/WalletPasswordWizard'
+import NodeBox from '../../components/NodeBox'
+import t from '../../locales'
+
+import WalletHelp from './WalletHelp'
+
+const WalletSetupBox = () => {
+ const theme = useTheme()
+
+ return (
+
+ )
+}
+
+export default WalletSetupBox
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/index.test.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/index.test.tsx
new file mode 100644
index 0000000000..bcd3b224fe
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/index.test.tsx
@@ -0,0 +1,132 @@
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { configureStore } from '@reduxjs/toolkit'
+import { ThemeProvider } from 'styled-components'
+
+import WalletContainer from '.'
+
+import { rootReducer } from '../../store'
+import { initialState as walletInitialState } from '../../store/wallet/index'
+import themes from '../../styles/themes'
+import t from '../../locales'
+
+describe('WalletContainer', () => {
+ it('should render setup box initially if wallet is not configured', () => {
+ render(
+
+
+
+
+ ,
+ )
+
+ const el = screen.getByText(t.walletPasswordWizard.description)
+ expect(el).toBeInTheDocument()
+ })
+
+ it('should render password box initially if wallet is configured but not unlocked', () => {
+ render(
+
+
+
+
+ ,
+ )
+
+ const el = screen.getByText('Enter Password')
+ expect(el).toBeInTheDocument()
+ })
+
+ it('should render Tari Wallet if wallet is unlocked', () => {
+ render(
+
+
+
+
+ ,
+ )
+
+ const el = screen.getByText('Tari Wallet')
+ expect(el).toBeInTheDocument()
+ })
+
+ it('should render balance if wallet is unlocked', () => {
+ render(
+
+
+
+
+ ,
+ )
+
+ const el = screen.getByText('Balance')
+ expect(el).toBeInTheDocument()
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/index.tsx b/applications/launchpad/gui-react/src/containers/WalletContainer/index.tsx
new file mode 100644
index 0000000000..1624fdf192
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/index.tsx
@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { useAppSelector, useAppDispatch } from '../../store/hooks'
+import { actions } from '../../store/wallet'
+import {
+ selectIsUnlocked,
+ selectIsPending,
+ selectWalletSetupRequired,
+ selectIsRunning,
+} from '../../store/wallet/selectors'
+import { WalletSetupRequired } from '../../store/wallet/types'
+import { actions as credentialsActions } from '../../store/credentials'
+import CenteredLayout from '../../components/CenteredLayout'
+
+import WalletContent from './WalletContent'
+import PasswordBox from './PasswordBox'
+import WalletSetupBox from './WalletSetupBox'
+import { selectWallet } from '../../store/credentials/selectors'
+import Alert from '../../components/Alert'
+import { selectWalletPasswordConfirmation } from '../../store/temporary/selectors'
+import { temporaryActions } from '../../store/temporary'
+import { useTheme } from 'styled-components'
+
+const WalletContainer = () => {
+ const dispatch = useAppDispatch()
+ const theme = useTheme()
+
+ const unlocked = useAppSelector(selectIsUnlocked)
+ const pending = useAppSelector(selectIsPending)
+ const running = useAppSelector(selectIsRunning)
+ const walletSetupRequired = useAppSelector(selectWalletSetupRequired)
+ const walletCredentials = useAppSelector(selectWallet)
+ const walletPassConfirm = useAppSelector(selectWalletPasswordConfirmation)
+
+ const [error, setError] = useState('')
+
+ if (walletSetupRequired === WalletSetupRequired.MissingWalletAddress) {
+ return (
+
+
+
+ )
+ }
+
+ if (
+ !unlocked ||
+ !walletCredentials ||
+ walletPassConfirm === 'waiting_for_confirmation' ||
+ walletPassConfirm === 'failed' ||
+ walletPassConfirm === 'wrong_password'
+ ) {
+ return (
+
+ {
+ try {
+ dispatch(
+ temporaryActions.setWalletPasswordConfirmation(
+ 'waiting_for_confirmation',
+ ),
+ )
+ dispatch(credentialsActions.setWallet(password))
+ await dispatch(actions.unlockWallet()).unwrap()
+ } catch (err) {
+ setError((err as Error).toString())
+ }
+ }}
+ style={{ background: theme.nodeBackground, color: theme.helpTipText }}
+ />
+ setError('')}
+ content={error}
+ />
+
+ )
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default WalletContainer
diff --git a/applications/launchpad/gui-react/src/containers/WalletContainer/styles.ts b/applications/launchpad/gui-react/src/containers/WalletContainer/styles.ts
new file mode 100644
index 0000000000..9ce6e37b6f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletContainer/styles.ts
@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+import SvgTariSignet from '../../styles/Icons/TariSignet'
+
+export const TariBackgroundSignet = styled(SvgTariSignet)`
+ color: ${({ theme }) => theme.backgroundImage};
+ height: 80px;
+ width: 80px;
+ position: absolute;
+ z-index: 0;
+ pointer-events: none;
+ right: ${({ theme }) => theme.spacing()};
+ top: ${({ theme }) => theme.spacing()};
+`
+
+export const TariSignet = styled(SvgTariSignet)``
+
+export const TariAmountContainer = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: ${({ theme }) => theme.spacingVertical()};
+ margin-bottom: ${({ theme }) => theme.spacingVertical(1.8)};
+`
+
+export const BoxTopContainer = styled.div`
+ padding: ${({ theme }) => theme.spacing()};
+ padding-bottom: 0;
+`
+
+export const BoxBottomContainer = styled.div`
+ padding: ${({ theme }) => theme.spacing()};
+ padding-top: ${({ theme }) => theme.spacing(0.5)};
+ background: ${({ theme }) => theme.walletBottomBox};
+`
diff --git a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/WalletPasswordForm.test.tsx b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/WalletPasswordForm.test.tsx
new file mode 100644
index 0000000000..deb0866b52
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/WalletPasswordForm.test.tsx
@@ -0,0 +1,66 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import WalletPasswordForm from '.'
+
+import themes from '../../../styles/themes'
+
+describe('WalletPasswordForm', () => {
+ it('should render without crashing when custom submit button text is given', () => {
+ const testSubmitBtnText = 'The test text of submit button'
+ const submitMock = jest.fn()
+
+ render(
+
+
+ ,
+ )
+ const el = screen.getByText(testSubmitBtnText)
+ expect(el).toBeInTheDocument()
+ })
+
+ it('should submit form only if password is set', async () => {
+ const testPassword = 'pass'
+ const submitMock = jest.fn()
+
+ await act(async () => {
+ render(
+
+
+ ,
+ )
+ })
+
+ const elInput = screen.getByTestId('password-input')
+ expect(elInput).toBeInTheDocument()
+
+ const elSubmitBtn = screen.getByTestId('wallet-password-wizard-submit-btn')
+ expect(elSubmitBtn).toBeInTheDocument()
+
+ // Firstly, the form cannot be submitted if password input is empty:
+ await act(async () => {
+ fireEvent.click(elSubmitBtn)
+ })
+
+ expect(submitMock).toHaveBeenCalledTimes(0)
+
+ // Now, set the password...
+ await act(async () => {
+ fireEvent.input(elInput, { target: { value: testPassword } })
+ })
+
+ // ...check the presence of the password in the input...
+ expect((elInput as HTMLInputElement).value).toBe(testPassword)
+
+ // ...and submit form again:
+ await act(async () => {
+ fireEvent.click(elSubmitBtn)
+ })
+
+ expect(submitMock).toHaveBeenCalledWith({ password: testPassword })
+ expect(submitMock).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/index.tsx b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/index.tsx
new file mode 100644
index 0000000000..756e7751a1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/index.tsx
@@ -0,0 +1,80 @@
+import { useTheme } from 'styled-components'
+import { useForm, Controller, SubmitHandler } from 'react-hook-form'
+
+import Button from '../../../components/Button'
+import Callout from '../../../components/Callout'
+import Text from '../../../components/Text'
+
+import t from '../../../locales'
+
+import { CalloutWrapper, FormButtons, WizardContainer } from './styles'
+import { WalletPasswordInputs, WalletPasswordFormProps } from './types'
+import PasswordInput from '../../../components/Inputs/PasswordInput'
+
+/**
+ * Render the Wallet password form with text warnings.
+ *
+ * @param {string} [submitBtnText] - the text of the submit button.
+ * @param {(data: WalletPasswordInputs) => Promise} [onSubmit] - onform submit.
+ */
+const WalletPasswordForm = ({
+ submitBtnText,
+ onSubmit,
+}: WalletPasswordFormProps) => {
+ const theme = useTheme()
+
+ const { control, handleSubmit, formState } = useForm({
+ mode: 'onChange',
+ })
+
+ const onSubmitForm: SubmitHandler = async data => {
+ await onSubmit(data)
+ }
+
+ return (
+
+
+ {t.walletPasswordWizard.description}
+
+
+ {t.walletPasswordWizard.warning}
+
+
+ {t.walletPasswordWizard.warningBox}
+
+
+
+ )
+}
+
+export default WalletPasswordForm
diff --git a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/styles.ts b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/styles.ts
new file mode 100644
index 0000000000..aa3164f708
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/styles.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const WizardContainer = styled.div``
+
+export const CalloutWrapper = styled.div`
+ margin-top: ${({ theme }) => theme.spacingVertical(1.2)};
+ margin-bottom: ${({ theme }) => theme.spacingVertical(1.9)};
+`
+
+export const FormButtons = styled.div`
+ margin-top: ${({ theme }) => theme.spacingVertical(2)};
+`
diff --git a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/types.ts b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/types.ts
new file mode 100644
index 0000000000..f0afc46a14
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/types.ts
@@ -0,0 +1,8 @@
+export interface WalletPasswordFormProps {
+ submitBtnText?: string
+ onSubmit: (data: WalletPasswordInputs) => Promise
+}
+
+export interface WalletPasswordInputs {
+ password: string
+}
diff --git a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordWizard.test.tsx b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordWizard.test.tsx
new file mode 100644
index 0000000000..53cd252435
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordWizard.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { configureStore } from '@reduxjs/toolkit'
+import { ThemeProvider } from 'styled-components'
+
+import WalletPasswordWizard from '.'
+
+import { rootReducer } from '../../store'
+import { initialState as walletInitialState } from '../../store/wallet/index'
+import themes from '../../styles/themes'
+
+describe('WalletPasswordWizard', () => {
+ it('should render without crashing when custom submit button text is given', () => {
+ const testSubmitBtnText = 'The test text of submit button'
+
+ render(
+
+
+
+
+ ,
+ )
+ const el = screen.getByText(testSubmitBtnText)
+ expect(el).toBeInTheDocument()
+ })
+})
diff --git a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/index.tsx b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/index.tsx
new file mode 100644
index 0000000000..e93ddc2fd0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/index.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { SubmitHandler } from 'react-hook-form'
+
+import { useAppDispatch } from '../../store/hooks'
+import { actions as walletActions } from '../../store/wallet'
+import Alert from '../../components/Alert'
+import { actions as credentialsActions } from '../../store/credentials'
+
+import { WalletPasswordWizardProps } from './types'
+import WalletPasswordForm from './WalletPasswordForm'
+import { WalletPasswordInputs } from './WalletPasswordForm/types'
+
+/**
+ * Wallet password form wired with Redux.
+ * @prop {string} [submitBtnText] - the text of the submit button.
+ * @prop {() => void} [onSuccess] - after the password is successfully set.
+ *
+ * @example
+ * dispatch(actions.runNode())}
+ * />
+ */
+const WalletPasswordWizardContainer = ({
+ submitBtnText,
+ onSuccess,
+}: WalletPasswordWizardProps) => {
+ const [error, setError] = useState('')
+ const dispatch = useAppDispatch()
+
+ const onSubmit: SubmitHandler = async data => {
+ try {
+ dispatch(credentialsActions.setWallet(data.password))
+ await dispatch(walletActions.unlockWallet()).unwrap()
+ if (onSuccess) {
+ onSuccess()
+ }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ } catch (e: any) {
+ setError(e)
+ }
+ }
+
+ return (
+ <>
+
+ setError('')}
+ content={error}
+ />
+
+ )
+}
+
+export default WalletPasswordWizardContainer
diff --git a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/types.ts b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/types.ts
new file mode 100644
index 0000000000..ef3a9db997
--- /dev/null
+++ b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/types.ts
@@ -0,0 +1,4 @@
+export interface WalletPasswordWizardProps {
+ submitBtnText?: string
+ onSuccess?: () => void
+}
diff --git a/applications/launchpad/gui-react/src/custom.d.ts b/applications/launchpad/gui-react/src/custom.d.ts
new file mode 100644
index 0000000000..6243c4236b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/custom.d.ts
@@ -0,0 +1,184 @@
+import 'styled-components'
+
+declare module '*.svg' {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const content: any
+ export default content
+}
+
+declare module '*.otf'
+
+declare module 'styled-components' {
+ export interface DefaultTheme {
+ spacing: (count?: number) => string
+ spacingHorizontal: (count?: number) => string
+ spacingVertical: (count?: number) => string
+ borderRadius: (count?: number) => string
+ tightBorderRadius: (count?: number) => string
+ transparent: (color: string, transparency: number) => string
+ tabsMarginRight: number
+ primary: string
+ secondary: string
+ tertiary: string
+ background: string
+ backgroundSecondary: string
+ backgroundImage: string
+ accent: string
+ accentDark: string
+ accentMonero: string
+ accentMerged: string
+ accentMerged: string
+ disabledText: string
+ tariGradient: string
+ tariTextGradient: string
+ mergedGradient: string
+ warningGradient: string
+ greenMedium: string
+ borderColor: string
+ borderColorLight: string
+ actionBackground: string
+ resetBackground: string
+ resetBackgroundHover: string
+ moneroDark: string
+ shadow40: string
+ shadow24: string
+
+ titleBar: string
+
+ controlBackground: string
+ infoTag: string
+ infoText: string
+ on: string
+ onText: string
+ onTextLight: string
+ warning: string
+ warningTag: string
+ warningText: string
+ warningDark: string
+ success: string
+ error: string
+ expert: string
+ expertText: string
+ expertSecText: string
+ lightTag: string
+ lightTagText: string
+ placeholderText: string
+ textSecondary: string
+ helpTipText: string
+ runningTagBackground: string
+ runningTagText: string
+ dashboardRunningTagText: string
+ dashboardRunningTagBackground: string
+ switchBorder: string
+ switchCircle: string
+ switchController: string
+ nodeBackground: string
+ nodeLightIcon: string
+ nodeSubHeading: string
+ nodeWarningText: string
+ calloutBackground: string
+ inputPlaceholder: string
+ disabledPrimaryButton: string
+ disabledPrimaryButtonText: string
+ baseNodeGradientStart: string
+ baseNodeGradientEnd: string
+ baseNodeRunningLabel: string
+ baseNodeRunningTagBackground: string
+ baseNodeRunningTagText: string
+ selectBorderColor: string
+ selectOptionHover: string
+ walletSetupBorderColor: string
+ walletCopyBoxBorder: string
+ balanceBoxBorder: string
+ walletBottomBox: string
+ modalBackdrop: string
+ settingsMenuItem: string
+ settingsMenuItemActive: string
+ settingsCopyBoxBackground: string
+ scrollBarTrack: string
+ scrollBarThumb: string
+ scrollBarHover: string
+ calendarText: string
+ calendarTextSecondary: string
+ calendarNumber: string
+ tbotMessage: string
+ tbotContentBackground: string
+ buttonRadioBackground: string
+ buttonRadioBorder: string
+
+ inverted: {
+ controlBackground: string
+ primary: string
+ secondary: string
+ background: string
+ backgroundSecondary: string
+ backgroundImage: string
+ accent: string
+ accentSecondary: string
+ accentDark: string
+ accentMonero: string
+ accentMerged: string
+ disabledText: string
+ tariGradient: string
+ tariTextGradient: string
+ warningGradient: string
+ greenMedium: string
+ resetBackground: string
+ resetBackgroundHover: string
+ moneroDark: string
+ info: string
+ infoText: string
+ on: string
+ onText: string
+ onTextLight: string
+ warning: string
+ warningText: string
+ warningDark: string
+ success: string
+ error: string
+ expert: string
+ expertText: string
+ lightTag: string
+ lightTagText: string
+ expert: string
+ expertText: string
+ expertSecText: string
+ switchBorder: string
+ switchCircle: string
+ switchController: string
+ nodeBackground: string
+ nodeLightIcon: string
+ nodeSubHeading: string
+ nodeWarningText: string
+ calloutBackground: string
+ inputPlaceholder: string
+ disabledPrimaryButton: string
+ disabledPrimaryButtonText: string
+ baseNodeGradientStart: string
+ baseNodeGradientEnd: string
+ baseNodeRunningLabel: string
+ baseNodeRunningTagBackground: string
+ baseNodeRunningTagText: string
+ selectBorderColor: string
+ selectOptionHover: string
+ walletSetupBorderColor: string
+ walletCopyBoxBorder: string
+ balanceBoxBorder: string
+ walletBottomBox: string
+ modalBackdrop: string
+ settingsMenuItem: string
+ settingsMenuItemActive: string
+ settingsCopyBoxBackground: string
+ scrollBarTrack: string
+ scrollBarThumb: string
+ scrollBarHover: string
+ calendarText: string
+ calendarTextSecondary: string
+ calendarTextSecondary: styles.colors.light.graySecondary
+ tbotMessage: string
+ tbotContentBackground: string
+ buttonRadioBackground: string
+ buttonRadioBorder: string
+ }
+ }
+}
diff --git a/applications/launchpad/gui-react/src/hooks/useAnimationFrame.test.tsx b/applications/launchpad/gui-react/src/hooks/useAnimationFrame.test.tsx
new file mode 100644
index 0000000000..bd2c72702a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/hooks/useAnimationFrame.test.tsx
@@ -0,0 +1,40 @@
+import { act, renderHook } from '@testing-library/react'
+
+import useAnimationFrame from './useAnimationFrame'
+
+describe('useAnimationFrame', () => {
+ let raf: jest.SpyInstance
+ let count = 0
+
+ beforeEach(() => {
+ // Set up timers and mock requestAnimationFrame
+ jest.useFakeTimers()
+ raf = jest.spyOn(window, 'requestAnimationFrame')
+
+ raf.mockImplementation((cb: FrameRequestCallback): number => {
+ setTimeout(c => cb(c + 1), 100)
+ count = count + 1
+ return count
+ })
+ })
+
+ afterEach(() => {
+ // Clear mocks and timers
+ raf.mockRestore()
+ jest.runOnlyPendingTimers()
+ jest.useRealTimers()
+ })
+
+ it('should call callback at requestAnimationFrame', async () => {
+ const cbMock = jest.fn()
+ const { result } = renderHook(() => useAnimationFrame(cbMock, true))
+
+ await act(async () => {
+ jest.advanceTimersByTime(200)
+ })
+
+ expect(count).toBeGreaterThanOrEqual(1)
+ expect(result.current.current).toBeGreaterThanOrEqual(1)
+ expect(result.current.current).toBeGreaterThanOrEqual(count)
+ })
+})
diff --git a/applications/launchpad/gui-react/src/hooks/useAnimationFrame.ts b/applications/launchpad/gui-react/src/hooks/useAnimationFrame.ts
new file mode 100644
index 0000000000..6f4950d05e
--- /dev/null
+++ b/applications/launchpad/gui-react/src/hooks/useAnimationFrame.ts
@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Hook using `requestAnimationFrame` to smoothly run given callback.
+ * @param {(val: number) => void} callback
+ *
+ * @example
+ * const [counter, setCounter] = useState(0)
+ *
+ * useAnimationFrame(() => {
+ * setCounter((t) => {
+ * return t + 1
+ * })
+ * })
+ *
+ * console.log(counter)
+ */
+const useAnimationFrame = (callback: (val: number) => void, active = true) => {
+ const requestRef = useRef()
+
+ const animate = (val: number) => {
+ callback(val)
+ requestRef.current = requestAnimationFrame(animate)
+ }
+
+ useEffect(() => {
+ if (active) {
+ requestRef.current = requestAnimationFrame(animate)
+ }
+ return () => {
+ if (requestRef.current) {
+ cancelAnimationFrame(requestRef.current)
+ }
+ }
+ }, [active])
+
+ return requestRef
+}
+
+export default useAnimationFrame
diff --git a/applications/launchpad/gui-react/src/hooks/useDockerImageDownloadListener.tsx b/applications/launchpad/gui-react/src/hooks/useDockerImageDownloadListener.tsx
new file mode 100644
index 0000000000..e65b25859a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/hooks/useDockerImageDownloadListener.tsx
@@ -0,0 +1,55 @@
+import { listen, UnlistenFn } from '@tauri-apps/api/event'
+import { useEffect } from 'react'
+import { AppDispatch } from '../store'
+import { actions as dockerImagesActions } from '../store/dockerImages'
+import { selectDockerImages } from '../store/dockerImages/selectors'
+import { useAppSelector } from '../store/hooks'
+
+let listenerActive = false
+
+export interface ImagePullProgress {
+ current: null
+ error?: string
+ id: string
+ image_name: string
+ progress: string
+ status: string
+ total: number
+}
+
+export const useDockerImageDownloadListener = ({
+ dispatch,
+}: {
+ dispatch: AppDispatch
+}) => {
+ const dockerImages = useAppSelector(selectDockerImages)
+
+ const anyDownloading = dockerImages.find(d => d.pending)
+
+ useEffect(() => {
+ let unlisten: UnlistenFn | undefined = undefined
+
+ const listenToDownload = async () => {
+ unlisten = await listen(
+ 'tari://image_pull_progress',
+ async ({ payload }: { event: string; payload: ImagePullProgress }) => {
+ dispatch(
+ dockerImagesActions.setProgress({
+ dockerImage: payload.image_name,
+ progress: payload.progress,
+ status: payload.status,
+ error: payload.error,
+ }),
+ )
+ },
+ )
+ }
+
+ if (anyDownloading && !listenerActive) {
+ listenToDownload()
+ listenerActive = true
+ }
+
+ return unlisten
+ }, [anyDownloading])
+}
diff --git a/applications/launchpad/gui-react/src/index.css b/applications/launchpad/gui-react/src/index.css
new file mode 100644
index 0000000000..ec2585e8c0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/index.css
@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/applications/launchpad/gui-react/src/index.tsx b/applications/launchpad/gui-react/src/index.tsx
new file mode 100644
index 0000000000..42e82ba542
--- /dev/null
+++ b/applications/launchpad/gui-react/src/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/integration/react'
+
+import './index.css'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
+import { store, persistor } from './store'
+import ErrorBoundary from './ErrorBoundary'
+
+const container = document.getElementById('root')
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(container!)
+root.render(
+
+
+
+
+
+
+
+
+ ,
+)
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals()
diff --git a/applications/launchpad/gui-react/src/layouts/MainLayout/index.tsx b/applications/launchpad/gui-react/src/layouts/MainLayout/index.tsx
new file mode 100644
index 0000000000..62c0ca1dc8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/layouts/MainLayout/index.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useTheme } from 'styled-components'
+import { useSpring } from 'react-spring'
+
+import { useAppSelector, useAppDispatch } from '../../store/hooks'
+import { setExpertSwitchDisabled } from '../../store/app'
+import { selectExpertView } from '../../store/app/selectors'
+import ExpertViewUtils from '../../utils/ExpertViewUtils'
+import TitleBar from '../../components/TitleBar'
+import ExpertView from '../../containers/Dashboard/ExpertView'
+import SettingsContainer from '../../containers/SettingsContainer'
+
+import { MainLayoutProps } from './types'
+import {
+ ExpertViewBackgroundOverlay,
+ ExpertViewDrawer,
+ MainContainer,
+ MainLayoutContainer,
+ ScreenContainer,
+} from './styles'
+
+/**
+ * Main Layout
+ */
+const MainLayout = ({
+ drawerViewWidth = '50%',
+ ChildrenComponent,
+ ExpertViewComponent = ExpertView,
+ titleBarProps,
+}: MainLayoutProps) => {
+ const mainContainerRef = useRef(null)
+ const theme = useTheme()
+ const dispatch = useAppDispatch()
+
+ const expertView = useAppSelector(selectExpertView)
+
+ // Decrease the padding when the main container becomes 'small'
+ const [tightSpace, setTightSpace] = useState(false)
+
+ const [expertViewSize, invertedExpertViewSize] =
+ ExpertViewUtils.convertExpertViewModeToValue(expertView, drawerViewWidth)
+
+ // Decrease the padding in the main container when screen becomes small
+ useLayoutEffect(() => {
+ const onResize = () => {
+ if (mainContainerRef && mainContainerRef.current) {
+ // @ts-expect-error: ignore this
+ if (mainContainerRef.current.offsetWidth < 960) {
+ setTightSpace(true)
+ } else {
+ setTightSpace(false)
+ }
+ }
+ }
+
+ window.addEventListener('resize', onResize)
+
+ return () => {
+ window.removeEventListener('resize', onResize)
+ }
+ }, [])
+
+ useEffect(() => {
+ dispatch(setExpertSwitchDisabled(false))
+ })
+
+ /**
+ * Animations
+ */
+ const mainContainerStyle = useSpring({
+ width: expertView === 'open' ? invertedExpertViewSize : '100%',
+ })
+ const dashboardContainerStyle = useSpring({
+ paddingLeft:
+ expertView === 'open' || tightSpace
+ ? theme.spacing(1.5)
+ : theme.spacing(4),
+ paddingRight:
+ expertView === 'open' || tightSpace
+ ? theme.spacing(1.5)
+ : theme.spacing(4),
+ })
+ const drawerContainerStyle = ExpertViewUtils.useDrawerAnim(expertViewSize)
+ const drawerContentStyle = useSpring({
+ left: `${invertedExpertViewSize}%`,
+ marginRight: expertViewSize === '0%' ? '-100%' : '0%',
+ width: expertViewSize === '100%' ? '100%' : drawerViewWidth,
+ })
+
+ return (
+
+
+
+
+
+
+
+
+ {/* Background overlay: */}
+
+
+ {/* Actual content: */}
+
+
+
+
+
+
+ )
+}
+
+export default MainLayout
diff --git a/applications/launchpad/gui-react/src/layouts/MainLayout/styles.ts b/applications/launchpad/gui-react/src/layouts/MainLayout/styles.ts
new file mode 100644
index 0000000000..69fa5b97d5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/layouts/MainLayout/styles.ts
@@ -0,0 +1,47 @@
+import { animated } from 'react-spring'
+import styled from 'styled-components'
+
+export const ScreenContainer = styled.div`
+ overflow: hidden;
+ border-radius: 10px;
+ flex: 1;
+`
+
+export const MainLayoutContainer = styled.div`
+ position: relative;
+ display: flex;
+ height: 100%;
+ flex: 1;
+ top: 0;
+ bottom: 0;
+ border-radius: 10px;
+ overflow: hidden;
+`
+
+export const MainContainer = styled(animated.div)`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ padding-top: ${({ theme }) => theme.spacing(2.5)};
+`
+
+export const ExpertViewBackgroundOverlay = styled(animated.div)`
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ overflow: hidden;
+ background: ${({ theme }) => theme.inverted.background};
+`
+
+export const ExpertViewDrawer = styled(animated.div)`
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: ${({ theme }) => theme.spacing(2.5)};
+ box-sizing: border-box;
+`
diff --git a/applications/launchpad/gui-react/src/layouts/MainLayout/types.ts b/applications/launchpad/gui-react/src/layouts/MainLayout/types.ts
new file mode 100644
index 0000000000..96638d0e23
--- /dev/null
+++ b/applications/launchpad/gui-react/src/layouts/MainLayout/types.ts
@@ -0,0 +1,11 @@
+import { TitleBarProps } from '../../components/TitleBar/types'
+import DashboardContainer from '../../containers/Dashboard/DashboardContainer'
+import ExpertView from '../../containers/Dashboard/ExpertView'
+import OnboardingContainer from '../../containers/Onboarding'
+
+export interface MainLayoutProps {
+ drawerViewWidth?: string
+ ChildrenComponent: typeof DashboardContainer | typeof OnboardingContainer
+ ExpertViewComponent?: typeof ExpertView
+ titleBarProps?: TitleBarProps
+}
diff --git a/applications/launchpad/gui-react/src/locales/baseNode.ts b/applications/launchpad/gui-react/src/locales/baseNode.ts
new file mode 100644
index 0000000000..193de1bc98
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/baseNode.ts
@@ -0,0 +1,61 @@
+const translations = {
+ title: 'Base Node',
+ tari_network_label: 'Tari network',
+ start: 'Start Base Node',
+ unhealthy: {
+ warning:
+ 'Not all containers required to run Base Node are in a healthy state.',
+ ofTheRequired: 'of the required containers is running.',
+ containers: 'Containers that are not running correctly:',
+ checkTheirState: 'You can check their state in',
+ bringItDown: 'or bring the service down entirely and start again.',
+ },
+ errors: {
+ start: 'Base Node could not start.',
+ stop: 'Base Node did not stop.',
+ },
+ settings: {
+ title: 'Base Node Settings',
+ rootFolder: 'Root folder',
+ aurora: 'your Aurora app to the Base Node to increase the security',
+ },
+ helpMessages: {
+ howItWorks: {
+ tip: {
+ text: 'Begin by starting the Base Node',
+ cta: 'How it works',
+ },
+ allowsYou: 'Running Tari Base Node allows you to:',
+ affordances: [
+ 'Mine Tari (XTR)',
+ 'Transact using the Tari Wallet',
+ ' Query and analyze chain data using your local copy of the ledger',
+ ],
+ thankYou: '👊 Thank you for mining Tari Base Node.',
+ yourContribution:
+ 'Every new node increases the size of the Tari network and contributes to network security.',
+ },
+ aurora:
+ 'If you have an Aurora wallet on your smartphone, you can increase its security by connecting to the Tari Base Node.',
+ },
+ viewActions: {
+ baseNodeSettings: 'Base Node settings',
+ },
+ qrModal: {
+ heading: 'Connect your Aurora app',
+ description: 'Open Aurora app on your smartphone.',
+ step1: 'Go to Settings',
+ step2: 'Choose: Connect to Tari Launchpad Base Node',
+ step3: 'Scan the QR code below',
+ step4: 'Then follow the directions in the Aurora app',
+ submitBtn: 'Got it!',
+ },
+ aurora: {
+ connectYourAurora: 'Connect your Aurora app',
+ withBaseNode: 'with the Base Node',
+ description:
+ 'If you have an Aurora Wallet on your smartphone, you can increase its security by connecting to the Tari Base Node.',
+ },
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/common.ts b/applications/launchpad/gui-react/src/locales/common.ts
new file mode 100644
index 0000000000..c1b7e2da6a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/common.ts
@@ -0,0 +1,110 @@
+import { Container } from '../store/containers/types'
+
+const translations: { [key: string]: { [key: string]: string } } = {
+ verbs: {
+ accept: 'Accept',
+ apply: 'Apply',
+ cancel: 'Cancel',
+ dismiss: 'Dismiss',
+ tryAgain: 'Try again',
+ stop: 'Stop',
+ start: 'Start',
+ save: 'Save',
+ submit: 'Submit',
+ pause: 'Pause',
+ continue: 'Continue',
+ close: 'Close',
+ connect: 'Connect',
+ },
+ nouns: {
+ expert: 'Expert',
+ docker: 'Docker',
+ expertView: 'Expert view',
+ baseNode: 'Base Node',
+ tariWallet: 'Tari Wallet',
+ moneroWallet: 'Monero Wallet',
+ mining: 'Mining',
+ problem: 'Problem',
+ settings: 'Settings',
+ wallet: 'Wallet',
+ security: 'Security',
+ performance: 'Performance',
+ containers: 'Containers',
+ logs: 'Logs',
+ cpu: 'CPU',
+ memory: 'Memory',
+ error: 'Error',
+ today: 'Today',
+ results: 'Results',
+ },
+ weekdayCapitals: {
+ sunday: 'S',
+ monday: 'M',
+ tuesday: 'T',
+ wednesday: 'W',
+ thursday: 'T',
+ friday: 'F',
+ saturday: 'S',
+ },
+ weekdayShort: {
+ sunday: 'Sun',
+ monday: 'Mon',
+ tuesday: 'Tue',
+ wednesday: 'Wed',
+ thursday: 'Thu',
+ friday: 'Fri',
+ saturday: 'Sat',
+ },
+ adjectives: {
+ created: 'Created',
+ running: 'Running',
+ paused: 'Paused',
+ copied: 'Copied',
+ recommended: 'Recommended',
+ remaining: 'Remaining',
+ processing: 'Processing',
+ cancelled: 'Cancelled',
+ loading: 'Loading',
+ },
+ conjunctions: {
+ or: 'or',
+ of: 'of',
+ },
+ phrases: {
+ actionRequired: 'Action required',
+ bestChoice: 'Best choice',
+ keepEditing: 'Keep editing',
+ saveChanges: 'Save changes',
+ startHere: 'Start here',
+ readyToGo: 'Ready to go',
+ readyToSet: 'Ready to set',
+ gotIt: 'Got it',
+ pleaseWait: 'Please wait',
+ yourJobIsDoneHere: 'Your job is done here',
+ calculatingTheRemainingTime:
+ 'Calculating remaining time (this may take a few minutes)',
+ somethingWentWrong: 'Something went wrong',
+ },
+ containers: {
+ [Container.Tor]: 'Tor',
+ [Container.BaseNode]: 'Base Node',
+ [Container.Wallet]: 'Wallet',
+ [Container.SHA3Miner]: 'SHA3 miner',
+ [Container.MMProxy]: 'Merge miner proxy',
+ [Container.XMrig]: 'xmrig',
+ [Container.Monerod]: 'monerod',
+ [Container.Loki]: 'loki',
+ [Container.Promtail]: 'promtail',
+ [Container.Grafana]: 'grafana',
+ },
+ miningType: {
+ tari: 'Tari Mining',
+ merged: 'Merged Mining',
+ },
+ units: {
+ mib: 'MiB',
+ kbs: 'kiB/s',
+ },
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/cryptoMiningHelp.ts b/applications/launchpad/gui-react/src/locales/cryptoMiningHelp.ts
new file mode 100644
index 0000000000..50b5fc6560
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/cryptoMiningHelp.ts
@@ -0,0 +1,6 @@
+const translations = {
+ message1:
+ 'A miner takes a pickaxe and goes to the mine to look for precious metals. For cryptocurrency miners like you, the mining tool is a computer that does mathematical calculations. When it finds the right result, you are rewarded with a virtual cryptocurrency - in this case, Tari or Monero.',
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/docker.ts b/applications/launchpad/gui-react/src/locales/docker.ts
new file mode 100644
index 0000000000..0476955485
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/docker.ts
@@ -0,0 +1,33 @@
+export default {
+ pullImage: 'Pull image',
+ pullNewerImage: 'Pull newer image',
+ newerVersion: 'A newer version is available',
+ imageUpToDate: 'Image is up to date for',
+ settings: {
+ title: 'Docker Settings',
+ tagLabel: 'Docker Tag',
+ registryLabel: 'Docker Registry',
+ imageStatuses: 'Image Statuses',
+ },
+ header: {
+ image: 'Image',
+ status: 'Status',
+ },
+ tBot: {
+ newVersionAvailable: {
+ part1: 'There is a newer version of wallet image ready to pull.',
+ part2:
+ 'Docker images within a running container do not update automatically. Once you have used an image to create a container, it continues running that version, even after new releases come out.',
+ },
+ downloadStepMessage:
+ 'It is recommended to run containers from the latest image unless you have a specific reason to use an older release.',
+ downloadSuccess: {
+ part1: 'You’re good to go!',
+ part2: 'Newer version of wallet image has been pulled successfully.',
+ },
+ downloadError: {
+ part1: 'Something went wrong!',
+ part2: 'Go to Settings > Docker and try to download the image again.',
+ },
+ },
+}
diff --git a/applications/launchpad/gui-react/src/locales/expertView.ts b/applications/launchpad/gui-react/src/locales/expertView.ts
new file mode 100644
index 0000000000..8b35a6651b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/expertView.ts
@@ -0,0 +1,22 @@
+export default {
+ fullscreen: {
+ open: 'Open full screen',
+ close: 'Close full screen',
+ },
+ performance: {
+ memoryChartTitle: 'Memory usage',
+ networkChartTitle: 'Network download',
+ renderWindowOptionsLabels: {
+ last30m: 'Last 30 minutes',
+ last1h: 'Last hour',
+ last2h: 'Last 2 hours',
+ last8h: 'Last 8 hours',
+ last24h: 'Last 24 hours',
+ },
+ refreshRateOptionsLabels: {
+ every1s: '1 sec',
+ every10s: '10 sec',
+ every60s: '60 sec',
+ },
+ },
+}
diff --git a/applications/launchpad/gui-react/src/locales/footer.ts b/applications/launchpad/gui-react/src/locales/footer.ts
new file mode 100644
index 0000000000..768a75a3db
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/footer.ts
@@ -0,0 +1,6 @@
+const translations = {
+ press: 'Press',
+ toOpenTerminal: 'to open terminal window',
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/index.ts b/applications/launchpad/gui-react/src/locales/index.ts
new file mode 100644
index 0000000000..a8b943660f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/index.ts
@@ -0,0 +1,42 @@
+/**
+ * I18n
+ *
+ * @example
+ * import t from './locales'
+ *
+ * {t.common.nouns.wallet}
+ */
+import commonI18n from './common'
+
+import footerI18n from './footer'
+import miningI18n from './mining'
+import baseNodeI18n from './baseNode'
+import walletI18n from './wallet'
+import expertViewI18n from './expertView'
+import walletPasswordWizardI18n from './walletPasswordWizard'
+import cryptoMiningHelpI18n from './cryptoMiningHelp'
+import mergedMiningHelpI18n from './mergedMiningHelp'
+import settingsI18n from './settings'
+import onboardingI18n from './onboarding'
+import dockerI18n from './docker'
+import passwordPromptI18n from './passwordPrompt'
+import onlineIl8n from './online'
+
+const translations = {
+ common: commonI18n,
+ footer: footerI18n,
+ mining: miningI18n,
+ baseNode: baseNodeI18n,
+ wallet: walletI18n,
+ expertView: expertViewI18n,
+ walletPasswordWizard: walletPasswordWizardI18n,
+ cryptoMiningHelp: cryptoMiningHelpI18n,
+ mergedMiningHelp: mergedMiningHelpI18n,
+ settings: settingsI18n,
+ onboarding: onboardingI18n,
+ docker: dockerI18n,
+ passwordPrompt: passwordPromptI18n,
+ online: onlineIl8n,
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/mergedMiningHelp.ts b/applications/launchpad/gui-react/src/locales/mergedMiningHelp.ts
new file mode 100644
index 0000000000..0cf4e52bd8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/mergedMiningHelp.ts
@@ -0,0 +1,8 @@
+const translations = {
+ message1:
+ 'Merged Monero mining allows Tari miners to also mine Monero cryptocurrency with minimal extra overhead or cost to themselves💡. ',
+ message2:
+ 'If you think of mining as drawing lottery balls out of an enormous bucket, you win Monero if you draw a number greater than 1,000, say. If you draw 100, you win nothing. By opting into merge mining Tari, you get an additional free ticket to win Tari if that number is greater than, say 90. If you draw 1,001 you win both Monero and Tari 🎁. If you draw 100, you don’t win Monero, but you still get your Tari. ',
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/mining.ts b/applications/launchpad/gui-react/src/locales/mining.ts
new file mode 100644
index 0000000000..d5310c6e34
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/mining.ts
@@ -0,0 +1,121 @@
+const translations = {
+ minedInLastSession: 'mined in last session',
+ setUpTariWalletSubmitBtn: 'Set up Tari Wallet & start mining',
+ readyToMiningText: 'Everything is set. You’re ready to go!',
+ headerTips: {
+ oneStepAway: 'You are one step away from starting mining.',
+ oneClickAway: 'You are one click away from starting mining.',
+ continueMining:
+ 'Keep on going. You are one click away from starting mining.',
+ runningOn: 'Awesome! Tari Mining is on.',
+ wantToKnowMore: 'Want to know more',
+ },
+ actions: {
+ startMining: 'Start mining',
+ setupAndStartMining: 'Set up & start mining',
+ },
+ viewActions: {
+ setUpMiningHours: 'Set up mining hours',
+ miningSettings: 'Mining settings',
+ statistics: 'Statistics',
+ },
+ placeholders: {
+ statusUnknown: 'The node status is unknown.',
+ statusBlocked: 'The node cannot be started.',
+ statusSetupRequired: 'The node requires further configuration.',
+ statusError:
+ 'TBD: Something went wrong with this or one of the dependent containers. Show alert like in the Expert View?',
+ },
+ setup: {
+ description: 'If you want to start merged mining you need to',
+ descriptionBold: 'set up your Monero address first.',
+ addressPlaceholder: 'Set your Monero wallet address',
+ formDescription:
+ 'This is the address to which the Monero coins you earn will be sent. Make sure it is correct as you might accidentally give a generous gift to a stranger. 😅',
+ },
+ scheduling: {
+ title: 'Mining schedules',
+ launchpadOpen:
+ 'Tari Launchpad must be open at the scheduled hours for mining to start.',
+ noSchedules: 'No mining schedule has been set up yet',
+ add: 'Add schedule',
+ removeSchedule: 'Remove schedule',
+ ops: 'Ops!',
+ error_miningEndsBeforeItStarts:
+ /* eslint-disable-next-line quotes */
+ "I guess you need to correct the hours because mining can't stop before it even starts",
+ error_miningEndsWhenItStarts:
+ /* eslint-disable-next-line quotes */
+ "I guess you need to correct the hours because mining can't stop exactly when it starts",
+ error_miningInThePast:
+ /* eslint-disable-next-line quotes */
+ "I guess you need to correct the selected date because we can't mine in the past",
+ passwordPrompt: {
+ title: 'Unlock your wallet',
+ cta: 'According to your schedule we should be mining! Provide password to unlock your wallet:',
+ },
+ doubleClick: 'Double-click schedule to edit',
+ },
+ statistics: {
+ title: 'Mined coins',
+ intervals: {
+ all: 'All',
+ monthly: 'Monthly',
+ yearly: 'Yearly',
+ },
+ deltas: {
+ yearly: 'vs last year',
+ monthly: 'vs last month',
+ // this is required otherwise accessing this through MiningStatisticsInterval union type breaks
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ } as any,
+ },
+ settings: {
+ title: 'Mining Settings',
+ moneroAddressLabel: 'Monero mining address',
+ moneroAddressDesc1: {
+ regular: 'This is the address to which',
+ bold: 'the Monero coins you earn will be sent.',
+ },
+ moneroAddressDesc2: {
+ regular: 'You need to provide a Monero address to be able to start',
+ bold: 'Merged mining.',
+ },
+ moneroAddressError: 'The address must be at least 12 characters',
+ threadsLabel: 'SHA3 threads',
+ moneroUrlLabel: 'Monero node URL',
+ addNextUrl: 'Add next URL',
+ wrongUrlFormat: 'Oops! This is not a valid URL',
+ moneroUrlPlaceholder: 'Set URL address',
+ moneroNodeAuthLabel: 'Monero node authentication',
+ moneroAuthFormTitle: 'Apply Authentication',
+ moneroAuthFormDesc:
+ 'To ensure that Tari Launchpad communicates with the external Monero node you chose please enter valid data that secures it.',
+ moneroAuthApplied: 'Monero node authentication applied',
+ authUsernameLabel: 'Username (optional)',
+ authUsernamePlaceholder: 'Username you log in to the Monero node',
+ authPasswordLabel: 'Password (optional)',
+ authPasswordPlaceholder: 'Password you log in to the Monero node',
+ },
+ notification: {
+ added: 'has been added to your wallet.',
+ ack: 'Got it',
+ // WARNING do not use '_' in headers and messages (see TariText.tsx)
+ headers: [
+ // eslint-disable-next-line quotes
+ `Fantaritastic! You've just mined a Tari block!`,
+ // eslint-disable-next-line quotes
+ `Congratulations, brave Miner! You've just mined a Tari block!`,
+ // eslint-disable-next-line quotes
+ `Holly moly, what a success! You've just mined a Tari block!`,
+ 'Holy moly, you mine Tari like a boss!',
+ 'Miner, have you taken lessons from the Dwarves of Moria?',
+ ],
+ messages: [
+ 'Congratarilations! A new Tari block has been mined!',
+ 'You did it, Miner! A new Tari block has been mined!',
+ ],
+ },
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/onboarding.ts b/applications/launchpad/gui-react/src/locales/onboarding.ts
new file mode 100644
index 0000000000..209b3677b1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/onboarding.ts
@@ -0,0 +1,74 @@
+/* eslint-disable prettier/prettier */
+const translations = {
+ actions: {
+ skipChatting: 'Skip Chatting',
+ skipOnboarding: 'Skip',
+ },
+ status: {
+ processing: 'processing',
+ done: 'done!',
+ fail: 'fail!',
+ },
+ intro: {
+ message1: {
+ part1: 'Hi! My name is T-Bot.',
+ part2:
+ 'It is a great pleasure and an honor to meet you! I have no memory of human faces, so if our paths have already crossed in the Aurora app, I’m glad to see you again!',
+ },
+ message2:
+ 'I\'m kind of like Gandalf, Dumbledore or Obi-Wan Kenobi. You know, the guy who makes sure the novice gets to a certain destination. Spoiler alert: in this saga the guide will survive. Regardless of whether this is your first contact with cryptocurrencies or you are advanced in it, I will stay with you until the Tari Launchpad setup process is successfully completed.',
+ message3:
+ 'So let\'s get started! 🚀 The setup process usually takes 5 to 10 minutes. A duo like you and me should be able to deal with it quickly, right?',
+ message4:
+ 'But first things first! ☕️ A warm drink will surely make the time spent together more pleasant. Unfortunately, I have no connection with your kettle or coffee machine - you have to deal with this side task yourself.',
+ },
+ dockerInstall: {
+ message1: {
+ part1: 'Ay, caramba! No more chit-chatting about coffee and tea!',
+ part2: 'We need to install and run Docker',
+ part3: 'on your computer because I see you don\'t have one yet.',
+ },
+ message2: 'Docker is an open-source platform that allows you to easily install complex software configurations (like Tari Launchpad). You can use it on Linux, Windows 10, and macOS. It acts like a lightweight virtual machine that is sandboxed from your operating system.',
+ message3: {
+ part1: 'Ok, I have already found the latest version of Docker compatible with the',
+ part2: 'operating system you are using.',
+ part3: 'Download the installation file, follow the instructions and run the Docker. ',
+ part4: 'When you are done, please come back to me so that we can continue the setup process. As a responsible bot, I promise to wait for you here.',
+ },
+ message4: {
+ part1: '🆘 I almost forgot! If you have any problems or doubts',
+ part2: 'contact our awsome Tari community on Discord.',
+ },
+ message5: {
+ link: 'Take me to installation page',
+ },
+ afterInstall: 'Easy peasy, lemon squeezy! Congratulations! 👏 Docker is installed on your computer. I knew you could handle it. Now it\'s time for the final stretch.',
+ startSyncBtn: 'Sync the blockchain',
+ },
+ dockerImages: {
+ message1: {
+ part1: 'I need a few minutes for further configuration. If you want to know exactly what I am doing now, open ',
+ part2: 'Expert view.'
+ },
+ errors: {
+ noSpace: 'Yikes! It looks like there is not enough space on your hard drive. It\'s time to get rid of your old vacation photos so you can start digging Tari. Let\'s be honest, the most important ones are already on your Instagram. When you are done deleting the data, hit the button below to try to download the necessary elements again.',
+ serverError: {
+ part1: 'Houston, we have a problem!',
+ part2: 'It looks like a server error',
+ part3: 'has occurred.',
+ part4: 'Don’t worry – it is very possible that this is a one-off situation. Trying again will allow you to pull the images successfully. If the problem persists, please contact Tari community on Discord.',
+ }
+ },
+ },
+ lastSteps: {
+ message1: 'Awesome, everything went smoothly. You are one step away from starting mining.',
+ message2: 'When the data synchronization is completed, the Tari Launchpad dashboard will start automatically. Do not close this window as this will pause the entire process.',
+ syncError: 'Oops! Something went wrong!',
+ blockchainIsSyncing: 'Blockchain is synchronizing...',
+ },
+ expertView: {
+ title: 'Pulling images',
+ },
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/online.ts b/applications/launchpad/gui-react/src/locales/online.ts
new file mode 100644
index 0000000000..d6d91db8d3
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/online.ts
@@ -0,0 +1,10 @@
+export default {
+ // eslint-disable-next-line prettier/prettier
+ youreOffline: '😵 ❌ It looks like you\'re offline.',
+ noInternet:
+ 'There is no Internet connection so any of mining, wallet or base node actions can not be performed.',
+ tryThose: 'Try ⚡ those:',
+ checkRouter: 'check the network cable or router',
+ resetRouter: 'reset the modem or router',
+ reconnectWifi: 'reconect to Wi-Fi',
+}
diff --git a/applications/launchpad/gui-react/src/locales/passwordPrompt.ts b/applications/launchpad/gui-react/src/locales/passwordPrompt.ts
new file mode 100644
index 0000000000..e80ce18e9c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/passwordPrompt.ts
@@ -0,0 +1,20 @@
+export default {
+ scheduleCTA: 'According to your schedule we should be mining!',
+ walletPasswordPlaceholder: 'Enter Tari Wallet password',
+ moneroUsernamePlaceholder: 'Enter Monero Wallet username',
+ moneroPasswordPlaceholder: 'Enter Monero Wallet password',
+ walletPassword: {
+ title: 'Unlock your Tari Wallet',
+ cta: 'Provide password to unlock your wallet.',
+ },
+ moneroCredentials: {
+ title: 'Unlock your Monero Wallet',
+ cta: 'Provide password to unlock your wallet.',
+ },
+ allCredentials: {
+ title: 'Unlock your Tari and Monero wallets',
+ cta: 'Provide password to unlock your private data.',
+ unlock: 'Unlock',
+ unlockExternal: 'Unlock External',
+ },
+}
diff --git a/applications/launchpad/gui-react/src/locales/settings.ts b/applications/launchpad/gui-react/src/locales/settings.ts
new file mode 100644
index 0000000000..03d9909246
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/settings.ts
@@ -0,0 +1,42 @@
+export default {
+ discardChanges: 'Discard changes?',
+ discardChangesDesc: 'Closing this window will cancel any unsaved changes',
+ closeAndDiscard: 'Close & Discard',
+ selectTheme: 'Select theme',
+ security: {
+ title: 'Security Settings',
+ showRecoveryPhrase: 'Show recovery phrase',
+ backupRecoveryPhrase: 'Backup Recovery Phrase',
+ backupRecoveryPhraseExplanation: {
+ part1:
+ // eslint-disable-next-line quotes
+ "It's absolutely crucial to keep your Backup Recovery Phrase secret and safe. Anybody who has access to it can steal your Tari funds.",
+ part2:
+ 'Do not store you Backup Recovery Phrase on your smartphone, computer or any other device that can connect to the internet.',
+ part3:
+ 'Print or rewrite the blank Recovery Sheet, fill it with the Backup Recovery Phrase (24 words shown in next steps) and then store it in a secure place. Do not take pictures of the filled Recovery Sheet.',
+ },
+ printRecoverySheet: 'Print Recovery Sheet',
+ writeDownRecoveryPhraseInstructions:
+ 'Write down the following 24 words. It is crucial you write them down in the exact order as shown.',
+ prev4Words: 'Previous 4 words',
+ next4Words: 'Next 4 words',
+ backToRecoveryPhrase: 'Back to recovery phrase',
+ submitAndFinish: 'Submit & finish',
+ phraseConfirmError:
+ // eslint-disable-next-line quotes
+ 'Oh snap! Entered words do not match the Backup Recovery Phrase.',
+ confirmPhraseDesc:
+ 'Enter specific words according to their numbers on the Recovery Sheet.',
+ couldNotGetSeedWords:
+ 'Could not create Backup Recovery Phrase. Make sure that the Wallet is running.',
+ createRecoveryPhrase: 'Create recovery phrase',
+ tab: {
+ desc: 'Your Backup Recovery Phrase allows you to restore the wallet and access your funds when you:',
+ list1: 'forgot your password,',
+ list2: 'deleted your Tari wallet,',
+ list3: 'computer has crashed.',
+ },
+ alreadyCreated: 'Already created',
+ },
+}
diff --git a/applications/launchpad/gui-react/src/locales/wallet.ts b/applications/launchpad/gui-react/src/locales/wallet.ts
new file mode 100644
index 0000000000..26714c75b9
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/wallet.ts
@@ -0,0 +1,99 @@
+/* eslint-disable quotes */
+const translations = {
+ setUpTariWalletTitle: 'Tari Wallet',
+ setUpTariWalletSubmitBtn: 'Set up Tari Wallet',
+ recentTransactions: 'Recent transactions',
+ seeAllHistory: 'See all history',
+ closeAllHistory: 'Close all history',
+ theEnteredPasswordIsIncorrect: 'The entered password is incorrect',
+ password: {
+ title: 'Enter Password',
+ cta: 'to unlock your wallet:',
+ placeholderCta: 'Enter password to Tari Wallet',
+ },
+ wallet: {
+ title: 'Tari Wallet',
+ walletId: 'Tari Wallet ID',
+ address: 'address',
+ },
+ balance: {
+ title: 'Balance',
+ available: 'Available to send',
+ sendCta: 'Send funds',
+ },
+ transactions: {
+ youReceivedTariFrom: 'You received Tari from',
+ youSentTariTo: 'You sent Tari to',
+ youEarnedTari: 'You earned Tari',
+ },
+ transaction: {
+ transactionFee: 'Transaction fee',
+ searchingForRecipient: 'Searching for the recipient on Tari network...',
+ completingFinalProcessing: 'Completing final processing',
+ completingDescription:
+ 'It takes usually up to 2 minutes to complete the operation.',
+ transactionPending: 'Transaction pending',
+ transactionPendingDesc1:
+ 'It appears that the recipient is not online at the moment and this is necessary to successfully complete the transaction.',
+ transactionPendingDesc2:
+ 'If the recipient does not respond within the next 3 days, the transaction will be automatically canceled and the funds will be returned to your Tari Wallet.',
+ form: {
+ recipientIdAddress: 'Recipient ID (address)',
+ recipientIdPlacehoder: 'Enter address of XTR Wallet to send the funds to',
+ messageOptional: 'Message (optional)',
+ messagePlaceholder: 'Save Tari coins and spend them wisely! ',
+ sendFunds: 'Send funds',
+ },
+ errors: {
+ exceedsAvailableAndFee: 'Available funds and fee are exceeded',
+ messageIsTooLong: 'Message is too long',
+ recipientIdError: 'The address must be at least 12 characters',
+ },
+ },
+ settings: {
+ title: 'Wallet Settings',
+ explanations: {
+ storage: `Mined Tari is stored in Launchpad's wallet.`,
+ send: 'Send funds to wallet of your choice',
+ try: 'try',
+ aurora: 'Tari Aurora',
+ itsGreat: `it's great!`,
+ extendedFunctionality:
+ 'and enjoy extended functionality (including payment requests, recurring payments, ecommerce payments and more).',
+ convert: 'To do this, you may need to convert the ID to emoji format.',
+ },
+ },
+ helpMessages: {
+ howItWorks: {
+ tip: {
+ text: 'Your Tari coins will be added here',
+ cta: 'How it works',
+ },
+ title:
+ 'Tari wallet is a hardware app that allows you to manage your Tari balance.',
+ message:
+ 'Only way to unlock access to your Tari wallet is by providing correct Tari wallet Password. Remember, unlike your social media account or bank account passwords, your Tari wallet password can never be recovered.',
+ },
+ whyBalanceDiffers: {
+ title:
+ 'Why is the amount you can send different from your account balance?',
+ message:
+ 'It is because the balance includes the pending transactions that you have made.',
+ },
+ noteAboutVerificationPeriod: {
+ message:
+ 'Also note that Tari coins are not available immediately after being mined. They show up in your balance, but it takes usually several days (a few hundred blocks to be mined within the network) to verify this transaction.',
+ },
+ walletIdHelp: {
+ bold: 'A wallet ID (also known as wallet identifier or wallet address) is like a bank account number.',
+ regular:
+ 'Wallet ID is public and you can freely share it with others. That way, people can send you some Tari coins.',
+ },
+ transactionFee: {
+ message:
+ 'The transaction fee is distributed to the thousands of computers (also known as “miners”) who ensure that your transactions are fast and secure.',
+ },
+ },
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/locales/walletPasswordWizard.ts b/applications/launchpad/gui-react/src/locales/walletPasswordWizard.ts
new file mode 100644
index 0000000000..5957f3b7e0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/locales/walletPasswordWizard.ts
@@ -0,0 +1,13 @@
+const translations = {
+ description:
+ 'If you want to start mining you need to set up your Tari Wallet first.',
+ warning:
+ 'BE CAREFUL! This password is the unique and only access key to Tari Wallet. Remember it well, or keep it in a VERY safe place known only to you. Never share it with anyone! If you forget or lose your password, access to your Tari Wallet and all your Tari Blocks will be lost forever!',
+ warningBox:
+ 'The equivalent of $ 140 billion in bitcoins has already been lost around the world due to forgotten passwords.',
+ passwordPlaceholder: 'Set your own Tari Wallet password',
+ generatePasswordBtn: 'generate random password automatically.',
+ submitBtn: 'Set up Tari Wallet',
+}
+
+export default translations
diff --git a/applications/launchpad/gui-react/src/logo.svg b/applications/launchpad/gui-react/src/logo.svg
new file mode 100644
index 0000000000..9dfc1c058c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/applications/launchpad/gui-react/src/modules/.keep b/applications/launchpad/gui-react/src/modules/.keep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/applications/launchpad/gui-react/src/pages/home/index.tsx b/applications/launchpad/gui-react/src/pages/home/index.tsx
new file mode 100644
index 0000000000..e6e68773f0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/pages/home/index.tsx
@@ -0,0 +1,11 @@
+import DashboardContainer from '../../containers/Dashboard/DashboardContainer'
+import MainLayout from '../../layouts/MainLayout'
+
+/**
+ * Home page: '/'
+ */
+const HomePage = () => {
+ return
+}
+
+export default HomePage
diff --git a/applications/launchpad/gui-react/src/pages/onboarding/index.tsx b/applications/launchpad/gui-react/src/pages/onboarding/index.tsx
new file mode 100644
index 0000000000..91acceaad2
--- /dev/null
+++ b/applications/launchpad/gui-react/src/pages/onboarding/index.tsx
@@ -0,0 +1,21 @@
+import OnboardingContainer from '../../containers/Onboarding'
+import ExpertView from '../../containers/Onboarding/ExpertView'
+import MainLayout from '../../layouts/MainLayout'
+
+/**
+ * Onboarding
+ */
+const Onboarding = () => {
+ return (
+
+ )
+}
+
+export default Onboarding
diff --git a/applications/launchpad/gui-react/src/persistence/db.ts b/applications/launchpad/gui-react/src/persistence/db.ts
new file mode 100644
index 0000000000..5a2946b584
--- /dev/null
+++ b/applications/launchpad/gui-react/src/persistence/db.ts
@@ -0,0 +1,14 @@
+import Database from 'tauri-plugin-sql-api'
+
+export let db: Database
+const getDb = async () => {
+ if (!db) {
+ db = await Database.load('sqlite:launchpad.db')
+ }
+
+ return db
+}
+// load immediately to avoid waiting with first query
+getDb()
+
+export default getDb
diff --git a/applications/launchpad/gui-react/src/persistence/statsRepository.ts b/applications/launchpad/gui-react/src/persistence/statsRepository.ts
new file mode 100644
index 0000000000..232dfd1364
--- /dev/null
+++ b/applications/launchpad/gui-react/src/persistence/statsRepository.ts
@@ -0,0 +1,71 @@
+import { ContainerName } from '../types/general'
+import { SerializableContainerStats } from '../store/containers/types'
+import { db } from './db'
+
+export interface StatsEntry {
+ timestamp: string
+ timestampS: number
+ network: string
+ service: ContainerName
+ cpu: number | null
+ memory: number | null
+ upload: number | null
+ download: number | null
+}
+
+export interface StatsRepository {
+ add: (
+ network: string,
+ container: ContainerName,
+ secondTimestamp: string,
+ stats: SerializableContainerStats,
+ ) => Promise
+ getEntries: (network: string, since: Date) => Promise
+ removeOld: (age?: number) => Promise
+}
+
+const repositoryFactory: () => StatsRepository = () => {
+ return {
+ add: async (network, container, secondTimestamp, stats) => {
+ await db.execute(
+ `INSERT INTO stats(timestamp, network, service, cpu, memory, upload, download) VALUES($1, $2, $3, $4, $5, $6, $7)
+ ON CONFLICT(timestamp, network, service)
+ DO UPDATE SET
+ "insertsPerTimestamp"="insertsPerTimestamp"+1,
+ cpu=(cpu+$4)/("insertsPerTimestamp"+1),
+ memory=(memory+$5)/("insertsPerTimestamp"+1),
+ upload=(upload+$6)/("insertsPerTimestamp"+1),
+ download=(download+$7)/("insertsPerTimestamp"+1)`,
+ [
+ secondTimestamp,
+ network,
+ container,
+ stats.cpu,
+ stats.memory,
+ stats.network.upload,
+ stats.network.download,
+ ],
+ )
+ },
+ removeOld: async (age = 24 * 3600 * 1000) => {
+ const nowTS = new Date().getTime()
+ const whenTS = new Date(nowTS - age)
+ await db.execute('DELETE from stats WHERE "timestamp" < $1', [
+ whenTS.toISOString(),
+ ])
+ },
+ getEntries: async (network, since) => {
+ const results: Omit[] = await db.select(
+ 'SELECT timestamp, service, cpu, memory, upload, download FROM stats WHERE network = $1 AND "timestamp" > $2 ORDER BY "timestamp"',
+ [network, since.toISOString()],
+ )
+
+ return results.map(r => ({
+ ...r,
+ timestampS: new Date(r.timestamp).getTime() / 1000,
+ }))
+ },
+ }
+}
+
+export default repositoryFactory
diff --git a/applications/launchpad/gui-react/src/persistence/transactionsRepository.ts b/applications/launchpad/gui-react/src/persistence/transactionsRepository.ts
new file mode 100644
index 0000000000..d61032c2e5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/persistence/transactionsRepository.ts
@@ -0,0 +1,267 @@
+import { useMemo } from 'react'
+import groupby from 'lodash.groupby'
+
+import {
+ WalletTransactionEvent,
+ TransactionEvent,
+ TransactionDirection,
+} from '../useWalletEvents'
+import { Dictionary } from '../types/general'
+import { useAppSelector } from '../store/hooks'
+import { selectNetwork } from '../store/baseNode/selectors'
+import { toT } from '../utils/Format'
+
+import getDb from './db'
+
+export enum DataResolution {
+ Daily = 'daily',
+ Monthly = 'monthly',
+ Yearly = 'yearly',
+}
+
+export interface MinedTariEntry {
+ when: string
+ xtr: number
+}
+
+export interface TransactionDBRecord {
+ event: TransactionEvent
+ id: string
+ receivedAt: Date
+ status: string
+ direction: TransactionDirection
+ amount: number
+ message: string
+ source: string
+ destination: string
+ isCoinbase: string
+ network: string
+}
+
+export interface TransactionsRepository {
+ addOrReplace: (transactionEvent: WalletTransactionEvent) => Promise
+ delete: (id: string) => Promise
+ getMinedXtr: (
+ from: Date,
+ to?: Date,
+ resolution?: DataResolution,
+ ) => Promise>
+ hasDataBefore: (d: Date) => Promise
+ getLifelongMinedBalance: () => Promise
+ getMinedTransactionsDataSpan: () => Promise<{ from: Date; to: Date }>
+ list: (limit: number, page?: number) => Promise
+ count: () => Promise
+ findById: (txId: string) => Promise
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type WithAmount = { amount: number } & any
+const toTariFromMicroTari = (result: WithAmount): WithAmount => ({
+ ...result,
+ amount: toT(result.amount),
+})
+
+const repositoryFactory: (
+ network: string,
+) => TransactionsRepository = network => ({
+ addOrReplace: async event => {
+ const db = await getDb()
+
+ await db.execute(
+ `INSERT OR REPLACE INTO
+ transactions(event, id, receivedAt, status, direction, amount, message, source, destination, isCoinbase, network)
+ values($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)`,
+ [
+ event.event,
+ event.tx_id,
+ new Date(),
+ event.status,
+ event.direction,
+ event.amount,
+ event.message,
+ event.source_pk,
+ event.dest_pk,
+ event.is_coinbase,
+ network,
+ ],
+ )
+ },
+ delete: async id => {
+ const db = await getDb()
+
+ await db.execute('DELETE FROM transactions WHERE id = $1', [id])
+ },
+ getMinedXtr: async (
+ from,
+ to = new Date(),
+ resolution = DataResolution.Daily,
+ ) => {
+ const db = await getDb()
+
+ const results: {
+ receivedAt: string
+ amount: number
+ }[] = await db.select(
+ `SELECT
+ receivedAt,
+ amount
+ FROM
+ transactions
+ WHERE
+ event = $1 AND
+ isCoinbase = 'true' AND
+ receivedAt >= $2 AND
+ receivedAt <= $3`,
+ [TransactionEvent.Mined, from, to],
+ )
+
+ const grouping = {
+ [DataResolution.Daily]: ({ receivedAt }: { receivedAt: string }) =>
+ receivedAt.substring(0, 10),
+ [DataResolution.Monthly]: ({ receivedAt }: { receivedAt: string }) =>
+ receivedAt.substring(0, 7),
+ [DataResolution.Yearly]: ({ receivedAt }: { receivedAt: string }) =>
+ receivedAt.substring(0, 4),
+ }
+ const grouped = groupby(
+ results.map(toTariFromMicroTari),
+ grouping[resolution],
+ )
+
+ return Object.fromEntries(
+ Object.entries(grouped).map(([when, entries]) => [
+ when,
+ {
+ when,
+ xtr: entries.reduce((accu, current) => accu + current.amount, 0),
+ },
+ ]),
+ )
+ },
+ hasDataBefore: async date => {
+ const db = await getDb()
+
+ const results: { id: string }[] = await db.select(
+ 'SELECT id FROM transactions WHERE receivedAt < $1 LIMIT 1',
+ [date],
+ )
+
+ return Boolean(results.length)
+ },
+ getLifelongMinedBalance: async () => {
+ const db = await getDb()
+
+ const results: {
+ amount: number
+ }[] = await db.select(
+ `SELECT amount FROM
+ transactions
+ WHERE
+ event = $1 AND
+ isCoinbase = 'true'`,
+ [TransactionEvent.Mined],
+ )
+
+ return results
+ .map(toTariFromMicroTari)
+ .reduce((accu, current) => accu + current.amount, 0)
+ },
+ getMinedTransactionsDataSpan: async () => {
+ const db = await getDb()
+
+ const resultsTo: {
+ receivedAt: Date
+ }[] = await db.select(
+ `SELECT receivedAt FROM
+ transactions
+ WHERE
+ event = $1 AND
+ isCoinbase = 'true'
+ ORDER BY receivedAt DESC
+ LIMIT 1`,
+ [TransactionEvent.Mined],
+ )
+
+ const resultsFrom: {
+ receivedAt: Date
+ }[] = await db.select(
+ `SELECT receivedAt FROM
+ transactions
+ WHERE
+ event = $1 AND
+ isCoinbase = 'true'
+ ORDER BY receivedAt
+ LIMIT 1`,
+ [TransactionEvent.Mined],
+ )
+
+ return {
+ from: new Date(resultsFrom[0]?.receivedAt) || new Date(),
+ to: new Date(resultsTo[0]?.receivedAt) || new Date(),
+ }
+ },
+
+ list: async (limit, page = 1) => {
+ const db = await getDb()
+
+ const results: TransactionDBRecord[] = await db.select(
+ `SELECT * FROM
+ transactions
+ ORDER BY
+ receivedAt DESC
+ LIMIT $1
+ OFFSET $2
+ `,
+ [limit, page * limit],
+ )
+
+ return results
+ },
+
+ count: async () => {
+ const db = await getDb()
+
+ /**
+ * @TODO Using `SELECT COUNT(*)...` returns null.
+ * The issue is already reported:
+ * https://github.com/tauri-apps/tauri-plugin-sql/issues/121
+ */
+ const result: TransactionDBRecord[] = await db.select(
+ 'SELECT id FROM transactions',
+ )
+
+ if (!result) {
+ return 0
+ }
+
+ return result.length
+ },
+
+ findById: async (txId: string) => {
+ const db = await getDb()
+
+ const result: TransactionDBRecord[] = await db.select(
+ 'SELECT * FROM transactions WHERE id = $1',
+ [txId],
+ )
+
+ if (result?.length > 0) {
+ return result[0]
+ }
+
+ return
+ },
+})
+
+const useTransactionsRepository = () => {
+ const network = useAppSelector(selectNetwork)
+
+ const transactionsRepository = useMemo(
+ () => repositoryFactory(network),
+ [network],
+ )
+
+ return transactionsRepository
+}
+
+export default useTransactionsRepository
diff --git a/applications/launchpad/gui-react/src/react-app-env.d.ts b/applications/launchpad/gui-react/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/react-app-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/applications/launchpad/gui-react/src/react-time-picker-input.d.ts b/applications/launchpad/gui-react/src/react-time-picker-input.d.ts
new file mode 100644
index 0000000000..e3ca93ab99
--- /dev/null
+++ b/applications/launchpad/gui-react/src/react-time-picker-input.d.ts
@@ -0,0 +1 @@
+declare module 'react-time-picker-input'
diff --git a/applications/launchpad/gui-react/src/reportWebVitals.ts b/applications/launchpad/gui-react/src/reportWebVitals.ts
new file mode 100644
index 0000000000..57a24a21ea
--- /dev/null
+++ b/applications/launchpad/gui-react/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals'
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry)
+ getFID(onPerfEntry)
+ getFCP(onPerfEntry)
+ getLCP(onPerfEntry)
+ getTTFB(onPerfEntry)
+ })
+ }
+}
+
+export default reportWebVitals
diff --git a/applications/launchpad/gui-react/src/setupTests.ts b/applications/launchpad/gui-react/src/setupTests.ts
new file mode 100644
index 0000000000..334466d499
--- /dev/null
+++ b/applications/launchpad/gui-react/src/setupTests.ts
@@ -0,0 +1,21 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'
+import 'jest-canvas-mock'
+
+// needed by TestInput inside Schedule in Mining Container
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // deprecated
+ removeListener: jest.fn(), // deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+})
diff --git a/applications/launchpad/gui-react/src/splashscreen.ts b/applications/launchpad/gui-react/src/splashscreen.ts
new file mode 100644
index 0000000000..604edfc594
--- /dev/null
+++ b/applications/launchpad/gui-react/src/splashscreen.ts
@@ -0,0 +1,33 @@
+let start: number | null = null
+let opacity = 1
+
+const fadeOut = (timestamp: number, splashscreenEl: HTMLElement) => {
+ if (!start) {
+ start = timestamp
+ }
+ const progress = timestamp - start
+ opacity = 1 - progress / 500
+ splashscreenEl.style.opacity = opacity.toString()
+ if (opacity > 0) {
+ requestAnimationFrame(timestamp => fadeOut(timestamp, splashscreenEl))
+ } else {
+ splashscreenEl.style.display = 'none'
+ }
+}
+
+/**
+ * Hide splashcreen.
+ * The animation takes about 2 seconds.
+ *
+ * @example
+ * hideSplashscreen()
+ */
+export const hideSplashscreen = () => {
+ const splashscreenEl = document.getElementById('splashscreen')
+
+ setTimeout(() => {
+ if (splashscreenEl) {
+ requestAnimationFrame(timestamp => fadeOut(timestamp, splashscreenEl))
+ }
+ }, 1000)
+}
diff --git a/applications/launchpad/gui-react/src/store/app/index.ts b/applications/launchpad/gui-react/src/store/app/index.ts
new file mode 100644
index 0000000000..6e80c2b75b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/app/index.ts
@@ -0,0 +1,88 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { ThemeType } from '../../styles/themes/types'
+import { Schedule } from '../../types/general'
+import { startOfUTCDay } from '../../utils/Date'
+
+import {
+ AppState,
+ ExpertViewType,
+ OnboardingCheckpoints,
+ ViewType,
+} from './types'
+
+export const appInitialState: AppState = {
+ expertView: 'hidden',
+ expertSwitchDisabled: false,
+ view: 'MINING',
+ theme: 'light',
+ schedules: {},
+ onboardingComplete: false,
+ onboardingCheckpoint: undefined,
+}
+
+const appSlice = createSlice({
+ name: 'app',
+ initialState: appInitialState,
+ reducers: {
+ setExpertView(state, { payload }: { payload: ExpertViewType }) {
+ state.expertView = payload
+ },
+ setExpertSwitchDisabled(state, { payload }: { payload: boolean }) {
+ state.expertSwitchDisabled = payload
+ },
+ setTheme(state, { payload }: { payload: ThemeType }) {
+ state.theme = payload
+ },
+ setPage(state, { payload }: { payload: ViewType }) {
+ state.view = payload
+ },
+ toggleSchedule(state, { payload: scheduleId }: { payload: string }) {
+ state.schedules[scheduleId].enabled = !state.schedules[scheduleId].enabled
+ },
+ removeSchedule(state, { payload: scheduleId }: { payload: string }) {
+ delete state.schedules[scheduleId]
+ },
+ updateSchedule(
+ state,
+ {
+ payload: { scheduleId, value },
+ }: { payload: { scheduleId: string; value: Schedule } },
+ ) {
+ const { date, ...rest } = value
+ const newSchedule = {
+ ...state.schedules[scheduleId],
+ ...rest,
+ }
+
+ newSchedule.date = date ? startOfUTCDay(date).toISOString() : undefined
+
+ state.schedules[scheduleId] = newSchedule
+ },
+ setOnboardingComplete(state, { payload }: { payload: boolean }) {
+ state.onboardingComplete = payload
+ },
+ setOnboardingCheckpoint(
+ state,
+ { payload }: { payload: OnboardingCheckpoints },
+ ) {
+ state.onboardingCheckpoint = payload
+ },
+ },
+})
+
+export const {
+ removeSchedule,
+ setExpertSwitchDisabled,
+ setExpertView,
+ setOnboardingCheckpoint,
+ setOnboardingComplete,
+ setPage,
+ setTheme,
+ toggleSchedule,
+ updateSchedule,
+} = appSlice.actions
+export { init } from './thunks'
+
+const reducer = appSlice.reducer
+export default reducer
diff --git a/applications/launchpad/gui-react/src/store/app/selectors.ts b/applications/launchpad/gui-react/src/store/app/selectors.ts
new file mode 100644
index 0000000000..02168a3db3
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/app/selectors.ts
@@ -0,0 +1,76 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+import { RootState } from '..'
+import themes from '../../styles/themes'
+import { Schedule, MiningNodeType } from '../../types/general'
+import {
+ selectTariSetupRequired,
+ selectMergedSetupRequired,
+} from '../mining/selectors'
+
+export const selectExpertView = ({ app }: RootState) => app.expertView
+
+export const selectExpertSwitchDisabled = ({ app }: RootState) =>
+ app.expertSwitchDisabled
+
+export const selectView = ({ app }: RootState) => app.view
+
+export const selectTheme = ({ app }: RootState) => app.theme
+
+export const selectThemeConfig = ({ app }: RootState) => {
+ return themes[app.theme]
+}
+
+const selectSchedulesObject = (state: RootState) => state.app.schedules
+export const selectSchedules = createSelector(
+ selectSchedulesObject,
+ schedules =>
+ Object.values(schedules).map(schedule => {
+ const { date, ...rest } = schedule
+
+ return {
+ ...rest,
+ date: date && new Date(date),
+ } as Schedule
+ }),
+)
+
+export const selectSchedule =
+ (scheduleId: string) =>
+ ({ app }: RootState) => {
+ const selectedSchedule = app.schedules[scheduleId]
+ if (!selectedSchedule) {
+ return undefined
+ }
+
+ const { date, ...rest } = selectedSchedule
+
+ return {
+ ...rest,
+ date: date && new Date(date),
+ } as Schedule
+ }
+
+export const selectActiveMiningTypes = createSelector(
+ selectTariSetupRequired,
+ selectMergedSetupRequired,
+ (tariSetupRequired, mergedSetupRequired) => {
+ const active = [] as MiningNodeType[]
+
+ if (!tariSetupRequired) {
+ active.push('tari')
+ }
+
+ if (!mergedSetupRequired) {
+ active.push('merged')
+ }
+
+ return active
+ },
+)
+
+export const selectOnboardingComplete = ({ app }: RootState) =>
+ app.onboardingComplete
+
+export const selectOnboardingCheckpoint = ({ app }: RootState) =>
+ app.onboardingCheckpoint
diff --git a/applications/launchpad/gui-react/src/store/app/thunks.ts b/applications/launchpad/gui-react/src/store/app/thunks.ts
new file mode 100644
index 0000000000..e4784ca207
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/app/thunks.ts
@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+
+import { AppDispatch } from '../'
+import { loadDefaultServiceSettings } from '../settings/thunks'
+import { actions as dockerImagesActions } from '../dockerImages'
+
+export const init = createAsyncThunk(
+ 'app/init',
+ async (_, thunkApi) => {
+ await thunkApi.dispatch(loadDefaultServiceSettings()).unwrap()
+ await thunkApi.dispatch(dockerImagesActions.getDockerImageList()).unwrap()
+ },
+)
diff --git a/applications/launchpad/gui-react/src/store/app/types.ts b/applications/launchpad/gui-react/src/store/app/types.ts
new file mode 100644
index 0000000000..70b4e4ef45
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/app/types.ts
@@ -0,0 +1,21 @@
+import { ThemeType } from '../../styles/themes/types'
+import { Schedule, ScheduleId } from '../../types/general'
+
+export type ExpertViewType = 'hidden' | 'open' | 'fullscreen'
+export type ViewType = 'MINING' | 'BASE_NODE' | 'WALLET' | 'ONBOARDING'
+
+export enum OnboardingCheckpoints {
+ DOCKER_INSTALL = 'docker_install',
+ DOCKER_IMAGES_DOWNLOAD = 'docker_images_download',
+ BLOCKCHAIN_SYNC = 'blockchain_sync',
+}
+
+export interface AppState {
+ expertView: ExpertViewType
+ expertSwitchDisabled?: boolean
+ view?: ViewType
+ theme: ThemeType
+ schedules: Record & { date?: string }>
+ onboardingComplete?: boolean
+ onboardingCheckpoint?: OnboardingCheckpoints
+}
diff --git a/applications/launchpad/gui-react/src/store/baseNode/baseNodeService.ts b/applications/launchpad/gui-react/src/store/baseNode/baseNodeService.ts
new file mode 100644
index 0000000000..3281bf521c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/baseNode/baseNodeService.ts
@@ -0,0 +1,5 @@
+import { invoke } from '@tauri-apps/api/tauri'
+import { BaseNodeIdentityDto } from './types'
+
+export const getIdentity: () => Promise = () =>
+ invoke('node_identity')
diff --git a/applications/launchpad/gui-react/src/store/baseNode/index.ts b/applications/launchpad/gui-react/src/store/baseNode/index.ts
new file mode 100644
index 0000000000..1274ba3835
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/baseNode/index.ts
@@ -0,0 +1,40 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { getBaseNodeIdentity, startNode, stopNode } from './thunks'
+import { Network } from '../../containers/BaseNodeContainer/types'
+import { BaseNodeState } from './types'
+
+const initialState: BaseNodeState = {
+ network: 'dibbler',
+ rootFolder: '',
+ identity: undefined,
+}
+
+const baseNodeSlice = createSlice({
+ name: 'baseNode',
+ initialState,
+ reducers: {
+ setTariNetwork(state, action: PayloadAction) {
+ state.network = action.payload
+ },
+ setRootFolder(state, action: PayloadAction) {
+ state.rootFolder = action.payload
+ },
+ },
+ extraReducers: builder => {
+ builder.addCase(getBaseNodeIdentity.fulfilled, (state, action) => {
+ state.identity = action.payload
+ })
+ },
+})
+
+const { setTariNetwork, setRootFolder } = baseNodeSlice.actions
+export const actions = {
+ getBaseNodeIdentity,
+ startNode,
+ stopNode,
+ setTariNetwork,
+ setRootFolder,
+}
+
+export default baseNodeSlice.reducer
diff --git a/applications/launchpad/gui-react/src/store/baseNode/selectors.ts b/applications/launchpad/gui-react/src/store/baseNode/selectors.ts
new file mode 100644
index 0000000000..4762ffb755
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/baseNode/selectors.ts
@@ -0,0 +1,24 @@
+import { RootState } from '../'
+import { Container } from '../containers/types'
+import {
+ selectRecipeRunning,
+ selectRecipePending,
+} from '../containers/selectors'
+import type { Network } from '../../containers/BaseNodeContainer/types'
+
+import { BaseNodeState } from './types'
+
+export const selectState = (state: RootState): BaseNodeState => ({
+ network: state.baseNode.network as Network,
+ rootFolder: state.baseNode.rootFolder,
+})
+
+export const selectNetwork = (state: RootState) => state.baseNode.network
+export const selectRootFolder = (state: RootState) => state.baseNode.rootFolder
+
+export const selectRunning = selectRecipeRunning(Container.BaseNode)
+
+export const selectPending = selectRecipePending(Container.BaseNode)
+
+export const selectBaseNodeIdentity = (state: RootState) =>
+ state.baseNode.identity
diff --git a/applications/launchpad/gui-react/src/store/baseNode/thunks.ts b/applications/launchpad/gui-react/src/store/baseNode/thunks.ts
new file mode 100644
index 0000000000..6f733a36a3
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/baseNode/thunks.ts
@@ -0,0 +1,44 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+
+import { RootState } from '..'
+import { bytesToHex } from '../../utils/Format'
+import { actions as containersActions } from '../containers'
+import { Container } from '../containers/types'
+import { getIdentity } from './baseNodeService'
+import { BaseNodeIdentity } from './types'
+
+export const startNode = createAsyncThunk(
+ 'baseNode/startNode',
+ (_, thunkApi) =>
+ thunkApi
+ .dispatch(
+ containersActions.startRecipe({ containerName: Container.BaseNode }),
+ )
+ .unwrap(),
+)
+
+export const stopNode = createAsyncThunk(
+ 'baseNode/stopNode',
+ (_, thunkApi) =>
+ thunkApi
+ .dispatch(containersActions.stopRecipe(Container.BaseNode))
+ .unwrap(),
+)
+
+export const getBaseNodeIdentity = createAsyncThunk<
+ BaseNodeIdentity,
+ void,
+ { state: RootState }
+>('baseNode/getBaseNodeIdentity', async (_, thunkApi) => {
+ try {
+ const result = await getIdentity()
+ return {
+ publicAddress: result.publicAddress,
+ publicKey: bytesToHex(result.publicKey),
+ nodeId: bytesToHex(result.nodeId),
+ emojiId: result.emojiId,
+ }
+ } catch (err) {
+ return thunkApi.rejectWithValue(err)
+ }
+})
diff --git a/applications/launchpad/gui-react/src/store/baseNode/types.ts b/applications/launchpad/gui-react/src/store/baseNode/types.ts
new file mode 100644
index 0000000000..b05733c4f9
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/baseNode/types.ts
@@ -0,0 +1,21 @@
+import type { Network } from '../../containers/BaseNodeContainer/types'
+
+export interface BaseNodeIdentityDto {
+ publicKey: number[]
+ nodeId: number[]
+ publicAddress: string
+ emojiId: string
+}
+
+export interface BaseNodeIdentity {
+ publicKey: string
+ nodeId: string
+ publicAddress: string
+ emojiId: string
+}
+
+export type BaseNodeState = {
+ network: Network
+ rootFolder: string
+ identity?: BaseNodeIdentity
+}
diff --git a/applications/launchpad/gui-react/src/store/containers/index.test.ts b/applications/launchpad/gui-react/src/store/containers/index.test.ts
new file mode 100644
index 0000000000..378a56a8ce
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/containers/index.test.ts
@@ -0,0 +1,205 @@
+import servicesReducer from './'
+import { SystemEventAction, ContainersState } from './types'
+
+describe('store containers slice', () => {
+ describe('updateStatus action', () => {
+ it('should update container status state', () => {
+ // given
+ const unsubscribe = jest.fn()
+ const state = {
+ pending: [],
+ containers: {
+ someContainerId: {
+ status: SystemEventAction.Create,
+ exitCode: undefined,
+ },
+ },
+ stats: {
+ someContainerId: {
+ cpu: 2,
+ memory: 1,
+ unsubscribe,
+ },
+ },
+ } as unknown as ContainersState
+ const expected = {
+ pending: [],
+ containers: {
+ someContainerId: {
+ status: SystemEventAction.Start,
+ exitCode: undefined,
+ },
+ },
+ stats: {
+ someContainerId: {
+ cpu: 2,
+ memory: 1,
+ unsubscribe,
+ },
+ },
+ }
+
+ // when
+ const nextState = servicesReducer(state, {
+ type: 'containers/updateStatus',
+ payload: {
+ containerId: 'someContainerId',
+ action: SystemEventAction.Start,
+ },
+ })
+
+ // then
+ expect(nextState).toStrictEqual(expected)
+ })
+
+ it('should add the container to state if not present before', () => {
+ // given
+ const state = {
+ pending: [],
+ containers: {},
+ stats: {},
+ } as unknown as ContainersState
+
+ // when
+ const nextState = servicesReducer(state, {
+ type: 'containers/updateStatus',
+ payload: {
+ containerId: 'newContainerId',
+ action: SystemEventAction.Create,
+ },
+ })
+
+ // then
+ const newContainer = nextState.containers.newContainerId
+ expect(newContainer).toMatchObject({
+ status: SystemEventAction.Create,
+ })
+ })
+
+ it('should add timestamp to the container when adding new', () => {
+ // given
+ const state = {
+ pending: [],
+ containers: {},
+ } as unknown as ContainersState
+
+ // when
+ const nextState = servicesReducer(state, {
+ type: 'containers/updateStatus',
+ payload: {
+ containerId: 'newContainerId',
+ action: SystemEventAction.Create,
+ },
+ })
+
+ // then
+ const newContainer = nextState.containers.newContainerId
+ expect(newContainer.timestamp).toBeDefined()
+ })
+
+ it('should not touch timestamp when updating status', () => {
+ // given
+ const unsubscribe = jest.fn()
+ const state = {
+ pending: [],
+ containers: {
+ someContainerId: {
+ timestamp: 123123,
+ status: SystemEventAction.Create,
+ },
+ },
+ stats: {
+ someContainerId: {
+ cpu: 2,
+ memory: 1,
+ unsubscribe,
+ },
+ },
+ } as unknown as ContainersState
+
+ // when
+ const nextState = servicesReducer(state, {
+ type: 'containers/updateStatus',
+ payload: {
+ containerId: 'someContainerId',
+ action: SystemEventAction.Start,
+ },
+ })
+
+ // then
+ const newContainer = nextState.containers.someContainerId
+ expect(newContainer.timestamp).toBe(123123)
+ })
+
+ describe('when container is reported as destroyed or dead', () => {
+ const actionsCases = [SystemEventAction.Destroy, SystemEventAction.Die]
+
+ actionsCases.forEach(action => {
+ it(`[${action}] should unsubscribe from stats events`, () => {
+ // given
+ const unsubscribe = jest.fn()
+ const state = {
+ pending: [],
+ containers: {
+ someContainerId: {
+ status: SystemEventAction.Create,
+ },
+ },
+ stats: {
+ someContainerId: {
+ cpu: 2,
+ memory: 1,
+ unsubscribe,
+ },
+ },
+ } as unknown as ContainersState
+
+ // when
+ servicesReducer(state, {
+ type: 'containers/updateStatus',
+ payload: {
+ containerId: 'someContainerId',
+ action,
+ },
+ })
+
+ // then
+ expect(unsubscribe).toHaveBeenCalledTimes(1)
+ })
+
+ it(`[${action}] should NOT remove container from state and 0-out the stats`, () => {
+ // given
+ const state = {
+ pending: [],
+ containers: {
+ someContainerId: {
+ status: SystemEventAction.Create,
+ },
+ },
+ stats: {
+ someContainerId: {
+ cpu: 2,
+ memory: 1,
+ unsubscribe: jest.fn(),
+ },
+ },
+ } as unknown as ContainersState
+
+ // when
+ const nextState = servicesReducer(state, {
+ type: 'containers/updateStatus',
+ payload: {
+ containerId: 'someContainerId',
+ action,
+ },
+ })
+
+ // then
+ expect(nextState.containers.someContainerId).toBeDefined()
+ expect(nextState.stats.someContainerId.cpu).toBe(0)
+ expect(nextState.stats.someContainerId.memory).toBe(0)
+ })
+ })
+ })
+ })
+})
diff --git a/applications/launchpad/gui-react/src/store/containers/index.ts b/applications/launchpad/gui-react/src/store/containers/index.ts
new file mode 100644
index 0000000000..f5c590fe73
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/containers/index.ts
@@ -0,0 +1,159 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import {
+ ContainerStatus,
+ ContainersState,
+ Container,
+ SystemEventAction,
+} from './types'
+import {
+ addStats,
+ start,
+ startRecipe,
+ stop,
+ stopRecipe,
+ stopByType,
+ restart,
+} from './thunks'
+
+const getInitialServiceStatus = (
+ lastAction: SystemEventAction,
+ exitCode?: number,
+): ContainerStatus => ({
+ timestamp: Date.now(),
+ status: lastAction,
+ exitCode,
+})
+
+export const initialState: ContainersState = {
+ errors: {
+ [Container.Tor]: undefined,
+ [Container.BaseNode]: undefined,
+ [Container.Wallet]: undefined,
+ [Container.SHA3Miner]: undefined,
+ [Container.MMProxy]: undefined,
+ [Container.XMrig]: undefined,
+ [Container.Monerod]: undefined,
+ [Container.Loki]: undefined,
+ [Container.Grafana]: undefined,
+ [Container.Promtail]: undefined,
+ },
+ pending: [],
+ containers: {},
+ stats: {},
+}
+
+const containersSlice = createSlice({
+ name: 'containers',
+ initialState,
+ reducers: {
+ updateStatus: (
+ state,
+ action: PayloadAction<{
+ containerId: string
+ action: SystemEventAction
+ exitCode?: number
+ }>,
+ ) => {
+ if (!state.containers[action.payload.containerId]) {
+ state.containers[action.payload.containerId] = getInitialServiceStatus(
+ action.payload.action,
+ action.payload.exitCode,
+ )
+ } else {
+ state.containers[action.payload.containerId].status =
+ action.payload.action
+ state.containers[action.payload.containerId].exitCode =
+ action.payload.exitCode
+ }
+
+ if (!state.stats) {
+ state.stats = {}
+ }
+
+ if (!state.stats[action.payload.containerId]) {
+ state.stats[action.payload.containerId] = {
+ cpu: 0,
+ memory: 0,
+ network: {
+ upload: 0,
+ download: 0,
+ },
+ unsubscribe: () => {
+ return
+ },
+ }
+ }
+
+ switch (action.payload.action) {
+ case SystemEventAction.Destroy:
+ case SystemEventAction.Die:
+ state.stats[action.payload.containerId].unsubscribe()
+ state.stats[action.payload.containerId].cpu = 0
+ state.stats[action.payload.containerId].memory = 0
+ break
+ }
+ },
+ },
+ extraReducers: builder => {
+ builder.addCase(start.pending, (state, { meta }) => {
+ state.pending.push(meta.arg.container)
+ state.errors[meta.arg.container] = undefined
+ })
+ builder.addCase(start.fulfilled, (state, action) => {
+ if (!state.containers[action.payload.id]) {
+ return
+ }
+
+ state.pending = state.pending.filter(p => p !== action.meta.arg.container)
+ state.containers[action.payload.id].name = action.meta.arg.container
+ state.containers[action.payload.id].eventsChannel =
+ action.payload.containerEventsChannel
+ state.stats[action.payload.id].unsubscribe =
+ action.payload.unsubscribeStats
+ state.errors[action.meta.arg.container] = undefined
+ })
+ builder.addCase(start.rejected, (state, action) => {
+ state.errors[action.meta.arg.container] = action.payload
+ state.pending = state.pending.filter(p => p !== action.meta.arg.container)
+ })
+
+ builder.addCase(stop.pending, (state, { meta }) => {
+ state.pending.push(meta.arg)
+ state.containers[meta.arg].error = undefined
+ })
+ builder.addCase(stop.fulfilled, (state, { meta }) => {
+ state.pending = state.pending.filter(p => p !== meta.arg)
+ state.containers[meta.arg].error = undefined
+ const type = state.containers[meta.arg].name
+ if (type) {
+ state.errors[type] = undefined
+ }
+ })
+ builder.addCase(stop.rejected, (state, action) => {
+ state.pending = state.pending.filter(p => p !== action.meta.arg)
+ state.containers[action.meta.arg].error = action.payload
+ })
+
+ builder.addCase(addStats.fulfilled, (state, action) => {
+ const { containerId, stats } = action.payload
+
+ state.stats[containerId].cpu = stats.cpu
+ state.stats[containerId].memory = stats.memory
+ state.stats[containerId].network = stats.network
+ })
+ },
+})
+
+const { actions: syncActions } = containersSlice
+export const actions = {
+ start,
+ startRecipe,
+ stop,
+ stopRecipe,
+ stopByType,
+ restart,
+ ...syncActions,
+}
+
+export default containersSlice.reducer
diff --git a/applications/launchpad/gui-react/src/store/containers/selectors.test.ts b/applications/launchpad/gui-react/src/store/containers/selectors.test.ts
new file mode 100644
index 0000000000..8d757106e6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/containers/selectors.test.ts
@@ -0,0 +1,243 @@
+import { RootState } from '../'
+
+import { ContainerStatusDto, Container, SystemEventAction } from './types'
+import { selectContainerStatus } from './selectors'
+
+describe('containers/selectors', () => {
+ it('should return default state for container if no container of that containerName is present', () => {
+ // given
+ const rootState = {
+ containers: {
+ errors: {},
+ pending: [],
+ containers: {},
+ },
+ } as unknown as RootState
+ const expected = {
+ id: '',
+ containerName: Container.Tor,
+ running: false,
+ pending: false,
+ }
+
+ // when
+ const selected = selectContainerStatus(Container.Tor)(rootState)
+
+ // then
+ expect(JSON.stringify(selected)).toBe(JSON.stringify(expected)) // need to check this way because of unsubscribe function
+ })
+
+ it('should indicate pending status of service', () => {
+ // given
+ const rootState = {
+ containers: {
+ errors: {},
+ pending: [Container.Tor],
+ containers: {},
+ },
+ } as unknown as RootState
+ const expected = {
+ id: '',
+ containerName: Container.Tor,
+ running: false,
+ pending: true,
+ }
+
+ // when
+ const selected = selectContainerStatus(Container.Tor)(rootState)
+
+ // then
+ expect(JSON.stringify(selected)).toBe(JSON.stringify(expected)) // need to check this way because of unsubscribe function
+ })
+
+ it('should return container by containerName', () => {
+ // given
+ const rootState = {
+ containers: {
+ errors: {},
+ pending: [],
+ containers: {
+ containerId: {
+ name: Container.Tor,
+ status: SystemEventAction.Start,
+ },
+ },
+ },
+ } as unknown as RootState
+ const expected = {
+ id: 'containerId',
+ status: SystemEventAction.Start,
+ containerName: Container.Tor,
+ error: undefined,
+ running: true,
+ pending: false,
+ }
+
+ // when
+ const selected = selectContainerStatus(Container.Tor)(
+ rootState,
+ ) as ContainerStatusDto
+
+ // then
+ expect(selected).toStrictEqual(expected) // need to check this way because of unsubscribe function
+ })
+
+ it('should return prioritize local error over container-type-errors', () => {
+ // given
+ const containerError = { some: 'error' }
+ const containerTypeError = { some: 'other error' }
+ const rootState = {
+ containers: {
+ errors: {
+ [Container.Tor]: containerTypeError,
+ },
+ pending: [],
+ containers: {
+ containerId: {
+ name: Container.Tor,
+ error: containerError,
+ status: SystemEventAction.Start,
+ },
+ },
+ },
+ } as unknown as RootState
+
+ // when
+ const selectedContainer = selectContainerStatus(Container.Tor)(
+ rootState,
+ ) as ContainerStatusDto
+
+ // then
+ expect(selectedContainer.error).toBe(containerError)
+ })
+
+ it('should return container by containerName with error if present', () => {
+ // given
+ const containerTypeError = { some: 'error' }
+ const rootState = {
+ containers: {
+ errors: {
+ [Container.Tor]: containerTypeError,
+ },
+ pending: [],
+ containers: {
+ containerId: {
+ name: Container.Tor,
+ status: SystemEventAction.Start,
+ },
+ },
+ },
+ } as unknown as RootState
+
+ // when
+ const selectedContainer = selectContainerStatus(Container.Tor)(
+ rootState,
+ ) as ContainerStatusDto
+
+ // then
+ expect(selectedContainer.error).toBe(containerTypeError)
+ })
+
+ const runningIndicationTestcases = [
+ [SystemEventAction.Start, true],
+ [SystemEventAction.Destroy, false],
+ [SystemEventAction.Die, false],
+ ['something else', false],
+ ]
+ runningIndicationTestcases.forEach(([status, expected]) =>
+ it(`should return running=${expected} for status "${status}"`, () => {
+ // given
+ const rootState = {
+ containers: {
+ errors: {},
+ pending: [],
+ containers: {
+ containerId: {
+ name: Container.Tor,
+ status: status,
+ },
+ },
+ },
+ } as unknown as RootState
+
+ // when
+ const selected = selectContainerStatus(Container.Tor)(
+ rootState,
+ ) as ContainerStatusDto
+
+ // then
+ expect(selected.running).toBe(expected)
+ }),
+ )
+
+ it('should return container with biggest timestamp value if multiple containers of the same containerName are present', () => {
+ // given
+ const rootState = {
+ containers: {
+ errors: {},
+ pending: [],
+ containers: {
+ containerId: {
+ timestamp: 0,
+ name: Container.Tor,
+ status: SystemEventAction.Start,
+ },
+ anotherContainerId: {
+ timestamp: 1,
+ name: Container.Tor,
+ status: SystemEventAction.Start,
+ },
+ },
+ },
+ } as unknown as RootState
+ const expected = {
+ id: 'anotherContainerId',
+ timestamp: 1,
+ status: SystemEventAction.Start,
+ containerName: Container.Tor,
+ error: undefined,
+ running: true,
+ pending: false,
+ }
+
+ // when
+ const selected = selectContainerStatus(Container.Tor)(
+ rootState,
+ ) as ContainerStatusDto
+
+ // then
+ expect(selected).toStrictEqual(expected) // need to check this way because of unsubscribe function
+ })
+
+ it('should return container other than Start or Destroy as pending', () => {
+ // given
+ const rootState = {
+ containers: {
+ errors: {},
+ pending: [],
+ containers: {
+ containerId: {
+ name: Container.Tor,
+ status: SystemEventAction.Create,
+ },
+ },
+ },
+ } as unknown as RootState
+ const expected = {
+ id: 'containerId',
+ containerName: Container.Tor,
+ status: SystemEventAction.Create,
+ error: undefined,
+ running: false,
+ pending: true,
+ }
+
+ // when
+ const selected = selectContainerStatus(Container.Tor)(
+ rootState,
+ ) as ContainerStatusDto
+
+ // then
+ expect(selected).toStrictEqual(expected) // need to check this way because of unsubscribe function
+ })
+})
diff --git a/applications/launchpad/gui-react/src/store/containers/selectors.ts b/applications/launchpad/gui-react/src/store/containers/selectors.ts
new file mode 100644
index 0000000000..904fb6fa02
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/containers/selectors.ts
@@ -0,0 +1,157 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+import { RootState } from '../'
+import { ContainerName } from '../../types/general'
+import { selectDockerImages, selectRecipe } from '../dockerImages/selectors'
+
+import {
+ ContainerStatusDto,
+ Container,
+ SystemEventAction,
+ ContainerStatusDtoWithStats,
+} from './types'
+
+export const selectState = (rootState: RootState) => rootState.containers
+
+export const selectContainer = (c: ContainerName) => (r: RootState) => {
+ const containers = Object.entries(r.containers.containers).filter(
+ ([, value]) => value.name === c,
+ )
+ containers.sort(([, a], [, b]) => b.timestamp - a.timestamp)
+ const [containerId, containerStatus] = containers[0] || []
+
+ return { containerId, containerStatus }
+}
+
+export const selectContainerError = (c: ContainerName) => (r: RootState) => {
+ return r.containers.errors[c]
+}
+
+const selectContainerStats = (containerId: string) => (r: RootState) =>
+ r.containers.stats[containerId]
+
+type ContainerStatusSelector = (
+ c: ContainerName,
+) => (r: RootState) => ContainerStatusDto
+export const selectContainerStatus: ContainerStatusSelector =
+ containerName => rootState => {
+ const { containerId, containerStatus } =
+ selectContainer(containerName)(rootState)
+
+ const pending =
+ rootState.containers.pending.includes(containerName) ||
+ rootState.containers.pending.includes(containerId)
+
+ const typeError = rootState.containers.errors[containerName]
+
+ if (!containerId) {
+ return {
+ id: '',
+ containerName,
+ error: typeError,
+ running: false,
+ pending,
+ }
+ }
+
+ const { name: _, ...containerStatusWithoutName } = containerStatus
+ return {
+ ...containerStatusWithoutName,
+ id: containerId,
+ pending:
+ pending ||
+ (containerStatus.status !== SystemEventAction.Start &&
+ containerStatus.status !== SystemEventAction.Destroy &&
+ containerStatus.status !== SystemEventAction.Die),
+ running: containerStatus.status === SystemEventAction.Start,
+ containerName,
+ error: containerStatus.error || typeError,
+ }
+ }
+
+type ContainerStatusSelectorWithStats = (
+ c: ContainerName,
+) => (r: RootState) => ContainerStatusDtoWithStats
+export const selectContainerStatusWithStats: ContainerStatusSelectorWithStats =
+ containerName => rootState => {
+ const container = selectContainerStatus(containerName)(rootState)
+
+ if (!container.id) {
+ return {
+ ...container,
+ stats: {
+ cpu: 0,
+ memory: 0,
+ network: {
+ download: 0,
+ upload: 0,
+ },
+ timestamp: '',
+ unsubscribe: () => undefined,
+ },
+ }
+ }
+
+ const containerStats = selectContainerStats(container.id)(rootState)
+
+ return {
+ ...container,
+ stats: containerStats,
+ }
+ }
+
+export const selectRunningContainers = (rootState: RootState): Container[] =>
+ Object.entries(rootState.containers.containers)
+ .map(([, containerStatus]) =>
+ selectContainerStatus(containerStatus.name as Container)(rootState),
+ )
+ .filter(status => status.running)
+ .map(status => rootState.containers.containers[status.id].name as Container)
+
+export const selectContainersStatusesWithStats = createSelector(
+ selectDockerImages,
+ (rootState: RootState) => rootState,
+ (dockerImages, rootState) =>
+ dockerImages.map(dockerImage => ({
+ ...dockerImage,
+ container: dockerImage.containerName,
+ status: selectContainerStatusWithStats(dockerImage.containerName)(
+ rootState,
+ ),
+ })),
+)
+
+const selectContainerStatusesByRecipe =
+ (containerName: ContainerName) => (rootState: RootState) => {
+ const recipe = selectRecipe(containerName)(rootState)
+ return recipe.map(containerType =>
+ selectContainerStatus(containerType)(rootState),
+ )
+ }
+
+export const selectRecipeRunning = (containerName: ContainerName) =>
+ createSelector(
+ selectContainerStatusesByRecipe(containerName),
+ containers =>
+ containers.every(container => container.running) ||
+ containers.some(container => container.running && container.pending),
+ )
+
+export const selectRecipePending = (containerName: ContainerName) =>
+ createSelector(selectContainerStatusesByRecipe(containerName), containers =>
+ containers.some(container => container.pending),
+ )
+
+export const selectAllContainerEventsChannels = (rootState: RootState) =>
+ Object.values(rootState.containers.containers)
+ .map(container => ({
+ status: selectContainerStatus(container.name as Container)(rootState),
+ container,
+ }))
+ .filter(
+ ({ container, status }) => container.eventsChannel && status.running,
+ )
+ .map(({ container }) => ({
+ service: container.name,
+ eventsChannel: container.eventsChannel,
+ }))
diff --git a/applications/launchpad/gui-react/src/store/containers/thunks.test.ts b/applications/launchpad/gui-react/src/store/containers/thunks.test.ts
new file mode 100644
index 0000000000..997ec5bab5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/containers/thunks.test.ts
@@ -0,0 +1,121 @@
+import { RootState } from '..'
+
+import { addStats } from './thunks'
+import { SystemEventAction, Container } from './types'
+
+describe('containers/thunks', () => {
+ describe('containers/stats', () => {
+ const standardTimestamp = '2022-05-23T12:13:14.000Z'
+ const standardStats = (read = standardTimestamp) => ({
+ read,
+ precpu_stats: {
+ cpu_usage: {
+ total_usage: 1,
+ },
+ system_cpu_usage: 1,
+ },
+ cpu_stats: {
+ cpu_usage: {
+ total_usage: 3,
+ },
+ system_cpu_usage: 5,
+ online_cpus: 1,
+ },
+ memory_stats: {
+ usage: 1024 * 1024,
+ stats: {},
+ },
+ networks: {
+ eth0: {
+ tx_bytes: 17,
+ rx_bytes: 13,
+ },
+ eth1: {
+ tx_bytes: 17,
+ rx_bytes: 13,
+ },
+ },
+ })
+ const expectedFromStandardStats = () => ({
+ cpu: 50,
+ memory: 1,
+ network: {
+ upload: 34,
+ download: 26,
+ },
+ })
+
+ it('should return stats to be saved in state', async () => {
+ // given
+ const expectedNetwork = 'someNetwork'
+ const expectedContainerId = 'someContainerId'
+ const getState = () =>
+ ({
+ baseNode: {
+ network: expectedNetwork,
+ },
+ containers: {
+ statsHistory: [],
+ pending: [],
+ containers: {
+ [expectedContainerId]: {
+ status: SystemEventAction.Start,
+ },
+ },
+ stats: {
+ [expectedContainerId]: {
+ cpu: 0,
+ memory: 0,
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = addStats({
+ containerId: expectedContainerId,
+ container: Container.Tor,
+ stats: standardStats(),
+ })
+ const result = await action(() => null, getState, undefined)
+
+ // then
+ expect(result.type.endsWith('/fulfilled')).toBe(true)
+ expect(result.payload).toMatchObject({
+ containerId: expectedContainerId,
+ stats: expectedFromStandardStats(),
+ })
+ })
+
+ it('should reject if stats for containerId do not exist yet', async () => {
+ // given
+ const getState = () =>
+ ({
+ baseNode: {
+ network: 'dibbler',
+ },
+ containers: {
+ statsHistory: [],
+ pending: [],
+ containers: {
+ someContainerId: {
+ status: SystemEventAction.Start,
+ },
+ },
+ stats: {},
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = addStats({
+ containerId: 'someContainerId',
+ container: Container.Tor,
+ stats: standardStats(),
+ })
+ const result = await action(() => null, getState, undefined)
+
+ // then
+ expect(result.type.endsWith('/rejected')).toBe(true)
+ })
+ })
+})
diff --git a/applications/launchpad/gui-react/src/store/containers/thunks.ts b/applications/launchpad/gui-react/src/store/containers/thunks.ts
new file mode 100644
index 0000000000..7c14468aa8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/containers/thunks.ts
@@ -0,0 +1,279 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { invoke } from '@tauri-apps/api/tauri'
+import type { UnlistenFn } from '@tauri-apps/api/event'
+import { listen } from '@tauri-apps/api/event'
+
+import type { RootState } from '../'
+import { selectServiceSettings } from '../settings/selectors'
+import { selectNetwork } from '../baseNode/selectors'
+import { selectContainerStatus } from '../containers/selectors'
+import { ContainerStatusDto } from '../containers/types'
+import { selectRecipe } from '../dockerImages/selectors'
+import { startOfSecond } from '../../utils/Date'
+import getStatsRepository from '../../persistence/statsRepository'
+import { ContainerName } from '../../types/general'
+
+import {
+ StatsEventPayload,
+ ContainerId,
+ Container,
+ ServiceDescriptor,
+ SerializableContainerStats,
+} from './types'
+import { selectContainer, selectRunningContainers } from './selectors'
+
+export const persistStats = createAsyncThunk<
+ void,
+ {
+ container: ContainerName
+ timestamp: string
+ stats: SerializableContainerStats
+ },
+ { state: RootState }
+>('containers/persistStats', async (payload, thunkApi) => {
+ const { container, timestamp, stats } = payload
+
+ const rootState = thunkApi.getState()
+ const configuredNetwork = selectNetwork(rootState)
+
+ const repository = getStatsRepository()
+ await repository.add(configuredNetwork, container, timestamp, stats)
+})
+
+export const extractStatsFromEvent = (
+ stats: StatsEventPayload,
+): SerializableContainerStats & { timestamp: string } => {
+ const secondTimestamp = startOfSecond(new Date(stats.read)).toISOString()
+
+ const cs = stats.cpu_stats
+ const pcs = stats.precpu_stats
+ const cpu_delta = cs.cpu_usage.total_usage - pcs.cpu_usage.total_usage
+ const system_cpu_delta = cs.system_cpu_usage - pcs.system_cpu_usage
+ const numCpu = cs.online_cpus
+ const cpu = (cpu_delta / system_cpu_delta) * numCpu * 100.0
+
+ const ms = stats.memory_stats
+ const memory = (ms.usage - (ms.stats.cache || 0)) / (1024 * 1024)
+ const network = Object.values(stats.networks).reduce(
+ (accu, current) => ({
+ upload: accu.upload + current.tx_bytes,
+ download: accu.download + current.rx_bytes,
+ }),
+ { upload: 0, download: 0 },
+ )
+
+ return {
+ cpu,
+ memory,
+ network,
+ timestamp: secondTimestamp,
+ }
+}
+
+export const addStats = createAsyncThunk<
+ {
+ containerId: ContainerId
+ stats: SerializableContainerStats
+ },
+ {
+ containerId: ContainerId
+ container: ContainerName
+ stats: StatsEventPayload
+ },
+ { state: RootState }
+>('containers/stats', async (payload, thunkApi) => {
+ const { stats, containerId, container } = payload
+ const rootState = thunkApi.getState()
+
+ if (!rootState.containers.stats || !rootState.containers.stats[containerId]) {
+ throw new Error('stats for this container dont exist yet')
+ }
+
+ const currentStats = extractStatsFromEvent(stats)
+ thunkApi.dispatch(
+ persistStats({
+ container,
+ timestamp: currentStats.timestamp,
+ stats: currentStats,
+ }),
+ )
+
+ return {
+ containerId,
+ stats: currentStats,
+ }
+})
+
+export const start = createAsyncThunk<
+ {
+ id: ContainerId
+ containerEventsChannel: string
+ unsubscribeStats: UnlistenFn
+ },
+ { container: ContainerName },
+ { state: RootState }
+>('containers/start', async ({ container }, thunkApi) => {
+ try {
+ const rootState = thunkApi.getState()
+ const settings = selectServiceSettings(rootState)
+
+ const descriptor: ServiceDescriptor = await invoke('start_service', {
+ serviceName: container,
+ settings,
+ })
+
+ const unsubscribe = await listen(
+ descriptor.statsEventsName,
+ (statsEvent: { payload: StatsEventPayload }) => {
+ thunkApi.dispatch(
+ addStats({
+ containerId: descriptor.id,
+ container,
+ stats: statsEvent.payload,
+ }),
+ )
+ },
+ )
+
+ return {
+ id: descriptor.id,
+ containerEventsChannel: descriptor.statsEventsName,
+ unsubscribeStats: unsubscribe,
+ }
+ } catch (error) {
+ return thunkApi.rejectWithValue(error)
+ }
+})
+
+export const startRecipe = createAsyncThunk<
+ void,
+ { containerName: ContainerName },
+ { state: RootState }
+>('containers/startRecipe', async ({ containerName }, thunkApi) => {
+ try {
+ const rootState = thunkApi.getState()
+ const recipe = selectRecipe(containerName)(rootState)
+
+ const recipePromises = [...recipe]
+ .reverse()
+ .map(part => {
+ const status = selectContainerStatus(part)(rootState)
+ if (!status.running && !status.pending) {
+ return thunkApi.dispatch(start({ container: part })).unwrap()
+ }
+
+ return false
+ })
+ .filter(Boolean)
+
+ await Promise.all(recipePromises)
+ } catch (e) {
+ return thunkApi.rejectWithValue(e)
+ }
+})
+
+export const stop = createAsyncThunk(
+ 'containers/stop',
+ async (containerId, thunkApi) => {
+ try {
+ const rootState = thunkApi.getState()
+ const containerStatus = rootState.containers.containers[containerId]
+ const containerStats = rootState.containers.stats[containerId]
+
+ containerStats.unsubscribe()
+ await invoke('stop_service', {
+ serviceName: (containerStatus.name || '').toString(),
+ })
+ } catch (error) {
+ return thunkApi.rejectWithValue(error)
+ }
+ },
+)
+
+export const stopRecipe = createAsyncThunk<
+ void,
+ ContainerName,
+ { state: RootState }
+>('containers/stopRecipe', async (containerName, thunkApi) => {
+ try {
+ const rootState = thunkApi.getState()
+ const recipe = selectRecipe(containerName)(rootState)
+
+ const runningContainers = selectRunningContainers(rootState)
+ const containersOutsideRecipe = runningContainers.filter(
+ rc => !recipe.includes(rc),
+ )
+ const containersToRemoveFromOtherServicesRecipes = containersOutsideRecipe
+ .reduce((accu, current) => {
+ const currentRecipe = selectRecipe(current)(rootState)
+
+ const dependedOnAnythingInRecipe = currentRecipe.some(cr =>
+ recipe.includes(cr),
+ )
+ if (dependedOnAnythingInRecipe) {
+ return [...accu, ...currentRecipe]
+ }
+
+ return accu
+ }, [] as ContainerName[])
+ .map(part => selectContainerStatus(part)(rootState))
+ const currentRecipeContainers = recipe.map(part =>
+ selectContainerStatus(part)(rootState),
+ )
+
+ const deduplicatedContainersToRemove = new Set([
+ ...containersToRemoveFromOtherServicesRecipes,
+ ...currentRecipeContainers,
+ ])
+
+ Array.from(deduplicatedContainersToRemove.values()).forEach(
+ (toRemove: ContainerStatusDto) => thunkApi.dispatch(stop(toRemove.id)),
+ )
+ } catch (e) {
+ return thunkApi.rejectWithValue(e)
+ }
+})
+
+export const stopByType = createAsyncThunk<
+ void,
+ Container,
+ { state: RootState }
+>('containers/stopByType', async (containerName, thunkApi) => {
+ try {
+ const rootState = thunkApi.getState()
+ const container = selectContainer(containerName)(rootState)
+
+ if (container && container.containerId) {
+ await thunkApi.dispatch(stop(container.containerId))
+ }
+ } catch (error) {
+ return thunkApi.rejectWithValue(error)
+ }
+})
+
+export const restart = createAsyncThunk(
+ 'containers/restart',
+ async (_, thunkApi) => {
+ try {
+ const { dispatch } = thunkApi
+ const rootState = thunkApi.getState()
+ const runningContainers = selectRunningContainers(rootState)
+
+ // Stop all containers first:
+ const stopPromises = runningContainers.map(c => {
+ return dispatch(stopByType(c))
+ })
+
+ await Promise.all(stopPromises)
+
+ // Start containers:
+ const startPromises = runningContainers.map(c => {
+ return dispatch(start({ container: c }))
+ })
+
+ await Promise.all(startPromises)
+ } catch (error) {
+ return thunkApi.rejectWithValue(error)
+ }
+ },
+)
diff --git a/applications/launchpad/gui-react/src/store/containers/types.ts b/applications/launchpad/gui-react/src/store/containers/types.ts
new file mode 100644
index 0000000000..22049498bc
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/containers/types.ts
@@ -0,0 +1,109 @@
+import type { UnlistenFn } from '@tauri-apps/api/event'
+
+import { ContainerName } from '../../types/general'
+
+export type ContainerId = string
+
+// WARNING - be careful about using this directly,
+// you should be using dockerImages.images from state if you work with docker images etc
+// this *couples fronted to backend* with container_name in backend/src/docker/models.rs
+export enum Container {
+ Tor = 'tor',
+ BaseNode = 'base_node',
+ Wallet = 'wallet',
+ SHA3Miner = 'sha3_miner',
+ MMProxy = 'mm_proxy',
+ XMrig = 'xmrig',
+ Monerod = 'monerod',
+ Loki = 'loki',
+ Promtail = 'promtail',
+ Grafana = 'grafana',
+}
+
+export enum SystemEventAction {
+ Destroy = 'destroy',
+ Create = 'create',
+ Start = 'start',
+ Die = 'die',
+}
+
+export type ServiceDescriptor = {
+ id: ContainerId
+ logEventsName: string
+ statsEventsName: string
+ name: string
+}
+
+export type ContainerStats = {
+ cpu: number
+ memory: number
+ network: {
+ upload: number
+ download: number
+ }
+ unsubscribe: UnlistenFn
+}
+export type SerializableContainerStats = Omit
+
+export type ContainerStatus = {
+ status: SystemEventAction
+ timestamp: number
+ name?: string
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ error?: any
+ exitCode?: number
+ eventsChannel?: string
+}
+
+export type ContainerStatusDto = {
+ id: ContainerId
+ containerName: ContainerName
+ running: boolean
+ pending: boolean
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ error?: any
+}
+
+export type ContainerStatusDtoWithStats = ContainerStatusDto & {
+ stats: ContainerStats
+}
+
+export type ContainerStateFields = Pick<
+ ContainerStatusDto,
+ 'running' | 'pending' | 'error'
+>
+
+export type ContainerStateFieldsWithIdAndType = ContainerStateFields &
+ Pick
+
+export type ContainersState = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ errors: Record
+ pending: Array
+ containers: Record
+ stats: Record
+}
+
+export interface StatsEventPayload {
+ read: string
+ precpu_stats: {
+ cpu_usage: {
+ total_usage: number
+ }
+ system_cpu_usage: number
+ }
+ cpu_stats: {
+ cpu_usage: {
+ total_usage: number
+ }
+ system_cpu_usage: number
+ online_cpus: number
+ }
+ memory_stats: {
+ usage: number
+ stats: {
+ cache?: number
+ }
+ }
+ networks: Record
+}
diff --git a/applications/launchpad/gui-react/src/store/credentials/index.ts b/applications/launchpad/gui-react/src/store/credentials/index.ts
new file mode 100644
index 0000000000..c5d4a4f6fb
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/credentials/index.ts
@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { CredentialsState } from './types'
+
+export const initialState: CredentialsState = {}
+
+const credentialsSlice = createSlice({
+ name: 'credentials',
+ initialState,
+ reducers: {
+ setWallet(state, { payload: wallet }: { payload: string }) {
+ state.wallet = wallet
+ },
+ setMoneroCredentials(
+ state,
+ action: PayloadAction<{ username: string; password: string }>,
+ ) {
+ state.monero = action.payload
+ },
+ },
+})
+
+export const { actions } = credentialsSlice
+
+export default credentialsSlice.reducer
diff --git a/applications/launchpad/gui-react/src/store/credentials/selectors.ts b/applications/launchpad/gui-react/src/store/credentials/selectors.ts
new file mode 100644
index 0000000000..2c2460a751
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/credentials/selectors.ts
@@ -0,0 +1,21 @@
+import { createSelector } from '@reduxjs/toolkit'
+import { RootState } from '../'
+
+export const selectWallet = ({ credentials }: RootState) =>
+ credentials.wallet || ''
+export const selectMoneroUsername = ({ credentials }: RootState) =>
+ credentials.monero?.username || ''
+export const selectMoneroPassword = ({ credentials }: RootState) =>
+ credentials.monero?.password || ''
+
+export const selectIsParoleSet = createSelector(selectWallet, wallet =>
+ Boolean(wallet),
+)
+
+export const selectAreMoneroCredentialsPresent = createSelector(
+ selectMoneroUsername,
+ selectMoneroPassword,
+ (username, password) => {
+ return Boolean(username && password)
+ },
+)
diff --git a/applications/launchpad/gui-react/src/store/credentials/types.ts b/applications/launchpad/gui-react/src/store/credentials/types.ts
new file mode 100644
index 0000000000..7eb9923ae3
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/credentials/types.ts
@@ -0,0 +1,7 @@
+export type CredentialsState = {
+ wallet?: string
+ monero?: {
+ username?: string
+ password?: string
+ }
+}
diff --git a/applications/launchpad/gui-react/src/store/dockerImages/index.ts b/applications/launchpad/gui-react/src/store/dockerImages/index.ts
new file mode 100644
index 0000000000..40b379ba2c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/dockerImages/index.ts
@@ -0,0 +1,193 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { DockerImagesState } from './types'
+import { getDockerImageList, pullImage, pullImages } from './thunks'
+
+import t from '../../locales'
+import { DockerImage } from '../../types/general'
+
+import AppConfig from '../../config/app'
+
+export const initialState: DockerImagesState = {
+ loaded: false,
+ images: [],
+ recipes: {},
+ downloadWithTBot: [],
+ dismissedDownloads: [],
+}
+
+const slice = createSlice({
+ name: 'dockerImages',
+ initialState,
+ reducers: {
+ setProgress(
+ state,
+ {
+ payload,
+ }: {
+ payload: {
+ dockerImage: string
+ error?: string
+ progress?: string
+ status?: string
+ }
+ },
+ ) {
+ const imageIdx = state.images.findIndex(
+ img => img.dockerImage === payload.dockerImage,
+ )
+
+ if (imageIdx < 0) {
+ return
+ }
+
+ const isCompleted = Boolean(
+ payload.status?.toLowerCase().includes('image is up to date') ||
+ payload.status?.toLowerCase().includes('downloaded newer image'),
+ )
+
+ const isError = payload.error
+
+ state.images[imageIdx].updated = isCompleted
+ state.images[imageIdx].pending = !isCompleted && !isError
+ state.images[imageIdx].error = isError || state.images[imageIdx].error
+ state.images[imageIdx].progress =
+ payload.progress === undefined
+ ? state.images[imageIdx].progress
+ : payload.progress
+ state.images[imageIdx].status =
+ payload.status || state.images[imageIdx].status
+ },
+ pushToTBotQueue(state, { payload }: { payload: DockerImage }) {
+ if (
+ state.dismissedDownloads?.find(
+ t =>
+ t.containerName === payload.containerName &&
+ new Date().getTime() - t.dismissedAt <
+ AppConfig.dockerDownloadDismissValidFor,
+ )
+ ) {
+ return
+ }
+
+ if (!state.downloadWithTBot) {
+ state.downloadWithTBot = [payload]
+ }
+
+ if (
+ state.downloadWithTBot.find(
+ i => i.containerName === payload.containerName,
+ )
+ ) {
+ return
+ }
+
+ state.downloadWithTBot = state.downloadWithTBot.concat([payload])
+ },
+ removeFromTBotQueue(
+ state,
+ { payload }: { payload: { image: DockerImage; dismiss: boolean } },
+ ) {
+ if (!state.downloadWithTBot || state.downloadWithTBot.length === 0) {
+ return
+ }
+
+ if (payload.dismiss) {
+ const dIdx = state.dismissedDownloads
+ ? state.dismissedDownloads?.findIndex(
+ i => i.containerName === payload.image.containerName,
+ )
+ : -1
+ if (dIdx > -1) {
+ state.dismissedDownloads[dIdx].dismissedAt = new Date().getTime()
+ } else {
+ if (!state.dismissedDownloads) {
+ state.dismissedDownloads = [
+ {
+ containerName: payload.image.containerName,
+ dismissedAt: new Date().getTime(),
+ },
+ ]
+ } else {
+ state.dismissedDownloads = state.dismissedDownloads.concat([
+ {
+ containerName: payload.image.containerName,
+ dismissedAt: new Date().getTime(),
+ },
+ ])
+ }
+ }
+ }
+
+ state.downloadWithTBot = state.downloadWithTBot.filter(
+ i => i.containerName !== payload.image.containerName,
+ )
+ },
+ },
+ extraReducers: builder => {
+ builder.addCase(getDockerImageList.pending, state => {
+ state.loaded = false
+ })
+ builder.addCase(getDockerImageList.fulfilled, (state, action) => {
+ state.loaded = true
+ const { images, recipes } = action.payload
+ state.images = images
+ state.recipes = recipes.reduce(
+ (accu, current) => ({
+ ...accu,
+ [current[0]]: current,
+ }),
+ {},
+ )
+ })
+ builder.addCase(pullImage.pending, (state, payload) => {
+ const imageIdx = state.images.findIndex(
+ img => img.containerName === payload.meta.arg.dockerImage,
+ )
+
+ if (imageIdx > -1) {
+ state.images[imageIdx].pending = true
+ }
+ })
+ builder.addCase(pullImage.fulfilled, (state, action) => {
+ const imageIdx = state.images.findIndex(
+ img => img.containerName === action.payload.dockerImage,
+ )
+
+ if (imageIdx > -1) {
+ state.images[imageIdx].pending = true
+ state.images[imageIdx].updated = false
+ state.images[imageIdx].error = undefined
+ state.images[imageIdx].status = 'Starting...'
+ state.images[imageIdx].progress = ''
+ }
+ })
+ builder.addCase(pullImage.rejected, (state, action) => {
+ const dockerContainer = action.meta.arg.dockerImage
+
+ const imageIdx = state.images.findIndex(
+ img => img.containerName === dockerContainer,
+ )
+
+ if (imageIdx > -1) {
+ state.images[imageIdx].pending = false
+ state.images[imageIdx].updated = false
+ state.images[imageIdx].error =
+ (action.payload as Error | undefined)?.toString() ||
+ t.common.phrases.somethingWentWrong
+ state.images[imageIdx].status = 'Error'
+ state.images[imageIdx].progress = ''
+ }
+ })
+ },
+})
+
+export const actions = {
+ ...slice.actions,
+ getDockerImageList,
+ pullImage,
+ pullImages,
+}
+
+const reducer = slice.reducer
+export default reducer
diff --git a/applications/launchpad/gui-react/src/store/dockerImages/selectors.ts b/applications/launchpad/gui-react/src/store/dockerImages/selectors.ts
new file mode 100644
index 0000000000..3df6996e88
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/dockerImages/selectors.ts
@@ -0,0 +1,16 @@
+import { ContainerName } from '../../types/general'
+import { RootState } from '../'
+
+export const selectDockerImages = ({ dockerImages }: RootState) =>
+ dockerImages.images
+
+export const selectDockerImagesLoading = ({ dockerImages }: RootState) =>
+ !dockerImages.loaded
+
+export const selectRecipe =
+ (container: ContainerName) =>
+ ({ dockerImages }: RootState) =>
+ dockerImages.recipes[container] || [container]
+
+export const selectDockerTBotQueue = ({ dockerImages }: RootState) =>
+ dockerImages.downloadWithTBot
diff --git a/applications/launchpad/gui-react/src/store/dockerImages/thunks.ts b/applications/launchpad/gui-react/src/store/dockerImages/thunks.ts
new file mode 100644
index 0000000000..47c985592a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/dockerImages/thunks.ts
@@ -0,0 +1,57 @@
+import { selectServiceSettings } from './../settings/selectors'
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { invoke } from '@tauri-apps/api/tauri'
+
+import { RootState } from '../'
+import { DockerImage, ServiceRecipe } from '../../types/general'
+
+export const getDockerImageList = createAsyncThunk<
+ { images: DockerImage[]; recipes: ServiceRecipe[] },
+ void,
+ { state: RootState }
+>('dockerImages/getDockerImageList', async (_, thunkApi) => {
+ try {
+ const state = thunkApi.getState()
+ const settings = selectServiceSettings(state)
+
+ const result = await invoke<{
+ imageInfo: DockerImage[]
+ serviceRecipes: ServiceRecipe[]
+ }>('image_info', {
+ settings,
+ })
+
+ /**
+ * @TODO remove `updated: false` after the backend starts returning correct value
+ */
+ return {
+ images: result.imageInfo.map(img => ({ ...img, updated: false })),
+ recipes: result.serviceRecipes,
+ }
+ } catch (e) {
+ return thunkApi.rejectWithValue(e)
+ }
+})
+
+export const pullImages = createAsyncThunk(
+ 'dockerImages/pullImages',
+ async (_, thunkApi) => {
+ thunkApi.getState().dockerImages.images.map(image => {
+ thunkApi.dispatch(pullImage({ dockerImage: image.containerName }))
+ })
+ },
+)
+
+export const pullImage = createAsyncThunk<
+ { dockerImage: string },
+ { dockerImage: string },
+ { state: RootState }
+>('dockerImages/pullImage', async ({ dockerImage }, thunkApi) => {
+ try {
+ invoke('pull_image', { imageName: dockerImage })
+
+ return { dockerImage }
+ } catch (e) {
+ return thunkApi.rejectWithValue(e)
+ }
+})
diff --git a/applications/launchpad/gui-react/src/store/dockerImages/types.ts b/applications/launchpad/gui-react/src/store/dockerImages/types.ts
new file mode 100644
index 0000000000..dc64fa3969
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/dockerImages/types.ts
@@ -0,0 +1,14 @@
+import { DockerImage, ContainerName, ServiceRecipe } from '../../types/general'
+
+export type Recipes = Record
+
+export type DockerImagesState = {
+ loaded: boolean
+ images: DockerImage[]
+ recipes: Recipes
+ downloadWithTBot: DockerImage[]
+ dismissedDownloads: {
+ dismissedAt: number // Date as integer [ms]
+ containerName: ContainerName
+ }[]
+}
diff --git a/applications/launchpad/gui-react/src/store/hooks.ts b/applications/launchpad/gui-react/src/store/hooks.ts
new file mode 100644
index 0000000000..2c6fc6e963
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+
+import type { RootState, AppDispatch } from './'
+
+export const useAppDispatch = () => useDispatch()
+export const useAppSelector: TypedUseSelectorHook = useSelector
diff --git a/applications/launchpad/gui-react/src/store/index.ts b/applications/launchpad/gui-react/src/store/index.ts
new file mode 100644
index 0000000000..2ec464bd9f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/index.ts
@@ -0,0 +1,59 @@
+import { combineReducers } from 'redux'
+import { configureStore } from '@reduxjs/toolkit'
+import { persistStore, persistReducer } from 'redux-persist'
+import storage from 'redux-persist/lib/storage'
+
+import appReducer from './app'
+import settingsReducer from './settings'
+import baseNodeReducer from './baseNode'
+import miningReducer from './mining'
+import walletReducer from './wallet'
+import containersReducer from './containers'
+import tbotReducer from './tbot'
+import dockerImagesReducer from './dockerImages'
+import credentialsReducer from './credentials'
+import temporaryReducer from './temporary'
+
+// exported for tests
+export const rootReducer = {
+ app: appReducer,
+ baseNode: baseNodeReducer,
+ mining: miningReducer,
+ wallet: walletReducer,
+ settings: settingsReducer,
+ containers: containersReducer,
+ tbot: tbotReducer,
+ dockerImages: dockerImagesReducer,
+ credentials: credentialsReducer,
+ temporary: temporaryReducer,
+}
+const reducer = combineReducers(rootReducer)
+
+const persistConfig = {
+ key: 'root',
+ storage,
+ blacklist: ['containers', 'credentials', 'temporary'],
+}
+
+const persistedReducer = persistReducer(persistConfig, reducer)
+
+export const store =
+ process.env.NODE_ENV === 'test'
+ ? configureStore({
+ reducer,
+ })
+ : configureStore({
+ reducer: persistedReducer,
+ middleware: getDefaultMiddleware => [
+ // Silent console errors about non-serializable data
+ ...getDefaultMiddleware({ serializableCheck: false }),
+ ],
+ })
+
+export const persistor = persistStore(store)
+
+export type RootState = ReturnType
+
+export const selectRootState = (rootState: RootState) => rootState
+
+export type AppDispatch = typeof store.dispatch
diff --git a/applications/launchpad/gui-react/src/store/mining/index.test.ts b/applications/launchpad/gui-react/src/store/mining/index.test.ts
new file mode 100644
index 0000000000..b530c4148f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/mining/index.test.ts
@@ -0,0 +1,136 @@
+import miningReducer from '.'
+import { MiningActionReason, MiningState } from './types'
+
+describe('Mining Redux slice', () => {
+ it('should set merged address', () => {
+ // given
+ const testAddress = 'testAddress'
+ const state: MiningState = {
+ notifications: [],
+ tari: {},
+ merged: {
+ address: undefined,
+ threads: 1,
+ useAuth: false,
+ },
+ }
+ const expected: MiningState = {
+ notifications: [],
+ tari: {},
+ merged: {
+ address: testAddress,
+ threads: 1,
+ useAuth: false,
+ },
+ }
+
+ // when
+ const nextState = miningReducer(state, {
+ type: 'mining/setMergedAddress',
+ payload: { address: testAddress },
+ })
+
+ // then
+ expect(nextState).toStrictEqual(expected)
+ })
+
+ it('should set merged config', () => {
+ // given
+ const testAddress = 'testAddress'
+ const testThreads = 3
+ const testUrls = [{ url: 'some-url-1' }, { url: 'some-url-2' }]
+
+ const state: MiningState = {
+ notifications: [],
+ tari: {},
+ merged: {
+ address: undefined,
+ threads: 1,
+ urls: [],
+ useAuth: false,
+ },
+ }
+ const expected: MiningState = {
+ tari: {},
+ notifications: [],
+ merged: {
+ address: testAddress,
+ threads: testThreads,
+ urls: testUrls,
+ useAuth: false,
+ },
+ }
+
+ // when
+ const nextState = miningReducer(state, {
+ type: 'mining/setMergedConfig',
+ payload: {
+ address: testAddress,
+ threads: testThreads,
+ urls: testUrls,
+ },
+ })
+
+ // then
+ expect(nextState).toStrictEqual(expected)
+ })
+
+ it('should add amount to the Tari session', () => {
+ // given
+ const state: MiningState = {
+ tari: {
+ session: {
+ total: {
+ xtr: 0,
+ },
+ history: [],
+ reason: MiningActionReason.Manual,
+ },
+ },
+ merged: {
+ address: undefined,
+ threads: 1,
+ urls: [],
+ useAuth: false,
+ },
+ notifications: [],
+ }
+ const expected: MiningState = {
+ tari: {
+ session: {
+ total: {
+ xtr: 1000,
+ },
+ history: [
+ {
+ txId: 'tx-id',
+ amount: 1000,
+ },
+ ],
+ reason: MiningActionReason.Manual,
+ },
+ },
+ merged: {
+ address: undefined,
+ threads: 1,
+ urls: [],
+ useAuth: false,
+ },
+
+ notifications: [],
+ }
+
+ // when
+ const nextState = miningReducer(state, {
+ type: 'mining/addMinedTx/fulfilled',
+ payload: {
+ amount: 1000,
+ txId: 'tx-id',
+ node: 'tari',
+ },
+ })
+
+ // then
+ expect(nextState).toStrictEqual(expected)
+ })
+})
diff --git a/applications/launchpad/gui-react/src/store/mining/index.ts b/applications/launchpad/gui-react/src/store/mining/index.ts
new file mode 100644
index 0000000000..01508d89ff
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/mining/index.ts
@@ -0,0 +1,151 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { v4 as uuidv4 } from 'uuid'
+
+import { MiningNodeType, ScheduleId } from '../../types/general'
+import MiningConfig from '../../config/mining'
+
+import {
+ startMiningNode,
+ stopMiningNode,
+ notifyUserAboutMinedTariBlock,
+ addMinedTx,
+} from './thunks'
+import { MiningState, MiningActionReason, MoneroUrl } from './types'
+
+const currencies: Record = {
+ tari: ['xtr'],
+ merged: ['xtr', 'xmr'],
+}
+
+export const initialState: MiningState = {
+ tari: {
+ session: undefined,
+ },
+ merged: {
+ threads: 1,
+ address: undefined,
+ urls: MiningConfig.defaultMoneroUrls.map(url => ({ url })),
+ useAuth: false,
+ session: undefined,
+ },
+ notifications: [],
+}
+
+const miningSlice = createSlice({
+ name: 'mining',
+ initialState,
+ reducers: {
+ startNewSession(
+ state,
+ action: PayloadAction<{
+ node: MiningNodeType
+ reason: MiningActionReason
+ schedule?: ScheduleId
+ }>,
+ ) {
+ const { node, reason, schedule } = action.payload
+ const total: Record = {}
+ currencies[node].forEach(c => {
+ total[c] = 0
+ })
+
+ state[node].session = {
+ id: uuidv4(),
+ startedAt: Number(Date.now()).toString(),
+ total,
+ reason,
+ schedule,
+ history: [],
+ }
+ },
+ stopSession(
+ state,
+ action: PayloadAction<{
+ node: MiningNodeType
+ reason: MiningActionReason
+ }>,
+ ) {
+ const { node, reason } = action.payload
+
+ const session = state[node].session
+ if (session) {
+ session.finishedAt = Number(Date.now()).toString()
+ session.reason = reason
+ }
+ },
+ setMergedAddress(state, action: PayloadAction<{ address: string }>) {
+ const { address } = action.payload
+ state.merged.address = address
+ },
+ setMergedConfig(
+ state,
+ action: PayloadAction<{
+ address?: string
+ threads?: number
+ urls?: MoneroUrl[]
+ authentication?: {
+ username?: string
+ password?: string
+ }
+ useAuth?: boolean
+ }>,
+ ) {
+ const safePayload = { ...action.payload }
+ delete safePayload['authentication']
+
+ state.merged = { ...state.merged, ...safePayload }
+ },
+ acknowledgeNotification(state) {
+ const [_head, ...notificationsLeft] = state.notifications
+ state.notifications = notificationsLeft
+ },
+ },
+ extraReducers: builder => {
+ builder.addCase(
+ notifyUserAboutMinedTariBlock.fulfilled,
+ (state, action) => {
+ const newNotification = {
+ ...action.meta.arg,
+ ...action.payload,
+ }
+
+ state.notifications = [...state.notifications, newNotification]
+ },
+ )
+
+ builder.addCase(addMinedTx.fulfilled, (state, action) => {
+ const node = action.payload.node
+ const session = state[node].session
+
+ if (!session) {
+ return
+ }
+
+ const nodeSessionTotal = state[node].session?.total?.xtr || 0
+
+ let total = session.total
+ if (!total) {
+ total = { xtr: 0 }
+ }
+
+ total.xtr = nodeSessionTotal + action.payload.amount
+
+ session.history.push({
+ txId: action.payload.txId,
+ amount: action.payload.amount,
+ })
+ })
+ },
+})
+
+const { actions: miningActions } = miningSlice
+
+export const actions = {
+ ...miningActions,
+ startMiningNode,
+ stopMiningNode,
+ notifyUserAboutMinedTariBlock,
+ addMinedTx,
+}
+
+export default miningSlice.reducer
diff --git a/applications/launchpad/gui-react/src/store/mining/selectors.test.ts b/applications/launchpad/gui-react/src/store/mining/selectors.test.ts
new file mode 100644
index 0000000000..cc3fa4637d
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/mining/selectors.test.ts
@@ -0,0 +1,26 @@
+import { RootState } from '../'
+
+import { selectMoneroUrls } from './selectors'
+
+describe('mining/selectors', () => {
+ it('should monero urls as string', () => {
+ // given
+ const rootState = {
+ mining: {
+ tari: {},
+ merged: {
+ threads: 1,
+ urls: [{ url: 'first-url' }, { url: 'second-url' }],
+ },
+ },
+ } as unknown as RootState
+
+ const expected = 'first-url,second-url'
+
+ // when
+ const selected = selectMoneroUrls(rootState)
+
+ // then
+ expect(selected).toBe(expected)
+ })
+})
diff --git a/applications/launchpad/gui-react/src/store/mining/selectors.ts b/applications/launchpad/gui-react/src/store/mining/selectors.ts
new file mode 100644
index 0000000000..f599da2530
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/mining/selectors.ts
@@ -0,0 +1,169 @@
+import { createSelector } from '@reduxjs/toolkit'
+import { RootState } from '..'
+import { selectContainerStatusWithStats } from '../containers/selectors'
+import { Container } from '../containers/types'
+import { selectWalletSetupRequired } from '../wallet/selectors'
+import {
+ MergedMiningSetupRequired,
+ MiningContainersState,
+ TariMiningSetupRequired,
+} from './types'
+
+export const selectNotifications = (r: RootState) =>
+ r.mining.notifications || []
+
+/**
+ * ============== TARI ===================
+ */
+export const selectTariMiningState = (r: RootState) => r.mining.tari
+
+export const selectTariContainers = createSelector(
+ selectContainerStatusWithStats(Container.Tor),
+ selectContainerStatusWithStats(Container.BaseNode),
+ selectContainerStatusWithStats(Container.Wallet),
+ selectContainerStatusWithStats(Container.SHA3Miner),
+ (tor, baseNode, wallet, sha3) => {
+ const containers = [tor, baseNode, wallet, sha3]
+ const errors = containers
+ .filter(c => c.error)
+ .map(c => ({
+ containerName: c.containerName,
+ id: c.id,
+ error: c.error,
+ }))
+
+ return {
+ running: containers.every(c => c.running),
+ pending: containers.some(c => c.pending),
+ miningPending: sha3.pending,
+ error: errors.length > 0 ? errors : undefined,
+ dependsOn: [tor, baseNode, wallet, sha3],
+ } as MiningContainersState
+ },
+ {
+ memoizeOptions: {
+ equalityCheck: (a, b) => {
+ return (
+ a.running === b.running &&
+ a.pending === b.pending &&
+ a.error === b.error &&
+ a.id === b.id
+ )
+ },
+ },
+ },
+)
+
+export const selectTariSetupRequired = createSelector(
+ selectWalletSetupRequired,
+ walletSetupRequired =>
+ walletSetupRequired
+ ? TariMiningSetupRequired.MissingWalletAddress
+ : undefined,
+)
+
+/**
+ * ============== MERGED ===================
+ */
+export const selectMergedMiningState = (r: RootState) => r.mining.merged
+export const selectMergedMiningAddress = (r: RootState) =>
+ r.mining.merged.address
+export const selectMergedMiningThreads = (r: RootState) =>
+ r.mining.merged.threads
+export const selectMoneroUrls = (r: RootState) =>
+ (r.mining.merged.urls || []).map(u => u.url).join(',')
+export const selectMergedUseAuth = (r: RootState) => r.mining.merged.useAuth
+
+export const selectMergedContainers = createSelector(
+ selectContainerStatusWithStats(Container.Tor),
+ selectContainerStatusWithStats(Container.BaseNode),
+ selectContainerStatusWithStats(Container.Wallet),
+ selectContainerStatusWithStats(Container.MMProxy),
+ selectContainerStatusWithStats(Container.XMrig),
+ (tor, baseNode, wallet, mmproxy, xmrig) => {
+ const containers = [tor, baseNode, wallet, mmproxy, xmrig]
+ const errors = containers
+ .filter(c => c.error)
+ .map(c => ({
+ containerName: c.containerName,
+ id: c.id,
+ error: c.error,
+ }))
+
+ return {
+ running: !containers.some(c => !c.running),
+ pending: containers.some(c => c.pending),
+ miningPending: mmproxy.pending || xmrig.pending,
+ error: errors.length > 0 ? errors : undefined,
+ dependsOn: [tor, baseNode, wallet, xmrig, mmproxy],
+ } as MiningContainersState
+ },
+ {
+ memoizeOptions: {
+ equalityCheck: (a, b) => {
+ return (
+ a.running === b.running &&
+ a.pending === b.pending &&
+ a.error === b.error &&
+ a.id === b.id
+ )
+ },
+ },
+ },
+)
+
+export const selectMergedSetupRequired = createSelector(
+ selectWalletSetupRequired,
+ selectMergedMiningAddress,
+ (walletSetupRequired, mergedAddress) => {
+ if (walletSetupRequired) {
+ return MergedMiningSetupRequired.MissingWalletAddress
+ }
+
+ if (!mergedAddress || mergedAddress.length < 1) {
+ return MergedMiningSetupRequired.MissingMoneroAddress
+ }
+
+ return
+ },
+)
+
+/**
+ * ============== OTHER ===================
+ */
+
+/**
+ * Can any mining node be run?
+ */
+export const selectCanAnyMiningNodeRun = (state: RootState) => {
+ const tari = selectTariContainers(state)
+ const merged = selectMergedContainers(state)
+ const tariSetupRequired = selectTariSetupRequired(state)
+ const mergedSetupRequired = selectMergedSetupRequired(state)
+
+ return (
+ (!tari.error && !tariSetupRequired) ||
+ (!merged.error && !mergedSetupRequired)
+ )
+}
+
+/**
+ * Is any mining node running?
+ * @returns {boolean}
+ */
+export const selectIsMiningRunning = (state: RootState): boolean => {
+ const tari = selectTariContainers(state)
+ const merged = selectMergedContainers(state)
+
+ return tari.running || merged.running
+}
+
+/**
+ * Is any mining node pending?
+ */
+export const selectIsMiningPending = (state: RootState): boolean => {
+ const tari = selectTariContainers(state)
+ const merged = selectMergedContainers(state)
+
+ return !!(tari?.miningPending || merged?.miningPending)
+}
diff --git a/applications/launchpad/gui-react/src/store/mining/thunks.test.ts b/applications/launchpad/gui-react/src/store/mining/thunks.test.ts
new file mode 100644
index 0000000000..e35785cb5e
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/mining/thunks.test.ts
@@ -0,0 +1,577 @@
+import { MiningNodeType } from '../../types/general'
+import { RootState } from '..'
+import { allStopped } from '../../../__tests__/mocks/states'
+
+import { stopMiningNode, startMiningNode, addMinedTx } from './thunks'
+import {
+ MiningActionReason,
+ TariMiningSetupRequired,
+ MergedMiningSetupRequired,
+} from './types'
+
+const MINING_NODES = ['tari', 'merged'] as MiningNodeType[]
+const REASONS = [MiningActionReason.Manual, MiningActionReason.Schedule]
+
+const shouldNotHaveCalledAnyActions = (
+ dispatch: ReturnType,
+ asyncAction: string,
+) => {
+ expect(dispatch).toHaveBeenCalledTimes(2)
+ expect(dispatch.mock.calls[0][0]).toMatchObject({
+ payload: undefined,
+ type: `mining/${asyncAction}/pending`,
+ })
+ expect(dispatch.mock.calls[1][0]).toMatchObject({
+ payload: undefined,
+ type: `mining/${asyncAction}/fulfilled`,
+ })
+}
+
+const getMockedDispatch = () =>
+ jest.fn().mockReturnValue({
+ unwrap: () => Promise.resolve(),
+ })
+
+describe('starting node', () => {
+ it('should throw an error if tari mining start is attempted with misconfigured wallet', async () => {
+ // given
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: '',
+ emoji: '',
+ },
+ unlocked: false,
+ },
+ mining: {
+ tari: {
+ session: undefined,
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = startMiningNode({
+ node: 'tari',
+ reason: MiningActionReason.Schedule,
+ })
+ await action(dispatch, getState, undefined)
+
+ // then
+ expect(dispatch).toHaveBeenCalledTimes(2)
+ expect(dispatch.mock.calls[0][0]).toMatchObject({
+ payload: undefined,
+ type: 'mining/startNode/pending',
+ })
+ expect(dispatch.mock.calls[1][0]).toMatchObject({
+ payload: TariMiningSetupRequired.MissingWalletAddress,
+ type: 'mining/startNode/rejected',
+ })
+ })
+
+ it('should throw an error if merged mining start is attempted with misconfigured wallet', async () => {
+ // given
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: '',
+ emoji: '',
+ },
+ unlocked: false,
+ },
+ mining: {
+ merged: {
+ address: 'moneroAddress',
+ session: undefined,
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = startMiningNode({
+ node: 'merged',
+ reason: MiningActionReason.Manual,
+ })
+ await action(dispatch, getState, undefined)
+
+ // then
+ expect(dispatch).toHaveBeenCalledTimes(2)
+ expect(dispatch.mock.calls[0][0]).toMatchObject({
+ payload: undefined,
+ type: 'mining/startNode/pending',
+ })
+ expect(dispatch.mock.calls[1][0]).toMatchObject({
+ payload: MergedMiningSetupRequired.MissingWalletAddress,
+ type: 'mining/startNode/rejected',
+ })
+ })
+
+ it('should throw an error if merged mining start is attempted with missing monero address', async () => {
+ // given
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: 'some wallet adress',
+ emoji: '',
+ },
+ unlocked: true,
+ },
+ mining: {
+ merged: {
+ address: undefined,
+ session: undefined,
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = startMiningNode({
+ node: 'merged',
+ reason: MiningActionReason.Manual,
+ })
+ await action(dispatch, getState, undefined)
+
+ // then
+ expect(dispatch).toHaveBeenCalledTimes(2)
+ expect(dispatch.mock.calls[0][0]).toMatchObject({
+ payload: undefined,
+ type: 'mining/startNode/pending',
+ })
+ expect(dispatch.mock.calls[1][0]).toMatchObject({
+ payload: MergedMiningSetupRequired.MissingMoneroAddress,
+ type: 'mining/startNode/rejected',
+ })
+ })
+})
+
+describe('start stop mining', () =>
+ MINING_NODES.forEach(miningNode =>
+ describe(miningNode, () => {
+ it(`should not stop ${miningNode} mining by scheduled stop if it was started manually`, async () => {
+ // given
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: 'walletAddress',
+ emoji: '',
+ },
+ unlocked: true,
+ },
+ mining: {
+ tari: {
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: undefined,
+ reason: MiningActionReason.Manual,
+ },
+ },
+ merged: {
+ address: 'moneroAddress',
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: undefined,
+ reason: MiningActionReason.Manual,
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = stopMiningNode({
+ node: miningNode,
+ reason: MiningActionReason.Schedule,
+ })
+ await action(dispatch, getState, undefined)
+
+ // then
+ shouldNotHaveCalledAnyActions(dispatch, 'stopNode')
+ })
+
+ it(`should stop ${miningNode} mining manually after manual start`, async () => {
+ // given
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: 'some wallet adress',
+ emoji: '',
+ },
+ unlocked: true,
+ },
+ mining: {
+ tari: {
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: undefined,
+ reason: MiningActionReason.Manual,
+ },
+ },
+ merged: {
+ address: 'moneroAddress',
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: undefined,
+ reason: MiningActionReason.Manual,
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = stopMiningNode({
+ node: miningNode,
+ reason: MiningActionReason.Manual,
+ })
+ await action(dispatch, getState, undefined)
+
+ // then
+ expect(dispatch).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'mining/stopSession',
+ payload: { node: miningNode, reason: MiningActionReason.Manual },
+ }),
+ )
+ })
+
+ it(`should stop ${miningNode} mining manually after scheduled start`, async () => {
+ // given
+ const scheduleId = 'someScheduleId'
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: 'some wallet adress',
+ emoji: '',
+ },
+ unlocked: true,
+ },
+ mining: {
+ tari: {
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: undefined,
+ reason: MiningActionReason.Schedule,
+ schedule: scheduleId,
+ },
+ },
+ merged: {
+ address: 'moneroAddress',
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: undefined,
+ reason: MiningActionReason.Schedule,
+ schedule: scheduleId,
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = stopMiningNode({
+ node: miningNode,
+ reason: MiningActionReason.Manual,
+ })
+ await action(dispatch, getState, undefined)
+
+ // then
+ expect(dispatch).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'mining/stopSession',
+ payload: { node: miningNode, reason: MiningActionReason.Manual },
+ }),
+ )
+ })
+
+ REASONS.forEach(previousSessionStopReason => {
+ it(`should start ${miningNode} mining manually for stopReason: ${previousSessionStopReason}`, async () => {
+ // given
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: 'some wallet adress',
+ emoji: '',
+ },
+ unlocked: true,
+ },
+ containers: allStopped,
+ mining: {
+ tari: {
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: new Date('2022-05-23T19:00:00.000Z').getTime(),
+ reason: previousSessionStopReason,
+ },
+ },
+ merged: {
+ address: 'moneroAddress',
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: new Date('2022-05-23T19:00:00.000Z').getTime(),
+ reason: previousSessionStopReason,
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = startMiningNode({
+ node: miningNode,
+ reason: MiningActionReason.Manual,
+ })
+ await action(dispatch, getState, undefined)
+
+ // then
+ expect(dispatch).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'mining/startNewSession',
+ payload: {
+ node: miningNode,
+ reason: MiningActionReason.Manual,
+ },
+ }),
+ )
+ })
+
+ it(`should start ${miningNode} mining on schedule for previous stop reason: ${previousSessionStopReason}`, async () => {
+ // given
+ const scheduleId = 'someScheduleId'
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: 'some wallet adress',
+ emoji: '',
+ },
+ unlocked: true,
+ },
+ containers: allStopped,
+ mining: {
+ tari: {
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: new Date('2022-05-23T19:00:00.000Z').getTime(),
+ reason: previousSessionStopReason,
+ schedule:
+ previousSessionStopReason === MiningActionReason.Schedule
+ ? scheduleId
+ : undefined,
+ },
+ },
+ merged: {
+ address: 'moneroAddress',
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: new Date('2022-05-23T19:00:00.000Z').getTime(),
+ reason: previousSessionStopReason,
+ schedule:
+ previousSessionStopReason === MiningActionReason.Schedule
+ ? scheduleId
+ : undefined,
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = startMiningNode({
+ node: miningNode,
+ reason: MiningActionReason.Schedule,
+ schedule: scheduleId,
+ })
+ await action(dispatch, getState, undefined)
+
+ // then
+ expect(dispatch).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'mining/startNewSession',
+ payload: {
+ node: miningNode,
+ reason: MiningActionReason.Schedule,
+ schedule: scheduleId,
+ },
+ }),
+ )
+ })
+ })
+
+ it(`should not start manually stopped scheduled ${miningNode} mining until next schedule`, async () => {
+ // given
+ const previousScheduleId = 'previousScheduleId'
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: 'some wallet adress',
+ emoji: '',
+ },
+ unlocked: true,
+ },
+ containers: allStopped,
+ mining: {
+ tari: {
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: new Date('2022-05-23T19:00:00.000Z').getTime(),
+ schedule: previousScheduleId,
+ reason: MiningActionReason.Manual,
+ },
+ },
+ merged: {
+ address: 'moneroAddress',
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: new Date('2022-05-23T19:00:00.000Z').getTime(),
+ schedule: previousScheduleId,
+ reason: MiningActionReason.Manual,
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = startMiningNode({
+ node: miningNode,
+ reason: MiningActionReason.Schedule,
+ schedule: previousScheduleId,
+ })
+ await action(dispatch, getState, undefined)
+
+ shouldNotHaveCalledAnyActions(dispatch, 'startNode')
+ })
+
+ it(`should start manually stopped scheduled ${miningNode} mining if different schedule starts it`, async () => {
+ // given
+ const previousScheduleId = 'previousScheduleId'
+ const nextScheduleId = 'nextScheduleId'
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ address: {
+ uri: 'some wallet adress',
+ emoji: '',
+ },
+ unlocked: true,
+ },
+ containers: allStopped,
+ mining: {
+ tari: {
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: new Date('2022-05-23T19:00:00.000Z').getTime(),
+ schedule: previousScheduleId,
+ reason: MiningActionReason.Manual,
+ },
+ },
+ merged: {
+ address: 'moneroAddress',
+ session: {
+ startedAt: new Date('2022-05-23T13:00:00.000Z').getTime(),
+ finishedAt: new Date('2022-05-23T19:00:00.000Z').getTime(),
+ schedule: previousScheduleId,
+ reason: MiningActionReason.Manual,
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = startMiningNode({
+ node: miningNode,
+ reason: MiningActionReason.Schedule,
+ schedule: nextScheduleId,
+ })
+ await action(dispatch, getState, undefined)
+
+ // next
+ expect(dispatch).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'mining/startNewSession',
+ payload: {
+ node: miningNode,
+ reason: MiningActionReason.Schedule,
+ schedule: nextScheduleId,
+ },
+ }),
+ )
+ })
+ }),
+ ))
+
+describe('Mining events', () => {
+ it('should call addMined slice when data is correct', async () => {
+ // given
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ unlocked: true,
+ },
+ mining: {
+ tari: {
+ session: { total: { xtr: 0 }, history: [] },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = addMinedTx({
+ amount: 100,
+ node: 'tari',
+ txId: 'test-tx-id-1',
+ })
+ const result = await action(dispatch, getState, undefined)
+
+ // then
+ expect(result.type.endsWith('/fulfilled')).toBe(true)
+ })
+
+ it('should not call addMined action when transaction is already on the list', async () => {
+ // given
+ const dispatch = getMockedDispatch()
+ const getState = () =>
+ ({
+ wallet: {
+ unlocked: true,
+ },
+ mining: {
+ tari: {
+ session: {
+ total: { xtr: 0 },
+ history: [
+ {
+ txId: 'test-tx-id-1',
+ amount: 100,
+ },
+ ],
+ },
+ },
+ },
+ } as unknown as RootState)
+
+ // when
+ const action = addMinedTx({
+ amount: 100,
+ node: 'tari',
+ txId: 'test-tx-id-1',
+ })
+ const result = await action(dispatch, getState, undefined)
+
+ // then
+ expect(result.type.endsWith('/rejected')).toBe(true)
+ })
+})
diff --git a/applications/launchpad/gui-react/src/store/mining/thunks.ts b/applications/launchpad/gui-react/src/store/mining/thunks.ts
new file mode 100644
index 0000000000..af72808c02
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/mining/thunks.ts
@@ -0,0 +1,215 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import {
+ isPermissionGranted,
+ requestPermission,
+ sendNotification,
+} from '@tauri-apps/api/notification'
+
+import { MiningNodeType, ScheduleId, CoinType } from '../../types/general'
+import { actions as containersActions } from '../containers'
+import { Container } from '../containers/types'
+import t from '../../locales'
+import { RootState } from '..'
+
+import { actions as miningActions } from '.'
+import { MiningActionReason } from './types'
+import { selectTariSetupRequired, selectMergedSetupRequired } from './selectors'
+
+const checkSetup: Record void> = {
+ tari: state => {
+ const setupRequired = selectTariSetupRequired(state)
+
+ if (setupRequired) {
+ throw setupRequired
+ }
+ },
+ merged: state => {
+ const setupRequired = selectMergedSetupRequired(state)
+
+ if (setupRequired) {
+ throw setupRequired
+ }
+ },
+}
+
+/**
+ * Start given mining node. It spawns all dependencies if needed.
+ * @prop {NodeType} node - the node name, ie. 'tari', 'merged'
+ * @returns {Promise}
+ */
+export const startMiningNode = createAsyncThunk<
+ void,
+ { node: MiningNodeType; reason: MiningActionReason; schedule?: ScheduleId },
+ { state: RootState }
+>('mining/startNode', async ({ node, reason, schedule }, thunkApi) => {
+ try {
+ const rootState = thunkApi.getState()
+
+ checkSetup[node](rootState)
+
+ const miningSession = rootState.mining[node].session
+ const scheduledMiningWasStoppedManually =
+ miningSession?.finishedAt &&
+ miningSession?.reason === MiningActionReason.Manual &&
+ miningSession?.schedule
+ if (
+ scheduledMiningWasStoppedManually &&
+ miningSession.schedule === schedule
+ ) {
+ return
+ }
+
+ if (node === 'tari') {
+ await thunkApi
+ .dispatch(
+ containersActions.startRecipe({ containerName: Container.SHA3Miner }),
+ )
+ .unwrap()
+ }
+
+ if (node === 'merged') {
+ await thunkApi
+ .dispatch(
+ containersActions.startRecipe({ containerName: Container.MMProxy }),
+ )
+ .unwrap()
+ }
+
+ thunkApi.dispatch(miningActions.startNewSession({ node, reason, schedule }))
+ } catch (e) {
+ return thunkApi.rejectWithValue(e)
+ }
+})
+
+/**
+ * Stop containers of a given mining node (ie. tari, merged).
+ * It doesn't stop common containers, like Tor, Wallet, and BaseNode.
+ * @prop {{ node: MiningNodeType }} node - the mining node, ie. 'tari'
+ * @returns {Promise}
+ */
+export const stopMiningNode = createAsyncThunk<
+ void,
+ {
+ node: MiningNodeType
+ reason: MiningActionReason
+ },
+ { state: RootState }
+>('mining/stopNode', async ({ node, reason }, thunkApi) => {
+ try {
+ const promises = []
+
+ const { getState } = thunkApi
+ const state = getState()
+
+ const miningSession = state.mining[node].session
+ if (
+ reason === MiningActionReason.Schedule &&
+ miningSession?.startedAt &&
+ !miningSession?.finishedAt &&
+ miningSession?.reason === MiningActionReason.Manual
+ ) {
+ return
+ }
+
+ switch (node) {
+ case 'tari':
+ promises.push(
+ thunkApi
+ .dispatch(containersActions.stopRecipe(Container.SHA3Miner))
+ .unwrap(),
+ )
+ break
+ case 'merged':
+ promises.push(
+ thunkApi
+ .dispatch(containersActions.stopRecipe(Container.MMProxy))
+ .unwrap(),
+ )
+ break
+ }
+
+ thunkApi.dispatch(miningActions.stopSession({ node, reason }))
+
+ await Promise.all(promises)
+ } catch (e) {
+ return thunkApi.rejectWithValue(e)
+ }
+})
+
+export const notifyUserAboutMinedTariBlock = createAsyncThunk<
+ { message: string; header: string },
+ { amount: number; currency: CoinType }
+>('mining/notifyUser', async () => {
+ const notification = {
+ message:
+ t.mining.notification.messages[
+ Math.floor(Math.random() * t.mining.notification.messages.length)
+ ],
+ header:
+ t.mining.notification.headers[
+ Math.floor(Math.random() * t.mining.notification.headers.length)
+ ],
+ }
+
+ const notifyAndIgnorePromise = async () => {
+ const notify = () =>
+ sendNotification({
+ title: notification.header,
+ body: notification.message,
+ })
+
+ if (await isPermissionGranted()) {
+ notify()
+ return
+ }
+
+ const perm = await requestPermission()
+ if (perm === 'granted') {
+ notify()
+ }
+ }
+ notifyAndIgnorePromise()
+
+ return notification
+})
+
+export const addMinedTx = createAsyncThunk<
+ {
+ amount: number
+ node: MiningNodeType
+ txId: string
+ },
+ {
+ amount: number
+ node: MiningNodeType
+ txId: string
+ },
+ { state: RootState }
+>('mining/addMinedTx', ({ amount, node, txId }, thunkApi) => {
+ const rootState: RootState = thunkApi.getState()
+
+ const session = rootState.mining[node].session
+
+ if (
+ !session ||
+ (Boolean(session.history) && session.history.find(t => t.txId === txId))
+ ) {
+ return thunkApi.rejectWithValue({ amount, node, txId })
+ }
+
+ /**
+ * @TODO - replace hard-coded currency after the app handles both currencies.
+ */
+ thunkApi.dispatch(
+ notifyUserAboutMinedTariBlock({
+ amount,
+ currency: 'xtr',
+ }),
+ )
+
+ return {
+ amount,
+ node,
+ txId,
+ }
+})
diff --git a/applications/launchpad/gui-react/src/store/mining/types.ts b/applications/launchpad/gui-react/src/store/mining/types.ts
new file mode 100644
index 0000000000..1252b3f3b7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/mining/types.ts
@@ -0,0 +1,78 @@
+import { ScheduleId, CoinType } from '../../types/general'
+import {
+ ContainerStateFields,
+ Container,
+ ContainerStateFieldsWithIdAndType,
+} from '../containers/types'
+
+export enum TariMiningSetupRequired {
+ MissingWalletAddress = 'missing_wallet_address',
+}
+
+export enum MergedMiningSetupRequired {
+ MissingWalletAddress = 'missing_wallet_address',
+ MissingMoneroAddress = 'missing_monero_address',
+}
+
+export interface MiningDependencyState {
+ type: Container
+ running: boolean
+ pending: boolean
+ error: boolean
+}
+
+export enum MiningActionReason {
+ Schedule = 'schedule',
+ Manual = 'manual',
+}
+
+export interface MiningSession {
+ startedAt?: string
+ finishedAt?: string
+ id?: string
+ total?: Record
+ reason: MiningActionReason
+ schedule?: ScheduleId
+ history: { txId: string; amount: number }[]
+}
+
+export interface MiningNodeState {
+ session?: MiningSession
+}
+
+export interface MoneroUrl {
+ url: string
+}
+
+export interface MergedMiningNodeState extends MiningNodeState {
+ address?: string
+ threads: number
+ urls?: MoneroUrl[]
+ useAuth: boolean
+}
+
+/**
+ * @typedef BlockMinedNotification
+ *
+ * @prop {number} amount - amount mined
+ * @prop {CoinType} currency - what currency was awarded for mining
+ * @prop {string} header - header message for notification
+ * @prop {string} message - additional body message for notification
+ */
+export interface BlockMinedNotification {
+ amount: number
+ header: string
+ message: string
+ currency: CoinType
+}
+
+export interface MiningState {
+ tari: MiningNodeState
+ merged: MergedMiningNodeState
+ notifications: BlockMinedNotification[]
+}
+
+export interface MiningContainersState extends ContainerStateFields {
+ miningPending?: boolean
+ dependsOn: ContainerStateFieldsWithIdAndType[]
+}
diff --git a/applications/launchpad/gui-react/src/store/settings/index.ts b/applications/launchpad/gui-react/src/store/settings/index.ts
new file mode 100644
index 0000000000..424a4aa876
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/settings/index.ts
@@ -0,0 +1,57 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { SettingsInputs } from '../../containers/SettingsContainer/types'
+
+import { SettingsState, Settings } from './types'
+import { loadDefaultServiceSettings } from './thunks'
+
+export const initialState: SettingsState = {
+ open: false,
+ which: Settings.Mining,
+ serviceSettings: {},
+}
+
+const settingsSlice = createSlice({
+ name: 'settings',
+ initialState,
+ reducers: {
+ close(state) {
+ state.open = false
+ state.which = Settings.Mining
+ },
+ open(state, action: PayloadAction<{ toOpen?: Settings }>) {
+ state.open = true
+ if (action.payload.toOpen) {
+ state.which = action.payload.toOpen
+ }
+ },
+ goTo(state, action: PayloadAction) {
+ state.which = action.payload
+ },
+ save(state, action: PayloadAction>) {
+ state.serviceSettings = {
+ ...state.serviceSettings,
+ dockerTag: action.payload.docker.tag,
+ dockerRegistry: action.payload.docker.registry,
+ }
+ },
+ },
+ extraReducers: builder => {
+ builder.addCase(loadDefaultServiceSettings.fulfilled, (state, action) => {
+ const settings = action.payload
+ state.serviceSettings = {
+ dockerRegistry: settings.dockerRegistry,
+ dockerTag: settings.dockerTag,
+ }
+ })
+ },
+})
+
+const { actions: syncActions } = settingsSlice
+
+export const actions = {
+ ...syncActions,
+ loadDefaultServiceSettings,
+}
+
+export default settingsSlice.reducer
diff --git a/applications/launchpad/gui-react/src/store/settings/selectors.ts b/applications/launchpad/gui-react/src/store/settings/selectors.ts
new file mode 100644
index 0000000000..b35f7b8d0a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/settings/selectors.ts
@@ -0,0 +1,58 @@
+import { RootState } from '../'
+import { createSelector } from '@reduxjs/toolkit'
+import {
+ selectMergedMiningAddress,
+ selectMergedMiningThreads,
+ selectMergedUseAuth,
+ selectMoneroUrls,
+} from '../mining/selectors'
+import {
+ selectWallet,
+ selectMoneroUsername,
+ selectMoneroPassword,
+} from '../credentials/selectors'
+import { selectNetwork, selectRootFolder } from '../baseNode/selectors'
+import { ServiceSettingsState } from './types'
+import { Network } from '../../containers/BaseNodeContainer/types'
+
+export const selectSettingsOpen = (state: RootState) => state.settings.open
+export const selectActiveSettings = (state: RootState) => state.settings.which
+export const selectSettingsState = (state: RootState) =>
+ state.settings.serviceSettings
+
+export const selectServiceSettings = createSelector(
+ selectSettingsState,
+ selectNetwork,
+ selectRootFolder,
+ selectWallet,
+ selectMoneroUsername,
+ selectMoneroPassword,
+ selectMergedMiningThreads,
+ selectMoneroUrls,
+ selectMergedMiningAddress,
+ selectMergedUseAuth,
+ (
+ serviceSettings: ServiceSettingsState,
+ network: Network,
+ rootFolder: string,
+ parole: string,
+ moneroUsername: string,
+ moneroPassword: string,
+ threads: number,
+ moneroUrls: string,
+ mergedMiningAddress?: string,
+ mergedUseAuth?: boolean,
+ ) => ({
+ ...serviceSettings,
+ tariNetwork: network,
+ numMiningThreads: threads,
+ moneroMiningAddress: mergedMiningAddress,
+ monerodUrl: moneroUrls,
+ moneroUseAuth: mergedUseAuth,
+ parole,
+ walletPassword: parole,
+ moneroUsername: moneroUsername,
+ moneroPassword: moneroPassword,
+ rootFolder,
+ }),
+)
diff --git a/applications/launchpad/gui-react/src/store/settings/thunks.ts b/applications/launchpad/gui-react/src/store/settings/thunks.ts
new file mode 100644
index 0000000000..a9a9224f8f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/settings/thunks.ts
@@ -0,0 +1,91 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { cacheDir, sep } from '@tauri-apps/api/path'
+
+import { RootState } from '..'
+import { actions as baseNodeActions } from '../baseNode'
+import { actions as miningActions } from '../mining'
+import { actions as containersActions } from '../containers'
+import { actions as dockerImagesActions } from '../dockerImages'
+import { actions as credentialsActions } from '../credentials'
+
+import { SettingsInputs } from '../../containers/SettingsContainer/types'
+
+import MiningConfig from '../../config/mining'
+import { InitialSettings } from './types'
+
+const getSettings = async (): Promise => {
+ const newCacheDir = await cacheDir()
+ const network = 'dibbler'
+ return {
+ parole: '',
+ moneroMiningAddress: 'test1',
+ moneroWalletAddress: 'test2',
+ numMiningThreads: 1,
+ tariNetwork: network,
+ cacheDir: newCacheDir,
+ dockerRegistry: 'quay.io/tarilabs',
+ dockerTag: 'latest',
+ monerodUrl: MiningConfig.defaultMoneroUrls?.join(',') || '',
+ moneroUseAuth: false,
+ moneroUsername: '',
+ moneroPassword: '',
+ rootFolder: newCacheDir + 'tari' + sep + 'tmp' + sep + network,
+ }
+}
+
+export const loadDefaultServiceSettings = createAsyncThunk<
+ InitialSettings,
+ void
+>('service/start', async (_, thunkApi) => {
+ const settings = await getSettings()
+ const rootState = thunkApi.getState() as RootState
+ if (!rootState.baseNode.rootFolder) {
+ thunkApi.dispatch(baseNodeActions.setRootFolder(settings.rootFolder))
+ }
+ return settings
+})
+
+export const saveSettings = createAsyncThunk<
+ void,
+ { newSettings: SettingsInputs },
+ { state: RootState }
+>('settings/save', async ({ newSettings }, thunkApi) => {
+ const { dispatch } = thunkApi
+ // Set BaseNode config
+
+ if ('baseNode' in newSettings && newSettings.baseNode) {
+ if (newSettings.baseNode.network) {
+ dispatch(baseNodeActions.setTariNetwork(newSettings.baseNode.network))
+ }
+ if (newSettings.baseNode.rootFolder) {
+ dispatch(baseNodeActions.setRootFolder(newSettings.baseNode.rootFolder))
+ }
+ }
+
+ // Set Mining config
+ if ('mining' in newSettings && 'merged' in newSettings.mining) {
+ const useAuth = newSettings.mining.merged.authentication
+
+ dispatch(
+ miningActions.setMergedConfig({
+ ...newSettings.mining.merged,
+ useAuth: Boolean(useAuth),
+ }),
+ )
+
+ dispatch(
+ credentialsActions.setMoneroCredentials({
+ username: useAuth?.username || '',
+ password: useAuth?.password || '',
+ }),
+ )
+ }
+
+ if ('docker' in newSettings) {
+ dispatch({ type: 'settings/save', payload: { docker: newSettings.docker } })
+ await dispatch(dockerImagesActions.getDockerImageList()).unwrap()
+ }
+
+ // Restart containers
+ await dispatch(containersActions.restart())
+})
diff --git a/applications/launchpad/gui-react/src/store/settings/types.ts b/applications/launchpad/gui-react/src/store/settings/types.ts
new file mode 100644
index 0000000000..3771ed3733
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/settings/types.ts
@@ -0,0 +1,37 @@
+export enum Settings {
+ Mining = 'mining',
+ Wallet = 'wallet',
+ BaseNode = 'baseNode',
+ Docker = 'docker',
+ Logs = 'logs',
+ Security = 'security',
+}
+
+export interface InitialSettings {
+ moneroMiningAddress: string
+ moneroWalletAddress: string
+ numMiningThreads: number
+ tariNetwork: string
+ cacheDir: string
+ dockerRegistry: string
+ parole: string
+ dockerTag: string
+ monerodUrl: string
+ moneroUseAuth: boolean
+ moneroUsername: string
+ moneroPassword: string
+ rootFolder: string
+}
+
+export type ServiceSettingsState = {
+ parole?: string
+ dockerRegistry: string
+ dockerTag: string
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} & any
+
+export type SettingsState = {
+ open: boolean
+ which: Settings
+ serviceSettings: ServiceSettingsState
+}
diff --git a/applications/launchpad/gui-react/src/store/tbot/index.ts b/applications/launchpad/gui-react/src/store/tbot/index.ts
new file mode 100644
index 0000000000..5a475ca152
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/tbot/index.ts
@@ -0,0 +1,32 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { TBotState } from './types'
+
+export const initialState: TBotState = {
+ messageQueue: [],
+}
+
+const tbotSlice = createSlice({
+ name: 'tbot',
+ initialState,
+ reducers: {
+ push(state, action) {
+ action.payload.map((str: string) => {
+ if (!state.messageQueue.includes(str)) {
+ state.messageQueue = [...state.messageQueue, str]
+ }
+ })
+ },
+ close(state) {
+ state.messageQueue = []
+ },
+ },
+})
+
+const { actions: syncActions } = tbotSlice
+
+export const tbotactions = {
+ ...syncActions,
+}
+
+export default tbotSlice.reducer
diff --git a/applications/launchpad/gui-react/src/store/tbot/selectors.ts b/applications/launchpad/gui-react/src/store/tbot/selectors.ts
new file mode 100644
index 0000000000..1de4f05e3d
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/tbot/selectors.ts
@@ -0,0 +1,3 @@
+import { RootState } from '..'
+
+export const selectTBotQueue = (state: RootState) => state.tbot.messageQueue
diff --git a/applications/launchpad/gui-react/src/store/tbot/types.ts b/applications/launchpad/gui-react/src/store/tbot/types.ts
new file mode 100644
index 0000000000..0913adc803
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/tbot/types.ts
@@ -0,0 +1,19 @@
+export enum TBotMessages {
+ CryptoMiningHelp = 'CryptoMiningHelp',
+ MergedMiningHelp = 'MergedMiningHelp',
+ WalletHelp = 'WalletHelp',
+ WalletIdHelp = 'WalletIdHelp',
+ WalletBalanceHelp = 'WalletBalanceHelp',
+ BaseNodeHelp = 'BaseNodeHelp',
+ Onboarding = 'Onboarding',
+ ConnectAurora = 'ConnectAurora',
+ TransactionFee = 'TransactionFee',
+ NewDockerImageToDownload = 'NewDockerImageToDownload',
+ DockerImageDownloadSuccess = 'DockerImageDownloadSuccess',
+ DockerImageDownloadError = 'DockerImageDownloadError',
+ OnlineCheck = 'OnlineCheck',
+}
+
+export interface TBotState {
+ messageQueue: string[]
+}
diff --git a/applications/launchpad/gui-react/src/store/temporary/index.ts b/applications/launchpad/gui-react/src/store/temporary/index.ts
new file mode 100644
index 0000000000..794e85ebfe
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/temporary/index.ts
@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { TemporaryState } from './types'
+
+export const initialState: TemporaryState = {
+ walletPasswordConfirmation: undefined,
+}
+
+const temporarySlice = createSlice({
+ name: 'temporary',
+ initialState,
+ reducers: {
+ setWalletPasswordConfirmation(state, action) {
+ state.walletPasswordConfirmation = action.payload
+ },
+ },
+})
+
+const { actions: temporarySliceActions } = temporarySlice
+
+export const temporaryActions = {
+ ...temporarySliceActions,
+}
+
+export default temporarySlice.reducer
diff --git a/applications/launchpad/gui-react/src/store/temporary/selectors.ts b/applications/launchpad/gui-react/src/store/temporary/selectors.ts
new file mode 100644
index 0000000000..303b02e5b0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/temporary/selectors.ts
@@ -0,0 +1,4 @@
+import { RootState } from '..'
+
+export const selectWalletPasswordConfirmation = (state: RootState) =>
+ state.temporary.walletPasswordConfirmation
diff --git a/applications/launchpad/gui-react/src/store/temporary/types.ts b/applications/launchpad/gui-react/src/store/temporary/types.ts
new file mode 100644
index 0000000000..b7ad84da13
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/temporary/types.ts
@@ -0,0 +1,9 @@
+export type WalletPasswordConfirmationStatus =
+ | 'waiting_for_confirmation'
+ | 'failed'
+ | 'wrong_password'
+ | 'success'
+
+export interface TemporaryState {
+ walletPasswordConfirmation?: WalletPasswordConfirmationStatus
+}
diff --git a/applications/launchpad/gui-react/src/store/wallet/index.ts b/applications/launchpad/gui-react/src/store/wallet/index.ts
new file mode 100644
index 0000000000..92698452b1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/wallet/index.ts
@@ -0,0 +1,69 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { WalletState } from './types'
+import { unlockWallet, start, stop, updateWalletBalance } from './thunks'
+
+export const initialState: WalletState = {
+ unlocked: false,
+ address: {
+ uri: '',
+ emoji: '',
+ publicKey: '',
+ },
+ tari: {
+ balance: 0,
+ available: 0,
+ pending: true,
+ },
+ lastTxHistoryUpdateAt: undefined,
+ recoveryPhraseCreated: false,
+}
+
+const walletSlice = createSlice({
+ name: 'wallet',
+ initialState,
+ reducers: {
+ tariBalancePending(state) {
+ state.tari.pending = true
+ },
+ newTxInHistory(state) {
+ state.lastTxHistoryUpdateAt = new Date()
+ },
+ setRecoveryPhraseAsCreated(state) {
+ state.recoveryPhraseCreated = true
+ },
+ },
+ extraReducers: builder => {
+ builder.addCase(unlockWallet.fulfilled, (state, action) => {
+ state.unlocked = true
+
+ const {
+ address,
+ tari: { balance, available },
+ } = action.payload
+ state.address = address
+ state.tari.balance = balance
+ state.tari.available = available
+ })
+
+ builder.addCase(updateWalletBalance.fulfilled, (state, { payload }) => {
+ state.tari.balance = payload.tari.balance
+ state.tari.available = payload.tari.available
+ state.tari.pending = false
+ })
+ builder.addCase(updateWalletBalance.rejected, state => {
+ state.tari.pending = false
+ })
+ },
+})
+
+export const actions = {
+ unlockWallet,
+ start,
+ stop,
+ updateWalletBalance,
+ newTxInHistory: walletSlice.actions.newTxInHistory,
+ setRecoveryPhraseAsCreated: walletSlice.actions.setRecoveryPhraseAsCreated,
+}
+
+export default walletSlice.reducer
diff --git a/applications/launchpad/gui-react/src/store/wallet/selectors.ts b/applications/launchpad/gui-react/src/store/wallet/selectors.ts
new file mode 100644
index 0000000000..97d8ee0b1e
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/wallet/selectors.ts
@@ -0,0 +1,61 @@
+import { RootState } from '../'
+import { Container } from '../containers/types'
+import {
+ selectContainer,
+ selectContainerError,
+ selectRecipePending,
+ selectRecipeRunning,
+} from '../containers/selectors'
+
+import { WalletSetupRequired } from './types'
+import { createSelector } from '@reduxjs/toolkit'
+
+export const selectIsUnlocked = (state: RootState) => state.wallet.unlocked
+
+export const selectWalletAddress = (state: RootState) =>
+ state.wallet.address.uri
+export const selectWalletEmojiAddress = (state: RootState) =>
+ state.wallet.address.emoji
+export const selectWalletPublicKey = (state: RootState) =>
+ state.wallet.address.publicKey
+
+export const selectTariBalance = (state: RootState) => state.wallet.tari
+
+export const selectWalletSetupRequired = (state: RootState) =>
+ !state.wallet.address.uri
+ ? WalletSetupRequired.MissingWalletAddress
+ : undefined
+
+export const selectIsPending = selectRecipePending(Container.Wallet)
+
+export const selectIsRunning = selectRecipeRunning(Container.Wallet)
+
+export const selectLastTxHistoryUpdate = (state: RootState) =>
+ state.wallet.lastTxHistoryUpdateAt
+
+export const selectWalletContainerLastAction = createSelector(
+ selectContainer('wallet'),
+ selectContainerError('wallet'),
+ (walletContainer, walletError) => ({
+ status: walletContainer.containerStatus?.status,
+ exitCode: walletContainer.containerStatus?.exitCode,
+ error: walletError,
+ }),
+ {
+ memoizeOptions: {
+ equalityCheck: (a, b) => {
+ if (a && typeof a !== 'string' && 'containerStatus' in a) {
+ return (
+ a.containerStatus?.status === b.containerStatus?.status &&
+ a.containerStatus?.exitCode === b.containerStatus?.exitCode
+ )
+ } else {
+ return a === b
+ }
+ },
+ },
+ },
+)
+
+export const selectRecoveryPhraseCreated = (state: RootState) =>
+ state.wallet.recoveryPhraseCreated
diff --git a/applications/launchpad/gui-react/src/store/wallet/thunks.ts b/applications/launchpad/gui-react/src/store/wallet/thunks.ts
new file mode 100644
index 0000000000..8696c4c664
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/wallet/thunks.ts
@@ -0,0 +1,119 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+
+import { RootState } from '..'
+import { Container } from '../containers/types'
+import { actions as containersActions } from '../containers'
+
+import * as walletService from './walletService'
+import { temporaryActions } from '../temporary'
+import { convertU8ToString } from '../../utils/Format'
+
+const getWalletDataWithPolling = async (): Promise<
+ [walletService.WalletIdentityDto, walletService.WalletBalance]
+> => {
+ let watchdog = 0
+
+ while (watchdog < 31) {
+ try {
+ const getWalletIdentityPromise = walletService.getIdentity()
+ const getBalancePromise = walletService.getBalance()
+
+ const walletData = await Promise.all([
+ getWalletIdentityPromise,
+ getBalancePromise,
+ ])
+
+ return walletData
+ } catch (e) {
+ if (watchdog === 30) {
+ throw e
+ }
+
+ await new Promise(resolve => setTimeout(resolve, 500))
+ watchdog++
+ }
+ }
+
+ throw new Error('No wallet data after 30+ attempts')
+}
+
+export const unlockWallet = createAsyncThunk<
+ {
+ address: { uri: string; emoji: string; publicKey: string }
+ tari: { balance: number; available: number }
+ },
+ void,
+ { state: RootState }
+>('wallet/unlock', async (_, thunkApi) => {
+ try {
+ thunkApi.dispatch(
+ temporaryActions.setWalletPasswordConfirmation(
+ 'waiting_for_confirmation',
+ ),
+ )
+
+ await thunkApi
+ .dispatch(
+ containersActions.startRecipe({
+ containerName: Container.Wallet,
+ }),
+ )
+ .unwrap()
+
+ const [walletIdentity, tari] = await getWalletDataWithPolling()
+
+ return {
+ address: {
+ uri: walletIdentity.publicAddress,
+ emoji: walletIdentity.emojiId,
+ publicKey: convertU8ToString(walletIdentity.publicKey.toString()),
+ },
+ tari: {
+ balance:
+ tari.availableBalance -
+ tari.pendingOutgoingBalance +
+ tari.pendingIncomingBalance,
+ available: tari.availableBalance,
+ },
+ }
+ } catch (e) {
+ return thunkApi.rejectWithValue(e)
+ }
+})
+
+export const start = unlockWallet
+
+export const stop = createAsyncThunk(
+ 'wallet/stop',
+ (_, thunkApi) =>
+ thunkApi.dispatch(containersActions.stopRecipe(Container.Wallet)).unwrap(),
+)
+
+export const updateWalletBalance = createAsyncThunk<{
+ tari: { balance: number; available: number }
+}>('wallet/updateBalance', async (_, thunkApi) => {
+ let timer
+ try {
+ // do not flicker loading indicator if backend call is sub 300ms
+ timer = setTimeout(() => {
+ thunkApi.dispatch({ type: 'wallet/tariBalancePending' })
+ }, 300)
+ const tari = await walletService.getBalance()
+
+ return {
+ tari: {
+ balance:
+ tari.availableBalance -
+ tari.pendingOutgoingBalance +
+ tari.pendingIncomingBalance,
+ available: tari.availableBalance,
+ },
+ }
+ } catch (e) {
+ return thunkApi.rejectWithValue(e)
+ } finally {
+ if (timer) {
+ clearTimeout(timer)
+ }
+ }
+})
diff --git a/applications/launchpad/gui-react/src/store/wallet/types.ts b/applications/launchpad/gui-react/src/store/wallet/types.ts
new file mode 100644
index 0000000000..135fbd4483
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/wallet/types.ts
@@ -0,0 +1,19 @@
+export enum WalletSetupRequired {
+ MissingWalletAddress = 'missing_wallet_address',
+}
+
+export type WalletState = {
+ unlocked: boolean
+ address: {
+ uri: string
+ emoji: string
+ publicKey: string
+ }
+ tari: {
+ balance: number
+ available: number
+ pending: boolean
+ }
+ lastTxHistoryUpdateAt?: Date
+ recoveryPhraseCreated: boolean
+}
diff --git a/applications/launchpad/gui-react/src/store/wallet/walletService.ts b/applications/launchpad/gui-react/src/store/wallet/walletService.ts
new file mode 100644
index 0000000000..9e1186e5cc
--- /dev/null
+++ b/applications/launchpad/gui-react/src/store/wallet/walletService.ts
@@ -0,0 +1,35 @@
+import { invoke } from '@tauri-apps/api/tauri'
+
+import { toT } from '../../utils/Format'
+
+export interface WalletIdentityDto {
+ nodeId: string
+ publicKey: number[]
+ publicAddress: string
+ emojiId: string
+}
+
+export const getIdentity: () => Promise = () =>
+ invoke('wallet_identity')
+
+export interface WalletBalanceDto {
+ available_balance: number
+ pending_incoming_balance: number
+ pending_outgoing_balance: number
+}
+
+export interface WalletBalance {
+ availableBalance: number
+ pendingIncomingBalance: number
+ pendingOutgoingBalance: number
+}
+
+export const getBalance: () => Promise = async () => {
+ const microTariBalance = await invoke('wallet_balance')
+
+ return {
+ availableBalance: toT(microTariBalance.available_balance),
+ pendingIncomingBalance: toT(microTariBalance.pending_incoming_balance),
+ pendingOutgoingBalance: toT(microTariBalance.pending_outgoing_balance),
+ }
+}
diff --git a/applications/launchpad/gui-react/src/styles/App.css b/applications/launchpad/gui-react/src/styles/App.css
new file mode 100644
index 0000000000..fa6da3850a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/App.css
@@ -0,0 +1,37 @@
+html {
+ border-radius: 10px;
+ overflow: hidden;
+ background: transparent;
+}
+
+body {
+ width: 100%;
+ height: 100vh;
+ border-radius: 10px;
+ display: flex;
+ overflow: hidden;
+ background: #fff;
+}
+
+div#root {
+ display: flex;
+ flex: 1;
+ border-radius: 10px;
+ overflow: hidden;
+ background: transparent;
+}
+
+@font-face {
+ src: url('../assets/fonts/AvenirLTStd-Book.otf');
+ font-family: 'AvenirRegular'
+}
+
+@font-face {
+ src: url('../assets/fonts/AvenirLTStd-Medium.otf');
+ font-family: 'AvenirMedium'
+}
+
+@font-face {
+ src: url('../assets/fonts/AvenirLTStd-Heavy.otf');
+ font-family: 'AvenirHeavy'
+}
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Add.tsx b/applications/launchpad/gui-react/src/styles/Icons/Add.tsx
new file mode 100644
index 0000000000..9bf4351c6f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Add.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgAdd = (props: SVGProps) => (
+
+)
+
+export default SvgAdd
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom.tsx
new file mode 100644
index 0000000000..4c87746637
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowBottom = (props: SVGProps) => (
+
+)
+
+export default SvgArrowBottom
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom1.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom1.tsx
new file mode 100644
index 0000000000..84288caa6e
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom1.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowBottom1 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowBottom1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom2.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom2.tsx
new file mode 100644
index 0000000000..62090187b6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom2.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowBottom2 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowBottom2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom3.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom3.tsx
new file mode 100644
index 0000000000..da533c7679
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowBottom3.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowBottom3 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowBottom3
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft.tsx
new file mode 100644
index 0000000000..36ba7fb751
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowLeft = (props: SVGProps) => (
+
+)
+
+export default SvgArrowLeft
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft1.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft1.tsx
new file mode 100644
index 0000000000..e3b6db8a6e
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft1.tsx
@@ -0,0 +1,28 @@
+import { SVGProps } from 'react'
+
+const SvgArrowLeft1 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowLeft1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft2.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft2.tsx
new file mode 100644
index 0000000000..999d799f51
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowLeft2.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react'
+
+const SvgArrowLeft2 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowLeft2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowRight.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowRight.tsx
new file mode 100644
index 0000000000..f9f4a02f20
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowRight.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowRight = (props: SVGProps) => (
+
+)
+
+export default SvgArrowRight
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowRight1.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowRight1.tsx
new file mode 100644
index 0000000000..241ae99c70
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowRight1.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowRight1 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowRight1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowRight2.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowRight2.tsx
new file mode 100644
index 0000000000..675acb15b8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowRight2.tsx
@@ -0,0 +1,23 @@
+import { SVGProps } from 'react'
+
+const SvgArrowRight2 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowRight2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowRight3.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowRight3.tsx
new file mode 100644
index 0000000000..c237e7ea07
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowRight3.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowRight3 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowRight3
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowSwap.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowSwap.tsx
new file mode 100644
index 0000000000..748ca11bb0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowSwap.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowSwap = (props: SVGProps) => (
+
+)
+
+export default SvgArrowSwap
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowTop.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowTop.tsx
new file mode 100644
index 0000000000..0856009607
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowTop.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowTop = (props: SVGProps) => (
+
+)
+
+export default SvgArrowTop
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowTop1.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowTop1.tsx
new file mode 100644
index 0000000000..6b4ac32ad1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowTop1.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowTop1 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowTop1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowTop2.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowTop2.tsx
new file mode 100644
index 0000000000..b86a4efa93
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowTop2.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowTop2 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowTop2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ArrowTop3.tsx b/applications/launchpad/gui-react/src/styles/Icons/ArrowTop3.tsx
new file mode 100644
index 0000000000..d03b9b7c3b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ArrowTop3.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgArrowTop3 = (props: SVGProps) => (
+
+)
+
+export default SvgArrowTop3
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Award.tsx b/applications/launchpad/gui-react/src/styles/Icons/Award.tsx
new file mode 100644
index 0000000000..c99311d313
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Award.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgAward = (props: SVGProps) => (
+
+)
+
+export default SvgAward
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Bag.tsx b/applications/launchpad/gui-react/src/styles/Icons/Bag.tsx
new file mode 100644
index 0000000000..926f6df8cc
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Bag.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgBag = (props: SVGProps) => (
+
+)
+
+export default SvgBag
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Bag2.tsx b/applications/launchpad/gui-react/src/styles/Icons/Bag2.tsx
new file mode 100644
index 0000000000..d31e04570f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Bag2.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgBag2 = (props: SVGProps) => (
+
+)
+
+export default SvgBag2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Battery.tsx b/applications/launchpad/gui-react/src/styles/Icons/Battery.tsx
new file mode 100644
index 0000000000..72cd6efa3a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Battery.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgBattery = (props: SVGProps) => (
+
+)
+
+export default SvgBattery
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Calendar.tsx b/applications/launchpad/gui-react/src/styles/Icons/Calendar.tsx
new file mode 100644
index 0000000000..42e505af52
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Calendar.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCalendar = (props: SVGProps) => (
+
+)
+
+export default SvgCalendar
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CallCalling.tsx b/applications/launchpad/gui-react/src/styles/Icons/CallCalling.tsx
new file mode 100644
index 0000000000..ddeb9fda67
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CallCalling.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCallCalling = (props: SVGProps) => (
+
+)
+
+export default SvgCallCalling
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CallMuted.tsx b/applications/launchpad/gui-react/src/styles/Icons/CallMuted.tsx
new file mode 100644
index 0000000000..25addb3a55
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CallMuted.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCallMuted = (props: SVGProps) => (
+
+)
+
+export default SvgCallMuted
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CallSlash.tsx b/applications/launchpad/gui-react/src/styles/Icons/CallSlash.tsx
new file mode 100644
index 0000000000..404022dc94
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CallSlash.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCallSlash = (props: SVGProps) => (
+
+)
+
+export default SvgCallSlash
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Camera.tsx b/applications/launchpad/gui-react/src/styles/Icons/Camera.tsx
new file mode 100644
index 0000000000..469bc996b4
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Camera.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCamera = (props: SVGProps) => (
+
+)
+
+export default SvgCamera
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CameraSlash.tsx b/applications/launchpad/gui-react/src/styles/Icons/CameraSlash.tsx
new file mode 100644
index 0000000000..820fcbedbc
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CameraSlash.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCameraSlash = (props: SVGProps) => (
+
+)
+
+export default SvgCameraSlash
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Card.tsx b/applications/launchpad/gui-react/src/styles/Icons/Card.tsx
new file mode 100644
index 0000000000..47cba95aa1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Card.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCard = (props: SVGProps) => (
+
+)
+
+export default SvgCard
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Charge.tsx b/applications/launchpad/gui-react/src/styles/Icons/Charge.tsx
new file mode 100644
index 0000000000..cf2dc00a64
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Charge.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCharge = (props: SVGProps) => (
+
+)
+
+export default SvgCharge
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Chart.tsx b/applications/launchpad/gui-react/src/styles/Icons/Chart.tsx
new file mode 100644
index 0000000000..0dbe981227
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Chart.tsx
@@ -0,0 +1,20 @@
+import { SVGProps } from 'react'
+
+const SvgChart = (props: SVGProps) => (
+
+)
+
+export default SvgChart
diff --git a/applications/launchpad/gui-react/src/styles/Icons/ChartDark.tsx b/applications/launchpad/gui-react/src/styles/Icons/ChartDark.tsx
new file mode 100644
index 0000000000..37130df3c2
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/ChartDark.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgChartDark = (props: SVGProps) => (
+
+)
+
+export default SvgChartDark
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Check.tsx b/applications/launchpad/gui-react/src/styles/Icons/Check.tsx
new file mode 100644
index 0000000000..8e3698a405
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Check.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCheck = (props: SVGProps) => (
+
+)
+
+export default SvgCheck
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CheckRound.tsx b/applications/launchpad/gui-react/src/styles/Icons/CheckRound.tsx
new file mode 100644
index 0000000000..f66392cba0
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CheckRound.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCheckRound = (props: SVGProps) => (
+
+)
+
+export default SvgCheckRound
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Checklist.tsx b/applications/launchpad/gui-react/src/styles/Icons/Checklist.tsx
new file mode 100644
index 0000000000..c1fafe81bc
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Checklist.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgChecklist = (props: SVGProps) => (
+
+)
+
+export default SvgChecklist
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Clock.tsx b/applications/launchpad/gui-react/src/styles/Icons/Clock.tsx
new file mode 100644
index 0000000000..ff3a17f027
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Clock.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgClock = (props: SVGProps) => (
+
+)
+
+export default SvgClock
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Close.tsx b/applications/launchpad/gui-react/src/styles/Icons/Close.tsx
new file mode 100644
index 0000000000..4caf6e369f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Close.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgClose = (props: SVGProps) => (
+
+)
+
+export default SvgClose
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CloseCross.tsx b/applications/launchpad/gui-react/src/styles/Icons/CloseCross.tsx
new file mode 100644
index 0000000000..a950d3f117
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CloseCross.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCloseCross = (props: SVGProps) => (
+
+)
+
+export default SvgCloseCross
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Cloud.tsx b/applications/launchpad/gui-react/src/styles/Icons/Cloud.tsx
new file mode 100644
index 0000000000..36855f7320
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Cloud.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCloud = (props: SVGProps) => (
+
+)
+
+export default SvgCloud
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Cloud1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Cloud1.tsx
new file mode 100644
index 0000000000..e11e9048d9
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Cloud1.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCloud1 = (props: SVGProps) => (
+
+)
+
+export default SvgCloud1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CloudDrizzle.tsx b/applications/launchpad/gui-react/src/styles/Icons/CloudDrizzle.tsx
new file mode 100644
index 0000000000..492a122840
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CloudDrizzle.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCloudDrizzle = (props: SVGProps) => (
+
+)
+
+export default SvgCloudDrizzle
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CloudLightning.tsx b/applications/launchpad/gui-react/src/styles/Icons/CloudLightning.tsx
new file mode 100644
index 0000000000..ce2613c06a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CloudLightning.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCloudLightning = (props: SVGProps) => (
+
+)
+
+export default SvgCloudLightning
diff --git a/applications/launchpad/gui-react/src/styles/Icons/CmdKey.tsx b/applications/launchpad/gui-react/src/styles/Icons/CmdKey.tsx
new file mode 100644
index 0000000000..9d25e6decc
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/CmdKey.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCmdKey = (props: SVGProps) => (
+
+)
+
+export default SvgCmdKey
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Comparison.tsx b/applications/launchpad/gui-react/src/styles/Icons/Comparison.tsx
new file mode 100644
index 0000000000..7092a88a94
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Comparison.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgComparison = (props: SVGProps) => (
+
+)
+
+export default SvgComparison
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Copy.tsx b/applications/launchpad/gui-react/src/styles/Icons/Copy.tsx
new file mode 100644
index 0000000000..4f521e6abf
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Copy.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from 'react'
+
+const SvgCopy = (props: SVGProps) => (
+
+)
+
+export default SvgCopy
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Cpu.tsx b/applications/launchpad/gui-react/src/styles/Icons/Cpu.tsx
new file mode 100644
index 0000000000..131da90169
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Cpu.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCpu = (props: SVGProps) => (
+
+)
+
+export default SvgCpu
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Cup.tsx b/applications/launchpad/gui-react/src/styles/Icons/Cup.tsx
new file mode 100644
index 0000000000..d98d37b765
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Cup.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgCup = (props: SVGProps) => (
+
+)
+
+export default SvgCup
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Discovery.tsx b/applications/launchpad/gui-react/src/styles/Icons/Discovery.tsx
new file mode 100644
index 0000000000..c43414a1b9
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Discovery.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgDiscovery = (props: SVGProps) => (
+
+)
+
+export default SvgDiscovery
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Docker.tsx b/applications/launchpad/gui-react/src/styles/Icons/Docker.tsx
new file mode 100644
index 0000000000..1a6a558d21
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Docker.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgDocker = (props: SVGProps) => (
+
+)
+
+export default SvgDocker
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Document.tsx b/applications/launchpad/gui-react/src/styles/Icons/Document.tsx
new file mode 100644
index 0000000000..aa9fcb5eb5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Document.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgDocument = (props: SVGProps) => (
+
+)
+
+export default SvgDocument
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Dollar.tsx b/applications/launchpad/gui-react/src/styles/Icons/Dollar.tsx
new file mode 100644
index 0000000000..2883273d60
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Dollar.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgDollar = (props: SVGProps) => (
+
+)
+
+export default SvgDollar
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Edit.tsx b/applications/launchpad/gui-react/src/styles/Icons/Edit.tsx
new file mode 100644
index 0000000000..aceffaabd5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Edit.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgEdit = (props: SVGProps) => (
+
+)
+
+export default SvgEdit
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Edit1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Edit1.tsx
new file mode 100644
index 0000000000..906815e0c8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Edit1.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgEdit1 = (props: SVGProps) => (
+
+)
+
+export default SvgEdit1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Edit2.tsx b/applications/launchpad/gui-react/src/styles/Icons/Edit2.tsx
new file mode 100644
index 0000000000..b8c377ac6a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Edit2.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgEdit2 = (props: SVGProps) => (
+
+)
+
+export default SvgEdit2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Edit3.tsx b/applications/launchpad/gui-react/src/styles/Icons/Edit3.tsx
new file mode 100644
index 0000000000..ea4cc42430
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Edit3.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgEdit3 = (props: SVGProps) => (
+
+)
+
+export default SvgEdit3
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Export.tsx b/applications/launchpad/gui-react/src/styles/Icons/Export.tsx
new file mode 100644
index 0000000000..824e0cc06c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Export.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgExport = (props: SVGProps) => (
+
+)
+
+export default SvgExport
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Eye.tsx b/applications/launchpad/gui-react/src/styles/Icons/Eye.tsx
new file mode 100644
index 0000000000..3241119d9d
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Eye.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgEye = (props: SVGProps) => (
+
+)
+
+export default SvgEye
diff --git a/applications/launchpad/gui-react/src/styles/Icons/EyeSlash.tsx b/applications/launchpad/gui-react/src/styles/Icons/EyeSlash.tsx
new file mode 100644
index 0000000000..337530484a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/EyeSlash.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgEyeSlash = (props: SVGProps) => (
+
+)
+
+export default SvgEyeSlash
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Filter.tsx b/applications/launchpad/gui-react/src/styles/Icons/Filter.tsx
new file mode 100644
index 0000000000..b8452d38a6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Filter.tsx
@@ -0,0 +1,23 @@
+import { SVGProps } from 'react'
+
+const SvgFilter = (props: SVGProps) => (
+
+)
+
+export default SvgFilter
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Folder.tsx b/applications/launchpad/gui-react/src/styles/Icons/Folder.tsx
new file mode 100644
index 0000000000..51b061993d
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Folder.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgFolder = (props: SVGProps) => (
+
+)
+
+export default SvgFolder
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Gallery.tsx b/applications/launchpad/gui-react/src/styles/Icons/Gallery.tsx
new file mode 100644
index 0000000000..99b5240c1c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Gallery.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgGallery = (props: SVGProps) => (
+
+)
+
+export default SvgGallery
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Gps.tsx b/applications/launchpad/gui-react/src/styles/Icons/Gps.tsx
new file mode 100644
index 0000000000..9a33fb3e61
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Gps.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgGps = (props: SVGProps) => (
+
+)
+
+export default SvgGps
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Grid.tsx b/applications/launchpad/gui-react/src/styles/Icons/Grid.tsx
new file mode 100644
index 0000000000..7de7a12484
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Grid.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgGrid = (props: SVGProps) => (
+
+)
+
+export default SvgGrid
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Grid2.tsx b/applications/launchpad/gui-react/src/styles/Icons/Grid2.tsx
new file mode 100644
index 0000000000..3fad8693b8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Grid2.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgGrid2 = (props: SVGProps) => (
+
+)
+
+export default SvgGrid2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Grid3.tsx b/applications/launchpad/gui-react/src/styles/Icons/Grid3.tsx
new file mode 100644
index 0000000000..257256ffe1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Grid3.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgGrid3 = (props: SVGProps) => (
+
+)
+
+export default SvgGrid3
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Headphone.tsx b/applications/launchpad/gui-react/src/styles/Icons/Headphone.tsx
new file mode 100644
index 0000000000..5f793f2b39
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Headphone.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgHeadphone = (props: SVGProps) => (
+
+)
+
+export default SvgHeadphone
diff --git a/applications/launchpad/gui-react/src/styles/Icons/HeadphoneSlash.tsx b/applications/launchpad/gui-react/src/styles/Icons/HeadphoneSlash.tsx
new file mode 100644
index 0000000000..0f6fda48b2
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/HeadphoneSlash.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgHeadphoneSlash = (props: SVGProps) => (
+
+)
+
+export default SvgHeadphoneSlash
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Heart.tsx b/applications/launchpad/gui-react/src/styles/Icons/Heart.tsx
new file mode 100644
index 0000000000..750d6cfeb6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Heart.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgHeart = (props: SVGProps) => (
+
+)
+
+export default SvgHeart
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Home.tsx b/applications/launchpad/gui-react/src/styles/Icons/Home.tsx
new file mode 100644
index 0000000000..2f2e8c3e3b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Home.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgHome = (props: SVGProps) => (
+
+)
+
+export default SvgHome
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Home2.tsx b/applications/launchpad/gui-react/src/styles/Icons/Home2.tsx
new file mode 100644
index 0000000000..87b2abc149
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Home2.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgHome2 = (props: SVGProps) => (
+
+)
+
+export default SvgHome2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Icons.test.tsx b/applications/launchpad/gui-react/src/styles/Icons/Icons.test.tsx
new file mode 100644
index 0000000000..230ae4a647
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Icons.test.tsx
@@ -0,0 +1,187 @@
+import { render, screen } from '@testing-library/react'
+
+const ICONS = [
+ 'Add',
+ 'ArrowBottom',
+ 'ArrowBottom1',
+ 'ArrowBottom2',
+ 'ArrowBottom3',
+ 'ArrowLeft',
+ 'ArrowLeft1',
+ 'ArrowRight',
+ 'ArrowRight1',
+ 'ArrowRight2',
+ 'ArrowRight3',
+ 'ArrowSwap',
+ 'ArrowTop',
+ 'ArrowTop1',
+ 'ArrowTop2',
+ 'ArrowTop3',
+ 'Award',
+ 'Bag',
+ 'Bag2',
+ 'Battery',
+ 'Calendar',
+ 'CallCalling',
+ 'CallMuted',
+ 'CallSlash',
+ 'Camera',
+ 'CameraSlash',
+ 'Card',
+ 'Charge',
+ 'Chart',
+ 'ChartDark',
+ 'Check',
+ 'CheckRound',
+ 'Checklist',
+ 'Clock',
+ 'Close',
+ 'CloseCross',
+ 'Cloud',
+ 'Cloud1',
+ 'CloudDrizzle',
+ 'CloudLightning',
+ 'CmdKey',
+ 'Comparison',
+ 'Copy',
+ 'Cpu',
+ 'Cup',
+ 'Discovery',
+ 'Docker',
+ 'Document',
+ 'Dollar',
+ 'Edit',
+ 'Edit1',
+ 'Edit2',
+ 'Edit3',
+ 'Export',
+ 'Eye',
+ 'EyeSlash',
+ 'Filter',
+ 'Folder',
+ 'Gallery',
+ 'Gps',
+ 'Grid',
+ 'Grid2',
+ 'Grid3',
+ 'Headphone',
+ 'HeadphoneSlash',
+ 'Heart',
+ 'Home',
+ 'Home2',
+ 'Info',
+ 'Info1',
+ 'Instagram',
+ 'Loading',
+ 'Loading1',
+ 'Location',
+ 'Lock',
+ 'Lock1',
+ 'Marking',
+ 'Menu',
+ 'Menu1',
+ 'Message',
+ 'Message2',
+ 'Message3',
+ 'Message4',
+ 'Message5',
+ 'Mic',
+ 'Minus',
+ 'Mobile',
+ 'MoneroSignet',
+ 'Monitor',
+ 'Moon',
+ 'More',
+ 'More1',
+ 'Mouse',
+ 'Note',
+ 'Note2',
+ 'Note3',
+ 'NoteAdd',
+ 'NoteCheck',
+ 'NoteDelete',
+ 'NoteMinus',
+ 'Notification',
+ 'Notification1',
+ 'Notification2',
+ 'Notification3',
+ 'Phone',
+ 'Play',
+ 'Play1',
+ 'Plus',
+ 'Presentation',
+ 'Presentation1',
+ 'Printer',
+ 'Programming',
+ 'Question',
+ 'Report',
+ 'Reserve',
+ 'RotateLeft',
+ 'RotateRight',
+ 'Saved',
+ 'Scan',
+ 'Scan2',
+ 'Scan3',
+ 'Search',
+ 'Send',
+ 'Setting',
+ 'Setting2',
+ 'Setting3',
+ 'Shield',
+ 'ShieldCheck',
+ 'ShieldVulnerable',
+ 'ShoppingCart',
+ 'Smiley',
+ 'SmileyNot',
+ 'Sort',
+ 'Star',
+ 'Star1',
+ 'Status',
+ 'Sun',
+ 'Sunrise',
+ 'TariLaunchpadLogo',
+ 'TariLogo',
+ 'TariSignet',
+ 'TariSignetGradient',
+ 'TBotBase',
+ 'TBotDots',
+ 'TBotHearts',
+ 'TBotHeartsMonero',
+ 'TBotLoading',
+ 'TBotSearch',
+ 'Text',
+ 'Tick',
+ 'Todo',
+ 'Trash',
+ 'Trash2',
+ 'TurnOff',
+ 'Tv',
+ 'TwoUser',
+ 'Unlock',
+ 'User',
+ 'UserPlus',
+ 'UserScan',
+ 'Video',
+ 'VolumeCross',
+ 'VolumeHigh',
+ 'VolumeLow',
+ 'VolumeMute',
+ 'VolumeSlash',
+ 'Wallet',
+ 'WinKey',
+ 'Work',
+ 'ZoomIn',
+ 'ZoomOut',
+]
+
+describe('Icons', () => {
+ ICONS.forEach(icon => {
+ it(`renders ${icon} icon without crashing`, async () => {
+ const ComponentToRender = (await import(`./${icon}`)).default
+ render()
+
+ const el = screen.getByTestId(`svg-${icon.toLowerCase()}`)
+ expect(el).toBeInTheDocument()
+ })
+ })
+})
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Info.tsx b/applications/launchpad/gui-react/src/styles/Icons/Info.tsx
new file mode 100644
index 0000000000..e81141750f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Info.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgInfo = (props: SVGProps) => (
+
+)
+
+export default SvgInfo
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Info1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Info1.tsx
new file mode 100644
index 0000000000..a20f30dbb3
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Info1.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgInfo1 = (props: SVGProps) => (
+
+)
+
+export default SvgInfo1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Instagram.tsx b/applications/launchpad/gui-react/src/styles/Icons/Instagram.tsx
new file mode 100644
index 0000000000..a21c4e82f7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Instagram.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgInstagram = (props: SVGProps) => (
+
+)
+
+export default SvgInstagram
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Loading.tsx b/applications/launchpad/gui-react/src/styles/Icons/Loading.tsx
new file mode 100644
index 0000000000..bae4dcbdb5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Loading.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgLoading = (props: SVGProps) => (
+
+)
+
+export default SvgLoading
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Loading1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Loading1.tsx
new file mode 100644
index 0000000000..0779ee4651
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Loading1.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgLoading1 = (props: SVGProps) => (
+
+)
+
+export default SvgLoading1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Location.tsx b/applications/launchpad/gui-react/src/styles/Icons/Location.tsx
new file mode 100644
index 0000000000..ecf0eb7a7c
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Location.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgLocation = (props: SVGProps) => (
+
+)
+
+export default SvgLocation
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Lock.tsx b/applications/launchpad/gui-react/src/styles/Icons/Lock.tsx
new file mode 100644
index 0000000000..3a35bc2858
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Lock.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgLock = (props: SVGProps) => (
+
+)
+
+export default SvgLock
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Lock1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Lock1.tsx
new file mode 100644
index 0000000000..3b837ea15b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Lock1.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgLock1 = (props: SVGProps) => (
+
+)
+
+export default SvgLock1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Marking.tsx b/applications/launchpad/gui-react/src/styles/Icons/Marking.tsx
new file mode 100644
index 0000000000..a54c5cc6b7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Marking.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMarking = (props: SVGProps) => (
+
+)
+
+export default SvgMarking
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Menu.tsx b/applications/launchpad/gui-react/src/styles/Icons/Menu.tsx
new file mode 100644
index 0000000000..54d5239800
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Menu.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMenu = (props: SVGProps) => (
+
+)
+
+export default SvgMenu
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Menu1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Menu1.tsx
new file mode 100644
index 0000000000..e04f98560d
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Menu1.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMenu1 = (props: SVGProps) => (
+
+)
+
+export default SvgMenu1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Message.tsx b/applications/launchpad/gui-react/src/styles/Icons/Message.tsx
new file mode 100644
index 0000000000..f118a3d932
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Message.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMessage = (props: SVGProps) => (
+
+)
+
+export default SvgMessage
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Message2.tsx b/applications/launchpad/gui-react/src/styles/Icons/Message2.tsx
new file mode 100644
index 0000000000..242533bbf5
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Message2.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMessage2 = (props: SVGProps) => (
+
+)
+
+export default SvgMessage2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Message3.tsx b/applications/launchpad/gui-react/src/styles/Icons/Message3.tsx
new file mode 100644
index 0000000000..9d1af0de06
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Message3.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMessage3 = (props: SVGProps) => (
+
+)
+
+export default SvgMessage3
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Message4.tsx b/applications/launchpad/gui-react/src/styles/Icons/Message4.tsx
new file mode 100644
index 0000000000..faef862c53
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Message4.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMessage4 = (props: SVGProps) => (
+
+)
+
+export default SvgMessage4
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Message5.tsx b/applications/launchpad/gui-react/src/styles/Icons/Message5.tsx
new file mode 100644
index 0000000000..d2bef0b808
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Message5.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMessage5 = (props: SVGProps) => (
+
+)
+
+export default SvgMessage5
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Mic.tsx b/applications/launchpad/gui-react/src/styles/Icons/Mic.tsx
new file mode 100644
index 0000000000..8cc070b550
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Mic.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMic = (props: SVGProps) => (
+
+)
+
+export default SvgMic
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Minus.tsx b/applications/launchpad/gui-react/src/styles/Icons/Minus.tsx
new file mode 100644
index 0000000000..ed71d9ed8b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Minus.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMinus = (props: SVGProps) => (
+
+)
+
+export default SvgMinus
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Mobile.tsx b/applications/launchpad/gui-react/src/styles/Icons/Mobile.tsx
new file mode 100644
index 0000000000..78e22006a3
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Mobile.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMobile = (props: SVGProps) => (
+
+)
+
+export default SvgMobile
diff --git a/applications/launchpad/gui-react/src/styles/Icons/MoneroSignet.tsx b/applications/launchpad/gui-react/src/styles/Icons/MoneroSignet.tsx
new file mode 100644
index 0000000000..384183627a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/MoneroSignet.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react'
+
+const SvgMoneroSignet = (props: SVGProps) => (
+
+)
+
+export default SvgMoneroSignet
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Monitor.tsx b/applications/launchpad/gui-react/src/styles/Icons/Monitor.tsx
new file mode 100644
index 0000000000..516dad3af4
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Monitor.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMonitor = (props: SVGProps) => (
+
+)
+
+export default SvgMonitor
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Moon.tsx b/applications/launchpad/gui-react/src/styles/Icons/Moon.tsx
new file mode 100644
index 0000000000..b51cc022e8
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Moon.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMoon = (props: SVGProps) => (
+
+)
+
+export default SvgMoon
diff --git a/applications/launchpad/gui-react/src/styles/Icons/More.tsx b/applications/launchpad/gui-react/src/styles/Icons/More.tsx
new file mode 100644
index 0000000000..6b61e46230
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/More.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMore = (props: SVGProps) => (
+
+)
+
+export default SvgMore
diff --git a/applications/launchpad/gui-react/src/styles/Icons/More1.tsx b/applications/launchpad/gui-react/src/styles/Icons/More1.tsx
new file mode 100644
index 0000000000..a4f0c1ddaf
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/More1.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMore1 = (props: SVGProps) => (
+
+)
+
+export default SvgMore1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Mouse.tsx b/applications/launchpad/gui-react/src/styles/Icons/Mouse.tsx
new file mode 100644
index 0000000000..a8730bab98
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Mouse.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgMouse = (props: SVGProps) => (
+
+)
+
+export default SvgMouse
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Note.tsx b/applications/launchpad/gui-react/src/styles/Icons/Note.tsx
new file mode 100644
index 0000000000..e864ae22f7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Note.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNote = (props: SVGProps) => (
+
+)
+
+export default SvgNote
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Note2.tsx b/applications/launchpad/gui-react/src/styles/Icons/Note2.tsx
new file mode 100644
index 0000000000..c99b5d4c97
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Note2.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNote2 = (props: SVGProps) => (
+
+)
+
+export default SvgNote2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Note3.tsx b/applications/launchpad/gui-react/src/styles/Icons/Note3.tsx
new file mode 100644
index 0000000000..baf349be76
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Note3.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNote3 = (props: SVGProps) => (
+
+)
+
+export default SvgNote3
diff --git a/applications/launchpad/gui-react/src/styles/Icons/NoteAdd.tsx b/applications/launchpad/gui-react/src/styles/Icons/NoteAdd.tsx
new file mode 100644
index 0000000000..425031cf92
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/NoteAdd.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNoteAdd = (props: SVGProps) => (
+
+)
+
+export default SvgNoteAdd
diff --git a/applications/launchpad/gui-react/src/styles/Icons/NoteCheck.tsx b/applications/launchpad/gui-react/src/styles/Icons/NoteCheck.tsx
new file mode 100644
index 0000000000..4629b1a2ce
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/NoteCheck.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNoteCheck = (props: SVGProps) => (
+
+)
+
+export default SvgNoteCheck
diff --git a/applications/launchpad/gui-react/src/styles/Icons/NoteDelete.tsx b/applications/launchpad/gui-react/src/styles/Icons/NoteDelete.tsx
new file mode 100644
index 0000000000..597970582f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/NoteDelete.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNoteDelete = (props: SVGProps) => (
+
+)
+
+export default SvgNoteDelete
diff --git a/applications/launchpad/gui-react/src/styles/Icons/NoteMinus.tsx b/applications/launchpad/gui-react/src/styles/Icons/NoteMinus.tsx
new file mode 100644
index 0000000000..d581c2b24d
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/NoteMinus.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNoteMinus = (props: SVGProps) => (
+
+)
+
+export default SvgNoteMinus
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Notification.tsx b/applications/launchpad/gui-react/src/styles/Icons/Notification.tsx
new file mode 100644
index 0000000000..c7e642b3d2
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Notification.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNotification = (props: SVGProps) => (
+
+)
+
+export default SvgNotification
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Notification1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Notification1.tsx
new file mode 100644
index 0000000000..01e19162c1
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Notification1.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNotification1 = (props: SVGProps) => (
+
+)
+
+export default SvgNotification1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Notification2.tsx b/applications/launchpad/gui-react/src/styles/Icons/Notification2.tsx
new file mode 100644
index 0000000000..008c514312
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Notification2.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNotification2 = (props: SVGProps) => (
+
+)
+
+export default SvgNotification2
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Notification3.tsx b/applications/launchpad/gui-react/src/styles/Icons/Notification3.tsx
new file mode 100644
index 0000000000..9ad2c71f25
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Notification3.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgNotification3 = (props: SVGProps) => (
+
+)
+
+export default SvgNotification3
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Phone.tsx b/applications/launchpad/gui-react/src/styles/Icons/Phone.tsx
new file mode 100644
index 0000000000..c239a2655b
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Phone.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgPhone = (props: SVGProps) => (
+
+)
+
+export default SvgPhone
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Play.tsx b/applications/launchpad/gui-react/src/styles/Icons/Play.tsx
new file mode 100644
index 0000000000..ebe02edb86
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Play.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from 'react'
+
+const SvgPlay = (props: SVGProps) => (
+
+)
+
+export default SvgPlay
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Play1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Play1.tsx
new file mode 100644
index 0000000000..502e89a612
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Play1.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgPlay1 = (props: SVGProps) => (
+
+)
+
+export default SvgPlay1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Plus.tsx b/applications/launchpad/gui-react/src/styles/Icons/Plus.tsx
new file mode 100644
index 0000000000..7702e2887a
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Plus.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgPlus = (props: SVGProps) => (
+
+)
+
+export default SvgPlus
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Presentation.tsx b/applications/launchpad/gui-react/src/styles/Icons/Presentation.tsx
new file mode 100644
index 0000000000..4770de2398
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Presentation.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgPresentation = (props: SVGProps) => (
+
+)
+
+export default SvgPresentation
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Presentation1.tsx b/applications/launchpad/gui-react/src/styles/Icons/Presentation1.tsx
new file mode 100644
index 0000000000..2434c11f3f
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Presentation1.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgPresentation1 = (props: SVGProps) => (
+
+)
+
+export default SvgPresentation1
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Printer.tsx b/applications/launchpad/gui-react/src/styles/Icons/Printer.tsx
new file mode 100644
index 0000000000..0ec1f05b56
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Printer.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgPrinter = (props: SVGProps) => (
+
+)
+
+export default SvgPrinter
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Programming.tsx b/applications/launchpad/gui-react/src/styles/Icons/Programming.tsx
new file mode 100644
index 0000000000..63daec99e2
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Programming.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgProgramming = (props: SVGProps) => (
+
+)
+
+export default SvgProgramming
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Question.tsx b/applications/launchpad/gui-react/src/styles/Icons/Question.tsx
new file mode 100644
index 0000000000..e84c38d6cf
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Question.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgQuestion = (
+ props: SVGProps & {
+ useGradient?: boolean
+ testid?: 'help-icon-cmp'
+ },
+) => (
+
+)
+
+export default SvgQuestion
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Report.tsx b/applications/launchpad/gui-react/src/styles/Icons/Report.tsx
new file mode 100644
index 0000000000..15deebd9b2
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Report.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgReport = (props: SVGProps) => (
+
+)
+
+export default SvgReport
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Reserve.tsx b/applications/launchpad/gui-react/src/styles/Icons/Reserve.tsx
new file mode 100644
index 0000000000..fedf33aa04
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Reserve.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgReserve = (props: SVGProps) => (
+
+)
+
+export default SvgReserve
diff --git a/applications/launchpad/gui-react/src/styles/Icons/RotateLeft.tsx b/applications/launchpad/gui-react/src/styles/Icons/RotateLeft.tsx
new file mode 100644
index 0000000000..30254402b7
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/RotateLeft.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgRotateLeft = (props: SVGProps) => (
+
+)
+
+export default SvgRotateLeft
diff --git a/applications/launchpad/gui-react/src/styles/Icons/RotateRight.tsx b/applications/launchpad/gui-react/src/styles/Icons/RotateRight.tsx
new file mode 100644
index 0000000000..52cec62aa6
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/RotateRight.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgRotateRight = (props: SVGProps) => (
+
+)
+
+export default SvgRotateRight
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Saved.tsx b/applications/launchpad/gui-react/src/styles/Icons/Saved.tsx
new file mode 100644
index 0000000000..cdad99457e
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Saved.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgSaved = (props: SVGProps) => (
+
+)
+
+export default SvgSaved
diff --git a/applications/launchpad/gui-react/src/styles/Icons/Scan.tsx b/applications/launchpad/gui-react/src/styles/Icons/Scan.tsx
new file mode 100644
index 0000000000..d12197f395
--- /dev/null
+++ b/applications/launchpad/gui-react/src/styles/Icons/Scan.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgScan = (props: SVGProps) => (
+