temp tribes fix

apps/ethereum/tribes/src/components/Tribes.ts

@@ -0,0 +1,34 @@
+export const TRIBES = [
+{
+  id: 1,
+  name:"Alchemist",
+  description: "Alchemists are shrouded in mystery and secrecy. They have the ability to transform any tool info something better.",
+  image: "/tribes/alchemist.png",
+}, 
+
+{
+  id: 2,
+  name: 'Dragon',
+  description: 'Dragon is a creature of power. Within its body, it contains the treasure every hunter wants.',
+  image: '/tribes/dragon.png',
+},
+{
+  id: 3,
+  name: 'Healer',
+  description: 'Healers use their knowledge about herbs to heal their fellow teammates. They are good companions on the journey.',
+  image: '/tribes/healer.png',
+},
+{
+  id: 4,
+  name: 'Knight',
+  description: 'Knight is a master of swords and a believer of physical strikes. They are willing to sacrifice themselves for the final success.',
+  image: '/tribes/knight.png',
+},
+{
+  id: 5,
+  name: 'Mage',
+  description: 'Mage casts elemental smashes and makes sure every attack hits their targets at all times.',
+  image: '/tribes/mage.png',
+},
+
+]

apps/ethereum/tribes/src/pages/all-tribes.tsx

@@ -9,6 +9,7 @@ import { toast } from 'react-toastify';
 import { useEffect } from 'react';
 import Link from 'next/link';
 import { useMutation, useQuery } from 'react-query';
+import { TRIBES } from '../components/Tribes';
 
 const AllTribes = () => {
 	const router = useRouter();
@@ -29,7 +30,7 @@ const AllTribes = () => {
 		}
 	}, [isSuccess, router]);
 
-	const isLoading = tribes.loading || allTribesLoading || joinTribeLoading;
+	const isLoading = tribes.loading  || joinTribeLoading;
 
 	useEffect(() => {
 		if (error) {
@@ -50,7 +51,7 @@ const AllTribes = () => {
 				<div className={styles.container}>
 					<h1>Tribes</h1>
 					{address ? (
-						!data || data.length === 0 ? (
+						!TRIBES || TRIBES.length === 0 ? (
 							<>
 								<h5>There are currently no existing tribes.</h5>
 								<Link href="/">Go back home</Link>
@@ -59,13 +60,13 @@ const AllTribes = () => {
 							<>
 								<h5>Select Your Tribe</h5>
 								<div className={styles.allTribes}>
-									{data.map((item) => (
+									{TRIBES.map((item) => (
 										<div key={item.id} onClick={() => mutate(item.id)}>
 											<Image
 												width={200}
 												height={250}
 												className={styles.cards}
-												src={item.imageUrl}
+												src={item.image}
 												alt={item.name}
 											/>
 										</div>

apps/ethereum/tribes/src/pages/my-tribe.tsx

@@ -8,19 +8,28 @@ import Nav from '../components/Nav';
 import Loader from '../components/Loader';
 import { toast } from 'react-toastify';
 import Image from 'next/image';
+import {TRIBES} from '../components/Tribes';
 
 const TribesPage = () => {
 	const router = useRouter();
 	const { address: account } = useEthereum();
 	const tribes = useTribes();
-	const {
-		data,
-		isLoading: tribeDataLoading,
-		error: tribeErr,
-	} = useQuery('tribeAccount', () => tribes.getTribeByAccount!(account!), {
+	// const {
+	// 	data,
+	// 	isLoading: tribeDataLoading,
+	// 	error: tribeErr,
+	// } = useQuery('tribeAccount', () => tribes.getTribeByAccount!(account!), {
+	// 	enabled: !tribes.loading,
+	// });
+
+	const {data, 		isLoading: tribeDataLoading,
+		error: tribeErr,} = useQuery('tribeId', () => tribes.getTribeId!(account!), {
 		enabled: !tribes.loading,
 	});
 
+	const tribeData = TRIBES.find(tribe => tribe.id === data);
+
+
 	const {
 		mutate,
 		isLoading: leaveTribeLoading,
@@ -48,26 +57,26 @@ const TribesPage = () => {
 			<Nav />
 			{isLoading ? (
 				<Loader loaderMessage="Processing..." />
-			) : account && !tribeErr && data ? (
+			) : account && !tribeErr && tribeData ? (
 				<div className={styles.container2}>
 					<div className={styles.container3}>
-						{data.image === 'N/A' ? (
+						{tribeData.image === 'N/A' ? (
 							<div className={styles.tribeCard}>
-								<h2>{data.name}</h2>
+								<h2>{tribeData.name}</h2>
 							</div>
 						) : (
 							<Image
 								width={300}
 								height={380}
-								src={`${data.imageUrl}`}
-								alt={data.name}
+								src={`${tribeData.image}`}
+								alt={tribeData.name}
 								className={styles.tribe}
 							/>
 						)}
 
 						<div className={styles.text}>
-							<h1>{data.name}</h1>
-							<p className={styles.description}>{data.description}</p>
+							<h1>{tribeData.name}</h1>
+							<p className={styles.description}>{tribeData.description}</p>
 						</div>
 					</div>
 					<button className={styles.join} onClick={() => mutate()}>