73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { useArk } from "@lume/ark";
|
|
import { User } from "@lume/ui";
|
|
import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/")({
|
|
beforeLoad: async ({ location, context }) => {
|
|
const ark = context.ark;
|
|
const accounts = await ark.get_all_accounts();
|
|
|
|
switch (accounts.length) {
|
|
// Empty account
|
|
case 0:
|
|
throw redirect({
|
|
to: "/landing",
|
|
search: {
|
|
redirect: location.href,
|
|
},
|
|
});
|
|
// Only 1 account, skip account selection screen
|
|
case 1:
|
|
const loadAccount = await ark.load_selected_account(accounts[0].npub);
|
|
if (loadAccount) {
|
|
throw redirect({
|
|
to: "/app/home",
|
|
search: {
|
|
redirect: location.href,
|
|
},
|
|
});
|
|
}
|
|
// Account selection
|
|
default:
|
|
return;
|
|
}
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const ark = useArk();
|
|
const navigate = useNavigate();
|
|
|
|
const select = async (npub: string) => {
|
|
const loadAccount = await ark.load_selected_account(npub);
|
|
if (loadAccount) {
|
|
navigate({
|
|
to: "/app/home",
|
|
replace: true,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div className="flex items-center gap-6">
|
|
{ark.accounts.map((account) => (
|
|
<button
|
|
type="button"
|
|
key={account.npub}
|
|
onClick={() => select(account.npub)}
|
|
>
|
|
<User.Provider pubkey={account.npub}>
|
|
<User.Root className="flex h-36 w-32 flex-col items-center justify-center gap-4 rounded-xl p-2 hover:bg-neutral-100 dark:bg-neutral-900">
|
|
<User.Avatar className="size-20 rounded-full object-cover" />
|
|
<User.Name className="max-w-[5rem] truncate text-lg font-medium leading-tight" />
|
|
</User.Root>
|
|
</User.Provider>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|