Feat/rainbowkit integration

apps/ethereum/tribes/package.json

@@ -9,12 +9,13 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
-		"@decentology/unstated-next": "^1.0.0",
-		"@decentology/web3modal": "^1.0.0",
-		"@decentology/hyperverse": "^1.0.0",
-		"@decentology/hyperverse-ethereum": "^1.0.0",
-		"@decentology/hyperverse-ethereum-randompick": "^1.0.0",
-		"@decentology/hyperverse-evm-tribes": "^1.0.0",
+		"@decentology/unstated-next": "workspace:*",
+		"@decentology/web3modal": "workspace:*",
+		"@decentology/hyperverse-evm": "workspace:*",
+		"@decentology/hyperverse": "workspace:*",
+		"@decentology/hyperverse-ethereum": "workspace:*",
+		"@decentology/hyperverse-ethereum-randompick": "workspace:*",
+		"@decentology/hyperverse-evm-tribes": "workspace:*",
 		"ethers": "^5.5.2",
 		"next": "12.0.7",
 		"react": "17.0.2",
@@ -28,7 +29,7 @@
 		"swr": "^1.3.0"
 	},
 	"devDependencies": {
-		"@decentology/config": "^1.0.0",
+		"@decentology/config": "workspace:*",
 		"@types/node": "17.0.7",
 		"@types/react": "17.0.38",
 		"eslint": "8.6.0",

apps/ethereum/tribes/src/components/Nav.tsx

@@ -4,6 +4,7 @@ import styles from '../styles/Home.module.css';
 import { useEthereum } from '@decentology/hyperverse-ethereum';
 import { toast } from 'react-toastify';
 
+
 const shortenHash = (hash: string = '', charLength: number = 6, postCharLength?: number) => {
 	let shortendHash;
 	if (postCharLength) {
@@ -18,8 +19,7 @@ const shortenHash = (hash: string = '', charLength: number = 6, postCharLength?:
 };
 
 const Nav = () => {
-	const { ens, address, disconnect, connect, error } = useEthereum();
-
+	const { Connect, error } = useEthereum();
 	useEffect(() => {
 		if (error) {
 			toast.warn(error.message, {
@@ -40,15 +40,9 @@ const Nav = () => {
 					</a>
 				</Link>
 
-				{!address ? (
-					<button className={styles.connect} onClick={connect}>
-						Connect Wallet
-					</button>
-				) : (
-					<button className={styles.logout} onClick={disconnect}>
-						<span>{ens || shortenHash(address, 5, 5)}</span>
-					</button>
-				)}
+			<Connect accountStatus={'full'}/>
+			{/* {connect({accountStatus:"full"})} */}
+
 			</div>
 		</nav>
 	);

apps/ethereum/tribes/src/pages/_app.tsx

@@ -18,7 +18,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 		blockchain: Ethereum,
 		network: Network.Testnet,
 		storage: {
-			options: { clientUrl: 'https://fileportal.org' }, // Updated to fileportal due to SSL error issues with SiaSky.net
+			options: { clientUrl: 'https://siasky.net/' }, // Updated to fileportal due to SSL error issues with SiaSky.net
 		},
 		modules: [
 			{
@@ -31,13 +31,14 @@ function MyApp({ Component, pageProps }: AppProps) {
 			},
 		],
 	});
+
 	return (
 		<QueryClientProvider client={queryClient}>
 			<Provider initialState={hyperverse}>
-				<InnerComponent>
-					<ToastContainer />
-					<Component {...pageProps} />
-				</InnerComponent>
+					<InnerComponent>
+						<ToastContainer />
+						<Component {...pageProps} />
+					</InnerComponent>
 			</Provider>
 		</QueryClientProvider>
 	);

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

@@ -12,7 +12,7 @@ import { useMutation, useQuery } from 'react-query';
 
 const AllTribes = () => {
 	const router = useRouter();
-	const { address } = useEthereum();
+	// const { account } = useEthereum();
 	const tribes = useTribes();
 	const { data, isLoading: allTribesLoading } = useQuery('tribes', () => tribes.getAllTribes!(), {
 		enabled: !tribes.loading,
@@ -23,6 +23,7 @@ const AllTribes = () => {
 		error,
 		isSuccess,
 	} = useMutation('joinTribe', tribes.joinTribe);
+
 	useEffect(() => {
 		if (isSuccess) {
 			router.push('/my-tribe');
@@ -44,12 +45,14 @@ const AllTribes = () => {
 	return (
 		<main>
 			<Nav />
+			<button className={styles.join} onClick={() => mutate(1)}>Join</button>
 			{isLoading ? (
 				<Loader loaderMessage="processing..." />
-			) : (
-				<div className={styles.container}>
+				) : (
+					<div className={styles.container}>
 					<h1>Tribes</h1>
-					{address ? (
+					{
+					// account ? (
 						!data || data.length === 0 ? (
 							<>
 								<h5>There are currently no existing tribes.</h5>
@@ -73,9 +76,11 @@ const AllTribes = () => {
 								</div>
 							</>
 						)
-					) : (
-						<p className={styles.error}>Please connect your wallet to join a tribe.</p>
-					)}
+					// ) 
+					// : (
+					// 	<p className={styles.error}>Please connect your wallet to join a tribe.</p>
+					// )
+					}
 				</div>
 			)}
 		</main>

apps/ethereum/tribes/src/pages/index.tsx

@@ -10,14 +10,16 @@ import { useState } from 'react';
 
 const Home: NextPage = () => {
 	const router = useRouter();
-	const { address } = useEthereum();
+	const { account:address } = useEthereum();
 	const { getTribeId } = useTribes();
 	const [tribeId, setTribeId] = useState<number | null>();
 	useEffect(() => {
 		if (getTribeId && address) {
 			getTribeId(address).then(setTribeId);
 		}
 	}, [getTribeId, address]);
+
+
 	return (
 		<>
 			<Head>

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

@@ -11,7 +11,7 @@ import Image from 'next/image';
 
 const TribesPage = () => {
 	const router = useRouter();
-	const { address: account } = useEthereum();
+	const { account } = useEthereum();
 	const tribes = useTribes();
 	const {
 		data,
@@ -46,6 +46,7 @@ const TribesPage = () => {
 	return (
 		<main>
 			<Nav />
+			<button className={styles.join} onClick={() => mutate()}>Leave</button>
 			{isLoading ? (
 				<Loader loaderMessage="Processing..." />
 			) : account && !tribeErr && data ? (

apps/ethereum/tribes/src/styles/Home.module.css

@@ -10,10 +10,12 @@
   justify-content: center;
   align-items: center;
   font-family: "Press Start 2P";
+  padding: 0 1.25rem ;
+
 }
 
 .rightNav a {
-  margin-left: 1rem;
+  margin-right: 1.5rem;
 }
 
 .connect {

apps/ethereum/tribes/src/styles/globals.css

@@ -10,14 +10,15 @@
 * {
   padding: 0;
   margin: 0;
-  overflow-y: hidden;
+
 }
 
 html,
 body {
   font-family: "Inconsolata";
   background-color: var(--color-theme-black);
   color: var(--color-theme-white);
+  overflow-y: hidden;
 
 }
 
@@ -47,7 +48,7 @@ nav > a {
 }
 
 a {
-  text-decoration: underline;
+  text-decoration: none;
   cursor: pointer;
   color: var(--color-theme-white);
 

packages/hyperverse-ethereum/source/Provider.tsx

@@ -1,29 +1,31 @@
 import { FC } from 'react';
-import { Evm } from '@decentology/hyperverse-evm';
+import { Provider as EvmProvider, ProviderProps} from '@decentology/hyperverse-evm';
 import { Ethereum } from './useEthereum';
-import { Network } from '@decentology/hyperverse';
+import { Network, NetworkConfig } from '@decentology/hyperverse';
 
 const INFURA_ID = process.env.INFURA_API_KEY! || 'fb9f66bab7574d70b281f62e19c27d49';
-export const Networks = {
+export const Networks : {[key in Network] : NetworkConfig} = {
 	[Network.Mainnet]: {
 		type: Network.Mainnet,
 		name: 'mainnet',
 		networkUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
+		providerId: INFURA_ID, 
 		chainId: 1,
 	},
 	[Network.Testnet]: {
 		type: Network.Testnet,
 		name: 'rinkeby',
 		chainId: 4,
+		providerId: INFURA_ID, 
 		networkUrl: `https://rinkeby.infura.io/v3/${INFURA_ID}`,
-		explorerUrl: 'https://rinkeby.etherscan.io',
+		blockExplorer: 'https://rinkeby.etherscan.io',
 	},
 };
-const Provider: FC<any> = ({ children }) => {
+const Provider: FC<ProviderProps> = ({ children, ...props }:ProviderProps) => {
 	return (
-		<Evm.Provider initialState={{ networks: Networks }}>
+		<EvmProvider networks={Networks} { ...props}>
 			<Ethereum.Provider>{children}</Ethereum.Provider>
-		</Evm.Provider>
+		</EvmProvider>
 	);
 };
 

packages/hyperverse-evm-tribes/source/tribesLibrary.ts

@@ -15,6 +15,7 @@ export async function TribesLibraryInternal(
 	hyperverse: HyperverseConfig,
 	providerOrSigner?: ethers.providers.Provider | ethers.Signer
 ) {
+
 	const { FactoryABI, factoryAddress, ContractABI } = getEnvironment(
 		hyperverse.blockchain?.name!,
 		hyperverse.network

packages/hyperverse-evm-tribes/source/useTribes.ts

@@ -7,16 +7,15 @@ import { useHyperverse } from '@decentology/hyperverse';
 
 function TribesState(initialState: { tenantId: string } = { tenantId: '' }) {
 	const { tenantId } = initialState;
-	const { connectedProvider, readOnlyProvider } = useEvm();
+	const { readOnlyProvider, signer } = useEvm();
 	const hyperverse = useHyperverse();
 	const [tribesLibrary, setTribesLibrary] = useState<TribesLibraryType>();
 
+
 	useEffect(() => {
-		const lib = TribesLibrary(hyperverse, connectedProvider || readOnlyProvider).then(
-			setTribesLibrary
-		);
+		const lib = TribesLibrary(hyperverse, signer || readOnlyProvider).then(setTribesLibrary)
 		return lib.cancel;
-	}, [connectedProvider]);
+	}, [signer, readOnlyProvider])
 
 	const useTribeEvents = (eventName: string, callback: any) => {
 		return useEvent(

packages/hyperverse-evm/package.json

@@ -33,9 +33,12 @@
 		"@decentology/hyperverse": "workspace:*",
 		"@decentology/unstated-next": "workspace:*",
 		"@decentology/web3modal": "workspace:*",
+		"@ethersproject/providers": "^5.6.4",
+		"@rainbow-me/rainbowkit": "^0.1.0",
 		"@walletconnect/ethereum-provider": "^1.7.7",
 		"@walletconnect/web3-provider": "^1.7.1",
-		"ethers": "^5.6.2"
+		"ethers": "^5.6.5",
+		"wagmi": "^0.3.3"
 	},
 	"devDependencies": {
 		"@decentology/config": "workspace:*",

packages/hyperverse-evm/source/Provider.tsx

@@ -0,0 +1,85 @@
+import '@rainbow-me/rainbowkit/styles.css';
+import {
+	apiProvider,
+	configureChains,
+	getDefaultWallets,
+	RainbowKitProvider,
+	darkTheme,
+} from '@rainbow-me/rainbowkit';
+import { chain, ProviderProps as WagmiProviderProps, createClient, WagmiProvider } from 'wagmi';
+import { Evm } from './useEVM';
+import { useHyperverse } from '@decentology/hyperverse';
+
+export type ProviderProps = {
+	children: React.ReactNode;
+	networks?: any,
+} & WagmiProviderProps &
+	Parameters<typeof RainbowKitProvider>[0];
+
+
+export const Provider = ({ children, networks, ...props }: ProviderProps) => {
+
+	const { network: defaultNetwork } = useHyperverse();
+
+/**
+ wagmi chain Type:
+  id: number
+  name: AddEthereumChainParameter['chainName']
+  nativeCurrency?: AddEthereumChainParameter['nativeCurrency']
+  rpcUrls: { [key in RpcProviderName]?: string } & {
+    [key: string]: string
+    default: string
+  }
+  blockExplorers?: {
+    [key in BlockExplorerName]: BlockExplorer
+  } & {
+    [key: string]: BlockExplorer
+    default: BlockExplorer
+  }
+  testnet?: boolean
+ */
+
+
+	const { chains, provider } = configureChains(
+		[ {
+      id: defaultNetwork.chainId,
+      name: defaultNetwork.name,
+      rpcUrls: {
+        [defaultNetwork.rpcUrl]: defaultNetwork.rpcUrl,
+      },
+      blockExplorers: {
+        default: {url: defaultNetwork.explorerUrl},
+      },
+      testnet: defaultNetwork.type === 'testnet',
+    }],
+		[apiProvider.jsonRpc(() => ({
+			rpcUrl: defaultNetwork.networkUrl!
+		})), apiProvider.fallback()]
+	);
+
+
+	const { connectors } = getDefaultWallets({
+		appName: 'Hyperverse',
+		chains,
+	});
+
+	const wagmiClient = createClient({
+		autoConnect: true,
+		connectors,
+		provider,
+    //not sure if this helps or does anything tbh
+		jsonRpcUrl: ({ chainId }: { chainId: any }) =>
+			chains.find((x) => x.id === chainId)?.rpcUrls?.[0] ?? chain.mainnet.rpcUrls[0],
+	});
+
+
+	return (
+		<WagmiProvider client={wagmiClient} {...props}>
+			<RainbowKitProvider chains={chains} showRecentTransactions={true} theme={darkTheme({
+           accentColor: '#7b3fe4',
+      })}>
+				<Evm.Provider>{children}</Evm.Provider>
+			</RainbowKitProvider>
+		</WagmiProvider>
+	);
+};