Merge pull request #117 from autonomys/fix-default-contract-Consensus

fix(ui): 🐛 request token button permission for consenses network

Author: iamnamananand996

web-app/components/Discord.tsx

@@ -2,9 +2,11 @@ import { ConnectWalletButton } from '@/components/ConnectWalletButton'
 import { RequestTokenButton } from '@/components/RequestTokenButton'
 import { Web2SocialButton } from '@/components/Web2SocialButton'
 import { Contract } from '@/constants/contracts'
+import { NetworkOptions, useNetworkStore } from '@/store/useStore'
 import { Check, ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { RxDiscordLogo } from 'react-icons/rx'
+import { useNetwork } from 'wagmi'
 
 interface DiscordProps {
   isConnected: boolean
@@ -21,6 +23,8 @@ export const Discord: React.FC<DiscordProps> = ({
   address,
   setActiveTab
 }) => {
+  const { network } = useNetworkStore()
+  const { chain } = useNetwork()
   return (
     <div className='space-y-6'>
       <h3 className='text-xl font-semibold mb-4'>Request token via Discord</h3>
@@ -100,7 +104,14 @@ export const Discord: React.FC<DiscordProps> = ({
           <div className='flex-1 pt-1'>
             <div className='flex items-center justify-between'>
               <p className='font-medium'>Request token with the Faucet bot on Discord or here</p>
-              {contract && address && <RequestTokenButton contract={contract} address={address} />}
+
+              {chain && network === NetworkOptions.AUTO_EVM && address && isDiscordGuildMember && contract && (
+                <RequestTokenButton contract={contract} address={address} />
+              )}
+
+              {NetworkOptions.CONSENSUS === network && isDiscordGuildMember && address && (
+                <RequestTokenButton address={address} />
+              )}
             </div>
           </div>
         </li>

web-app/components/GitHub.tsx

@@ -4,8 +4,10 @@ import { ConnectWalletButton } from '@/components/ConnectWalletButton'
 import { RequestTokenButton } from '@/components/RequestTokenButton'
 import { Web2SocialButton } from '@/components/Web2SocialButton'
 import { Contract } from '@/constants/contracts'
+import { NetworkOptions, useNetworkStore } from '@/store/useStore'
 import { Check, ExternalLink, Github } from 'lucide-react'
 import Link from 'next/link'
+import { useNetwork } from 'wagmi'
 
 interface GitHubProps {
   isConnected: boolean
@@ -16,6 +18,8 @@ interface GitHubProps {
 }
 
 export const GitHub: React.FC<GitHubProps> = ({ isConnected, isGitHubFollower, contract, address, setActiveTab }) => {
+  const { network } = useNetworkStore()
+  const { chain } = useNetwork()
   return (
     <div className='space-y-6'>
       <h3 className='text-xl font-semibold mb-4'>Request token via GitHub</h3>
@@ -96,7 +100,14 @@ export const GitHub: React.FC<GitHubProps> = ({ isConnected, isGitHubFollower, c
           <div className='flex-1 pt-1'>
             <div className='flex items-center justify-between'>
               <p className='font-medium'>Request token</p>
-              {contract && address && <RequestTokenButton contract={contract} address={address} />}
+
+              {chain && network === NetworkOptions.AUTO_EVM && isGitHubFollower && address && contract && (
+                <RequestTokenButton contract={contract} address={address} />
+              )}
+
+              {NetworkOptions.CONSENSUS === network && isGitHubFollower && address && (
+                <RequestTokenButton address={address} />
+              )}
             </div>
           </div>
         </li>

web-app/components/RequestTokenButton.tsx

@@ -12,7 +12,7 @@ import { toast } from 'react-toastify'
 import { useContractReads, useNetwork } from 'wagmi'
 
 interface RequestTokenButtonProps {
-  contract: Contract
+  contract?: Contract
   address: string
 }
 

web-app/components/TokenCard.tsx

@@ -14,14 +14,19 @@ import { useAccount, useNetwork } from 'wagmi'
 
 export const TokenCard: React.FC = () => {
   const [clientSide, setClientSide] = useState(false)
-  const [activeTab, setActiveTab] = useState('github')
   const { isConnected, address } = useAccount()
   const { chain } = useNetwork()
   const { data: session } = useSession()
-  const { network } = useNetworkStore()
+  const { network, activeTab, setActiveTab } = useNetworkStore()
   const { actingAccount } = useWallet()
 
-  const contract = useMemo(() => chain && contracts.find((c) => c.name === 'Faucet' && c.chainId === chain.id), [chain])
+  const contract = useMemo(() => {
+    if (chain && network === NetworkOptions.AUTO_EVM) {
+      return contracts.find((c) => c.name === 'Faucet' && c.chainId === chain.id)
+    }
+    return undefined
+  }, [chain, network])
+
   const isGitHubFollower = useMemo(
     () => !!(session && session.user != null && session.user.isGitHubFollower),
     [session]

web-app/store/useStore.ts

@@ -14,6 +14,8 @@ interface NetworkState {
   networks: Network[]
   version: number
   setNetworks: (networks: Network[]) => void
+  activeTab: string
+  setActiveTab: (tab: string) => void
 }
 
 export const useNetworkStore = create<NetworkState>()(
@@ -23,7 +25,9 @@ export const useNetworkStore = create<NetworkState>()(
       setNetwork: (network: NetworkOptions) => set({ network }),
       networks: networks,
       version: 1,
-      setNetworks: (networks: Network[]) => set({ networks })
+      setNetworks: (networks: Network[]) => set({ networks }),
+      activeTab: 'github',
+      setActiveTab: (tab: string) => set({ activeTab: tab })
     }),
     {
       name: 'network-storage',