fix(app): fetch passport after ceramic database initialized

fixes a bug where brand new users have trouble creating a passport for the first time due to React
state not updating as expected. the app is often unable to actually create the passport unless React
timing works out just right...

[passportxyz#216]

app/context/userContext.tsx

@@ -77,6 +77,7 @@ export interface UserContextState {
   walletLabel: string | undefined;
   userDid: string | undefined;
 }
+
 const startingState: UserContextState = {
   loggedIn: false,
   passport: {
@@ -187,7 +188,6 @@ export const UserContextProvider = ({ children }: { children: any }) => {
         );
         setCeramicDatabase(ceramicDatabaseInstance);
         setUserDid(ceramicDatabaseInstance.did);
-        fetchPassport(ceramicDatabaseInstance);
         break;
       }
       case "failed": {
@@ -204,6 +204,12 @@ export const UserContextProvider = ({ children }: { children: any }) => {
     }
   }, [viewerConnection.status]);
 
+  useEffect(() => {
+    if (ceramicDatabase) {
+      fetchPassport(ceramicDatabase);
+    }
+  }, [ceramicDatabase]);
+
   // Toggle connect/disconnect
   // clear context passport on disconnect
   const handleConnection = (): void => {