Skip to content

Commit

Permalink
Improve Settings and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
KaffinPX committed Jan 19, 2025
1 parent 754c875 commit e8ed590
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 118 deletions.
129 changes: 12 additions & 117 deletions src/pages/Wallet/Settings.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,10 @@
import { currencies } from "@/contexts/Settings"
import useKaspa from "@/hooks/useKaspa"
import useSettings from "@/hooks/useSettings"
import { SettingsIcon, HammerIcon, DollarSignIcon, SearchIcon, XIcon } from "lucide-react"
import { useEffect, useState } from "react"
import { SettingsIcon } from "lucide-react"
import { runtime } from "webextension-polyfill"
import GeneralCategory from "./Settings/General"
import AccountCategory from "./Settings/Account"
import WalletCategory from "./Settings/Wallet"

export default function Settings () {
const { kaspa, request } = useKaspa()
const { settings, updateSetting } = useSettings()

const [ count, setCount ] = useState<number>()

useEffect(() => {
if (count === undefined || count <= 0) return

const timer = setInterval(() => {
setCount(prevCount => prevCount ? prevCount - 1 : 0)
}, 1000)

return () => clearInterval(timer)
}, [ count ])

return (
<div className="drawer drawer-end z-[1] w-max">
<input id="settings-drawer" type="checkbox" className="drawer-toggle" />
Expand All @@ -31,103 +15,14 @@ export default function Settings () {
</div>
<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">
<div className="collapse shadow-md">
<input type="radio" name="settings-accordion" 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>
</div>
<div className="collapse shadow-md">
<input type="radio" name="settings-accordion" />
<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>
<div className="collapse shadow-md">
<input type="radio" name="settings-accordion" />
<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>
</div>

<div className="collapse shadow-md">
<input type="radio" name="settings-accordion" />
<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">
<ul className="menu bg-base-300 text-base-content rounded-l-box min-h-full w-62 p-4">
<h3 className="text-xl font-extrabold tracking-tight text-center">
Settings
</h3>
<GeneralCategory />
<AccountCategory />
<WalletCategory />
<p className="fixed bottom-4 font-bold">
Kaspian {runtime.getManifest().version}
</p>
</ul>
Expand Down
63 changes: 63 additions & 0 deletions src/pages/Wallet/Settings/Account.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import useKaspa from "@/hooks/useKaspa"
import useSettings from "@/hooks/useSettings"
import { PlusIcon, SearchIcon } from "lucide-react"

export default function Account () {
const { kaspa, request } = useKaspa()
const { settings, updateSetting } = useSettings()

return (
<div className="collapse shadow-md">
<input type="radio" name="settings-accordion" />
<div className="collapse-title text-base font-bold">Account</div>
<div className="collapse-content flex flex-col gap-3">
<div>
<label className="form-control w-full">
<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-ghost" 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>
<button className="btn btn-outline w-full" disabled>
<PlusIcon />
Add Node
</button>
</div>
<div>
<div className="flex justify-between py-2 badge 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 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 btn-outline w-full" onClick={({ currentTarget }) => {
currentTarget.disabled = true

request('account:scan', []).then(() => {
currentTarget.disabled = false
})
}}>
<SearchIcon />
Scan Addresses
</button>
</div>
</div>
</div>
)
}
26 changes: 26 additions & 0 deletions src/pages/Wallet/Settings/General.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { currencies } from "@/contexts/Settings"
import useSettings from "@/hooks/useSettings"
import { DollarSignIcon } from "lucide-react"

export default function General () {
const { settings, updateSetting } = useSettings()

return (
<div className="collapse shadow-md">
<input type="radio" name="settings-accordion" defaultChecked />
<div className="collapse-title text-base font-bold">General</div>
<div className="collapse-content">
<button className="btn btn-outline w-full" 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>
</div>
)
}
50 changes: 50 additions & 0 deletions src/pages/Wallet/Settings/Wallet.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import useKaspa from "@/hooks/useKaspa"
import { HammerIcon, XIcon } from "lucide-react"
import { useEffect, useState } from "react"

export default function Wallet () {
const { request } = useKaspa()

const [ count, setCount ] = useState<number>()

useEffect(() => {
if (count === undefined || count <= 0) return

const timer = setInterval(() => {
setCount(prevCount => prevCount ? prevCount - 1 : 0)
}, 1000)

return () => clearInterval(timer)
}, [ count ])

return (
<div className="collapse shadow-md">
<input type="radio" name="settings-accordion" />
<div className="collapse-title text-base font-bold">Wallet</div>
<div className="collapse-content">
{typeof count === 'undefined' && (
<button className="btn btn-error w-full" 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>
)
}
37 changes: 36 additions & 1 deletion src/style.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,44 @@
@import "tailwindcss";
@plugin "daisyui" {
themes: cupcake --default;
themes: kaspian --default;
exclude: rootscrollgutter;
}

@plugin "daisyui/theme" {
name: "kaspian";
default: true;
prefersdark: false;
color-scheme: "dark";
--color-base-100: oklch(22% 0.019 237.69);
--color-base-200: oklch(20% 0.019 237.69);
--color-base-300: oklch(18% 0.019 237.69);
--color-base-content: oklch(96% 0.016 293.756);
--color-primary: oklch(58% 0.233 277.117);
--color-primary-content: oklch(14.94% 0.031 39.947);
--color-secondary: oklch(72.537% 0.177 2.72);
--color-secondary-content: oklch(14.507% 0.035 2.72);
--color-accent: oklch(71.294% 0.166 299.844);
--color-accent-content: oklch(14.258% 0.033 299.844);
--color-neutral: oklch(26% 0.019 237.69);
--color-neutral-content: oklch(70% 0.019 237.69);
--color-info: oklch(85.559% 0.085 206.015);
--color-info-content: oklch(17.111% 0.017 206.015);
--color-success: oklch(85.56% 0.085 144.778);
--color-success-content: oklch(17.112% 0.017 144.778);
--color-warning: oklch(85.569% 0.084 74.427);
--color-warning-content: oklch(17.113% 0.016 74.427);
--color-error: oklch(85.511% 0.078 16.886);
--color-error-content: oklch(17.102% 0.015 16.886);
--radius-selector: 1rem;
--radius-field: 2rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 2px;
--depth: 0;
--noise: 0;
}

#root {
display: flex;
flex-direction: column;
Expand Down

0 comments on commit e8ed590

Please # to comment.