From 57185cb55ea245ebccb24cc810dc8c0c4e937339 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian.scatularo@xlabs.xyz>
Date: Fri, 22 Dec 2023 11:32:17 -0300
Subject: [PATCH] add xAssets link (#626)

---------

Co-authored-by: Sebastian Scatularo <seabastian.scatularo@xlabs.xyz>
---
 src/App.tsx                     | 11 ++++++++++-
 src/components/Attest/index.tsx | 33 ++++++++++++++++++++++++++++++---
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 23f2d8252..58cddea94 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,7 +21,7 @@ import {
 import { HelpOutline } from "@material-ui/icons";
 import { useCallback } from "react";
 import { useHistory, useLocation } from "react-router";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Redirect, Route, Switch, Link as RouterLink } from "react-router-dom";
 import Attest from "./components/Attest";
 import Footer from "./components/Footer";
 import HeaderText from "./components/HeaderText";
@@ -255,6 +255,15 @@ function App() {
               >
                 FAQ
               </Link>
+              <Link
+                component={RouterLink}
+                rel="noopener noreferrer"
+                color="inherit"
+                className={classes.link}
+                to="register"
+              >
+                Register Token
+              </Link>
               <Box>
                 <Link
                   href="https://wormholescan.io"
diff --git a/src/components/Attest/index.tsx b/src/components/Attest/index.tsx
index 54539c929..e7657e015 100644
--- a/src/components/Attest/index.tsx
+++ b/src/components/Attest/index.tsx
@@ -1,9 +1,12 @@
 import {
   Container,
+  Link,
   Step,
   StepButton,
   StepContent,
   Stepper,
+  Typography,
+  makeStyles,
 } from "@material-ui/core";
 import { Alert } from "@material-ui/lab";
 import { useEffect } from "react";
@@ -26,7 +29,14 @@ import SourcePreview from "./SourcePreview";
 import Target from "./Target";
 import TargetPreview from "./TargetPreview";
 
+const useStyles = makeStyles((theme) => ({
+  alert: {
+    marginBottom: theme.spacing(2),
+  },
+}));
+
 function Attest() {
+  const classes = useStyles();
   const dispatch = useDispatch();
   const activeStep = useSelector(selectAttestActiveStep);
   const isSending = useSelector(selectAttestIsSending);
@@ -46,9 +56,26 @@ function Attest() {
   return (
     <Container maxWidth="md">
       <HeaderText white>Token Registration</HeaderText>
-      <Alert severity="info">
-        This form allows you to register a token on a new foreign chain. Tokens
-        must be registered before they can be transferred.
+      <Alert severity="info" className={classes.alert}>
+        <Typography variant="body1">
+          This form allows you to register a token on a new foreign chain.
+          Tokens must be registered before they can be transferred.
+        </Typography>
+        <Typography variant="body2">
+          Check our tutorial{" "}
+          <Link
+            target="_blank"
+            href="https://portalbridge.com/docs/tutorials/how-to-do-token-register/"
+          >
+            here
+          </Link>
+        </Typography>
+      </Alert>
+      <Alert severity="warning" className={classes.alert}>
+        <Typography variant="body1">
+          Using this feature may have some risks. Ensure a full understanding
+          before proceeding.
+        </Typography>
       </Alert>
       <Stepper activeStep={activeStep} orientation="vertical">
         <Step