From ca4db52c7196754abb0092c1a725848442dd9364 Mon Sep 17 00:00:00 2001
From: FME849 <1414439@gmail.com>
Date: Tue, 4 Apr 2023 22:33:32 +0700
Subject: [PATCH 1/8] minor UI update in request connection

---
 apps/web/src/routing.tsx                          |  4 ++--
 apps/web/src/screens/Request/Connection/index.tsx | 10 ++++------
 apps/web/src/screens/Request/shared.ts            |  2 ++
 3 files changed, 8 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/src/screens/Request/shared.ts

diff --git a/apps/web/src/routing.tsx b/apps/web/src/routing.tsx
index 4aaa3918c..9df48aebd 100644
--- a/apps/web/src/routing.tsx
+++ b/apps/web/src/routing.tsx
@@ -2,7 +2,7 @@ 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';
 
 export const router = createHashRouter([
 	{
@@ -15,6 +15,6 @@ export const router = createHashRouter([
 	},
 	{
 		path: '/request-connection',
-		element: <RequestConnectionScreen />,
+		element: <RequestConnection />,
 	},
 ]);
diff --git a/apps/web/src/screens/Request/Connection/index.tsx b/apps/web/src/screens/Request/Connection/index.tsx
index 832991307..6c2e584a9 100644
--- a/apps/web/src/screens/Request/Connection/index.tsx
+++ b/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,7 @@ const RequestConnectionScreen = () => {
 					<LightText fontSize={14}>underrealm.stormgate.io</LightText>
 				</Stack>
 
-				<Stack backgroundColor="#202D38" borderRadius={15} marginVertical={20}>
+				<Stack backgroundColor="#202D38" borderRadius={15} marginVertical={15}>
 					<Stack padding={15}>
 						<LightText fontSize={14} paddingHorizontal={25} textAlign="center">
 							Under Realm would like to connect with your Walless account to:
@@ -80,4 +78,4 @@ const RequestConnectionScreen = () => {
 	);
 };
 
-export default RequestConnectionScreen;
+export default RequestConnection;
diff --git a/apps/web/src/screens/Request/shared.ts b/apps/web/src/screens/Request/shared.ts
new file mode 100644
index 000000000..62ad1e79e
--- /dev/null
+++ b/apps/web/src/screens/Request/shared.ts
@@ -0,0 +1,2 @@
+export const logoSize = 60;
+export const logoUri = { uri: '/img/app_logo.png' };

From 0931b44df14da3dce93a29cb5a1d46ca4ab2a269 Mon Sep 17 00:00:00 2001
From: FME849 <1414439@gmail.com>
Date: Tue, 4 Apr 2023 22:35:22 +0700
Subject: [PATCH 2/8] add request signature

---
 apps/web/src/routing.tsx                      |  5 ++
 .../src/screens/Request/Signature/index.tsx   | 69 +++++++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 apps/web/src/screens/Request/Signature/index.tsx

diff --git a/apps/web/src/routing.tsx b/apps/web/src/routing.tsx
index 9df48aebd..9b28729ca 100644
--- a/apps/web/src/routing.tsx
+++ b/apps/web/src/routing.tsx
@@ -3,6 +3,7 @@ import { createHashRouter } from 'react-router-dom';
 import DashboardScreen from './screens/Dashboard';
 import ProfileScreen from './screens/Profile';
 import RequestConnection from './screens/Request/Connection';
+import RequestSignature from './screens/Request/Signature';
 
 export const router = createHashRouter([
 	{
@@ -17,4 +18,8 @@ export const router = createHashRouter([
 		path: '/request-connection',
 		element: <RequestConnection />,
 	},
+	{
+		path: '/request-signature',
+		element: <RequestSignature />,
+	},
 ]);
diff --git a/apps/web/src/screens/Request/Signature/index.tsx b/apps/web/src/screens/Request/Signature/index.tsx
new file mode 100644
index 000000000..5fc5bd74e
--- /dev/null
+++ b/apps/web/src/screens/Request/Signature/index.tsx
@@ -0,0 +1,69 @@
+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}>
+					<Stack
+						horizontal
+						justifyContent="space-between"
+						alignItems="center"
+						paddingHorizontal={15}
+						paddingTop={15}
+						paddingBottom={5}
+					>
+						<Text fontSize={14} fontWeight="300">
+							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;

From 308fc8de1149e78b34aaae437a9582f11aebeb0a Mon Sep 17 00:00:00 2001
From: FME849 <1414439@gmail.com>
Date: Tue, 4 Apr 2023 23:17:00 +0700
Subject: [PATCH 3/8] add HyperLink component to gui package

---
 packages/gui/components/HyperLink.tsx | 36 +++++++++++++++++++++++++++
 packages/gui/index.ts                 |  1 +
 2 files changed, 37 insertions(+)
 create mode 100644 packages/gui/components/HyperLink.tsx

diff --git a/packages/gui/components/HyperLink.tsx b/packages/gui/components/HyperLink.tsx
new file mode 100644
index 000000000..6ad89fe10
--- /dev/null
+++ b/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>;
diff --git a/packages/gui/index.ts b/packages/gui/index.ts
index fb9c26c35..95d6c80b9 100644
--- a/packages/gui/index.ts
+++ b/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';

From 66a1295d2550099c6d990b899529e7ca9af51abd Mon Sep 17 00:00:00 2001
From: FME849 <1414439@gmail.com>
Date: Tue, 4 Apr 2023 23:17:19 +0700
Subject: [PATCH 4/8] add request layout

---
 apps/web/src/routing.tsx                      |  5 +
 apps/web/src/screens/Request/Layout/index.tsx | 92 +++++++++++++++++++
 .../src/screens/Request/Signature/index.tsx   |  4 +-
 3 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/screens/Request/Layout/index.tsx

diff --git a/apps/web/src/routing.tsx b/apps/web/src/routing.tsx
index 9b28729ca..e45487558 100644
--- a/apps/web/src/routing.tsx
+++ b/apps/web/src/routing.tsx
@@ -3,6 +3,7 @@ import { createHashRouter } from 'react-router-dom';
 import DashboardScreen from './screens/Dashboard';
 import ProfileScreen from './screens/Profile';
 import RequestConnection from './screens/Request/Connection';
+import RequestLayout from './screens/Request/Layout';
 import RequestSignature from './screens/Request/Signature';
 
 export const router = createHashRouter([
@@ -22,4 +23,8 @@ export const router = createHashRouter([
 		path: '/request-signature',
 		element: <RequestSignature />,
 	},
+	{
+		path: '/request-layout',
+		element: <RequestLayout />,
+	},
 ]);
diff --git a/apps/web/src/screens/Request/Layout/index.tsx b/apps/web/src/screens/Request/Layout/index.tsx
new file mode 100644
index 000000000..fcf659baa
--- /dev/null
+++ b/apps/web/src/screens/Request/Layout/index.tsx
@@ -0,0 +1,92 @@
+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}
+					>
+						<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;
diff --git a/apps/web/src/screens/Request/Signature/index.tsx b/apps/web/src/screens/Request/Signature/index.tsx
index 5fc5bd74e..8774a3405 100644
--- a/apps/web/src/screens/Request/Signature/index.tsx
+++ b/apps/web/src/screens/Request/Signature/index.tsx
@@ -38,9 +38,7 @@ export const RequestSignature = () => {
 						paddingTop={15}
 						paddingBottom={5}
 					>
-						<Text fontSize={14} fontWeight="300">
-							Message:
-						</Text>
+						<Text fontSize={14}>Message:</Text>
 						<AlertCircle size={18} color="#566674" />
 					</Stack>
 					<LightText paddingHorizontal={15} paddingBottom={15} fontSize={14}>

From 45b8e306002301c489bb46b8e279a99ef44a4a09 Mon Sep 17 00:00:00 2001
From: FME849 <1414439@gmail.com>
Date: Wed, 5 Apr 2023 12:10:35 +0700
Subject: [PATCH 5/8] replace icon in RequestHeader by bare-icon image

---
 apps/web/assets/img/bare-icon.png         | Bin 0 -> 1411 bytes
 apps/web/src/components/HeaderRequest.tsx |  11 ++++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/assets/img/bare-icon.png

diff --git a/apps/web/assets/img/bare-icon.png b/apps/web/assets/img/bare-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d64d8e0daa6dd169d96defaa01de69b12d6b125a
GIT binary patch
literal 1411
zcmV-}1$_F6P)<h;3K|Lk000e1NJLTq001Ze000#T1^@s6G#acP00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1sF+0K~#7Ft(L!U
z97Pnz-^^alF;1jQK#6UM=qxIP5O$G@0_QKlS5iRahK3>u5)xF2m4ec~3c8$?KLER-
zLpeYQL=#5>5eX@*O-L*ykd0%XeLK7F@!p%Az4b3hB#&<P_wIb>^S<xRnem&ew*g?1
z;E-k@9*XK0;`hd4IKnpi#cxeSyk)FyLM<ZR8;C5JD3aTxBNN1y51O=3lka*=rrFQZ
z%W%XkckU`6Hi>xjvdeg?#&FZ;L|}WbxG;rqfqxg9U;WX5BWjKL+YLaPDaS)HDv(DF
z<BD)=qieRF;X+VbZY$^VAivbeHfxh`MC};j3=lR%6a`_VLX~6ziJ0=YwRm<S8N0dG
z<qOjg=1_^bisYVCc9nPX99;kI)=UKE2D_$V`K~qIFxKoAa_2t4@-N~m8%Gee9$kBT
zrJ!@kf<hw>snO7ek%gv}bF=(#c0xVKCwUtnICIc+Zt|AP0k_?B^M(&|j?uhB(@4=k
zN)}}AbZ;T!@1q|Re!hnu4N?;U=jGke&wp(4&9}(YGQodBQpJLbmPZ$5Q<F_SgKj^9
zgw-{uN={y6aoV#CHhcZcpMLX0oDwzVBi4|*A>xfc*Q5fW`sY6c4-!6)_#0MGnRi~f
z{{6Hw(M1g-p-6#(sJ<UW@-BY(!MP>5rvxR;tZ1<sR?HD7WnpOs=o}#L!Da6{4o{j3
zIpc|O@AJ9iy>w62z{)Cm7!a}(`8eXt&8H2j2=d+|Doy3d$<1!iQX7O5mw4`%ygON(
z%aj~s1A=FU^T`w=PfkejO!$sYC?h{x%QQE)bNF@5G1`dX$#|iR;IyG=5Ki<j8RS_R
z#m{8Wps{m7mkkH&?@zF5>JkeQT0%}lV&8eO{S3~XLQg1=;x6=3r6)f0^nSXV`fT*!
z@}44}s(M}^QQ;ykWV0vOUFYQ3Cr}!u`En4Z`&7g-BNlnw<}h~Jl)_xO_u|qbNuF%7
z{~qiV83qut6hgL2s43Ky!sisC$Oti8tZLdNu)kqDOfNyEB@_ca<Pg6$#<VD8s~6;O
z;Kd;H{v!uH2PF}z(kTcQb&txLXFN_;zPkS5>zzXdCRZjB_FC8buhLToCr(DCxRP2B
zMn$-}-?{sYtyOxS2DPd{s@~JEnh<vNpd=1r7xpx}_X6zn+Y~%l^fRX;sMRCT><!+l
z_%L|z-dYc~wsKH~`a|u5a6-A}dJ{@!hsBEE*q&wgK!J}xJKx3BCEkBt;P|V<6;gJW
z2M2=rZ_n==6+=;_=!+KCfkf5h@Sej^3|Id8=#7>CC&-Px*OuBR;T;*_MX6r%UMmQ?
z%IcxVe0}3t7C-$PnYEb^FDXH!Dlub<C`0uhj1rV*v3-!10|nX?7eaVXjgOQW>J!5%
zt#Is%wuRbDLvu-|l_X!bVji+R@Lb_VBwswkb%0O{)ss=N&OevHWZ^<GG*asxKT(6>
zmq&JmGKAL!KWgoR`0LhGr~K#;beKvKX!$i(DV3QVR*=Ggo%JhI@pB85cJ|HD#j{i6
zObfiAB74ga7e!gFW%;1;`w6xZhP5C`P%dXI(hO*7HmhJ=+HmnO9fu0sN_Uoc@FWZ2
z#ohi(i#3>!<LKDQrF|c+druXdib|(Qc~Kh_Z@wHq{^Wf3g$2g5Q!EbVSV$s*dK)Qh
zbMHOvLoZ2TE9nc>geTGNw)oG+o+cDoz#JevAzy_3l7?7_)^I1r!N>3)?O&6OaK2--
R(f9xW002ovPDHLkV1j(po|OOq

literal 0
HcmV?d00001

diff --git a/apps/web/src/components/HeaderRequest.tsx b/apps/web/src/components/HeaderRequest.tsx
index 2bb146e09..eae0e32fe 100644
--- a/apps/web/src/components/HeaderRequest.tsx
+++ b/apps/web/src/components/HeaderRequest.tsx
@@ -1,9 +1,10 @@
 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
@@ -11,9 +12,9 @@ export const HeaderRequest = () => {
 			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>
 	);
 };

From 3e7b12f71b2d7c9b4bbe08cfce7d572f58772c94 Mon Sep 17 00:00:00 2001
From: FME849 <1414439@gmail.com>
Date: Wed, 5 Apr 2023 15:12:51 +0700
Subject: [PATCH 6/8] add border according to design

---
 apps/web/src/screens/Request/Connection/index.tsx | 10 ++++++++--
 apps/web/src/screens/Request/Layout/index.tsx     |  2 ++
 apps/web/src/screens/Request/Signature/index.tsx  |  8 +++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/screens/Request/Connection/index.tsx b/apps/web/src/screens/Request/Connection/index.tsx
index 6c2e584a9..dd03efb1b 100644
--- a/apps/web/src/screens/Request/Connection/index.tsx
+++ b/apps/web/src/screens/Request/Connection/index.tsx
@@ -30,7 +30,13 @@ const RequestConnection = () => {
 					<LightText fontSize={14}>underrealm.stormgate.io</LightText>
 				</Stack>
 
-				<Stack backgroundColor="#202D38" borderRadius={15} marginVertical={15}>
+				<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:
@@ -50,7 +56,7 @@ const RequestConnection = () => {
 							</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" />
diff --git a/apps/web/src/screens/Request/Layout/index.tsx b/apps/web/src/screens/Request/Layout/index.tsx
index fcf659baa..c90f8a215 100644
--- a/apps/web/src/screens/Request/Layout/index.tsx
+++ b/apps/web/src/screens/Request/Layout/index.tsx
@@ -53,6 +53,8 @@ export const RequestLayout = () => {
 						borderRadius={15}
 						marginBottom={20}
 						padding={15}
+						borderColor="rgba(86, 102, 116, .2)"
+						borderWidth={1}
 					>
 						<Stack width={18}>
 							<AlertCircle size={18} color="#566674" />
diff --git a/apps/web/src/screens/Request/Signature/index.tsx b/apps/web/src/screens/Request/Signature/index.tsx
index 8774a3405..6b17592fb 100644
--- a/apps/web/src/screens/Request/Signature/index.tsx
+++ b/apps/web/src/screens/Request/Signature/index.tsx
@@ -29,7 +29,13 @@ export const RequestSignature = () => {
 					<LightText fontSize={14}>underrealm.stormgate.io</LightText>
 				</Stack>
 
-				<Stack backgroundColor="#202D38" borderRadius={15} marginVertical={15}>
+				<Stack
+					backgroundColor="#202D38"
+					borderRadius={15}
+					marginVertical={15}
+					borderColor="rgba(86, 102, 116, .2)"
+					borderWidth={1}
+				>
 					<Stack
 						horizontal
 						justifyContent="space-between"

From 43aba5af2780be1b613f41fa00592ef3c3a2c6a9 Mon Sep 17 00:00:00 2001
From: FME849 <1414439@gmail.com>
Date: Wed, 5 Apr 2023 15:59:17 +0700
Subject: [PATCH 7/8] remove HyperLink component which is a duplicate of Anchor
 component

---
 packages/gui/components/HyperLink.tsx | 36 ---------------------------
 packages/gui/index.ts                 |  1 -
 2 files changed, 37 deletions(-)
 delete mode 100644 packages/gui/components/HyperLink.tsx

diff --git a/packages/gui/components/HyperLink.tsx b/packages/gui/components/HyperLink.tsx
deleted file mode 100644
index 6ad89fe10..000000000
--- a/packages/gui/components/HyperLink.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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>;
diff --git a/packages/gui/index.ts b/packages/gui/index.ts
index 95d6c80b9..fb9c26c35 100644
--- a/packages/gui/index.ts
+++ b/packages/gui/index.ts
@@ -1,6 +1,5 @@
 export * from './components/Anchor';
 export * from './components/Button';
-export * from './components/HyperLink';
 export * from './components/ModalManager';
 export * from './components/Provider';
 export * from './components/styled';

From c6423637c6adae3b8930a34b1dc7117e1cbd9bad Mon Sep 17 00:00:00 2001
From: FME849 <1414439@gmail.com>
Date: Wed, 5 Apr 2023 16:10:19 +0700
Subject: [PATCH 8/8] replace HyperLink by Anchor component

---
 apps/web/src/screens/Request/Layout/index.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/screens/Request/Layout/index.tsx b/apps/web/src/screens/Request/Layout/index.tsx
index c90f8a215..17de727b2 100644
--- a/apps/web/src/screens/Request/Layout/index.tsx
+++ b/apps/web/src/screens/Request/Layout/index.tsx
@@ -1,11 +1,4 @@
-import {
-	AlertCircle,
-	Button,
-	HyperLink,
-	Image,
-	Stack,
-	Text,
-} from '@walless/gui';
+import { AlertCircle, Anchor, Button, Image, Stack, Text } from '@walless/gui';
 
 import { HeaderRequest } from '../../../components/HeaderRequest';
 import LightText from '../../../components/LightText';
@@ -42,7 +35,14 @@ export const RequestLayout = () => {
 						Walless account.
 					</Text>
 
-					<HyperLink title="Learn more" marginTop={20} />
+					<Anchor
+						href="_"
+						marginTop={15}
+						color="#0694D3"
+						textDecorationLine="none"
+					>
+						Learn more
+					</Anchor>
 				</Stack>
 
 				<Stack flex={1} justifyContent="flex-end">