├── .gitignore
├── client
├── .eslintrc.json
├── .gitignore
├── README.md
├── assets
│ ├── avatar-1.webp
│ ├── avatar-2.png
│ ├── avatar-3.webp
│ ├── avatar-4.webp
│ ├── eth.png
│ └── icons
│ │ ├── at.svg
│ │ ├── discord.svg
│ │ ├── friends.svg
│ │ ├── gif.svg
│ │ ├── gift.svg
│ │ ├── help.svg
│ │ ├── idle.svg
│ │ ├── inbox.svg
│ │ ├── nitro.svg
│ │ ├── person-plus.svg
│ │ ├── phone.svg
│ │ ├── pin.svg
│ │ ├── plus-filled.svg
│ │ ├── plus.svg
│ │ ├── search.svg
│ │ ├── smiley.svg
│ │ ├── sticker.svg
│ │ └── video.svg
├── components
│ ├── ChatHeader.js
│ ├── ChatView.js
│ ├── ConversationList.js
│ ├── DmCard.js
│ ├── MessageCard.js
│ ├── MessageForm.js
│ ├── RoomAvatar.js
│ └── Sidebar.js
├── context
│ └── context.js
├── lib
│ └── client.js
├── next.config.js
├── package.json
├── pages
│ ├── _app.js
│ ├── api
│ │ ├── createdm.js
│ │ ├── createuser.js
│ │ ├── getCurrentUserData.js
│ │ ├── getchannels.js
│ │ └── getdms.js
│ └── index.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ ├── chatHeader.module.css
│ ├── chatView.module.css
│ ├── conversationList.module.css
│ ├── dmCard.module.css
│ ├── globals.css
│ ├── messageCard.module.css
│ ├── messageForm.module.css
│ ├── roomAvatar.module.css
│ └── sidebar.module.css
└── yarn.lock
├── server
├── .gitignore
├── package.json
├── server.js
└── yarn.lock
└── studio
├── .eslintrc
├── .gitignore
├── README.md
├── config
├── .checksums
└── @sanity
│ ├── data-aspects.json
│ ├── default-layout.json
│ ├── default-login.json
│ ├── form-builder.json
│ └── vision.json
├── package.json
├── plugins
└── .gitkeep
├── sanity.json
├── schemas
├── conversationsSchema.js
├── schema.js
└── userSchema.js
├── static
├── .gitkeep
└── favicon.ico
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | .pnp
6 | .pnp.js
7 |
8 | # testing
9 | coverage
10 |
11 | # next.js
12 | .next/
13 | out/
14 |
15 | # production
16 | build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 |
34 | # vercel
35 | .vercel
36 | .dccache
37 |
--------------------------------------------------------------------------------
/client/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 |
34 | # vercel
35 | .vercel
36 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/client/assets/avatar-1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CleverProgrammers/discord-clone-blockchain/528d10720d43d2e657f1d919def94fc6029dfbb0/client/assets/avatar-1.webp
--------------------------------------------------------------------------------
/client/assets/avatar-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CleverProgrammers/discord-clone-blockchain/528d10720d43d2e657f1d919def94fc6029dfbb0/client/assets/avatar-2.png
--------------------------------------------------------------------------------
/client/assets/avatar-3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CleverProgrammers/discord-clone-blockchain/528d10720d43d2e657f1d919def94fc6029dfbb0/client/assets/avatar-3.webp
--------------------------------------------------------------------------------
/client/assets/avatar-4.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CleverProgrammers/discord-clone-blockchain/528d10720d43d2e657f1d919def94fc6029dfbb0/client/assets/avatar-4.webp
--------------------------------------------------------------------------------
/client/assets/eth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CleverProgrammers/discord-clone-blockchain/528d10720d43d2e657f1d919def94fc6029dfbb0/client/assets/eth.png
--------------------------------------------------------------------------------
/client/assets/icons/at.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/discord.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/friends.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/gif.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/gift.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/help.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/idle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/inbox.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/nitro.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/person-plus.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/phone.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/pin.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/plus-filled.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/plus.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/search.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/smiley.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/sticker.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/assets/icons/video.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/components/ChatHeader.js:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import personPlus from '../assets/icons/person-plus.svg'
3 | import video from '../assets/icons/video.svg'
4 | import inbox from '../assets/icons/inbox.svg'
5 | import phone from '../assets/icons/phone.svg'
6 | import help from '../assets/icons/help.svg'
7 | import pin from '../assets/icons/pin.svg'
8 | import at from '../assets/icons/at.svg'
9 | import styles from '../styles/chatHeader.module.css'
10 | import ethLogo from '../assets/eth.png'
11 | import { useContext } from 'react'
12 | import { DiscordContext } from '../context/context'
13 |
14 | const ChatHeader = () => {
15 | const { roomName, currentAccount, connectWallet } = useContext(DiscordContext)
16 | return (
17 |
18 |
19 |
20 |
{roomName}
21 |
22 |
23 | {currentAccount ? (
24 |
25 |
26 | {'|'}
27 | {currentAccount.slice(0, 6)}...{currentAccount.slice(39)}
28 |
29 | ) : (
30 |
connectWallet()}>
31 | Connect Wallet
32 |
33 | )}
34 |
35 |
36 |
37 |
44 |
45 |
46 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
66 |
67 |
68 |
69 |
70 |
71 |
78 |
79 |
80 |
87 |
88 |
27 |
28 |
29 | {formattedMessagesArray().map((message, index) => (
30 |
37 | ))}
38 |
39 |
40 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
35 |
36 |
Fiends
37 |
38 |
39 |
40 |
47 |
48 |
Nitro
49 |
50 |
DIRECT MESSAGES
51 | {dms.map((dm, index) => (
52 |
62 | ))}
63 |
64 |
7 |
8 |
15 |
16 |
17 |
18 |
19 |
{sender}
20 |
{timestamp}
21 |
22 |
{content}
23 |
24 |
27 | {channels.map((channel, index) => (
28 |
34 | ))}
35 |
36 | )
37 | }
38 |
39 | export default Sidebar
40 |
--------------------------------------------------------------------------------
/client/context/context.js:
--------------------------------------------------------------------------------
1 | import { createContext, useState, useEffect, useReducer } from 'react'
2 | import { useRouter } from 'next/router'
3 | import Gun from 'gun'
4 |
5 | export const DiscordContext = createContext()
6 |
7 | const gun = Gun(['https://discord-gun-node.herokuapp.com/gun'])
8 |
9 | const initialState = { messages: [] }
10 |
11 | const reducer = (state, action) => {
12 | try {
13 | if (action.type == 'clear') return { messages: [] }
14 | if (action.type == 'add')
15 | return { messages: [...state.messages, action.data] }
16 | } catch (error) {
17 | console.error(error)
18 | }
19 | }
20 |
21 | export const DiscordProvider = ({ children }) => {
22 | const router = useRouter()
23 | const [state, dispatch] = useReducer(reducer, initialState)
24 | const [currentAccount, setCurrentAccount] = useState('')
25 | const [roomName, setRoomName] = useState('')
26 | const [placeholder, setPlaceholder] = useState('Message...')
27 | const [messageText, setMessageText] = useState('')
28 | const [currentUser, setCurrentUser] = useState()
29 |
30 | useEffect(() => {
31 | checkIfWalletIsConnected()
32 | }, [])
33 |
34 | useEffect(async () => {
35 | if (!currentAccount) return
36 |
37 | try {
38 | const response = await fetch(
39 | `${process.env.NEXT_PUBLIC_API_URL}/getCurrentUserData?account=${currentAccount}`,
40 | )
41 |
42 | const data = await response.json()
43 | setCurrentUser(data)
44 | } catch (error) {
45 | console.error(error)
46 | }
47 | }, [currentAccount])
48 |
49 | useEffect(() => {
50 | setRoomName(router.query.name)
51 | dispatch({ type: 'clear', data: {} })
52 | setPlaceholder(`Message ${router.query.name}`)
53 | setMessageText('')
54 | getMessages()
55 | }, [router.query])
56 |
57 | const getMessages = () => {
58 | const _name = router.query.name
59 | const _roomId = router.query.id
60 | const messagesRef = gun.get(_name)
61 |
62 | messagesRef.map().once(message => {
63 | dispatch({
64 | type: 'add',
65 | data: {
66 | sender: message.sender,
67 | content: message.content,
68 | avatar: message.avatar,
69 | createdAt: message.createdAt,
70 | messageId: message.messageId,
71 | },
72 | })
73 | })
74 | }
75 |
76 | const createUserAccount = async (userAddress = currentAccount) => {
77 | if (!window.ethereum) return
78 |
79 | try {
80 | const data = {
81 | userAddress: userAddress,
82 | }
83 |
84 | try {
85 | await fetch(`${process.env.NEXT_PUBLIC_API_URL}/createuser`, {
86 | method: 'POST',
87 | headers: {
88 | 'Content-Type': 'application/json',
89 | },
90 | body: JSON.stringify(data),
91 | })
92 | } catch (error) {
93 | console.error(error)
94 | }
95 |
96 | try {
97 | await fetch(`${process.env.NEXT_PUBLIC_API_URL}/createdm`, {
98 | method: 'POST',
99 | headers: {
100 | 'Content-Type': 'application/json',
101 | },
102 | body: JSON.stringify(data),
103 | })
104 | } catch (error) {
105 | console.error(error)
106 | }
107 | } catch (error) {
108 | console.error(error)
109 | }
110 | }
111 |
112 | const checkIfWalletIsConnected = async () => {
113 | if (!window.ethereum) return
114 | try {
115 | const addressArray = await window.ethereum.request({
116 | method: 'eth_accounts',
117 | })
118 | if (addressArray.length > 0) {
119 | setCurrentAccount(addressArray[0])
120 | createUserAccount(addressArray[0])
121 | } else {
122 | }
123 | } catch (error) {
124 | console.error(error)
125 | }
126 | }
127 |
128 | const connectWallet = async () => {
129 | if (!window.ethereum) return
130 | try {
131 | const addressArray = await window.ethereum.request({
132 | method: 'eth_requestAccounts',
133 | })
134 |
135 | if (addressArray.length > 0) {
136 | setCurrentAccount(addressArray[0])
137 | createUserAccount(addressArray[0])
138 | }
139 | } catch (error) {
140 | console.error(error)
141 | }
142 | }
143 |
144 | return (
145 |
159 | {children}
160 |
161 | )
162 | }
163 |
--------------------------------------------------------------------------------
/client/lib/client.js:
--------------------------------------------------------------------------------
1 | import sanityClient from '@sanity/client'
2 |
3 | export const client = sanityClient({
4 | projectId: process.env.SANITY_PROJECT_ID,
5 | dataset: 'production',
6 | apiVersion: 'v1',
7 | token: process.env.SANITY_TOKEN,
8 | useCdn: false,
9 | })
10 |
--------------------------------------------------------------------------------
/client/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | images: {
5 | domains: ['encrypted-tbn0.gstatic.com', 'cdn.sanity.io'],
6 | },
7 | }
8 |
9 | module.exports = nextConfig
10 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@sanity/client": "^3.1.0",
13 | "gun": "^0.2020.1235",
14 | "next": "12.1.0",
15 | "react": "17.0.2",
16 | "react-dom": "17.0.2"
17 | },
18 | "devDependencies": {
19 | "eslint": "8.9.0",
20 | "eslint-config-next": "12.1.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/client/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import { DiscordProvider } from '../context/context'
3 | import { useRouter } from 'next/router'
4 |
5 | function MyApp({ Component, pageProps }) {
6 | return (
7 |
8 |
9 |
10 | )
11 | }
12 |
13 | export default MyApp
14 |
--------------------------------------------------------------------------------
/client/pages/api/createdm.js:
--------------------------------------------------------------------------------
1 | import { client } from '../../lib/client'
2 |
3 | export default async (req, res) => {
4 | const { userAddress } = req.body
5 |
6 | const conversationDoc = {
7 | _type: 'conversations',
8 | _id: `${userAddress}-dm`,
9 | isDm: true,
10 | roomId: userAddress,
11 | userReference: {
12 | _key: userAddress,
13 | _ref: `${userAddress}-user`,
14 | _type: 'reference',
15 | },
16 | }
17 |
18 | try {
19 | await client.createIfNotExists(conversationDoc)
20 |
21 | res.status(200).send('Successful')
22 | } catch (error) {
23 | console.error(error)
24 | res.status(500).send(error)
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/client/pages/api/createuser.js:
--------------------------------------------------------------------------------
1 | import { client } from '../../lib/client'
2 |
3 | export default async (req, res) => {
4 | const { userAddress } = req.body
5 |
6 | const userDoc = {
7 | _type: 'users',
8 | _id: `${userAddress}-user`,
9 | name: 'Unnamed',
10 | walletAddress: userAddress,
11 | }
12 |
13 | try {
14 | await client.createIfNotExists(userDoc)
15 |
16 | res.status(200).send('Successful')
17 | } catch (error) {
18 | console.error(error)
19 | res.status(500).send(error)
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/client/pages/api/getCurrentUserData.js:
--------------------------------------------------------------------------------
1 | import { client } from '../../lib/client'
2 |
3 | export default async (req, res) => {
4 | const query = `*[_type == "users" && walletAddress == "${req.query.account}"]{
5 | name,
6 | "avatar": profileImage.asset->url
7 | }`
8 |
9 | try {
10 | const sanityResponse = await client.fetch(query)
11 |
12 | res.status(200).send(await sanityResponse[0])
13 | } catch (error) {
14 | console.error(error)
15 | res.status(500).send(error)
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/client/pages/api/getchannels.js:
--------------------------------------------------------------------------------
1 | import { client } from '../../lib/client'
2 |
3 | const query = `*[_type == "conversations" && isDm==false]{
4 | roomId,
5 | roomName,
6 | "avatar": image.asset->url
7 | }`
8 |
9 | export default async (req, res) => {
10 | try {
11 | const sanityResponse = await client.fetch(query)
12 |
13 | res.status(200).send(sanityResponse)
14 | } catch (error) {
15 | console.error(error)
16 | res.status(500).send(error)
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/client/pages/api/getdms.js:
--------------------------------------------------------------------------------
1 | import { client } from '../../lib/client'
2 |
3 | const query = `*[_type == "conversations" && isDm==true]{
4 | "conversation": userReference->{
5 | name,
6 | walletAddress,
7 | "image": profileImage.asset->url
8 | }
9 | }`
10 |
11 | export default async (req, res) => {
12 | try {
13 | const sanityResponse = await client.fetch(query)
14 |
15 | const response = sanityResponse.map(item => {
16 | return {
17 | avatar: item.conversation.image,
18 | name: item.conversation.name,
19 | id: item.conversation.walletAddress,
20 | }
21 | })
22 |
23 | res.status(200).send(response)
24 | } catch (error) {
25 | console.error(error)
26 | res.status(500).send('⚠️', error)
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/client/pages/index.js:
--------------------------------------------------------------------------------
1 | import styles from '../styles/Home.module.css'
2 | import SideBar from '../components/Sidebar'
3 | import ConversationList from '../components/ConversationList'
4 | import ChatView from '../components/ChatView'
5 |
6 | export default function Home() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |