Hyperhack
Search…
3⃣
Modifying the Client
Prerequisite:
As a Scholar or a Tinker, you would want to replace the existing client with your own.
Let’s change the default client into something else. As of now, you should be seeing something like this.
Let’s make a trivial change in it by replacing "Tribes" with "Hello, World!". In order to do that, open /packages/client/src/tribes/tribes.tsx.
Within that file you can replace the text β€œTribes” with whatever you like. In this example, we will replace it with β€œHello, World!”. So your file would look something like this.
1
import React, { useState, useEffect } from "react"
2
import { useNavigate } from "react-router-dom"
3
//@ts-ignore
4
import DappLib from "@decentology/dappstarter-dapplib"
5
import "./styles/Tribes.css"
6
import Nav from "./components/Nav"
7
​
8
import { ACCOUNT } from "./shared"
9
​
10
const TribesPage = (props: any) => {
11
const [currentTribe, setCurrentTribe] = useState()
12
const [showError, setShowError] = useState(false)
13
const [error, setError] = useState(false)
14
const navigate = useNavigate()
15
​
16
​
17
useEffect(() => {
18
const getCurrentTribe = async () => {
19
const data = {
20
tenantOwner: ACCOUNT.Admin,
21
account: ACCOUNT.Birbal,
22
}
23
try {
24
const stuff = await DappLib.TribesGetCurrentTribe(data)
25
setError(false)
26
setCurrentTribe(stuff.result)
27
} catch (error) {
28
// This will only happen if you haven't run "instance"
29
// for an account under the Tenant module,
30
// and your `tenantOwner` isn't that same account.
31
setError(true)
32
}
33
}
34
​
35
getCurrentTribe()
36
}, [])
37
​
38
return (
39
<main>
40
<Nav />
41
<div className="hero">
42
<div className="header">
43
<h1>Hello, World!</h1>
44
{!currentTribe ? (
45
<button
46
className="join"
47
onClick={() => {
48
error ? setShowError(true) : navigate("/all-tribes")
49
}}
50
>
51
Join A Tribe
52
</button>
53
) : (
54
<button className="join" onClick={() => navigate("/my-tribe")}>
55
View Your Tribe
56
</button>
57
)}
58
{showError && (
59
<div className="error">
60
<p>Two things could be wrong:</p>
61
<ul>
62
<li>
63
1) You have not called `instance` for an account in the Tribes
64
module.
65
</li>
66
<li>
67
2) The `tenantOwner` field in `getCurrentTribe` function is
68
not the account you used in the first step.
69
</li>
70
</ul>
71
</div>
72
)}
73
</div>
74
</div>
75
</main>
76
)
77
}
78
​
79
export default TribesPage
80
​
Copied!
Save the file and you will notice that the project is hot loaded and the changes are rendered on the fly.
Copy link