Merge branch 'master' into master

README.md

@@ -42,6 +42,8 @@ Start designing and customizing your community management system!
 
 During development, our data provider is a headless CMS, strapi.
 
+Use only nodeJS 14 and npm 6  LTS version to ensure compatibility.
+
 Note that it is used only during development and build time, not during production.
 
 By default, strapi listens on port 1337. If you're using WSL2 on Windows and also running Docker Desktop, port 1337 may not be available on your system. To use port 3000 instead, set the environment variable `PORT` to 3000.

app/apollo-client.js

@@ -0,0 +1,28 @@
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
+import { setContext } from '@apollo/client/link/context';
+
+const httpLink = createHttpLink({
+  // Uncomment the appropriate line according to the
+  // region group where you created your database.
+//   uri: 'https://graphql.fauna.com/graphql',
+  // uri: 'https://graphql.eu.fauna.com/graphql',
+  uri: 'https://graphql.us.fauna.com/graphql',
+});
+
+const authLink = setContext((_, { headers }) => {
+  const token = process.env.NEXT_PUBLIC_FAUNA_SECRET
+  // return the headers to the context so httpLink can read them
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : ''
+    }
+  };
+});
+
+const client = new ApolloClient({
+    link: authLink.concat(httpLink),
+    cache: new InMemoryCache(),
+});
+
+export default client;

app/components/auth/firebase/ui/FirebaseLoginForm.js

@@ -13,14 +13,35 @@ import {getApp} from 'firebase/app';
 import { useState } from "react";
 import { FormControl, Alert, Button } from "react-bootstrap";
 import {FB_APP_NAME} from '../lib/constants';
