web: signup with github flow (#291)

* web: signup github flow (wip) * web: remove @ from profile name * web: signup with github (wip) * web: github flow (wip) * web: signup with github flow * web: cleanup * web: small fix * web: cleanup * web: add user full name for gosh bot data * web: fix data for gosh bot * Update global ver
gosh-sh · Dec 9, 2022 · 1e08b1b · 1e08b1b
1 parent a78db4a
commit 1e08b1b
Show file tree

Hide file tree

Showing 21 changed files with 1,088 additions and 190 deletions.
diff --git a/react-gosh/src/hooks/user.hooks.ts b/react-gosh/src/hooks/user.hooks.ts
@@ -79,7 +79,12 @@ function useUser() {
         const { username, phrase } = params
         const gosh = GoshAdapterFactory.createLatest()
         const profile = await gosh.getProfile({ username })
-        if (await profile.isDeployed()) throw new GoshError(EGoshError.PROFILE_EXISTS)
+        if (await profile.isDeployed()) {
+            throw new GoshError(
+                EGoshError.PROFILE_EXISTS,
+                `GOSH username '${username}' is already taken`,
+            )
+        }
 
         setSignupProgress((state) => ({ ...state, isFetching: true }))
         const derived = await AppConfig.goshclient.crypto.mnemonic_derive_sign_keys({
@@ -101,8 +106,8 @@ function useUser() {
             }))
         }
 
+        resetUser()
         resetUserPersist()
-        setUserPersist((state) => ({ ...state, username, profile: profile.address }))
     }
 
     const signout = () => {

diff --git a/version.json b/version.json
@@ -1,3 +1,3 @@
 {
-  "version": "3.0.2"
+  "version": "3.0.3"
 }
diff --git a/web/package.json b/web/package.json
@@ -51,6 +51,8 @@
         "@monaco-editor/react": "^4.3.1",
         "@mui/icons-material": "^5.8.4",
         "@mui/material": "^5.9.1",
+        "@octokit/core": "^4.1.0",
+        "@supabase/supabase-js": "^2.1.2",
         "buffer": "^6.0.3",
         "classnames": "^2.3.1",
         "crypto-js": "^4.1.1",

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -10,7 +10,6 @@ import AccountLayout from './pages/AccountLayout'
 import DaoLayout from './pages/DaoLayout'
 import DaoSettingsLayout from './pages/DaoSettingsLayout'
 import RepoLayout from './pages/RepoLayout'
-import HomePage from './pages/Home'
 import SettingsPage from './pages/Settings'
 import SignupPage from './pages/Signup'
 import SigninPage from './pages/Signin'
@@ -131,7 +130,7 @@ const App = () => {
             <Header />
             <main className="main grow">
                 <Routes>
-                    <Route path="/" element={<HomePage />} />
+                    <Route path="/" element={<SignupPage />} />
                     <Route path="/containers" element={<ProtectedLayout />}>
                         <Route index element={<Containers />} />
                     </Route>

diff --git a/web/src/assets/images/emptylogo.svg b/web/src/assets/images/emptylogo.svg
diff --git a/web/src/assets/images/githubgosh.svg b/web/src/assets/images/githubgosh.svg
diff --git a/web/src/assets/scss/style.scss b/web/src/assets/scss/style.scss
@@ -22,7 +22,7 @@ body,
 }
 
 .wrapper {
-    background-image: url('../images/bg.png');
+    /* background-image: url('../images/bg.png'); */
     @apply bg-right-top
         bg-no-repeat
         bg-cover
@@ -273,7 +273,8 @@ for those elements which require gradient border color
         w-16
         rounded-full
         transition-colors
-        outline-none;
+        outline-none
+        border;
 
     &::after {
         @extend .gradient-border-after;

diff --git a/web/src/components/Header/Header.tsx b/web/src/components/Header/Header.tsx
@@ -111,32 +111,20 @@ const Header = () => {
                             </a>
 
                             {!user.persist.phrase &&
-                                location.pathname.search(/signin|signup/) < 0 &&
-                                location.pathname !== '/' && (
-                                    <>
-                                        <Link
-                                            to={`/a/signup`}
-                                            className="btn btn--header icon-arrow"
-                                        >
-                                            Sign up
-                                        </Link>
-                                        <Link
-                                            to={`/a/signin`}
-                                            className="btn btn--header icon-arrow"
-                                        >
-                                            Sign in
-                                        </Link>
-                                    </>
+                                location.pathname.search(/signin|signup/) < 0 && (
+                                    <Link
+                                        to={`/a/signin`}
+                                        className="btn btn--header icon-arrow"
+                                    >
+                                        Sign in
+                                    </Link>
                                 )}
                             {location.pathname.search('/signin') >= 0 && (
                                 <>
                                     {/* <div className="text-lg text-gray-53596d hidden sm:block">
                                         Don't have an account?
                                     </div> */}
-                                    <Link
-                                        to={`/a/signup`}
-                                        className="btn btn--header icon-arrow"
-                                    >
+                                    <Link to={`/`} className="btn btn--header icon-arrow">
                                         Sign up
                                     </Link>
                                 </>

diff --git a/web/src/helpers.ts b/web/src/helpers.ts
@@ -1,5 +1,11 @@
+import { createClient } from '@supabase/supabase-js'
 import { toast } from 'react-toastify'
 
+export const supabase = createClient(
+    'https://xdhskvsztepbyisbqsjj.supabase.co',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhkaHNrdnN6dGVwYnlpc2Jxc2pqIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzA0MTMwNTEsImV4cCI6MTk4NTk4OTA1MX0._6KcFBYmSUfJqTJsKkWcMoIQBv3tuInic9hvEHuFpJg',
+)
+
 /**
  * Toast shortcuts
  */

diff --git a/web/src/pages/Daos/DaoListItem.tsx b/web/src/pages/Daos/DaoListItem.tsx
@@ -1,45 +1,54 @@
 import { faCoins, faUsers, faHashtag } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { shortString, TDaoListItem } from 'react-gosh'
+import { classNames, shortString, TDaoListItem } from 'react-gosh'
 import { Link } from 'react-router-dom'
 import CopyClipboard from '../../components/CopyClipboard'
+import emptylogo from '../../assets/images/emptylogo.svg'
 
 type TDaoListItemProps = {
+    className?: string
     item: TDaoListItem
 }
 
 const DaoListItem = (props: TDaoListItemProps) => {
-    const { item } = props
+    const { className, item } = props
 
     return (
-        <div className="py-3">
-            <Link
-                to={`/o/${item.name}`}
-                className="text-xl font-semibold hover:underline"
-            >
-                {item.name}
-            </Link>
+        <div className={classNames('border rounded-xl flex flex-nowrap p-5', className)}>
+            <div className="rounded-xl">
+                <img src={emptylogo} alt="" className="w-14 h-14 md:w-20 md:h-20" />
+            </div>
+            <div className="pl-4">
+                <Link
+                    to={`/o/${item.name}`}
+                    className="text-xl font-medium leading-5 underline"
+                >
+                    {item.name}
+                </Link>
 
-            <span className="ml-2 align-super text-sm font-normal">{item.version}</span>
+                <span className="ml-2 align-super text-sm font-normal text-gray-53596d">
+                    {item.version}
+                </span>
 
-            <div className="flex flex-wrap items-center gap-x-5 gap-y-1 text-gray-606060 text-sm mt-1">
-                <div>
-                    <FontAwesomeIcon icon={faUsers} className="mr-2" />
-                    Members: {item.members?.length}
-                </div>
-                <div>
-                    <FontAwesomeIcon icon={faCoins} className="mr-2" />
-                    Total supply: {item.supply}
+                <div className="flex flex-wrap items-center gap-x-5 gap-y-1 text-gray-53596d text-xs mt-4">
+                    <div>
+                        <FontAwesomeIcon icon={faUsers} className="mr-2" />
+                        {item.members?.length}
+                    </div>
+                    <div>
+                        <FontAwesomeIcon icon={faCoins} className="mr-2" />
+                        {item.supply}
+                    </div>
+                    <CopyClipboard
+                        componentProps={{ text: item.address }}
+                        label={
+                            <>
+                                <FontAwesomeIcon icon={faHashtag} className="mr-2" />
+                                {shortString(item.address, 6, 6)}
+                            </>
+                        }
+                    />
                 </div>
-                <CopyClipboard
-                    componentProps={{ text: item.address }}
-                    label={
-                        <>
-                            <FontAwesomeIcon icon={faHashtag} className="mr-2" />
-                            Address: {shortString(item.address, 9, 9)}
-                        </>
-                    }
-                />
             </div>
         </div>
     )

diff --git a/web/src/pages/Daos/Daos.tsx b/web/src/pages/Daos/Daos.tsx
@@ -1,9 +1,13 @@
 import { Link } from 'react-router-dom'
 import Spinner from '../../components/Spinner'
-import { useDaoList } from 'react-gosh'
+import { useDaoList, useUser } from 'react-gosh'
 import DaoListItem from './DaoListItem'
+import { useEffect, useState } from 'react'
+import { supabase } from '../../helpers'
+import ExternalListItem from './ExternalListItem'
 
 const DaosPage = () => {
+    const { user } = useUser()
     const {
         items,
         isFetching,
@@ -14,15 +18,48 @@ const DaosPage = () => {
         getMore,
         getItemDetails,
     } = useDaoList(5)
+    const [githubData, setGithubData] = useState<any[]>([])
+
+    useEffect(() => {
+        const _getGithubData = async () => {
+            const { data } = await supabase
+                .from('users')
+                .select(`*, github (updated_at, github_url)`)
+                .eq('gosh_username', user.username)
+            if (!data) return
+
+            const imported: { [name: string]: string[] } = {}
+            const row = data[0]
+            for (const item of row.github) {
+                if (item.updated_at) continue
+
+                const [dao, repo] = item.github_url.slice(1).split('/')
+                if (Object.keys(imported).indexOf(dao) < 0) {
+                    imported[dao] = []
+                }
+                if (imported[dao].indexOf(repo) < 0) {
+                    imported[dao].push(repo)
+                }
+            }
+
+            const importedList = Object.keys(imported).map((key) => ({
+                name: key,
+                repos: imported[key],
+            }))
+            setGithubData(importedList)
+        }
+
+        _getGithubData()
+    }, [user.username])
 
     return (
         <>
-            <div className="flex flex-wrap justify-between items-center gap-3">
+            <div className="flex flex-wrap justify-between items-center gap-3 mb-8">
                 <div className="input basis-full sm:basis-1/2">
                     <input
                         className="element !py-1.5"
                         type="search"
-                        placeholder="Search orgranization..."
+                        placeholder="Search GOSH orgranization..."
                         autoComplete="off"
                         value={search}
                         disabled={isFetching}
@@ -37,7 +74,29 @@ const DaosPage = () => {
                 </Link>
             </div>
 
-            <div className="mt-8">
+            {!!githubData.length && (
+                <div className="mb-14">
+                    <div className="text-xl font-medium border-b pb-2 mb-4">
+                        Pending import from GitHub
+                    </div>
+
+                    <div className="flex flex-wrap gap-5 justify-between">
+                        {githubData.map((item, index) => (
+                            <ExternalListItem
+                                key={index}
+                                className={'basis-full md:basis-[48.1%]'}
+                                item={item}
+                            />
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            <div>
+                <div className="text-xl font-medium border-b pb-2 mb-4">
+                    GOSH organizations
+                </div>
+
                 {isFetching && (
                     <div className="text-gray-606060">
                         <Spinner className="mr-3" />
@@ -50,15 +109,21 @@ const DaosPage = () => {
                     </div>
                 )}
 
-                <div className="divide-y divide-gray-c4c4c4">
+                <div className="flex flex-wrap gap-5 justify-between">
                     {items.map((item, index) => {
                         getItemDetails(item)
-                        return <DaoListItem key={index} item={item} />
+                        return (
+                            <DaoListItem
+                                key={index}
+                                className={'basis-full md:basis-[48.1%]'}
+                                item={item}
+                            />
+                        )
                     })}
                 </div>
 
                 {hasNext && (
-                    <div className="text-center mt-3">
+                    <div className="text-center mt-6">
                         <button
                             className="btn btn--body font-medium px-4 py-2 w-full sm:w-auto"
                             type="button"

diff --git a/web/src/pages/Daos/ExternalListItem.tsx b/web/src/pages/Daos/ExternalListItem.tsx
@@ -0,0 +1,27 @@
+import { classNames } from 'react-gosh'
+import emptylogo from '../../assets/images/emptylogo.svg'
+
+type TExternalListItemProps = {
+    className?: string
+    item: { name: string; repos: string[] }
+}
+
+const ExternalListItem = (props: TExternalListItemProps) => {
+    const { className, item } = props
+
+    return (
+        <div className={classNames('border rounded-xl flex flex-nowrap p-5', className)}>
+            <div className="rounded-xl">
+                <img src={emptylogo} alt="" className="w-14 h-14 md:w-20 md:h-20" />
+            </div>
+            <div className="pl-4">
+                <div className="text-xl font-medium leading-5">{item.name}</div>
+                <div className="text-xs text-gray-53596d mt-4">
+                    {item.repos.join(', ')}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ExternalListItem