add sticky footer

api/resolvers/wallet.js

@@ -1,4 +1,4 @@
-import { createInvoice, decodePaymentRequest, subscribeToPayViaRequest } from 'ln-service'
+import lndService, { createInvoice, decodePaymentRequest, subscribeToPayViaRequest } from 'ln-service'
 import { UserInputError, AuthenticationError } from 'apollo-server-micro'
 import serialize from './serial'
 
@@ -43,6 +43,10 @@ export default {
       }
 
       return wdrwl
+    },
+    connectAddress: async (parent, args, { lnd }) => {
+      const pubkey = (await lndService.getWalletInfo({ lnd })).public_key
+      return `${pubkey}@${process.env.LND_SOCKET}`
     }
   },
 

api/typeDefs/wallet.js

@@ -4,6 +4,7 @@ export default gql`
   extend type Query {
     invoice(id: ID!): Invoice!
     withdrawl(id: ID!): Withdrawl!
+    connectAddress: String!
   }
 
   extend type Mutation {

components/footer.js

@@ -0,0 +1,31 @@
+import { useQuery } from '@apollo/client'
+import gql from 'graphql-tag'
+import { CopyInput } from './form'
+
+export default function Footer () {
+  const query = gql`
+    {
+      connectAddress
+    }
+  `
+
+  const { data } = useQuery(query)
+
+  return (
+    <footer>
+      {data
+        ? (
+          <div className='d-flex align-items-center text-small my-3'>
+            <span className='nav-item text-muted mr-2'>connect:</span>
+            <CopyInput
+              size='sm'
+              groupClassName='mb-0'
+              readOnly
+              placeholder={data.connectAddress}
+            />
+          </div>
+          )
+        : 'loading'}
+    </footer>
+  )
+}

components/form.js

@@ -33,7 +33,14 @@ export function CopyInput (props) {
   return (
     <Input
       onClick={handleClick}
-      append={<Button onClick={handleClick}>{copied ? <Thumb width={18} height={18} /> : 'copy'}</Button>}
+      append={
+        <Button
+          size={props.size}
+          onClick={handleClick}
+        >
+          {copied ? <Thumb width={18} height={18} /> : 'copy'}
+        </Button>
+}
       {...props}
     />
   )

components/layout.js

@@ -3,6 +3,7 @@ import Head from 'next/head'
 import Container from 'react-bootstrap/Container'
 import { LightningProvider } from './lightning'
 import { useRouter } from 'next/router'
+import Footer from './footer'
 
 export default function Layout ({ noContain, children }) {
   const router = useRouter()
@@ -18,10 +19,11 @@ export default function Layout ({ noContain, children }) {
         {noContain
           ? children
           : (
-            <Container className='my-1 mb-5 px-sm-0'>
+            <Container className='my-1 mb-4 px-sm-0'>
               {children}
             </Container>
             )}
+        <Footer />
       </LightningProvider>
     </>
   )

styles/globals.scss

@@ -60,6 +60,21 @@ body {
   height: 100%;
 }
 
+#__next {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100vh;
+}
+
+footer {
+  margin-top: auto;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
 @media screen and (max-width: 767px) {
   input, select, textarea, .form-control, .form-control:focus, .input-group-text {
     font-size: 1rem !important;