From 522776d5d45adea393292eaad5302af5d725ac0f Mon Sep 17 00:00:00 2001
From: Axel Delamarre <1091900+delaaxe@users.noreply.github.com>
Date: Wed, 18 May 2022 21:07:18 +0200
Subject: [PATCH] feat(nfts): add courtesy links to empty state

---
 .../ui/features/accountNfts/AccountNfts.tsx   | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/extension/src/ui/features/accountNfts/AccountNfts.tsx b/packages/extension/src/ui/features/accountNfts/AccountNfts.tsx
index 616128bf9..d472d5453 100644
--- a/packages/extension/src/ui/features/accountNfts/AccountNfts.tsx
+++ b/packages/extension/src/ui/features/accountNfts/AccountNfts.tsx
@@ -5,7 +5,7 @@ import styled from "styled-components"
 import { ErrorBoundary } from "../../components/ErrorBoundary"
 import { ReportGmailerrorredIcon } from "../../components/Icons/MuiIcons"
 import { Spinner } from "../../components/Spinner"
-import { P } from "../../components/Typography"
+import { A, P } from "../../components/Typography"
 import { routes } from "../../routes"
 import { Account } from "../accounts/Account"
 import { getNftPicture } from "./playoasis.service"
@@ -16,6 +16,10 @@ const Container = styled.div`
   flex-direction: column;
   padding-top: 16px;
   margin: 0 16px 0 16px;
+
+  ${P} {
+    text-align: center;
+  }
 `
 
 const Header = styled.h2`
@@ -68,7 +72,25 @@ const Nfts: FC<AccountNftsProps> = ({ account }) => {
   return (
     <div>
       {nfts.length === 0 && (
-        <P style={{ textAlign: "center" }}>No collectibles to show</P>
+        <>
+          <P>No collectibles to show</P>
+          <P style={{ marginTop: 120 }}>
+            <small>
+              You can browse collectibles on
+              <A href="https://testnet.playoasis.xyz/" target="_blank">
+                PlayOasis
+              </A>
+            </small>
+          </P>
+          <P style={{ marginTop: 16 }}>
+            <small>
+              Or build your own 3D collectible on
+              <A href="https://briq.construction/" target="_blank">
+                briq
+              </A>
+            </small>
+          </P>
+        </>
       )}
       {nfts.map((nft) => (
         <NftItem