Skip to content

Commit

Permalink
Hook up onboarding and some styling updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@secondl1ght
secondl1ght committed Feb 7, 2022
1 parent 7c839e1 commit b780e9b
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 86 deletions.
151 changes: 78 additions & 73 deletions src/components/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Settings from './Settings'
import Navbar from './Navbar'
import { useCurrentWallet, useSetCurrentWallet, useSetCurrentWalletInfo } from '../context/WalletContext'
import { getSession, setSession, clearSession } from '../session'
import { useSettings } from '../context/SettingsContext'
import Onboarding from './Onboarding'

export default function App() {
Expand All @@ -20,6 +21,7 @@ export default function App() {
const [makerRunning, setMakerRunning] = useState()
const [connectionError, setConnectionError] = useState()
const [coinjoinInProcess, setCoinjoinInProcess] = useState()
const settings = useSettings()

const startWallet = useCallback(
(name, token) => {
Expand Down Expand Up @@ -85,78 +87,81 @@ export default function App() {
}
}, [startWallet])

return (
<>
<Navbar coinjoinInProcess={coinjoinInProcess} makerRunning={makerRunning} connectionError={connectionError} />
<rb.Container as="main" className="py-4">
{connectionError ? (
<rb.Alert variant="danger">No connection to backend: {connectionError}.</rb.Alert>
) : (
<Routes>
<Route
path="/"
element={<Wallets currentWallet={currentWallet} startWallet={startWallet} stopWallet={stopWallet} />}
/>
<Route
path="create-wallet"
element={<CreateWallet currentWallet={currentWallet} startWallet={startWallet} />}
/>
{currentWallet && (
<>
<Route path="wallet" element={<CurrentWallet currentWallet={currentWallet} />} />
<Route path="send" element={<Send currentWallet={currentWallet} />} />
<Route path="earn" element={<Earn currentWallet={currentWallet} makerRunning={makerRunning} />} />
<Route path="receive" element={<Receive currentWallet={currentWallet} />} />
<Route path="settings" element={<Settings currentWallet={currentWallet} />} />
</>
)}
</Routes>
)}
</rb.Container>
<rb.Nav as="footer" className="border-top py-2">
<rb.Container className="d-flex justify-content-center">
<rb.Nav.Item>
<a
href="https://github.com/JoinMarket-Org/joinmarket-clientserver/tree/master/docs"
target="_blank"
rel="noreferrer"
className="nav-link text-secondary"
>
Docs
</a>
</rb.Nav.Item>
<rb.Nav.Item>
<a
href="https://github.com/JoinMarket-Org/joinmarket-clientserver#wallet-features"
target="_blank"
rel="noreferrer"
className="nav-link text-secondary"
>
Features
</a>
</rb.Nav.Item>
<rb.Nav.Item>
<a
href="https://github.com/JoinMarket-Org/joinmarket-clientserver"
target="_blank"
rel="noreferrer"
className="nav-link text-secondary"
>
GitHub
</a>
</rb.Nav.Item>
<rb.Nav.Item>
<a
href="https://twitter.com/joinmarket"
target="_blank"
rel="noreferrer"
className="nav-link text-secondary"
>
Twitter
</a>
</rb.Nav.Item>
if (settings.showOnboarding === true) {
return <Onboarding />
} else
return (
<>
<Navbar coinjoinInProcess={coinjoinInProcess} makerRunning={makerRunning} connectionError={connectionError} />
<rb.Container as="main" className="py-4">
{connectionError ? (
<rb.Alert variant="danger">No connection to backend: {connectionError}.</rb.Alert>
) : (
<Routes>
<Route
path="/"
element={<Wallets currentWallet={currentWallet} startWallet={startWallet} stopWallet={stopWallet} />}
/>
<Route
path="create-wallet"
element={<CreateWallet currentWallet={currentWallet} startWallet={startWallet} />}
/>
{currentWallet && (
<>
<Route path="wallet" element={<CurrentWallet currentWallet={currentWallet} />} />
<Route path="send" element={<Send currentWallet={currentWallet} />} />
<Route path="earn" element={<Earn currentWallet={currentWallet} makerRunning={makerRunning} />} />
<Route path="receive" element={<Receive currentWallet={currentWallet} />} />
<Route path="settings" element={<Settings currentWallet={currentWallet} />} />
</>
)}
</Routes>
)}
</rb.Container>
</rb.Nav>
</>
)
<rb.Nav as="footer" className="border-top py-2">
<rb.Container className="d-flex justify-content-center">
<rb.Nav.Item>
<a
href="https://github.com/JoinMarket-Org/joinmarket-clientserver/tree/master/docs"
target="_blank"
rel="noreferrer"
className="nav-link text-secondary"
>
Docs
</a>
</rb.Nav.Item>
<rb.Nav.Item>
<a
href="https://github.com/JoinMarket-Org/joinmarket-clientserver#wallet-features"
target="_blank"
rel="noreferrer"
className="nav-link text-secondary"
>
Features
</a>
</rb.Nav.Item>
<rb.Nav.Item>
<a
href="https://github.com/JoinMarket-Org/joinmarket-clientserver"
target="_blank"
rel="noreferrer"
className="nav-link text-secondary"
>
GitHub
</a>
</rb.Nav.Item>
<rb.Nav.Item>
<a
href="https://twitter.com/joinmarket"
target="_blank"
rel="noreferrer"
className="nav-link text-secondary"
>
Twitter
</a>
</rb.Nav.Item>
</rb.Container>
</rb.Nav>
</>
)
}
39 changes: 26 additions & 13 deletions src/components/Onboarding.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
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 (
Expand All @@ -14,7 +16,7 @@ export default function Onboarding() {
<h1 class="text-center">JoinMarket</h1>
<p class="text-center fs-4 text-secondary mb-5">Top-notch privacy for your bitcoin.</p>
<div class="d-flex justify-content-center">
<rb.Button variant="dark" onClick={() => setStep(1)}>
<rb.Button size="lg" className="col-10" variant="dark" onClick={() => setStep(1)}>
Get started
</rb.Button>
</div>
Expand All @@ -28,7 +30,7 @@ export default function Onboarding() {
return (
<div class="mx-auto my-auto col-12 col-md-4">
<div class="d-flex justify-content-center">
<Sprite symbol="welcome" width="100" height="100" className="mb-4" />
<Sprite symbol="welcome" width="150" height="150" className="mb-4" />
</div>
<p class="fs-3 text-center">1: Welcome to JoinMarket!</p>
<p class="text-center text-secondary mb-5">
Expand All @@ -37,13 +39,18 @@ export default function Onboarding() {
marketplace. <br />
<br />
⚠️ Warning: While JoinMarket is tried and tested, this user interface is not. If anything breaks please{' '}
<a href="https://github.com/joinmarket-webui/joinmarket-webui/issues" target="_blank" rel="noreferrer">
<a
href="https://github.com/joinmarket-webui/joinmarket-webui/issues"
target="_blank"
rel="noreferrer"
class="link-secondary"
>
report an issue
</a>{' '}
on GitHub.
</p>
<div class="d-flex justify-content-center">
<rb.Button variant="dark" onClick={() => setStep(2)}>
<rb.Button size="lg" variant="dark" onClick={() => setStep(2)}>
Continue
</rb.Button>
</div>
Expand All @@ -53,15 +60,15 @@ export default function Onboarding() {
return (
<div class="mx-auto my-auto col-12 col-md-4">
<div class="d-flex justify-content-center">
<Sprite symbol="collab" width="100" height="100" className="mb-4" />
<Sprite symbol="collab" width="150" height="150" className="mb-4" />
</div>
<p class="fs-3 text-center">2: Collaborative Transactions</p>
<p class="text-center text-secondary mb-5">
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.
</p>
<div class="d-flex justify-content-center">
<rb.Button variant="dark" onClick={() => setStep(3)}>
<rb.Button size="lg" variant="dark" onClick={() => setStep(3)}>
Continue
</rb.Button>
</div>
Expand All @@ -71,7 +78,7 @@ export default function Onboarding() {
return (
<div class="mx-auto my-auto col-12 col-md-4">
<div class="d-flex justify-content-center">
<Sprite symbol="key" width="100" height="100" className="mb-4" />
<Sprite symbol="key" width="150" height="150" className="mb-4" />
</div>
<p class="fs-3 text-center">3: You Are In Control</p>
<p class="text-center text-secondary mb-5">
Expand All @@ -80,7 +87,7 @@ export default function Onboarding() {
times.
</p>
<div class="d-flex justify-content-center">
<rb.Button variant="dark" onClick={() => setStep(4)}>
<rb.Button size="lg" variant="dark" onClick={() => setStep(4)}>
Continue
</rb.Button>
</div>
Expand All @@ -90,15 +97,15 @@ export default function Onboarding() {
return (
<div class="mx-auto my-auto col-12 col-md-4">
<div class="d-flex justify-content-center">
<Sprite symbol="handshake" width="100" height="100" className="mb-4" />
<Sprite symbol="handshake" width="150" height="150" className="mb-4" />
</div>
<p class="fs-3 text-center">4. No Trusted Third Parties</p>
<p class="text-center text-secondary mb-5">
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.
</p>
<div class="d-flex justify-content-center">
<rb.Button variant="dark" onClick={() => setStep(5)}>
<rb.Button size="lg" variant="dark" onClick={() => setStep(5)}>
Continue
</rb.Button>
</div>
Expand All @@ -108,16 +115,22 @@ export default function Onboarding() {
return (
<div class="mx-auto my-auto col-12 col-md-4">
<div class="d-flex justify-content-center">
<Sprite symbol="shield" width="100" height="100" className="mb-4" />
<Sprite symbol="shield" width="150" height="150" className="mb-4" />
</div>
<p class="fs-3 text-center">5: Privacy for All</p>
<p class="text-center text-secondary mb-5">
JoinMarket is free and open-source software without a single point of failure. Everyone is free to use it and
build upon it.
</p>
<div class="d-flex justify-content-center">
<rb.Button variant="dark" onClick={() => setStep(0)}>
Continue
<rb.Button
size="lg"
variant="dark"
onClick={() => {
settingsDispatch({ showOnboarding: false })
}}
>
Let's go!
</rb.Button>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/context/SettingsContext.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const localStorageKey = window.JM.SETTINGS_STORE_KEY
const initialSettings = {
showBalance: false,
unit: BTC,
showOnboarding: true,
}

const SettingsContext = createContext()
Expand Down

0 comments on commit b780e9b

Please sign in to comment.