feat: implement full dApp permission system

src/app/App.tsx

@@ -50,10 +50,12 @@ import {
 	transferType,
 } from '../types';
 import { useFullscreenMac } from './hooks/useFullscreenMac';
+import RequestAccessPage from './components/RequestAccessPage';
 
 function App() {
 	const { state, dispatch } = useContext(Store);
 	const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
+	const [accessOpened, setAccessOpened] = useState(false);
 
 	const [incorrectPassword, setIncorrectPassword] = useState(false);
 	const [loggedIn, setLoggedIn] = useState(false);
@@ -352,6 +354,20 @@ function App() {
 				}
 			}
 
+			async function getAccessRequests() {
+				const res = await fetchBackground({
+					method: 'GET_ACCESS_REQUESTS',
+				});
+
+				const requests = res.data;
+
+				if (requests && requests.length > 0 && !accessOpened) {
+					setAccessOpened(true);
+
+					goTo(RequestAccessPage, { accessRequests: requests });
+				}
+			}
+
 			async function getAliasCreationRequests() {
 				const response = await fetchBackground({
 					method: 'GET_ALIAS_CREATE_REQUESTS',
@@ -563,6 +579,7 @@ function App() {
 				}
 			}
 
+			await getAccessRequests();
 			await getBurnAssetRequests();
 			await getAliasCreationRequests();
 			await getIonicSwapRequests();

src/app/components/OuterConfirmation/OuterConfirmation.module.scss

@@ -133,7 +133,7 @@
 		&_row {
 			display: flex;
 			justify-content: space-between;
-			width: calc(var(--app-width) - 20px);
+			width: calc(var(--app-width) - 40px);
 			margin-inline: auto;
 
 			&.total {
@@ -165,7 +165,7 @@
 
 		&_error {
 			margin-inline: auto;
-			width: calc(var(--app-width) - 20px);
+			width: calc(var(--app-width) - 40px);
 			color: #ff6767;
 			font-size: 14px;
 			font-weight: 500;
@@ -187,7 +187,7 @@
 			place-content: center;
 
 			.content {
-				width: calc(var(--app-width) - 20px);
+				width: calc(var(--app-width) - 40px);
 				display: flex;
 				gap: 8px;
 			}

src/app/components/RequestAccessPage/index.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { getCurrent, goBack } from 'react-chrome-extension-router';
+import styles from './styles.module.scss';
+import Button, { ButtonThemes } from '../UI/Button/Button';
+import infoIcon from '../../assets/svg/info-blue.svg';
+import walletIcon from '../../assets/svg/wallet.svg';
+import assetIcon from '../../assets/svg/asset.svg';
+import historyIcon from '../../assets/svg/history.svg';
+import { fetchBackground } from '../../utils/utils';
+import { PermissionType } from '../../../types';
+
+const permissionMap = {
+	general: {
+		title: 'Wallet address',
+		desc: 'View your address, alias and suggest transactions',
+		icon: walletIcon,
+	},
+	balance: {
+		title: 'Balance',
+		desc: 'View your wallet balances',
+		icon: assetIcon,
+	},
+	history: {
+		title: 'Transaction history',
+		desc: 'View your transactions',
+		icon: historyIcon,
+	},
+};
+
+const RequestAccessPage = () => {
+	const { props } = getCurrent();
+	const { accessRequests } = props;
+	const [reqIndex, setReqIndex] = useState(0);
+	const [accepting, setAccepting] = useState(false);
+	const [denying, setDenying] = useState(false);
+
+	if (!accessRequests?.length) return null;
+
+	const req = accessRequests[reqIndex];
+
+	if (!req) return null;
+
+	async function nextRequest() {
+		if (reqIndex < accessRequests.length - 1) {
+			setReqIndex(reqIndex + 1);
+		} else {
+			goBack();
+		}
+	}
+
+	async function acceptClick() {
+		setAccepting(true);
+
+		await fetchBackground({
+			method: 'FINALIZE_REQUEST_ACCESS',
+			id: req.id,
+			success: true,
+		});
+
+		setAccepting(false);
+		await nextRequest();
+	}
+
+	async function denyClick() {
+		if (denying) return;
+
+		setDenying(true);
+
+		await fetchBackground({
+			method: 'FINALIZE_REQUEST_ACCESS',
+			id: req.id,
+			success: false,
+		});
+
+		setDenying(false);
+		await nextRequest();
+	}
+
+	return (
+		<main className={styles.main}>
+			<h3 className={styles.main__title}>Access Request</h3>
+			<p className={styles.main__subtitle}>Review access before continuing</p>
+
+			<div className={styles.main__content}>
+				<div className={styles.main__siteInfo}>
+					<img
+						className={styles.main__siteInfo_icon}
+						src={req.favicon}
+						alt="site favicon"
+					/>
+					<h3 className={styles.main__siteInfo_origin}>{req.hostname}</h3>
+				</div>
+
+				<div className={styles.main__permissions}>
+					<h5 className={styles.main__permissions_title}>Permissions requested:</h5>
+
+					<div className={styles.main__permissions_list}>
+						{req?.permissions?.map((p: { type: PermissionType }) => {
+							const item = permissionMap[p.type];
+
+							if (!item) return null;
+
+							return (
+								<div key={p.type} className={styles.item}>
+									<img
+										className={styles.item__icon}
+										width={24}
+										height={24}
+										src={item.icon}
+										alt="icon"
+									/>
+
+									<div className={styles.item__text}>
+										<p className={styles.item__title}>{item.title}</p>
+										<p className={styles.item__desc}>{item.desc}</p>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</div>
+
+			<div className={styles.main__bottom}>
+				<p className={styles.main__bottom_info}>
+					<img src={infoIcon} width={16} alt="info" />
+					This site cannot move funds without your approval
+				</p>
+
+				<div className={styles.main__bottom_actions}>
+					<Button disabled={denying} onClick={denyClick} theme={ButtonThemes.Outline}>
+						Deny
+					</Button>
+					<Button disabled={accepting} onClick={acceptClick}>
+						Allow
+					</Button>
+				</div>
+			</div>
+		</main>
+	);
+};
+
+export default RequestAccessPage;

src/app/components/RequestAccessPage/styles.module.scss

@@ -0,0 +1,141 @@
+@import 'src/app/styles/variables';
+
+.main {
+	height: calc($appHeight - 72px);
+	display: flex;
+	flex-direction: column;
+
+	&__title {
+		text-align: center;
+		font-size: 22px;
+		font-weight: 500;
+
+		:global(.app-fullscreen) & {
+			font-size: 25px;
+		}
+	}
+
+	&__subtitle {
+		margin-top: 4px;
+		text-align: center;
+		color: #b6b6c4;
+		font-size: 16px;
+		font-weight: 400;
+
+		:global(.app-fullscreen) & {
+			font-size: 18px;
+		}
+	}
+
+	&__content {
+		margin-top: 12px;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__siteInfo {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		padding-inline: 16px;
+		padding-block: 12px;
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
+		border-bottom: 1px solid #273666;
+		background-color: rgba(31, 143, 235, 0.15);
+
+		&_icon {
+			width: 38px;
+			height: 38px;
+		}
+
+		&_origin {
+			font-size: 18px;
+			font-weight: 600;
+		}
+	}
+
+	&__permissions {
+		padding-inline: 16px;
+		padding-block: 12px;
+		border-bottom-right-radius: 8px;
+		border-bottom-left-radius: 8px;
+		background-color: #0f2055;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+
+		&_title {
+			font-size: 16px;
+			font-weight: 500;
+			color: #b6b6c4;
+		}
+
+		&_list {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+
+			.item {
+				background-color: rgba(31, 143, 235, 0.15);
+				padding-block: 12px;
+				padding-inline: 16px;
+				border-radius: 16px;
+				display: flex;
+				align-items: center;
+				gap: 16px;
+
+				&__text {
+					display: flex;
+					flex-direction: column;
+					gap: 8px;
+				}
+
+				&__title {
+					font-size: 16px;
+					font-weight: 600;
+				}
+
+				&__desc {
+					font-size: 14px;
+					font-weight: 400;
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+
+	&__bottom {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 3;
+		background-color: #0f2055;
+		border-top: 1px solid #273666;
+		width: 100%;
+		padding: 16px;
+		padding-top: 12px;
+
+		&_info {
+			max-width: calc(var(--app-width) - 20px);
+			width: 100%;
+			margin-inline: auto;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			font-size: 14px;
+			font-weight: 400;
+			color: #b6b6c4;
+		}
+
+		&_actions {
+			max-width: calc(var(--app-width) - 20px);
+			width: 100%;
+			margin-inline: auto;
+			margin-top: 16px;
+			display: flex;
+			gap: 8px;
+		}
+	}
+}

src/app/components/Wallet/Wallet.tsx

@@ -1,6 +1,5 @@
 import React, { Dispatch, SetStateAction, useContext, useRef, useState } from 'react';
 import Decimal from 'decimal.js';
-import { styleText } from 'util';
 import copyIcon from '../../assets/svg/copy.svg';
 import dotsIcon from '../../assets/svg/dots.svg';
 import sendIcon from '../../assets/svg/send.svg';

src/app/styles/_variables.scss

@@ -2,12 +2,12 @@ $fontFamily: 'SFUIDisplay';
 $fontSize: 18px;
 $mainColor: #ffffff;
 $blueColor: #1f8feb;
-$appWidth: 360px;
+$appWidth: 370px;
 $appHeight: 600px;
 
 :root {
 	// Sizes
-	--app-width: 360px;
+	--app-width: 370px;
 	--app-height: 600px;
 
 	// Z-index's