diff --git a/public/sprite.svg b/public/sprite.svg
index 7e13c95b5..e31495fbb 100644
--- a/public/sprite.svg
+++ b/public/sprite.svg
@@ -10,6 +10,10 @@
+
+
+
+
diff --git a/src/components/App.jsx b/src/components/App.jsx
index d3e7c4155..db217d792 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -14,15 +14,17 @@ import { useSettings } from '../context/SettingsContext'
import { useCurrentWallet, useSetCurrentWallet, useSetCurrentWalletInfo } from '../context/WalletContext'
import { getSession, setSession, clearSession } from '../session'
+import Onboarding from './Onboarding'
+
export default function App() {
const currentWallet = useCurrentWallet()
const setCurrentWallet = useSetCurrentWallet()
const setCurrentWalletInfo = useSetCurrentWalletInfo()
- const settings = useSettings()
const [makerRunning, setMakerRunning] = useState()
const [connectionError, setConnectionError] = useState()
const [coinjoinInProcess, setCoinjoinInProcess] = useState()
+ const settings = useSettings()
const startWallet = useCallback(
(name, token) => {
@@ -88,6 +90,9 @@ export default function App() {
}
}, [startWallet])
+ if (settings.showOnboarding === true) {
+ return
+ }
return (
<>
diff --git a/src/components/Onboarding.jsx b/src/components/Onboarding.jsx
new file mode 100644
index 000000000..e464fd170
--- /dev/null
+++ b/src/components/Onboarding.jsx
@@ -0,0 +1,150 @@
+import * as rb from 'react-bootstrap'
+import React, { useState } from 'react'
+import Sprite from './Sprite'
+import { useSettingsDispatch } from '../context/SettingsContext'
+
+export default function Onboarding() {
+ const [step, setStep] = useState(0)
+ const settingsDispatch = useSettingsDispatch()
+
+ if (step === 0) {
+ return (
+
+
+
+
+
JoinMarket
+
Top-notch privacy for your bitcoin.
+
+ setStep(1)}>
+ Get started
+
+
+
+ settingsDispatch({ showOnboarding: false })}
+ >
+ Skip intro
+
+
+
+ Your wallet, your coins.
+ 100% open-source & open-design.
+
+
+ )
+ } else if (step === 1) {
+ return (
+
+
+
+
+
Welcome to JoinMarket!
+
+ JoinMarket is a privacy-focused software solution that aims to improve the confidentiality and privacy of your
+ bitcoin transactions. It facilitates the creation of collaborative transactions through a peer-to-peer
+ marketplace.
+
+ ⚠️ Warning: While JoinMarket is tried and tested, this user interface is not. If anything breaks please{' '}
+
+ report an issue
+ {' '}
+ on GitHub.
+
+
+ setStep(2)}>
+ Next
+
+
+
+ )
+ } else if (step === 2) {
+ return (
+
+
+
+
+
Collaborative Transactions
+
+ To have strong privacy guarantees in the open and transparent world of bitcoin, special kinds of transactions
+ have to be created. JoinMarket helps you to create these transactions in an easy and automated way.
+
+
+ setStep(3)}>
+ Next
+
+
+
+ )
+ } else if (step === 3) {
+ return (
+
+
+
+
+
You Are In Control
+
+ JoinMarket is fully non-custodial, meaning that you always have full control over your funds. The system uses
+ Bitcoin’s smart contracts to make sure that all transactions are atomic and your funds are secure at all
+ times.
+
+
+ setStep(4)}>
+ Next
+
+
+
+ )
+ } else if (step === 4) {
+ return (
+
+
+
+
+
No Trusted Third Parties
+
+ Since JoinMarket is a peer-to-peer system, trusted third parties are eliminated from the get-go. This unique
+ market-driven approach reduces counterparty risk to a minimum.
+
+
+ setStep(5)}>
+ Next
+
+
+
+ )
+ } else if (step === 5) {
+ return (
+
+
+
+
+
Privacy for All
+
+ JoinMarket is free and open-source software without a single point of failure. Everyone is free to use it and
+ build upon it.
+
+
+ {
+ settingsDispatch({ showOnboarding: false })
+ }}
+ >
+ Let's go!
+
+
+
+ )
+ }
+}
diff --git a/src/context/SettingsContext.jsx b/src/context/SettingsContext.jsx
index 252aff9cf..57dcbcb6c 100644
--- a/src/context/SettingsContext.jsx
+++ b/src/context/SettingsContext.jsx
@@ -6,6 +6,7 @@ const localStorageKey = window.JM.SETTINGS_STORE_KEY
const initialSettings = {
showBalance: false,
unit: BTC,
+ showOnboarding: true,
useAdvancedWalletMode: false,
}