From b034a07439553738657f463fc7b24ed9ed8ac73c Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 17:50:42 +0100
Subject: [PATCH] display alert when no client detected

---
 wallet-web/components/Layout.tsx |  2 +-
 wallet-web/pages/receive.tsx     | 43 +++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/wallet-web/components/Layout.tsx b/wallet-web/components/Layout.tsx
index 4200d6ab88..09befee3bc 100644
--- a/wallet-web/components/Layout.tsx
+++ b/wallet-web/components/Layout.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Grid, Theme, useTheme, useMediaQuery } from '@material-ui/core'
+import { Grid, Theme, useTheme } from '@material-ui/core'
 
 export const Layout = ({ children }: { children: React.ReactElement }) => {
   const theme: Theme = useTheme()
diff --git a/wallet-web/pages/receive.tsx b/wallet-web/pages/receive.tsx
index 2cc134faf3..da250046ae 100644
--- a/wallet-web/pages/receive.tsx
+++ b/wallet-web/pages/receive.tsx
@@ -1,11 +1,52 @@
+import { useMediaQuery } from '@material-ui/core'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  Typography,
+} from '@material-ui/core'
 import React from 'react'
+import { useContext } from 'react'
+import { Layout, NymCard } from '../components'
 import MainNav from '../components/MainNav'
+import NoClientError from '../components/NoClientError'
+import { ValidatorClientContext } from '../contexts/ValidatorClient'
 
 const Receive = () => {
+  const { client } = useContext(ValidatorClientContext)
+  const matches = useMediaQuery('(min-width:769px)')
+
   return (
     <>
       <MainNav />
-      <div />
+      <Layout>
+        <NymCard title="Receive Nym">
+          {!client ? (
+            <NoClientError />
+          ) : (
+            <Grid container direction="column" spacing={1}>
+              <Grid item>
+                <Typography variant="subtitle1" noWrap={false}>
+                  You can receive tokens by providing this address to the sender
+                </Typography>
+              </Grid>
+              <Grid item>
+                <Card>
+                  <CardContent>
+                    <Typography
+                      variant={matches ? 'h5' : 'subtitle1'}
+                      style={{ wordBreak: 'break-word' }}
+                    >
+                      {client?.address}
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+            </Grid>
+          )}
+        </NymCard>
+      </Layout>
     </>
   )
 }