+import { useMutation, gql } from '@apollo/client'
+import Cookies from "js-cookie";
+
+
+const UPSERT_USER = gql`
+  mutation UpsertUser($uid: String!, $email: String!, $displayName: String!, $phoneNumber: String, $photoURL: String  ) {
+    upsertUser(uid: $uid, email: $email, displayName: $displayName, phoneNumber: $phoneNumber, photoURL: $photoURL) {
+      _id
+      uid
+      email
+      displayName
+      phoneNumber
+      photoURL
+    }
+  }
+`;
 
 export default function FirebaseLoginForm({onSignupClick}){
+    const [upsertUserFunc, { data, loading, error }] = useMutation(UPSERT_USER);
     const [email,setEmail] = useState("");
     const [password,setPassword] = useState("");
     const [errorMessage,setError] = useState("");
     const [diffCredError,setDiffCredError] = useState(null);
     const [progress,setProgress] = useState(false);
 
+    if(error) console.log("Error Provider = ", error)
+    if(data) console.log("Data = ", data)
+    if(loading) console.log("Loading = ", loading)
+
     const doEmailPasswordLogin = async (e) => {
         e.preventDefault();
         if(progress){
@@ -30,7 +51,7 @@ export default function FirebaseLoginForm({onSignupClick}){
         try {
             const fbApp = getApp(FB_APP_NAME);
             const userCred = await signInWithEmailAndPassword(getAuth(fbApp),email,password);
-
+            Cookies.set('user', userCred.user.uid);
             if(diffCredError?.oldProvider?.providerId === EmailAuthProvider.PROVIDER_ID){
                 // The signin was requested to link new credentials with the account 
                 await linkWithCredential(userCred.user,OAuthProvider.credentialFromError(diffCredError.error));
@@ -59,6 +80,16 @@ export default function FirebaseLoginForm({onSignupClick}){
         const auth = getAuth(fbApp);
         try {
             const userCred = await signInWithPopup(auth,provider);
+            Cookies.set('user', userCred.user.uid);
+            await upsertUserFunc({
+                variables: {
+                    uid: userCred.user.uid,
+                    email: userCred.user.email,
+                    displayName: userCred.user.displayName,
+                    phoneNumber: userCred.user.phoneNumber,
+                    photoURL: userCred.user.photoURL
+                },
+              })
             if(diffCredError){
                 // The signin was requested to link new credentials with the account 
                 await linkWithCredential(userCred.user,OAuthProvider.credentialFromError(diffCredError.error));

app/components/auth/firebase/ui/FirebaseSignupForm.js

@@ -1,18 +1,44 @@
 import { getAuth, createUserWithEmailAndPassword, updateProfile, sendEmailVerification} from "firebase/auth";
 import {getApp} from 'firebase/app';
 import {reload} from 'firebase/auth';
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { FormControl, Alert, Button } from "react-bootstrap";
 import {FB_APP_NAME} from '../lib/constants';
+import { useMutation, gql } from '@apollo/client'
+import Cookies from "js-cookie";
+
+const UPSERT_USER = gql`
+  mutation UpsertUser($uid: String!, $email: String!, $displayName: String!, $phoneNumber: String, $photoURL: String  ) {
+    upsertUser(uid: $uid, email: $email, displayName: $displayName, phoneNumber: $phoneNumber, photoURL: $photoURL) {
+      _id
+      uid
+      email
+      displayName
+      phoneNumber
+      photoURL
+    }
+  }
+`;
+
 
 export default function FirebaseSignupForm({onSignupComplete}){
+    const [upsertUserFunc, { data, loading, error }] = useMutation(UPSERT_USER);
     const [email,setEmail] = useState("");
     const [name,setName] = useState("");
     const [password1,setPassword1] = useState("");
     const [password2,setPassword2] = useState("");
     const [errorMessage,setError] = useState("");
     const [progress,setProgress] = useState(false);
 
+    useEffect(() => {
+        if(data) {
+          console.log(data);
+        }
+      }, [data])
+
+    if(loading) console.log("Loading ", loading);
+    if(error) console.log("Error = ", error);
+
     const doEmailPasswordSignup = async (e) => {
         e.preventDefault();
         if(progress){
@@ -44,6 +70,16 @@ export default function FirebaseSignupForm({onSignupComplete}){
             const userCred = await createUserWithEmailAndPassword(getAuth(fbApp),email,password1);
             await updateProfile(userCred.user,{displayName: name});
             await reload(userCred.user);
+            upsertUserFunc({
+                variables: {
+                    uid: userCred.user.uid,
+                    email: userCred.user.email,
+                    displayName: userCred.user.displayName,
+                    phoneNumber: userCred.user.phoneNumber,
+                    photoURL: userCred.user.photoURL
+                },
+              })
+            Cookies.set('user', userCred.user.uid);
             await sendEmailVerification(userCred.user);
             onSignupComplete && onSignupComplete();
         } catch(error){

app/components/auth/firebase/ui/FirebaseUserInfo.js

@@ -1,3 +1,4 @@
+import Cookies from "js-cookie";
 import { Button } from "react-bootstrap";
 import { NoUserAvatar } from "../../NoUserAvatar";
 import { useFirebaseAuthUser } from "../lib/functions";
@@ -6,6 +7,11 @@ export default function FirebaseUserInfo(){
     const user = useFirebaseAuthUser();
     if(!user.id)
         return <div/>;
+
+    const doSignOut = () => {
+        user.signOut()
+        Cookies.remove('user')
+    }
 
     return (
         <>
@@ -34,7 +40,7 @@ export default function FirebaseUserInfo(){
                 </div>
             </div>
             <div className="d-flex justify-content-center mb-4 mt-3 ml-3 mr-3">
-                <Button variant="secondary" onClick={()=>user.signOut()}>Sign Out</Button>
+                <Button variant="secondary" onClick={doSignOut}>Sign Out</Button>
             </div>
         </>
     )

app/components/menubar.js

@@ -1,9 +1,26 @@
-import { useState } from 'react';
-import { Navbar, Nav, NavDropdown, Container } from 'react-bootstrap';
+import React, {useState } from 'react';
+import { Navbar, Nav, NavDropdown, Container, Dropdown } from 'react-bootstrap';
 import styles from '../styles/Menubar.module.css';
 import {RocketChatAuthMenuButton} from './auth/rocketchat';
 import BrandLogo from "./brandlogo";
 import RocketChatLinkButton from './rocketchatlinkbutton';
+import Cookies from 'js-cookie';
+import Link from 'next/link'
+
+const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
+  <a
+    className={styles.elipses}
+    href=""
+    ref={ref}
+    onClick={e => {
+      e.preventDefault();
+      onClick(e);
+    }}
+  >
+    {children}
+    <span className={styles.threedots} />
+  </a>
+));
 
 export default function Menubar(props) {
   const [collapsed, setCollapsed] = useState(true);
@@ -71,6 +88,21 @@ export default function Menubar(props) {
             Click to Chat
           </RocketChatLinkButton>
         </Navbar.Collapse>
+        <div className="mx-3">
+        {Cookies.get('user') ?
+        <Dropdown
+        align="end"
+        className={styles.dropdown_menu}>
+        <Dropdown.Toggle as={CustomToggle} />
+        <Dropdown.Menu size="sm" title="">
+          <Dropdown.Header>RC4Community Profile</Dropdown.Header>
+          <Dropdown.Item><Link href={`/profile/${Cookies.get('user')}`}><a className={styles.dropdown_menu_item}>Profile</a></Link></Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+      :
+      ""
+      }
+      </div>
         <div className="mx-2">
           <RocketChatAuthMenuButton/>
         </div>

app/components/wallet/IndiAssetNFT.js

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { Button, Card, Form, Modal, Spinner } from "react-bootstrap";
+import { fetchOpenSea } from "../../lib/walletAPI";
+
+const RequestNFT = () => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <div>
+      <Button variant="warning" onClick={handleShow}>
+        Request NFT
+      </Button>
+      <NFTCard show={show} handleClose={handleClose} />
+    </div>
+  );
+};
+
+const NFTCard = ({ show, handleClose }) => {
+  const [NFT, setNFT] = useState("");
+
+  const [nform, setNform] = useState({
+    nadd: "0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb",
+    token: "1",
+  });
+
+  const [proc, setProc] = useState(false);
+
+  const handleFetch = async (a, t) => {
+    setProc(true);
+    const res = await fetchOpenSea(a, t);
+    setProc(false);
+    setNFT(res);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    handleFetch(nform.nadd, nform.token);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setNform((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <Modal show={show} onHide={handleClose}>
+      <Modal.Header closeButton>
+        <Modal.Title>Retrieve a Single Asset</Modal.Title>
+      </Modal.Header>
+      <Form onSubmit={handleSubmit}>
+        <Modal.Body>
+          <Form.Group>
+            <Form.Label>Address of the contract for this NFT</Form.Label>
+            <Form.Control
+              name="nadd"
+              type="text"
+              onChange={handleChange}
+              required
+              placeholder={nform.nadd}
+            />
+          </Form.Group>
+
+          <Form.Group>
+            <Form.Label>Token ID for this item</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="token"
+              type="text"
+              required
+              placeholder={nform.token}
+            />
+          </Form.Group>
+          {NFT.image_url ? (
+            <Card style={{ width: "10em", marginTop: "1em" }}>
+              <Card.Header>Preview Image</Card.Header>
+              <Card.Img src={NFT.image_preview_url}></Card.Img>
+            </Card>
+          ) : null}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" disabled={proc} onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" disabled={proc} type="submit">
+            {proc ? (
+              <Spinner
+                as="span"
+                animation="border"
+                size="sm"
+                role="status"
+                aria-hidden="true"
+              />
+            ) : (
+              "Submit"
+            )}
+          </Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  );
+};
+
+export default RequestNFT;