New payment card, switching apps, direct URLs, and more

common/styles/index.js

@@ -72,7 +72,7 @@ const theme = {
       accent: '#0CCABA'
     }),
     grey: Object.assign('#5B647C', {
-      light: '#E6E9EE',
+      light: '#F9F9FC',
       mid: '#7588A2',
       dark: '#142144'
     }),
@@ -94,7 +94,7 @@ const wrapperStyle = css`
   padding-right: 20px;
   ${below.md`
     padding-left: 20px;
-    padding-right: 20px;  
+    padding-right: 20px;
   `};
 `
 

components/maker/index.js

@@ -5,7 +5,6 @@ import Status from './status'
 import Notification from './notification'
 import { SidebarButton } from './styled'
 
-
 export default {
   SidebarButton,
   PaymentDetails,

components/maker/modal.js

@@ -5,7 +5,11 @@ import styled from 'styled-components'
 import { CloseIcon } from '@components/svg/maker'
 
 const customStyles = {
-  content : {
+  overlay: {
+    // above headroom header library
+    zIndex: 100
+  },
+  content: {
     top: '50%',
     left: '50%',
     right: 'auto',
@@ -27,7 +31,7 @@ const CloseButtonContainer = styled.div`
 
 const CloseButton = ({ handleClick }) => (
   <CloseButtonContainer onClick={handleClick}>
-    <CloseIcon/>
+    <CloseIcon />
   </CloseButtonContainer>
 )
 
@@ -36,12 +40,11 @@ const MakerModal = ({ isOpen, handleClose, children }) => (
     isOpen={isOpen}
     onRequestClose={handleClose}
     style={customStyles}
-    ariaHideApp={false}
+    appElement={typeof document !== 'undefined' ? document.querySelector('#__next') : null}
   >
     <CloseButton handleClick={handleClose} />
     {children}
   </Modal>
 )
 
-
 export default MakerModal

components/maker/payment/content.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Flex, Box, Type } from 'blockstack-ui'
+import { MakerCardHeader, MakerCardText, MakerButton, MakerField } from '../styled'
+
+export const PaymentContainer = ({ children }) => (
+  <Flex>
+    <Box width={1} mt={0} as="form">
+      {children}
+    </Box>
+  </Flex>
+)
+
+export const PaymentHeader = MakerCardHeader
+
+export const PaymentDescription = () => (
+  <MakerCardText mb={5} mt={0}>
+    This is where you will receive your App Mining payments.
+    Currently, payments are made in Bitcoin (BTC). Payments will be made
+    in Stacks (STX) in the future.
+  </MakerCardText>
+)
+
+export const PaymentHelpText = () => (
+  <Type.p fontSize={12} mt={0} display="block">
+    {"Don't"} have a Stacks address? <a href="https://wallet.blockstack.org" target="_blank" rel="noopener noreferrer">Download the Stacks wallet to get one</a>
+  </Type.p>
+)
+
+export const PaymentBtcField = props => (
+  <MakerField
+    name="btcAddress"
+    label="Bitcoin Address"
+    placeholder="Enter a Bitcoin address"
+    {...props}
+  />
+)
+
+export const PaymentStxField = props => (
+  <MakerField
+    name="stacksAddress"
+    label="Stacks Address"
+    placeholder="Enter a Stacks address"
+    {...props}
+  />
+)
+
+export const PaymentButton = ({ children, ...props }) => (
+  <MakerButton type="button" mt={4} {...props}>
+    {children}
+  </MakerButton>
+)

components/maker/payment/helpers.js

@@ -0,0 +1,21 @@
+import { address, networks } from 'bitcoinjs-lib'
+import * as c32Check from 'c32check'
+import memoize from 'lodash/memoize'
+
+export const validateBTC = memoize(addr => {
+  try {
+    address.toOutputScript(addr, networks.bitcoin)
+    return true
+  } catch (error) {
+    return false
+  }
+})
+
+export const validateSTX = memoize(addr => {
+  try {
+    c32Check.c32addressDecode(addr)
+    return true
+  } catch (error) {
+    return false
+  }
+})

components/maker/payment/index.js

@@ -1,117 +1,75 @@
 import React, { useState } from 'react'
-import { Flex, Box, Type } from 'blockstack-ui'
-import { address, networks } from 'bitcoinjs-lib'
-import * as c32Check from 'c32check'
-import Notification from '../notification'
-
+import { savePaymentDetails } from '@stores/maker/actions'
+import { validateBTC, validateSTX } from './helpers'
 import {
-  MakerCardHeader,
-  MakerCardText,
-  MakerButton,
-  MakerField
-} from '../styled'
-
-const validateBTC = (addr) => {
-  try {
-    address.toOutputScript(addr, networks.bitcoin)
-    return true
-  } catch (error) {
-    return false
-  }
-}
-
-const validateSTX = (addr) => {
-  try {
-    c32Check.c32addressDecode(addr)
-    return true
-  } catch (error) {
-    return false
-  }
-}
+  PaymentContainer,
+  PaymentHeader,
+  PaymentDescription,
+  PaymentHelpText,
+  PaymentBtcField,
+  PaymentStxField,
+  PaymentButton
+} from './content'
 
-const PaymentDetails = ({ app, apiServer, accessToken, user }) => {
+const PaymentDetails = ({ app, apiServer, accessToken, user, dispatch }) => {
   const [btcAddress, setBTCAddress] = useState(app.BTCAddress)
   const [stxAddress, setSTXAddress] = useState(app.stacksAddress)
-  const [showNotification, setShowNotification] = useState(false)
-  const [btcValid, setBtcValid] = useState(true)
-  const [stxValid, setStxValid] = useState(true)
   const [saving, setSaving] = useState(false)
+  const [hasAttemptedSaved, setHasAttemptedSaved] = useState(false)
+  const [savedValues, setSavedValue] = useState({ btcAddress, stxAddress })
 
-  const notify = () => {
-    setShowNotification(true)
-    setTimeout(() => {
-      setShowNotification(false)
-    }, 10000)
-  }
+  const isSaved = (
+    btcAddress === savedValues.btcAddress &&
+    btcAddress !== '' &&
+    stxAddress === savedValues.stxAddress &&
+    stxAddress !== ''
+  )
 
   const save = async () => {
-    let isValid = true
-    if (!validateBTC(btcAddress)) {
-      isValid = false
-      setBtcValid(false)
-    }
-    if (!validateSTX(stxAddress)) {
-      isValid = false
-      setStxValid(false)
-    }
-    if (!isValid) {
-      return
-    } else {
-      setBtcValid(true)
-      setStxValid(true)
-    }
+    setHasAttemptedSaved(true)
+    if (!validateBTC(btcAddress) || !validateSTX(stxAddress)) return
     setSaving(true)
-    console.log(stxAddress)
-    const response = await fetch(`${apiServer}/api/maker/apps?appId=${app.id}`, {
-      method: 'POST',
-      headers: new Headers({
-        'Content-Type': 'application/json',
-        authorization: `Bearer ${user.jwt}`
-      }),
-      body: JSON.stringify({
-        BTCAddress: btcAddress,
-        stacksAddress: stxAddress
-      })
-    })
-    await response.json()
-    notify()
+    await savePaymentDetails({ apiServer, appId: app.id, jwt: user.jwt, btcAddress, stxAddress })(dispatch)
     setSaving(false)
+    setSavedValue({ btcAddress, stxAddress })
+  }
+
+  const buttonText = () => {
+    if (saving) return 'Saving…'
+    if (isSaved) return 'Saved'
+    return 'Save'
+  }
+
+  const createInputError = ({ validateFn, currencySymbol }) => addressHash => {
+    if (!hasAttemptedSaved) return null
+    if (!validateFn(addressHash)) return `Please enter a valid ${currencySymbol} address`
+    return null
   }
+  const getBtcError = createInputError({ validateFn: validateBTC, currencySymbol: 'BTC' })
+  const getStxError = createInputError({ validateFn: validateSTX, currencySymbol: 'STX' })
 
   return (
-    <Flex>
-      <Box width={1} mt={0}>
-        <MakerCardHeader>Payment details</MakerCardHeader>
-        {showNotification && <Notification message="Thanks! Your payment details have been updated." />}
-        <MakerCardText mb={5} mt={0}>
-          This is where you will receive your App Mining payments.
-          Currently, payments are made in Bitcoin (BTC). Payments will be made
-          in Stacks (STX) in the future.
-        </MakerCardText>
-        <MakerField
-          name="btcAddress"
-          label="Bitcoin Address"
-          placeholder="Enter a Bitcoin address"
-          onChange={(e) => setBTCAddress(e.target.value)}
-          value={btcAddress || ''}
-          error={!btcValid ? 'Please enter a valid BTC address' : null}
-        />
-        <MakerField
-          name="stacksAddress"
-          label="Stacks Address"
-          placeholder="Enter a Stacks address"
-          onChange={(e) => setSTXAddress(e.target.value)}
-          value={stxAddress || ''}
-          error={!stxValid ? 'Please enter a valid STX address' : null}
-        />
-        <Type.p fontSize={12} mt={0} display="block">
-          {"Don't"} have a Stacks address? <a href="https://wallet.blockstack.org" target="_blank" rel="noopener noreferrer">Download the Stacks wallet to get one</a>
-        </Type.p>
-        <MakerButton mt={4} disabled={saving} onClick={() => save({ btcAddress, stxAddress, apiServer, accessToken })}>
-          {saving ? 'Saving...' : 'Save'}
-        </MakerButton>
-      </Box>
-    </Flex>
+    <PaymentContainer>
+      <PaymentHeader>Payment details</PaymentHeader>
+      <PaymentDescription />
+      <PaymentBtcField
+        onChange={e => setBTCAddress(e.target.value)}
+        value={btcAddress || ''}
+        error={getBtcError(btcAddress)}
+      />
+      <PaymentStxField
+        onChange={e => setSTXAddress(e.target.value)}
+        value={stxAddress || ''}
+        error={getStxError(stxAddress)}
+      />
+      <PaymentHelpText/>
+      <PaymentButton
+        disabled={isSaved || saving}
+        onClick={() => save({ btcAddress, stxAddress, apiServer, accessToken })}
+      >
+        {buttonText()}
+      </PaymentButton>
+    </PaymentContainer>
   )
 }
 

components/maker/styled.js

@@ -54,6 +54,14 @@ export const MakerContainer = ({ children }) => (
   </Flex>
 )
 
+export const MakerTitle = styled(Type.h2)`
+  display: block;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 28px;
+  color: #0F1117;
+  margin-bottom: 16px;
+`
 
 export const MakerCardHeader = styled(Type.h2)`
   font-weight: 500;

components/page/index.js

@@ -7,7 +7,7 @@ import { StyledPage } from './styled'
 
 const Page = ({ isErrorPage = false, children, admin = false, wrap, innerPadding = [2, 0], ...rest }) => (
   <StyledPage {...rest}>
-    <TopBar isErrorPage={isErrorPage} admin={admin} wrap={rest.wrap} />
+    <TopBar isErrorPage={isErrorPage} admin={admin} wrap={wrap} />
     <StyledPage.Section flexDirection={['column']} alignItems="center" pt={[3, 4]} px={innerPadding}>
       {children}
     </StyledPage.Section>

components/submit/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import Link from 'next/link'
+import { Type, Box, Button } from 'blockstack-ui'
+
+const SuccessCard = ({ isAppMiningEligible }) => (
+  <Box width="100%" textAlign="center">
+    <Box pb={6} width="100%">
+      <Type mx="auto" fontSize={5} fontWeight="bold">
+        Success!
+      </Type>
+    </Box>
+    <Box mx="auto">
+      <Type display="block">
+        Thanks for your submission! Your app will need to be approved before being public on app.co.
+      </Type>
+      {isAppMiningEligible && (
+        <>
+          <Type my={3} display="block">
+            To update your app&apos;s details and enroll in App Mining, visit our Maker Portal
+          </Type>
+          <Link href={{ pathname: '/maker' }} passHref>
+            <Button is="a" href="/" color="white !important">
+              Go to the Maker Portal
+            </Button>
+          </Link>
+        </>
+      )}
+    </Box>
+  </Box>
+)
+
+export default SuccessCard

package.json

@@ -37,6 +37,7 @@
     "@mdx-js/tag": "^0.15.0",
     "@next/bundle-analyzer": "^9.0.6",
     "@next/mdx": "^9.0.6",
+    "@types/react-redux": "^7.1.5",
     "accounting": "^0.4.1",
     "async": "^2.6.0",
     "bitcoinjs-lib": "^5.0.5",
@@ -63,6 +64,7 @@
     "grid-styled": "5.0.2",
     "intersection-observer": "^0.5.1",
     "isomorphic-unfetch": "^3.0.0",
+    "js-cookie": "^2.2.1",
     "lodash": "^4.17.11",
     "lodash.debounce": "^4.0.8",
     "lru-cache": "^4.1.3",