83 |
109 | }
110 |
111 | export default ConfirmPage
--------------------------------------------------------------------------------
/src/components/Dapp.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { withRouter, Switch, Route, matchPath } from "react-router"
3 | import { ethers } from "ethers"
4 |
5 | import deploymentMap from "../deployments/map.json"
6 | import SyntheticLootArtifact from "../artifacts/contracts/SyntheticLoot/SyntheticLoot.json"
7 |
8 | import {getImageForLoot, itemsFromSvg} from "./../loot-util"
9 |
10 | import { Nav } from "./Nav"
11 | import HeaderUser from "./HeaderUser"
12 |
13 | import "./App.css"
14 | import "./Spinner.css"
15 |
16 | async function getChainId(provider) {
17 | const network = await provider.getNetwork()
18 | let chainId = network.chainId
19 | chainId = parseInt(chainId)
20 | return chainId
21 | }
22 |
23 | class Dapp extends React.Component {
24 | constructor(props) {
25 | super(props)
26 |
27 | this.initialState = {
28 | syntheticLoot: undefined,
29 | currentUser: undefined,
30 | displayedUser: undefined,
31 | lootImage: undefined,
32 | searchQuery: "",
33 | userNotFound: false,
34 | ready: undefined,
35 | networkError: undefined,
36 | isConnectingWallet: false,
37 | canConnectWallet: false,
38 | isLoading: false
39 | }
40 |
41 | this.state = this.initialState
42 |
43 | this._onSearch = this._onSearch.bind(this)
44 | this._onSearchChange = this._onSearchChange.bind(this)
45 | this._onSelectUser = this._onSelectUser.bind(this)
46 | this._userFromAddress = this._userFromAddress.bind(this)
47 | this._refreshCurrentUser = this._refreshCurrentUser.bind(this)
48 | this._refreshDisplayedUser = this._refreshDisplayedUser.bind(this)
49 | }
50 |
51 | render() {
52 | if (this.state.networkError) {
53 | return Confirm Invite
84 | {currentUser == null ?Not connected
:
85 | isLoading ? Loading...
:
86 | // eslint-disable-next-line eqeqeq
87 | fromUser == null || toUser == null ? Invalid invite
: <>
88 | From
89 | To
91 |
93 | {
94 | errorMessage ? errorMessage :
95 | <>
96 | await confirmInvite()}>Confirm
97 |
103 |
104 | }
105 |
106 |
107 | }
108 | {this.state.networkError}
54 | }
55 |
56 | if (!this.state.syntheticLoot) {
57 | return Loading...
58 | }
59 |
60 | return (
61 | <>
62 |
63 |
107 |
113 |
114 | )
115 | }
116 |
117 | async componentDidMount() {
118 | this._initialize()
119 | }
120 |
121 | componentDidUpdate(prevProps, prevState) {
122 |
123 | const { pathname } = this.props.location;
124 | const { pathname: prevPathname } = prevProps.location;
125 | const params = this._getParams(pathname)
126 | const prevParams = this._getParams(prevPathname)
127 |
128 | if (params.addressOrENS) {
129 | if (!prevState.ready && this.state.ready) {
130 | this.updateUser(params.addressOrENS)
131 | return
132 | }
133 | if (params.addressOrENS === prevParams.addressOrENS) {
134 | return
135 | }
136 | this.updateUser(params.addressOrENS)
137 | }
138 | }
139 |
140 | _getParams = (pathname) => {
141 | const matchProfile = matchPath(pathname, {
142 | path: `/account/:addressOrENS`,
143 | })
144 | return (matchProfile && matchProfile.params) || {}
145 | }
146 |
147 | async _hasAccountConnected() {
148 | if (!window.ethereum) {
149 | return false
150 | }
151 |
152 | const accounts = await window.ethereum.request({method: "eth_accounts"})
153 | return accounts.length > 0
154 | }
155 |
156 | async _connectWallet() {
157 | this.setState({isConnectingWallet: true})
158 | try {
159 | const [address] = await window.ethereum.request({ method: 'eth_requestAccounts' })
160 | const currentUser = await this._userFromAddress(address)
161 | this.setState({currentUser})
162 | this.props.history.push(`/account/${currentUser.address}`)
163 | } catch (error) {
164 | console.error(error)
165 | }
166 | this.setState({isConnectingWallet: false})
167 | }
168 |
169 | async _initialize(currentUser) {
170 | if (window.ethereum) {
171 | this._provider = new ethers.providers.Web3Provider(window.ethereum)
172 | this.setState({canConnectWallet: true})
173 | } else {
174 | this._provider = new ethers.providers.JsonRpcProvider("https://mainnet.infura.io/v3/f29f1c340a60430ebff33f1ed9dad190")
175 | }
176 |
177 | await this._loadContracts(this._provider)
178 |
179 | console.log("loaded contract")
180 |
181 | const isConnected = await this._hasAccountConnected()
182 | if (currentUser === undefined) {
183 | if (isConnected) {
184 | await this._connectWallet()
185 | }
186 | }
187 |
188 | if (window.ethereum) {
189 | window.ethereum.on("accountsChanged", ([newAddress]) => {
190 | if (newAddress === undefined) {
191 | return this._resetState()
192 | }
193 | this._connectWallet()
194 | })
195 |
196 | window.ethereum.on("chainChanged", ([networkId]) => {
197 | this._resetState()
198 | })
199 | }
200 |
201 | if (isConnected) {
202 | await this._loadContracts(this._provider.getSigner(0))
203 | }
204 | }
205 |
206 | async _loadContracts(providerOrSigner) {
207 | const chainId = await getChainId(this._provider)
208 |
209 | if(!(chainId in deploymentMap.contracts)) {
210 | this.setState({
211 | networkError: "Contracts not deployed on this network."
212 | })
213 | return
214 | }
215 |
216 | const syntheticLoot = new ethers.Contract(
217 | deploymentMap.contracts[chainId].SyntheticLoot[0],
218 | SyntheticLootArtifact,
219 | providerOrSigner
220 | )
221 |
222 | console.log(syntheticLoot)
223 |
224 | this.setState({
225 | syntheticLoot,
226 | ready: true
227 | })
228 | }
229 |
230 | async _onSelectUser(user) {
231 | this.props.history.push(`/account/${user.address}`)
232 | }
233 |
234 | async _onSearch(e) {
235 | e.preventDefault()
236 | this.props.history.push(`/account/${this.state.searchQuery}`)
237 | this.setState({searchQuery: "", displayedUser: undefined})
238 | }
239 |
240 | async _onSearchChange(e) {
241 | this.setState({searchQuery: e.target.value})
242 | }
243 |
244 | async _refreshCurrentUser() {
245 | const currentUser = await this._userFromAddress(this.state.currentUser.address)
246 | this.setState({currentUser})
247 | }
248 |
249 | async _refreshDisplayedUser() {
250 | const displayedUser = await this._userFromAddress(this.state.displayedUser.address)
251 | this.setState({displayedUser})
252 | }
253 |
254 | async updateUser(addressOrENS) {
255 |
256 | if (this.state.displayedUser && (this.state.displayedUser.address === addressOrENS || this.state.displayedUser.ens === addressOrENS)
257 | ) {
258 | return
259 | }
260 |
261 | this.setState({isLoading: true})
262 |
263 | let user
264 | try {
265 | if (addressOrENS.slice(0,2) === "0x") {
266 | user = await this._userFromAddress(addressOrENS)
267 | } else {
268 | user = await this._userFromENS(addressOrENS)
269 | }
270 | } catch (error) {
271 | console.log(error)
272 | }
273 |
274 | if (!user) {
275 | if (!this.state.userNotFound) {
276 | this.setState({
277 | userNotFound: true,
278 | displayedUser: null,
279 | isLoading: false
280 | })
281 | }
282 | return
283 | }
284 |
285 | this.setState({
286 | searchQuery: "",
287 | displayedUser: user,
288 | userNotFound: false,
289 | isLoading: false
290 | })
291 | }
292 |
293 | async _userFromENS(name) {
294 | const userAddress = await this._provider.resolveName(name);
295 | const user = await this._userFromAddress(userAddress)
296 | return user
297 | }
298 |
299 | async _userFromAddress(address) {
300 | const tokenURIB64 = await this.state.syntheticLoot.tokenURI(address)
301 | const tokenURI = JSON.parse(Buffer.from(tokenURIB64.split(",")[1], 'base64').toString("utf8"))
302 | const b64svg = tokenURI.image
303 | const svg = Buffer.from(b64svg.split(",")[1], 'base64').toString("utf8")
304 | const ens = await this._provider.lookupAddress(address);
305 |
306 | const items = itemsFromSvg(svg)
307 | console.log(items)
308 | const img = await getImageForLoot(items)
309 | console.log(img)
310 |
311 | return {
312 | address: address.toLowerCase(),
313 | lootImage: b64svg,
314 | character: img,
315 | items,
316 | ens
317 | }
318 | }
319 |
320 | _dismissNetworkError() {
321 | this.setState({ networkError: undefined })
322 | }
323 |
324 | _getRpcErrorMessage(error) {
325 | if (error.data) {
326 | return error.data.message
327 | }
328 |
329 | return error.message
330 | }
331 |
332 | _resetState() {
333 | this.setState(this.initialState)
334 | this._initialize()
335 | }
336 | }
337 |
338 | export default {
339 | Dapp: withRouter(Dapp)
340 | }
--------------------------------------------------------------------------------
/src/components/HeaderUser.css:
--------------------------------------------------------------------------------
1 | .headerUser {
2 | margin-left: 20px;
3 | max-width: var(--col-width);
4 | }
5 |
6 | .headerUser .userItem {
7 | cursor: default;
8 | }
9 |
10 | .headerDetailContainer {
11 | font-size: 12px;
12 | color: var(--primary-grey);
13 | margin-left: 40px;
14 | margin-bottom: 20px;
15 | margin-top: 4px;
16 | }
17 |
18 | .inviteButton {
19 | display: inline-block;
20 | background-color: rgba(0, 0, 0, 0);
21 | border: none;
22 | cursor: pointer;
23 | }
24 |
25 | .buttonContainer {
26 | display: inline-flex;
27 | align-items: center;
28 | justify-content: center;
29 | /* background-color: black; */
30 | border-radius: 50%;
31 | width: 35px;
32 | height: 35px;
33 | color: white;
34 | }
35 |
36 | .buttonContainer .spinner {
37 | border-color: black !important;
38 | border-left-color: rgba(0, 0, 0, 0) !important;
39 | }
40 |
41 | .sendInviteModal {
42 | position: absolute;
43 | width: var(--col-width);
44 | height: 520px;
45 | margin: auto;
46 | left: 0;
47 | right: 0;
48 | top: 0;
49 | bottom: 0;
50 | background-color: #DADADA;
51 | padding-left: 25px;
52 | padding-right: 25px;
53 | border-radius: 10px;
54 | }
55 |
56 | .sendInviteModal .linkContainer {
57 | padding-bottom: 12px;
58 | }
59 |
60 | .sendInviteModal .linkContainer input {
61 | background-color: #C4C4C4;
62 | border-radius: 5px;
63 | border: none;
64 | padding-left: 8px;
65 | padding-right: 8px;
66 | padding-top: 4px;
67 | padding-bottom: 4px;
68 | margin-top: 12px;
69 | margin-bottom: 12px;
70 | font-size: 16px;
71 | overflow: hidden;
72 | text-overflow: ellipsis;
73 | width: 80%;
74 | }
75 |
76 | .sendInviteModal .linkContainer button {
77 | border: none;
78 | background-color: rgba(0, 0, 0, 0);
79 | cursor: pointer;
80 | margin-left: 11px;
81 | }
82 |
83 | .sendInviteModal .linkContainer button:active {
84 | color: blue;
85 | }
86 |
87 | .sendInviteModal .qrImage {
88 | margin-top: 13px;
89 | margin-left: -4px;
90 | margin-right: -4px;
91 | margin-bottom: 15px;
92 | }
93 |
94 | .sendInviteModal .inlineUser span {
95 | max-width: 185px;
96 | overflow: hidden;
97 | text-overflow: ellipsis;
98 | }
99 |
100 | .sendInviteModalOverlay {
101 | position: fixed;
102 | top: 0;
103 | left: 0;
104 | right: 0;
105 | bottom: 0;
106 | background: rgba(91, 91, 91, 0.76);
107 | }
--------------------------------------------------------------------------------
/src/components/HeaderUser.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import User from "./User"
3 | import "./HeaderUser.css"
4 | import "./Spinner.css"
5 |
6 |
7 | function HeaderUser({user, currentUser, provider, efd, refreshUser, refreshCurrentUser}) {
8 |
9 | let isOwnProfile = currentUser && user.address.toLowerCase() === currentUser.address.toLowerCase()
10 |
11 |
12 | return
13 |
19 | }
20 |
21 | export default HeaderUser
--------------------------------------------------------------------------------
/src/components/InvitePage.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | .invite button:hover, .invite button:hover .spinner {
4 | transition: 0.2s;
5 | scale: 1.1;
6 | filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
7 | }
8 |
9 | .invite .btnSecondary {
10 | border: 1px solid #000000;
11 | background-color: rgba(0, 0, 0, 0);
12 | color: black;
13 | }
--------------------------------------------------------------------------------
/src/components/InvitePage.js:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from "react"
2 | import User from "./User"
3 | import { encodeObject, decodeEncodedObject, createConfirmableObject } from "../util"
4 | import "./InvitePage.css"
5 | import { SpinnerButton } from "./Spinner"
6 |
7 | export function InvitePage({currentUser, route, userFromAddress, onSelectUser, provider, efd, refreshCurrentUser, history}) {
8 |
9 | let [fromUser, setFromUser] = useState(undefined)
10 | let [invite, setInvite] = useState(undefined)
11 | let [errorMessage, setErrorMessage] = useState(undefined)
12 |
13 | let [isAccepting, setIsAccepting] = useState(false)
14 |
15 | let isLoading = fromUser === undefined
16 | let alreadyFriends = currentUser && fromUser && currentUser.friends.map(u=>u.address.toLowerCase()).includes(fromUser.address.toLowerCase())
17 |
18 | useEffect(() => {
19 | if (invite) {
20 | if (invite.toAddress.toLowerCase() !== currentUser.address.toLowerCase()) {
21 | setErrorMessage("Invite is addressed to a different user")
22 | return
23 | }
24 | if (alreadyFriends) {
25 | setErrorMessage("You are already friends")
26 | return
27 | }
28 |
29 | setErrorMessage(undefined)
30 | return
31 | }
32 | (async function init() {
33 | if (!fromUser && currentUser) {
34 | try {
35 | const inviteJSON = decodeEncodedObject(route.match.params.encodedInvite)
36 | const user = await userFromAddress(inviteJSON.fromAddress)
37 |
38 | setFromUser(user)
39 |
40 | if (inviteJSON.toAddress.toLowerCase() !== currentUser.address.toLowerCase()) {
41 | setErrorMessage("Invite is addressed to a different user")
42 | return
43 | }
44 |
45 | setInvite(inviteJSON)
46 | } catch (error) {
47 | console.error(error)
48 | setFromUser(null)
49 | setErrorMessage("Invalid invite")
50 | }
51 | }
52 | })()
53 | // eslint-disable-next-line react-hooks/exhaustive-deps
54 | }, [currentUser, invite])
55 |
56 | const acceptInvite = async () => {
57 | setIsAccepting(true)
58 | try {
59 | const confirmableInvite = await createConfirmableObject(invite, provider.getSigner(0), efd)
60 | const encodedInvite = encodeObject(confirmableInvite)
61 | setInvite(confirmableInvite)
62 | history.push(`/confirm/${encodedInvite}`)
63 | } catch(error) {
64 | console.error(error)
65 | }
66 | setIsAccepting(false)
67 | }
68 |
69 | return
14 |
18 |
15 |
17 |
70 |
88 | }
89 |
90 | export default InvitePage
--------------------------------------------------------------------------------
/src/components/Nav.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { User } from "./User"
3 | import { SpinnerButton } from "./Spinner";
4 |
5 | export function Nav({connectWallet, isConnectingWallet, canConnectWallet, currentUser, onSearchSubmit, onSearchChange, searchQuery, onSelectUser, displayedUser}) {
6 | return ;
26 | }
--------------------------------------------------------------------------------
/src/components/NoWalletDetected.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export function NoWalletDetected() {
4 | return (
5 | Invite
71 | {currentUser == null ?Not connected
:
72 | isLoading ? Loading...
:
73 | // eslint-disable-next-line eqeqeq
74 | fromUser == null ? Invalid invite
: <>
75 |
77 | {
78 | errorMessage ? errorMessage :
79 | <>
80 | await acceptInvite()}>Accept
81 |
82 |
83 | }
84 |
85 |
86 | }
87 |
6 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner,
2 | .spinner:after {
3 | border-radius: 50%;
4 | width: 15px;
5 | height: 15px;
6 | }
7 | .spinner {
8 | margin: auto;
9 | font-size: 2px;
10 | position: relative;
11 | text-indent: -9999em;
12 | /* border-color: rgba(255, 255, 255, 0.2) !important; */
13 | border-left-color: #ffffff !important;
14 | border-top: 2px solid;
15 | border-right: 2px solid;
16 | border-bottom: 2px solid;
17 | border-left: 2px solid;
18 | -webkit-transform: translateZ(0);
19 | -ms-transform: translateZ(0);
20 | transform: translateZ(0);
21 | -webkit-animation: load8 1.1s infinite linear;
22 | animation: load8 1.1s infinite linear;
23 | }
24 | @-webkit-keyframes load8 {
25 | 0% {
26 | -webkit-transform: rotate(0deg);
27 | transform: rotate(0deg);
28 | }
29 | 100% {
30 | -webkit-transform: rotate(360deg);
31 | transform: rotate(360deg);
32 | }
33 | }
34 | @keyframes load8 {
35 | 0% {
36 | -webkit-transform: rotate(0deg);
37 | transform: rotate(0deg);
38 | }
39 | 100% {
40 | -webkit-transform: rotate(360deg);
41 | transform: rotate(360deg);
42 | }
43 | }
--------------------------------------------------------------------------------
/src/components/Spinner.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import "./Spinner.css"
3 |
4 | export function SpinnerButton({isSpinning=false, spinnerStyle={}, ...props}) {
5 | // TODO: Show transaction hash + link to explorer
6 | return
9 |
10 | }
--------------------------------------------------------------------------------
/src/components/User.css:
--------------------------------------------------------------------------------
1 | .userItem {
2 | display: flex;
3 | align-items: center;
4 | }
5 |
6 | .userItem:hover .profileImage {
7 | filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
8 | }
9 |
10 | .userItem:hover {
11 | cursor: pointer;
12 | }
13 |
14 | .userItem .profileImage {
15 | width: 29px;
16 | height: 29px;
17 | display: inline-flex;
18 | align-items: center;
19 | border-radius: 50%;
20 | }
21 |
22 | .userItem .profileImage .spinner {
23 | border-color: black !important;
24 | border-left-color: rgba(0, 0, 0, 0) !important;
25 | }
26 |
27 | .userItem .profileImage img {
28 | border-radius: 50%;
29 | background-color: rgba(0, 0, 0, 0);
30 | width: 100%;
31 | height: 100%;
32 | }
33 |
34 | .userItem .detailContainer {
35 | max-width: 80%;
36 | padding-left: 11px;
37 | }
38 |
39 | .userItem .username {
40 | font-size: 18px;
41 | overflow-x: hidden;
42 | text-overflow: '...'
43 | }
44 |
45 | .userItem .address {
46 | display: inline-block;
47 | font-size: 12px;
48 | font-family: 'Roboto Mono', monospace;
49 | color: var(--primary-grey);
50 |
51 | }
52 |
53 | .userItem .misc {
54 | display: inline-block;
55 | font-size: 10px;
56 | /* font-family: 'Roboto'; */
57 | background-color: var(--primary-grey);
58 | color: white;
59 | padding-left: 4px;
60 | padding-right: 4px;
61 | padding-top: 1px;
62 | padding-bottom: 1px;
63 | border-radius: 5px;
64 | margin-left: 5px;
65 | }
66 |
67 | .inlineUser {
68 | display: inline-flex;
69 | align-items: center;
70 | padding-left: 5px;
71 | padding-right: 5px;
72 | }
73 |
74 | .inlineUser .address {
75 | font-family: 'Roboto Mono', monospace;
76 | }
77 |
78 | .inlineUser img {
79 | border-radius: 50%;
80 | padding-right: 2px;
81 | height: 17px;
82 | width: 17px;
83 | }
--------------------------------------------------------------------------------
/src/components/User.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react"
2 | import "./User.css"
3 | import { createIcon } from '@download/blockies';
4 | import "./Spinner.css"
5 |
6 | function truncateAddress(address) {
7 | address = address.toLowerCase()
8 | return `${address.slice(0,6)}...${address.slice(address.length-4,address.length)}`
9 | }
10 |
11 | export function User({user, onSelectUser, addressCopyable=false, miscText, inline=false, displayedUser}) {
12 |
13 | let [isLoading, setIsLoading] = useState(true)
14 |
15 | var iconURL = createIcon({
16 | seed: user.address.toLowerCase(),
17 | size: 15,
18 | scale: 2
19 | }).toDataURL()
20 |
21 | useEffect(() => {
22 | setIsLoading(false)
23 | }, [displayedUser])
24 |
25 | if (inline) {
26 | const isAddress = !user.ens
27 | return
28 |
7 |
22 |
8 |
21 |
9 | No Ethereum wallet was detected.
10 | Please install{" "}
11 |
16 | MetaMask
17 |
18 | .
19 |
{
34 | onSelectUser(user)
35 | setIsLoading(!(displayedUser && displayedUser.address === user.address))
36 | } : () => {}}>
37 |
54 | }
55 |
56 | export default User
--------------------------------------------------------------------------------
/src/deployments/map.json:
--------------------------------------------------------------------------------
1 | {
2 | "networks": {
3 | "1": "mainnet"
4 | },
5 | "chains": {
6 | "mainnet": 1
7 | },
8 | "contracts": {
9 | "1": {
10 | "SyntheticLoot": [
11 | "0x869ad3dfb0f9acb9094ba85228008981be6dbdde"
12 | ]
13 | }
14 | },
15 | "ipfs": {
16 | "character_imgs": [
17 | "QmUEvrQtE67en6upRT6K4j1LD58VQ6oAQQJ6cWy9MPk1TL"
18 | ]
19 | }
20 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { HashRouter } from "react-router-dom"
4 | import Dapp from "./components/Dapp";
5 |
6 | // This is the entry point of your application, but it just renders the Dapp
7 | // react component. All of the logic is contained in it.
8 |
9 | ReactDOM.render(
10 |
38 | {/* https://stackoverflow.com/a/45212793 */}
39 | {
40 | isLoading ? :
41 | 
42 | }
43 |
44 |
45 |
53 | {user.ens}
46 |
47 |
52 | window.navigator.clipboard.writeText(user.address) : () => {}}
49 | >{truncateAddress(user.address)}
50 | {miscText ? {miscText}
: <>}
51 |