fix(space-creator): check provision result before proceeding (#119)

# Issue
If the `NEXT_PUBLIC_W3UP_PROVIDER` environment variable is not set, the
app will use `did:web:web3.storage` as the default storage provider.
That works well if we are pointing to Prod environment
(https://up.web3.storage), however, if we use the Staging environment
(https://staging.up.web3.storage) it will fail to provision the space
because the default provider is invalid for Staging.

# Fix 
- Verify if the Space Provisioning result contains an error. If so,
throw the error to prevent the user from continuing the flow and
attempting to upload files.
- Updated Docs and sample Env Vars.

---------

Co-authored-by: Alan Shaw <[email protected]>

.env.tpl

@@ -1,6 +1,7 @@
 # set these to your upload API service URL and the DID your service is using as its service DID
 NEXT_PUBLIC_W3UP_SERVICE_URL=https://staging.up.web3.storage
 NEXT_PUBLIC_W3UP_SERVICE_DID=did:web:staging.web3.storage
+NEXT_PUBLIC_W3UP_PROVIDER=did:web:staging.web3.storage
 
 # set these to values from Stripe settings
 NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1OCeiEF6A5ufQX5vPFlWRkPm

README.md

@@ -20,18 +20,16 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 ### Using an alternate w3up service
 
-By default, this app connects to https://up.web3.storage. To use an alternate service, specify
-the service URL and DID in your environment variables, like:
+By default, this app connects to `https://up.web3.storage`, and uses `did:web:web3.storage` as provider. To use an alternate service and/or provider, specify the service URL, service DID and provider DID in your environment variables, like so:
 
 ```
 NEXT_PUBLIC_W3UP_SERVICE_URL=https://your.w3up.service
 NEXT_PUBLIC_W3UP_SERVICE_DID=did:your-service-did
+NEXT_PUBLIC_W3UP_PROVIDER=did:your-provider-did
 ```
 
 An example `.env.local` file can be found in `.env.tpl`.
 
 If you are using `w3infra`, the service URL will be displayed as the `UploadApiStack`'s `ApiEndpoint` output once `npm start` has successfully set up your development environment.
 
 <p style="text-align:center;padding-top:2rem">⁂</p>
-
-

src/components/SpaceCreator.tsx

@@ -53,7 +53,12 @@ export function SpaceCreatorForm ({
       const space = await client.createSpace(name)
 
       const provider = (process.env.NEXT_PUBLIC_W3UP_PROVIDER || 'did:web:web3.storage') as DID<'web'>
-      await account.provision(space.did(), { provider })
+      const result = await account.provision(space.did(), { provider })
+      if (result.error) {
+        setSubmitted(false)
+        setCreated(false)
+        throw new Error(`failed provisioning space: ${space.did()} with provider: ${provider}`, { cause: result.error })
+      }
 
       // MUST do this before creating recovery, as it creates necessary authorizations
       await space.save()