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, }