feat: improve stamp selector (#400)

src/pages/files/Upload.tsx

@@ -31,7 +31,7 @@ export function Upload(): ReactElement {
   const [isUploading, setUploading] = useState(false)
   const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
 
-  const { refresh } = useContext(StampsContext)
+  const { stamps, refresh } = useContext(StampsContext)
   const { beeApi, beeDebugApi } = useContext(SettingsContext)
   const { files, setFiles, uploadOrigin, metadata, previewUri, previewBlob } = useContext(FileContext)
   const { identities, setIdentities } = useContext(IdentityContext)
@@ -40,6 +40,8 @@ export function Upload(): ReactElement {
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
 
+  const hasAnyStamps = stamps !== null && stamps.length > 0
+
   useEffect(() => {
     refresh()
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
@@ -180,7 +182,7 @@ export function Upload(): ReactElement {
       {step === 1 && (
         <>
           <Box mb={2}>
-            {stampMode === 'SELECT' ? (
+            {hasAnyStamps && stampMode === 'SELECT' ? (
               <PostageStampSelector onSelect={stamp => setStamp(stamp)} defaultValue={stamp?.batchID} />
             ) : (
               <PostageStampCreation onFinished={() => setStampMode('SELECT')} />
@@ -210,6 +212,7 @@ export function Upload(): ReactElement {
         onUpload={onUpload}
         isUploading={isUploading}
         hasStamp={Boolean(stamp)}
+        hasAnyStamps={hasAnyStamps}
         uploadLabel={identity ? 'Update Feed' : 'Upload To Your Node'}
         stampMode={stampMode}
         setStampMode={setStampMode}

src/pages/files/UploadActionBar.tsx

@@ -13,6 +13,7 @@ interface Props {
   onProceed: () => void
   isUploading: boolean
   hasStamp: boolean
+  hasAnyStamps: boolean
   uploadLabel: string
   stampMode: 'BUY' | 'SELECT'
   setStampMode: (mode: 'BUY' | 'SELECT') => void
@@ -26,6 +27,7 @@ export function UploadActionBar({
   onProceed,
   isUploading,
   hasStamp,
+  hasAnyStamps,
   uploadLabel,
   stampMode,
   setStampMode,
@@ -62,6 +64,7 @@ export function UploadActionBar({
           </SwarmButton>
         </ExpandableListItemActions>
         <SwarmButton
+          disabled={stampMode === 'BUY' && !hasAnyStamps}
           onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
           iconType={stampMode === 'BUY' ? Layers : PlusSquare}
         >

src/pages/stamps/PostageStampSelector.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useContext } from 'react'
+import { ReactElement, useContext } from 'react'
 import { SwarmSelect } from '../../components/SwarmSelect'
 import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
 
@@ -26,6 +26,7 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
       options={(stamps || []).map(x => ({ label: x.batchID.slice(0, 8), value: x.batchID }))}
       onChange={event => onChange(event.target.value as string)}
       defaultValue={defaultValue}
+      placeholder="Please select a postage stamp..."
     />
   )
 }