layout request and signature request screens

apps/web/src/components/HeaderRequest.tsx

@@ -1,19 +1,20 @@
 import { Button, ChevronDown, Image, Stack, Text } from '@walless/gui';
 
-const iconSize = 45;
+const iconWidth = 40;
+const iconHeight = iconWidth / 2;
 
 export const HeaderRequest = () => {
-	const iconSrc = { uri: '/img/icon-lg.png' };
+	const iconSrc = { uri: '/img/bare-icon.png' };
 
 	return (
 		<Stack
 			horizontal
 			alignItems="center"
 			backgroundColor="#121B22"
 			paddingHorizontal={15}
-			paddingVertical={5}
+			paddingVertical={10}
 		>
-			<Image src={iconSrc} width={iconSize} height={iconSize} />
+			<Image src={iconSrc} width={iconWidth} height={iconHeight} />
 			<Stack horizontal flex={1} justifyContent="center" alignItems="center">
 				<Text textAlign="center" fontWeight={'300'}>
 					Zbz thic...
@@ -22,7 +23,7 @@ export const HeaderRequest = () => {
 					<ChevronDown size={20} />
 				</Button>
 			</Stack>
-			<Stack width={iconSize} />
+			<Stack width={iconWidth} />
 		</Stack>
 	);
 };

apps/web/src/routing.tsx

@@ -2,7 +2,9 @@ import { createHashRouter } from 'react-router-dom';
 
 import DashboardScreen from './screens/Dashboard';
 import ProfileScreen from './screens/Profile';
-import RequestConnectionScreen from './screens/Request/Connection';
+import RequestConnection from './screens/Request/Connection';
+import RequestLayout from './screens/Request/Layout';
+import RequestSignature from './screens/Request/Signature';
 
 export const router = createHashRouter([
 	{
@@ -15,6 +17,14 @@ export const router = createHashRouter([
 	},
 	{
 		path: '/request-connection',
-		element: <RequestConnectionScreen />,
+		element: <RequestConnection />,
+	},
+	{
+		path: '/request-signature',
+		element: <RequestSignature />,
+	},
+	{
+		path: '/request-layout',
+		element: <RequestLayout />,
 	},
 ]);

apps/web/src/screens/Request/Connection/index.tsx

@@ -3,11 +3,9 @@ import { Image } from '@walless/gui';
 
 import { HeaderRequest } from '../../../components/HeaderRequest';
 import LightText from '../../../components/LightText';
+import { logoSize, logoUri } from '../shared';
 
-const logoSize = 60;
-const logoUri = { uri: '/img/app_logo.png' };
-
-const RequestConnectionScreen = () => {
+const RequestConnection = () => {
 	return (
 		<Stack flex={1} backgroundColor="#19232C">
 			<HeaderRequest />
@@ -32,7 +30,13 @@ const RequestConnectionScreen = () => {
 					<LightText fontSize={14}>underrealm.stormgate.io</LightText>
 				</Stack>
 
-				<Stack backgroundColor="#202D38" borderRadius={15} marginVertical={20}>
+				<Stack
+					backgroundColor="#202D38"
+					borderRadius={15}
+					marginVertical={15}
+					borderColor="rgba(86, 102, 116, .2)"
+					borderWidth={1}
+				>
 					<Stack padding={15}>
 						<LightText fontSize={14} paddingHorizontal={25} textAlign="center">
 							Under Realm would like to connect with your Walless account to:
@@ -52,7 +56,7 @@ const RequestConnectionScreen = () => {
 							</Stack>
 						</Stack>
 					</Stack>
-					<Stack borderTopColor="#566674" borderTopWidth={1} />
+					<Stack borderTopColor="rgba(86, 102, 116, .2)" borderTopWidth={1} />
 					<Stack horizontal alignItems="center" padding={15}>
 						<Stack width={18}>
 							<AlertCircle size={18} color="#566674" />
@@ -80,4 +84,4 @@ const RequestConnectionScreen = () => {
 	);
 };
 
-export default RequestConnectionScreen;
+export default RequestConnection;

apps/web/src/screens/Request/Layout/index.tsx

@@ -0,0 +1,94 @@
+import {
+	AlertCircle,
+	Button,
+	HyperLink,
+	Image,
+	Stack,
+	Text,
+} from '@walless/gui';
+
+import { HeaderRequest } from '../../../components/HeaderRequest';
+import LightText from '../../../components/LightText';
+import { logoSize, logoUri } from '../shared';
+
+export const RequestLayout = () => {
+	return (
+		<Stack flex={1} backgroundColor="#19232C">
+			<HeaderRequest />
+
+			<Stack flex={1} padding={20} alignItems="stretch">
+				<Stack alignItems="center">
+					<Text fontSize={20} fontWeight="400">
+						Layout request
+					</Text>
+					<Image
+						src={logoUri}
+						width={logoSize}
+						height={logoSize}
+						borderColor="#566674"
+						borderWidth={2}
+						borderRadius={15}
+						marginVertical={10}
+					/>
+					<Text fontSize={18} fontWeight="400">
+						Under Realm
+					</Text>
+					<LightText fontSize={14}>underrealm.stormgate.io</LightText>
+				</Stack>
+
+				<Stack paddingTop={30} alignItems="center">
+					<Text textAlign="center" fontSize={14} fontWeight="300">
+						Under Realm would like to add its custom layout appearance to your
+						Walless account.
+					</Text>
+
+					<HyperLink title="Learn more" marginTop={20} />
+				</Stack>
+
+				<Stack flex={1} justifyContent="flex-end">
+					<Stack
+						horizontal
+						alignItems="center"
+						backgroundColor="#202D38"
+						borderRadius={15}
+						marginBottom={20}
+						padding={15}
+						borderColor="rgba(86, 102, 116, .2)"
+						borderWidth={1}
+					>
+						<Stack width={18}>
+							<AlertCircle size={18} color="#566674" />
+						</Stack>
+						<LightText fontSize={12} marginLeft={15}>
+							This action does not make any fund transfer. This site cannot
+							transfer fund without your permission.
+						</LightText>
+					</Stack>
+
+					<Stack paddingHorizontal={10}>
+						<LightText fontSize={14} textAlign="center">
+							Only connect to websites you trust!
+						</LightText>
+						<Button marginVertical={10} onPress={() => console.log('hmmmm')}>
+							<Text>Accept</Text>
+						</Button>
+						<Stack
+							horizontal
+							justifyContent="space-between"
+							alignItems="center"
+						>
+							<Button backgroundColor="transparent" padding={0}>
+								<LightText>Never Ask Again</LightText>
+							</Button>
+							<Button backgroundColor="transparent" padding={0}>
+								<Text fontWeight="300">Ask me later</Text>
+							</Button>
+						</Stack>
+					</Stack>
+				</Stack>
+			</Stack>
+		</Stack>
+	);
+};
+
+export default RequestLayout;

apps/web/src/screens/Request/Signature/index.tsx

@@ -0,0 +1,73 @@
+import { AlertCircle, Button, Image, Stack, Text } from '@walless/gui';
+
+import { HeaderRequest } from '../../../components/HeaderRequest';
+import LightText from '../../../components/LightText';
+import { logoSize, logoUri } from '../shared';
+
+export const RequestSignature = () => {
+	return (
+		<Stack flex={1} backgroundColor="#19232C">
+			<HeaderRequest />
+
+			<Stack flex={1} padding={20} alignItems="stretch">
+				<Stack alignItems="center">
+					<Text fontSize={20} fontWeight="400">
+						Your signature has been requested
+					</Text>
+					<Image
+						src={logoUri}
+						width={logoSize}
+						height={logoSize}
+						borderColor="#566674"
+						borderWidth={2}
+						borderRadius={15}
+						marginVertical={10}
+					/>
+					<Text fontSize={18} fontWeight="400">
+						Under Realm
+					</Text>
+					<LightText fontSize={14}>underrealm.stormgate.io</LightText>
+				</Stack>
+
+				<Stack
+					backgroundColor="#202D38"
+					borderRadius={15}
+					marginVertical={15}
+					borderColor="rgba(86, 102, 116, .2)"
+					borderWidth={1}
+				>
+					<Stack
+						horizontal
+						justifyContent="space-between"
+						alignItems="center"
+						paddingHorizontal={15}
+						paddingTop={15}
+						paddingBottom={5}
+					>
+						<Text fontSize={14}>Message:</Text>
+						<AlertCircle size={18} color="#566674" />
+					</Stack>
+					<LightText paddingHorizontal={15} paddingBottom={15} fontSize={14}>
+						[Custom message] Sign this message to prove that you have accessed
+						to this wallet account and we’ll log you in. This won’t cost you
+						anything! [Seal code: r3092850297]
+					</LightText>
+				</Stack>
+
+				<Stack flex={1} justifyContent="flex-end" paddingHorizontal={10}>
+					<LightText fontSize={14} textAlign="center">
+						Only connect to websites you trust!
+					</LightText>
+					<Button marginVertical={10} onPress={() => console.log('hmmmm')}>
+						<Text>Connect</Text>
+					</Button>
+					<Button backgroundColor="transparent" paddingVertical={0}>
+						<Text>Deny</Text>
+					</Button>
+				</Stack>
+			</Stack>
+		</Stack>
+	);
+};
+
+export default RequestSignature;

apps/web/src/screens/Request/shared.ts

@@ -0,0 +1,2 @@
+export const logoSize = 60;
+export const logoUri = { uri: '/img/app_logo.png' };

packages/gui/components/HyperLink.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { GetProps, styled } from '@tamagui/core';
+
+import { Text } from './styled';
+
+interface Props {
+	title?: string;
+	onPress?: () => void;
+}
+
+export const HyperLink: FC<Props & HyperLinkProps> = ({
+	title,
+	onPress,
+	...props
+}) => {
+	return (
+		<HyperLinkFrame {...props} onPress={onPress}>
+			{title || 'Link'}
+		</HyperLinkFrame>
+	);
+};
+
+export default HyperLink;
+
+export const HyperLinkFrame = styled(Text, {
+	color: '#0694D3',
+	hoverStyle: {
+		cursor: 'pointer',
+		textDecorationLine: 'underline',
+	},
+	focusStyle: {
+		textDecorationLine: 'underline',
+	},
+});
+
+type HyperLinkProps = GetProps<typeof HyperLinkFrame>;

packages/gui/index.ts

@@ -1,5 +1,6 @@
 export * from './components/Anchor';
 export * from './components/Button';
+export * from './components/HyperLink';
 export * from './components/ModalManager';
 export * from './components/Provider';
 export * from './components/styled';