Execute selection fix (#17)

* Remove modal

* Show execute preview without wallet connection

components/Modal.tsx

@@ -1,83 +0,0 @@
-import clsx from 'clsx'
-import { Button } from 'components/Button'
-import { Radio } from 'components/Radio'
-import { useEffect, useState } from 'react'
-import { FaAsterisk } from 'react-icons/fa'
-
-export const Modal = () => {
-  const [showModal, setShowModal] = useState(true)
-  const [isButtonDisabled, setIsButtonDisabled] = useState(true)
-
-  useEffect(() => {
-    if (localStorage.getItem('disclaimer')) {
-      setShowModal(false)
-    }
-  }, [])
-
-  const accept = () => {
-    localStorage.setItem('disclaimer', '1')
-    setShowModal(false)
-  }
-
-  return (
-    <>
-      {showModal ? (
-        <div className="flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 justify-center items-center outline-none focus:outline-none">
-          <div className="relative my-6 mx-auto w-auto max-w-3xl">
-            <div className="flex relative flex-col w-full bg-stone-800 rounded-lg border-[1px] border-slate-200/20 border-solid outline-none focus:outline-none shadow-lg">
-              <div className="flex justify-between items-start p-5 rounded-t border-b border-slate-200/20 border-solid">
-                <h3 className="text-3xl font-bold">Before using StargazeTools...</h3>
-              </div>
-              <div className="relative flex-auto p-6 my-4">
-              <p className="text-lg leading-relaxed">
-                    StargazeTools is a decentralized application where
-                    individuals or communities can use smart contract dashboards
-                    to create, mint and manage NFT collections.
-                    <br />
-                    StargazeTools is made up of free, public, and open-source
-                    software that is built on top of Stargaze Network.
-                    StargazeTools only provides tools for any of the mentioned
-                    functionalities above and inside the dApp. Anyone can create
-                    or mint NFT collections on StargazeTools and StargazeTools
-                    does not audit or have any discretion on how these
-                    collections are put to use. <br />
-                    <br />
-                    AS DESCRIBED IN THE DISCLAIMER, STARGAZETOOLS IS PROVIDED
-                    “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY
-                    KIND. No developer or entity involved in creating the
-                    StargazeTools will be liable for any claims or damages
-                    whatsoever associated with your use, inability to use, or
-                    your interaction with other users of the StargazeTools,
-                    including any direct, indirect, incidental, special,
-                    exemplary, punitive or consequential damages, or loss of
-                    profits, tokens, or anything else.
-                  </p>
-              </div>
-              <div className="flex justify-center">
-                <Radio
-                  checked={!isButtonDisabled}
-                  htmlFor="disclaimer-accept"
-                  id="disclaimer-accept"
-                  onChange={() => setIsButtonDisabled(false)}
-                  subtitle=""
-                  title="I've read the disclaimer and I understand the risks of using StargazeTools."
-                />
-              </div>
-              <div className="flex justify-end items-center p-6 mt-1">
-                <Button
-                  className={clsx({ 'opacity-50': isButtonDisabled })}
-                  disabled={isButtonDisabled}
-                  isWide
-                  leftIcon={<FaAsterisk />}
-                  onClick={accept}
-                >
-                  Enter StargazeTools
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : null}
-    </>
-  )
-}

contracts/minter/useContract.ts

@@ -49,10 +49,8 @@ export function useMinterContract(): UseMinterContractProps {
   }, [])
 
   useEffect(() => {
-    if (wallet.initialized) {
-      const MinterBaseContract = initContract(wallet.getClient(), wallet.address)
-      setMinter(MinterBaseContract)
-    }
+    const MinterBaseContract = initContract(wallet.getClient(), wallet.address)
+    setMinter(MinterBaseContract)
   }, [wallet])
 
   const updateContractAddress = (contractAddress: string) => {

contracts/sg721/useContract.ts

@@ -34,10 +34,8 @@ export function useSG721Contract(): UseSG721ContractProps {
   }, [])
 
   useEffect(() => {
-    if (wallet.initialized) {
-      const contract = initContract(wallet.getClient(), wallet.address)
-      setSG721(contract)
-    }
+    const contract = initContract(wallet.getClient(), wallet.address)
+    setSG721(contract)
   }, [wallet])
 
   const updateContractAddress = (contractAddress: string) => {

contracts/whitelist/useContract.ts

@@ -30,11 +30,8 @@ export function useWhiteListContract(): UseWhiteListContractProps {
   }, [])
 
   useEffect(() => {
-    if (wallet.initialized) {
-      const client = wallet.getClient()
-      const whiteListContract = initContract(client, wallet.address)
-      setWhiteList(whiteListContract)
-    }
+    const whiteListContract = initContract(wallet.getClient(), wallet.address)
+    setWhiteList(whiteListContract)
   }, [wallet])
 
   const updateContractAddress = (contractAddress: string) => {

pages/_app.tsx

@@ -4,7 +4,6 @@ import '../styles/globals.css'
 import '../styles/datepicker.css'
 
 import { Layout } from 'components/Layout'
-import { Modal } from 'components/Modal'
 import { queryClient } from 'config/react-query'
 import { ContractsProvider } from 'contexts/contracts'
 import { WalletProvider } from 'contexts/wallet'
@@ -21,7 +20,6 @@ export default function App({ Component, pageProps }: AppProps) {
           <Toaster position="top-right" />
           <Layout metadata={getComponentMetadata(Component)}>
             <Component {...pageProps} />
-            <Modal />
           </Layout>
         </ContractsProvider>
       </WalletProvider>

pages/contracts/minter/execute.tsx

@@ -103,6 +103,9 @@ const MinterExecutePage: NextPage = () => {
       if (!type) {
         throw new Error('Please select message type!')
       }
+      if (!wallet.initialized) {
+        throw new Error('Please connect your wallet.')
+      }
       const txHash = await toast.promise(dispatchExecute(payload), {
         error: `${type.charAt(0).toUpperCase() + type.slice(1)} execute failed!`,
         loading: 'Executing message...',

pages/contracts/sg721/execute.tsx

@@ -11,6 +11,7 @@ import { LinkTabs } from 'components/LinkTabs'
 import { sg721LinkTabs } from 'components/LinkTabs.data'
 import { TransactionHash } from 'components/TransactionHash'
 import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
 import type { DispatchExecuteArgs } from 'contracts/sg721/messages/execute'
 import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/sg721/messages/execute'
 import type { NextPage } from 'next'
@@ -26,6 +27,8 @@ import { links } from 'utils/links'
 
 const Sg721ExecutePage: NextPage = () => {
   const { sg721: contract } = useContracts()
+  const wallet = useWallet()
+
   const [lastTx, setLastTx] = useState('')
 
   const comboboxState = useExecuteComboboxState()
@@ -99,6 +102,9 @@ const Sg721ExecutePage: NextPage = () => {
       if (!type) {
         throw new Error('Please select message type!')
       }
+      if (!wallet.initialized) {
+        throw new Error('Please connect your wallet.')
+      }
       const txHash = await toast.promise(dispatchExecute(payload), {
         error: `${type.charAt(0).toUpperCase() + type.slice(1)} execute failed!`,
         loading: 'Executing message...',

pages/contracts/whitelist/execute.tsx

@@ -14,6 +14,7 @@ import { LinkTabs } from 'components/LinkTabs'
 import { whitelistLinkTabs } from 'components/LinkTabs.data'
 import { TransactionHash } from 'components/TransactionHash'
 import { useContracts } from 'contexts/contracts'
+import { useWallet } from 'contexts/wallet'
 import type { DispatchExecuteArgs } from 'contracts/whitelist/messages/execute'
 import { dispatchExecute, isEitherType, previewExecutePayload } from 'contracts/whitelist/messages/execute'
 import type { NextPage } from 'next'
@@ -29,6 +30,8 @@ import { links } from 'utils/links'
 
 const WhitelistExecutePage: NextPage = () => {
   const { whitelist: contract } = useContracts()
+  const wallet = useWallet()
+
   const [lastTx, setLastTx] = useState('')
 
   const comboboxState = useExecuteComboboxState()
@@ -73,6 +76,9 @@ const WhitelistExecutePage: NextPage = () => {
       if (!type) {
         throw new Error('Please select message type!')
       }
+      if (!wallet.initialized) {
+        throw new Error('Please connect your wallet.')
+      }
       const txHash = await toast.promise(dispatchExecute(payload), {
         error: `${type.charAt(0).toUpperCase() + type.slice(1)} execute failed!`,
         loading: 'Executing message...',