Skip to content

Commit

Permalink
Add SettingsAutoSign component for managing auto-sign rules
Browse files Browse the repository at this point in the history
  • Loading branch information
thomas-senechal committed Dec 23, 2024
1 parent c80c8f5 commit 3c201d7
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 26 deletions.
7 changes: 7 additions & 0 deletions web-frontend/src/i18n/en_US.json
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,13 @@
"settings": {
"title-profile": "Account profile",
"title-security": "Account security",
"title-global": "Global settings",
"title-auto-sign": "Auto sign",
"auto-sign": {
"description": "Auto sign allows you to sign multiple transactions to a specific address without having to enter your password each time.",
"address": "Address",
"actions": "Actions"
},
"inputs": {
"nickname": "Account name"
},
Expand Down
72 changes: 46 additions & 26 deletions web-frontend/src/pages/Settings/Settings.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Button, Identicon, Input } from '@massalabs/react-ui-kit';
import { Button, Identicon, Input, Tabs } from '@massalabs/react-ui-kit';
import { FiEdit } from 'react-icons/fi';
import { useNavigate, useParams } from 'react-router-dom';

import SettingsAutoSign from './SettingsAutoSign';
import { SettingsOption } from './SettingsOption';
import Intl from '@/i18n/i18n';
import { WalletLayout, MenuItem } from '@/layouts/WalletLayout/WalletLayout';
Expand All @@ -11,34 +12,53 @@ export default function Settings() {
const navigate = useNavigate();
const { nickname } = useParams();

return (
<WalletLayout menuItem={MenuItem.Settings}>
<div className="flex flex-col justify-center items-center gap-9 w-1/2">
<div className="bg-secondary rounded-2xl w-full max-w-2xl p-10">
<p className="mas-body text-f-primary pb-5">
{Intl.t('settings.title-profile')}
</p>
<div className="pb-7">
<Identicon
username={nickname || 'username'}
size={120}
className="bg-primary rounded-full"
/>
const tabs = [
{
label: `${nickname} settings`,
content: (
<div className="flex flex-col justify-center items-center gap-9">
<div className="bg-secondary rounded-2xl w-full max-w-2xl p-10">
<p className="mas-body text-f-primary pb-5">
{Intl.t('settings.title-profile')}
</p>
<div className="pb-7">
<Identicon
username={nickname || 'username'}
size={120}
className="bg-primary rounded-full"
/>
</div>
<div className="pb-5">
<Input
value={nickname || 'username'}
icon={<FiEdit />}
onClickIcon={() =>
navigate(routeFor(`${nickname}/settings/update`))
}
disabled
/>
</div>
<Button disabled>{Intl.t('settings.buttons.update')}</Button>
</div>
<div className="pb-5">
<Input
value={nickname || 'username'}
icon={<FiEdit />}
onClickIcon={() =>
navigate(routeFor(`${nickname}/settings/update`))
}
disabled
/>
<SettingsOption nickname={nickname || 'username'} />
</div>
),
},
{
label: 'Global settings',
content: (
<div className="flex flex-col justify-center items-center gap-9">
<div className="bg-secondary rounded-2xl w-full max-w-2xl p-10">
<SettingsAutoSign nickname={nickname || 'username'} />
</div>
<Button disabled>{Intl.t('settings.buttons.update')}</Button>
</div>
<SettingsOption nickname={nickname || 'username'} />
</div>
),
},
];

return (
<WalletLayout menuItem={MenuItem.Settings}>
<Tabs tabsConfig={tabs} />
</WalletLayout>
);
}
93 changes: 93 additions & 0 deletions web-frontend/src/pages/Settings/SettingsAutoSign.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { ButtonIcon, ButtonToggle, Clipboard } from '@massalabs/react-ui-kit';
import { FiTrash2 } from 'react-icons/fi';

import Intl from '@/i18n/i18n';
import { Config } from '@/models/ConfigModel';

interface SettingsAutoSignProps {
nickname: string;
}

export default function SettingsAutoSign(props: SettingsAutoSignProps) {
const { nickname } = props;

// Dummy data
const config: Config = {
accounts: {
[nickname]: {
signRules: [
{
contract: 'AS12sDEt4fFFPmRF87fh4X4SSDRioejDoSppMA23DeJIaDO4QMbn',
passwordPrompt: false,
autoSign: true,
},
{
contract: 'AS1EJisvbaE4dDizPoHD5SkOppLM4SCnIEscLPIUeAR9mRSOE4MOS',
passwordPrompt: true,
autoSign: false,
},
],
},
},
};

// Dummy functions
const handleToggle = (contract: string) => {
console.log(`Toggled autoSign for contract: ${contract}`);
};

// Dummy functions
const handleDelete = (contract: string) => {
console.log(`Deleted contract: ${contract}`);
};

return (
<>
<p className="mas-body text-f-primary pb-5">
{Intl.t('settings.title-auto-sign')}
</p>
<p className="mas-body2 text-f-primary pb-5">
{Intl.t('settings.auto-sign.description')}
</p>
<table className="w-full">
<thead>
<tr>
<th className="text-left">
{Intl.t('settings.auto-sign.address')}
</th>
<th className="text-right">
{Intl.t('settings.auto-sign.actions')}
</th>
</tr>
</thead>
<tbody>
{config.accounts[nickname || 'unknown'].signRules.map(
(rule, index) => (
<tr key={index}>
<td className="max-w-xs truncate whitespace-nowrap">
<Clipboard
rawContent={rule.contract}
className="text-sm p-2 flex"
/>
</td>
<td className="text-right">
<div className="flex justify-end items-center space-x-2">
<ButtonToggle onClick={() => handleToggle(rule.contract)}>
{rule.autoSign ? 'On' : 'Off'}
</ButtonToggle>
<ButtonIcon
variant="primary"
onClick={() => handleDelete(rule.contract)}
>
<FiTrash2 />
</ButtonIcon>
</div>
</td>
</tr>
),
)}
</tbody>
</table>
</>
);
}

0 comments on commit 3c201d7

Please sign in to comment.