Merge branch 'main' into useSignal

app/css/interceptor.css

@@ -743,7 +743,7 @@ svg.spinner > circle {
 	padding: 10px;
 	margin: auto;
 	margin-bottom: 10px;
-	max-width: min(400px, 100%);
+	max-width: fit-content;
 	color: var(--text-color)
 }
 

app/ts/components/App.tsx

@@ -332,7 +332,7 @@ export function App() {
 								<a class = 'navbar-item' style = 'cursor: unset'>
 									<img src = '../img/LOGOA.svg' alt = 'Logo' width = '32'/>
 									<p style = 'color: #FFFFFF; padding-left: 5px;'>THE INTERCEPTOR
-										<span style = 'color: var(--unimportant-text-color); font-size: 0.8em; padding-left: 5px;' > { ` alpha ${ version } - ${ gitCommitSha.slice(0, 8) }`  } </span>
+										<span style = 'color: var(--unimportant-text-color); font-size: 0.8em; padding-left: 5px;' > { `${ version } - ${ gitCommitSha.slice(0, 8) }`  } </span>
 									</p>
 								</a>
 								<a class = 'navbar-item' style = 'margin-left: auto; margin-right: 0;'>

app/ts/components/simulationExplaining/Transactions.tsx

@@ -63,7 +63,7 @@ export type TransactionImportanceBlockParams = {
 
 // showcases the most important things the transaction does
 export function TransactionImportanceBlock(param: TransactionImportanceBlockParams) {
-	if (param.simTx.statusCode === 'failure') return <ErrorComponent text = { `The transaction fails with an error '${ param.simTx.error.decodedErrorMessage }'` } />
+	if (param.simTx.statusCode === 'failure') return <ErrorComponent text = { `The transaction fails with an error '${ param.simTx.error.decodedErrorMessage }'` } containerStyle = { { margin: '0px' } } />
 	const transactionIdentification = identifyTransaction(param.simTx)
 	switch (transactionIdentification.type) {
 		case 'SimpleTokenTransfer': return <SimpleTokenTransferVisualisation simTx = { transactionIdentification.identifiedTransaction } renameAddressCallBack = { param.renameAddressCallBack }/>

app/ts/components/subcomponents/Error.tsx

@@ -18,7 +18,7 @@ export function ErrorComponent(props: ErrorProps) {
 	}
 	return (
 		<div style = { containerStyle }>
-			<div className = 'notification' style = { `background-color: ${ boxColor }; display: flex; align-items: center; padding: 2px; padding: 10px`}>
+			<div className = 'notification' style = { `background-color: ${ boxColor }; display: flex; align-items: center; padding: 10px`}>
 				<span class = 'icon' style = 'margin-left: 0px; margin-right: 5px; width: 2em; height: 2em; min-width: 2em; min-height: 2em;'>
 					<img src = '../img/warning-sign-black.svg' style = 'width: 2em; height: 2em;'/>
 				</span>

readme.md

@@ -1,25 +1,38 @@
 <img src = "app/img/LOGOA_400x400.png" alt = "The cutest dino" style = "width: 200px;"/>
 
-# The Interceptor Alpha
-Introducing The Interceptor - the ultimate browser extension for Ethereum! Say goodbye to the confusion of making transactions with our intuitive tool that provides clear explanations of the type of Ethereum transactions you're making. The Interceptor can be used alongside with Metamask or as a standalone transaction simulation tool. With Metamask integration, you can easily send transactions by forwarding them for signing. But what really sets The Interceptor apart is its Simulation Mode. This powerful feature allows you to simulate multiple transactions and see exactly what they will do - even using DApps for free! Our extension is currently available on Chrome, Firefox, and Brave, and supports Ethereum Mainnet, Sepolia and Görli networks. Experience seamless Ethereum transactions like never before with The Interceptor.
+# The Interceptor
+The Interceptor is a powerful tool for simulating transactions on EVM-based chains, including Ethereum Mainnet, Base, Optimism, Gnosis, and more. It offers clear, intuitive explanations for the transactions you initiate. The Interceptor can seamlessly complement your browser wallet, like MetaMask, or function as a standalone transaction simulation tool.
+
+With MetaMask integration, you can forward transactions for signing and send them effortlessly. What truly sets The Interceptor apart, however, is its Simulation Mode. This feature lets you simulate multiple transactions sequentially, providing a detailed preview of their outcomes-even enabling you to interact with DApps at no cost!
 
 Install for [Firefox](https://github.com/DarkFlorist/TheInterceptor/releases/download/v0.0.25/TheInterceptor-firefox-v0.0.25.xpi) or [Chrome](https://www.dark.florist/google-chrome-install)
 
-# Features
+<img src = "transaction_outcome.png" alt = "The cutest dino" style = "width: 400px;"/>
+
+## Features
 - Simulation mode, send transactions for free and see what they do
 - Impersonation mode, be Vitalik or anyone else and see the dApps with the eyes of anyone
 - Rich mode, browse dapps with extra 200 000 ETH in your pocket!
 - Simulate your transactions before sending them to be sure on what they do
 - Avoid common token pitfalls such as sending tokens to tokens contract address
+- Rescue assets with The Interceptor and [Bouquet](https://bouquet.dark.florist/)
 - And more!
 
-You can also watch [Interceptor introduction video](https://www.youtube.com/watch?v=Noxik2pZWV4) from Youtube to see The Interceptor in action!
-
-<img src = "transaction_outcome.png" alt = "The cutest dino" style = "width: 400px;"/>
 <img src = "popup_view.png" alt = "The cutest dino" style = "width: 300px;"/>
 
-# Privacy
-Your privacy is our priority. The Interceptor is purpose-built to minimize data leakage: no external queries are made without direct user input. By default, it connects to Ethereum RPC nodes operated by [Dark Florists (us)](https://www.dark.florist/), though you can configure it to connect to other RPC nodes if desired. Please note, The Interceptor requires RPC nodes that support the mandatory `eth_simulateV1` endpoint, currently available in Geth and Nethermind.
+## Privacy
+Your privacy is our priority. The Interceptor is purpose-built to minimize data leakage: no external queries are made without direct user input except for calls to the configured Ethereum RPC server. By default, it connects to Ethereum RPC nodes operated by [Dark Florist (us)](https://www.dark.florist/) which doesn't log requests, though you can configure it to connect to other RPC nodes if desired. Please note, The Interceptor requires RPC nodes that support the `eth_simulateV1` endpoint, currently available in Geth and Nethermind.
+
+## Using The Interceptor on various EVM chains
+We are not currently operating nodes for Base, Optimism etc, in order to use these chains you will need to add your own RPC.
+
+## Good tools to use with The Interceptor
+The Interceptor requires websites to be decentralized and only use users' own wallet to access the network. The following tools are tested to work on The Interceptor:
+- [Lunaria](https://lunaria.dark.florist/)
+- [NFT sender](https://nftsender.dark.florist/)
+- [Horswap 2](https://2.horswap.eth.limo/)
+- [Bouquet](https://bouquet.dark.florist/)
+- [PetalLock](https://petal-lock.dark.florist/)
 
 # Development
 
@@ -37,4 +50,4 @@ Then depending on your browser:
 - Brave: Browse to `brave://extensions/` and click `Load unpacked` and point to `\app\manifest.json`.
 
 # Contact Us!
-You can reach us [Dark Florsts](https://www.dark.florist/) via [Discord](https://discord.gg/b66SwRZAbu) and twitter [@DarkFlorist](https://twitter.com/DarkFlorist)!
+You can reach us [Dark Florist](https://www.dark.florist/) via [Discord](https://discord.gg/b66SwRZAbu) and twitter [@DarkFlorist](https://twitter.com/DarkFlorist)!