Multiple fixes for UX and logic improvements

KaffinPX · Sep 14, 2024 · c6748a6 · c6748a6
1 parent 2b8ffa8
commit c6748a6
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 44 deletions.
diff --git a/src/contexts/Account.tsx b/src/contexts/Account.tsx
@@ -19,7 +19,7 @@ export function AccountProvider ({ children }: {
   const [ balances, setBalances ] = useState<Balances>({})
 
   const refresh = useCallback(async () => {
-    if (!address || indexer.current.url === '') return console.log('rtrned', address, indexer.current.url)
+    if (!address || indexer.current.url === '') return // indexer url goes off-sync
 
     const balances = (await indexer.current.getKRC20Balances({ address })).result
 
@@ -31,7 +31,7 @@ export function AccountProvider ({ children }: {
 
   useEffect(() => {
     refresh()
-  }, [ address, refresh, tokens ])
+  }, [ refresh, address, tokens ])
 
   return (
     <AccountContext.Provider value={{ 

diff --git a/src/contexts/Indexer.tsx b/src/contexts/Indexer.tsx
@@ -39,10 +39,10 @@ export function IndexerProvider ({ children }: {
   }, [])
 
   useEffect(() => {
-    if (networkId === 'testnet-10') {
+    if (networkId === 'mainnet') {
+      indexer.current.url = 'https://api.kasplex.org'
+    } else if (networkId === 'testnet-10') {
       indexer.current.url = 'https://tn10api.kasplex.org'
-    } else {
-      indexer.current.url = ''
     }
 
     refresh()

diff --git a/src/pages/Account/Mintage.tsx b/src/pages/Account/Mintage.tsx
@@ -16,13 +16,19 @@ function Mintage () {
   const { tokens, networkId } = useIndexer()
   const { invoke } = useKaspian()
 
-  const [ ticker, setTicker ] = useState('')
+  const [ ticker, setTicker ] = useState<string>()
   const [ script, setScript ] = useState<string>()
   const [ commitAddress, setCommitAddress ] = useState<string>()
   const [ commit, setCommit ] = useState<string>()
 
   useEffect(() => {
-    if (!ticker) return setCommitAddress(undefined)
+    if (commitAddress) setCommitAddress(undefined)
+
+    if (!ticker) return
+    if (tokens[ticker].state === 'finished') {
+      toast.error(`${ticker} token minting is no longer available as it has been completed.`)
+      return
+    }
 
     const script = new ScriptBuilder()
     const inscription = new Inscription('mint', {
@@ -34,6 +40,10 @@ function Mintage () {
     setScript(script.toString())
     setCommitAddress(addressFromScriptPublicKey(script.createPayToScriptHashScript(), networkId!)!.toString())
   }, [ address, ticker ])
+
+  useEffect(() => {
+    setTicker(undefined)
+  }, [ networkId ])
 
   return (
     <Card className='w-[550px]'>
@@ -61,33 +71,40 @@ function Mintage () {
         </Select>
       </CardContent>
       <CardFooter>
-        <Button className={"gap-2"} disabled={!commitAddress || tokens[ticker].state === 'finished'} onClick={async () => {
+        <Button className={"gap-2"} disabled={!commitAddress} onClick={async () => {
           if (!commit) {
-            const commitment = JSON.parse(await invoke('transact', [[[ commitAddress!, '0.2' ]]]))
-            setCommit(commitment.id)
+            invoke('transact', [[[ commitAddress!, '0.2' ]]]).then(commitment => {
+              const transaction = JSON.parse(commitment)
+              setCommit(transaction.id)
 
-            toast.success('Committed token mint request succesfully!', {
-              action: {
-                label: 'Copy',
-                onClick: () => navigator.clipboard.writeText(commitment.id)
-              }
+              toast.success('Committed token mint request succesfully!', {
+                action: {
+                  label: 'Copy',
+                  onClick: () => navigator.clipboard.writeText(transaction.id)
+                }
+              })
+            }).catch((message) => {
+              toast.error(`Oops! Something went wrong with your wallet: ${message}`)
             })
           } else {
-            const reveal = JSON.parse(await invoke('transact', [[], "1", [{
+            invoke('transact', [[], "1", [{
               address: commitAddress!,
               outpoint: commit,
               index: 0,
               signer: address!,
               script: script
-            }]]))
-
-            setCommit(undefined)
+            }]]).then((reveal) => {
+              const transaction = JSON.parse(reveal)
+              setCommit(undefined)
 
-            toast.success('Revealed and completed token mint request succesfully!', { 
-              action: {
-                label: 'Copy',
-                onClick: () => navigator.clipboard.writeText(reveal.id)
-              }
+              toast.success('Revealed and completed token mint request succesfully!', { 
+                action: {
+                  label: 'Copy',
+                  onClick: () => navigator.clipboard.writeText(transaction.id)
+                }
+              })
+            }).catch((message) => {
+              toast.error(`Oops! Something went wrong with your wallet: ${message}`)
             })
           }
         }}>

diff --git a/src/pages/Account/Tokens/Transact.tsx b/src/pages/Account/Tokens/Transact.tsx
@@ -24,7 +24,9 @@ function Transfer ({ ticker }: {
   const [ commit, setCommit ] = useState<string>()
 
   useEffect(() => {
-    if (!address || recipient === '' || amount === '') return setCommitAddress(undefined)
+    if (commitAddress) setCommitAddress(undefined)
+
+    if (!address || recipient === '' || amount === '') return
     if (!Address.validate(recipient)) return
 
     const script = new ScriptBuilder()
@@ -74,33 +76,40 @@ function Transfer ({ ticker }: {
         <DialogFooter>
           <Button className={"gap-2"} disabled={!commitAddress} onClick={async () => {
             if (!commit) {
-              const commitment = JSON.parse(await invoke('transact', [[[ commitAddress!, '0.2' ]]]))
-              setCommit(commitment.id)
+              invoke('transact', [[[ commitAddress!, '0.2' ]]]).then(commitment => {
+                const transaction = JSON.parse(commitment)
+                setCommit(transaction.id)
 
-              toast.success('Committed token transfer request succesfully!', {
-                action: {
-                  label: 'Copy',
-                  onClick: () => navigator.clipboard.writeText(commitment.id)
-                }
+                toast.success('Committed token transfer request succesfully!', {
+                  action: {
+                    label: 'Copy',
+                    onClick: () => navigator.clipboard.writeText(transaction.id)
+                  }
+                })
+              }).catch((message) => {
+                toast.error(`Oops! Something went wrong with your wallet: ${message}`)
               })
             } else {
-              const reveal = JSON.parse(await invoke('transact', [[], "0.01", [{
+              invoke('transact', [[], "0.01", [{
                 address: commitAddress!,
                 outpoint: commit,
                 index: 0,
                 signer: address!,
                 script: script
-              }]]))
-
-              setRecipient('')
-              setAmount('')
-              setCommit(undefined)
+              }]]).then((reveal) => {
+                const transaction = JSON.parse(reveal)
+                setRecipient('')
+                setAmount('')
+                setCommit(undefined)
 
-              toast.success('Revealed and completed token transfer request succesfully!', { 
-                action: {
-                  label: 'Copy',
-                  onClick: () => navigator.clipboard.writeText(reveal.id)
-                }
+                toast.success('Revealed and completed token transfer request succesfully!', { 
+                  action: {
+                    label: 'Copy',
+                    onClick: () => navigator.clipboard.writeText(transaction.id)
+                  }
+                })
+              }).catch((message) => {
+                toast.error(`Oops! Something went wrong with your wallet: ${message}`)
               })
             }
           }}>

diff --git a/src/pages/Connection.tsx b/src/pages/Connection.tsx
@@ -19,7 +19,7 @@ function Connection () {
           <CardDescription>Connect to a Kaspian-compatible wallet to use DApp.</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className='flex flex-col gap-10'>
+          <div className='flex flex-col gap-2'>
             {providers.length === 0 ? (
               <p className="text-center text-gray-500 py-3">
                 No wallets found.