Skip to content

Commit

Permalink
Better settings popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@KaffinPX
KaffinPX committed Jan 15, 2025
1 parent 66ab46d commit 83ab572
Showing 1 changed file with 87 additions and 67 deletions.
154 changes: 87 additions & 67 deletions src/pages/Wallet/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,81 +32,101 @@ export default function Settings () {
<div className="drawer-side align-middle">
<label htmlFor="settings-drawer" className="drawer-overlay"></label>
<ul className="menu bg-base-200 text-base-content rounded-l-box min-h-full w-60 p-4">
<h3 className="text-2xl font-extrabold tracking-tight">Settings</h3>
<div className="divider">General</div>
<button className="btn" onClick={() => {
const tickers = Object.keys(currencies)
const currentIndex = tickers.indexOf(settings.currency)
const nextCurrency = tickers[(currentIndex + 1) % tickers.length] as keyof typeof currencies
<div className="collapse shadow-md">
<input type="radio" name="my-accordion-1" defaultChecked />
<div className="collapse-title font-bold">General</div>
<div className="collapse-content">
<button className="btn" onClick={() => {
const tickers = Object.keys(currencies)
const currentIndex = tickers.indexOf(settings.currency)
const nextCurrency = tickers[(currentIndex + 1) % tickers.length] as keyof typeof currencies

updateSetting('currency', nextCurrency)
}}>
<DollarSignIcon />
Currency: {settings.currency}
</button>
<div className="divider">Network</div>
<label className="form-control w-full max-w-xs">
<div className="label">
<span className="label-text">Selected node</span>
<div className={`badge label-text-alt badge-outline badge-xs ${kaspa.connected ? 'badge-success' : 'badge-error'}`}>
{kaspa.connected ? 'Connected' : 'Disconnected'}
</div>
updateSetting('currency', nextCurrency)
}}>
<DollarSignIcon />
Currency: {settings.currency}
</button>
</div>
<select className="select select-bordered" value={settings.selectedNode} onChange={(e) => {
const id = parseInt(e.target.value)

updateSetting('selectedNode', id)
request('node:connect', [ settings.nodes[id].address ])
}}>
{settings.nodes.map((node, id) => {
return (
<option key={id} value={id}>{node.name} - {node.address}</option>
)
})}
</select>
</label>
<div className="divider">Account</div>
<div className="flex justify-between px-4 py-2 badge badge-warning w-full">
<span className="font-medium">Receive addresses</span>
<p className="tabular-nums font-mono">{kaspa.addresses[0].length}</p>
</div>
<div className="flex justify-between px-4 py-2 badge badge-warning w-full">
<span className="font-medium">Change addresses</span>
<p className="tabular-nums font-mono">{kaspa.addresses[1].length}</p>
<div className="collapse shadow-md">
<input type="radio" name="my-accordion-1" />
<div className="collapse-title font-bold">Network</div>
<div className="collapse-content">
<label className="form-control w-full max-w-xs">
<div className="label">
<span className="label-text">Node</span>
<div className={`badge label-text-alt badge-outline badge-xs ${kaspa.connected ? 'badge-success' : 'badge-error'}`}>
{kaspa.connected ? 'Connected' : 'Disconnected'}
</div>
</div>
<select className="select select-bordered" value={settings.selectedNode} onChange={(e) => {
const id = parseInt(e.target.value)

updateSetting('selectedNode', id)
request('node:connect', [ settings.nodes[id].address ])
}}>
{settings.nodes.map((node, id) => {
return (
<option key={id} value={id}>{node.name} - {node.address}</option>
)
})}
</select>
</label>
</div>
</div>
<button className="btn" onClick={({ currentTarget }) => {
currentTarget.disabled = true
<div className="collapse shadow-md">
<input type="radio" name="my-accordion-1" />
<div className="collapse-title font-bold">Account</div>
<div className="collapse-content">
<div className="flex justify-between py-2 badge badge-warning w-full">
<span className="font-medium text-xs">Receive addresses</span>
<p className="tabular-nums font-mono">{kaspa.addresses[0].length}</p>
</div>
<div className="flex justify-between py-2 badge badge-warning w-full">
<span className="font-medium text-xs">Change addresses</span>
<p className="tabular-nums font-mono">{kaspa.addresses[1].length}</p>
</div>
<button className="btn" onClick={({ currentTarget }) => {
currentTarget.disabled = true

request('account:scan', []).then(() => {
currentTarget.disabled = false
})
}}>
<SearchIcon />
Scan Addresses
</button>
<div className="divider">Wallet</div>
{typeof count === 'undefined' && (
<button className="btn btn-error" onClick={() => {
setCount(10)
}}>
<HammerIcon />
Reset Wallet
</button>
)}
{typeof count !== 'undefined' && (
<div className="flex flex-row gap-1">
<button className="btn btn-error w-40" disabled={count !== 0} onClick={() => {
request('wallet:reset', [])
}}>
Are you sure? ({count})
</button>
<button className="btn btn-circle" onClick={() => {
setCount(undefined)
request('account:scan', []).then(() => {
currentTarget.disabled = false
})
}}>
<XIcon />
<SearchIcon />
Scan Addresses
</button>
</div>
)}
</div>

<div className="collapse shadow-md">
<input type="radio" name="my-accordion-1" />
<div className="collapse-title font-bold">Wallet</div>
<div className="collapse-content">
{typeof count === 'undefined' && (
<button className="btn btn-error" onClick={() => {
setCount(10)
}}>
<HammerIcon />
Reset Wallet
</button>
)}
{typeof count !== 'undefined' && (
<div className="flex flex-row gap-1">
<button className="btn btn-error w-40" disabled={count !== 0} onClick={() => {
request('wallet:reset', [])
}}>
Are you sure? ({count})
</button>
<button className="btn btn-circle" onClick={() => {
setCount(undefined)
}}>
<XIcon />
</button>
</div>
)}
</div>
</div>
<p className="mt-2 text-center font-bold">
Kaspian {runtime.getManifest().version}
</p>
Expand Down

0 comments on commit 83ab572

Please # to comment.