feat(pilot-app,extension): submit route (#707)

* add new submit route

* chore: prep companion app for removal of provider type

* chore: make sure zodiac provider is not injected into submit page

* chore: add label to sign button

* chore: simplify clear transactions action

* chore: do not open port to submit page

* chore: make it possible to disable link buttons

* chore: create new message type for submit success

* wip: new submit button functionality

* chore: add helper to encode and json stringify our data safely

* make sure data is correctly encoded

* handle submit button

* make onConnect and onDisconnect handlers optional

* migrate missing functionality to submit page

* remove obsolete code from extension

* fix type issue

* small style update

* communicate when submit was successful

* add zod schema for transaction data

* do not show provider type in edit route

* revert switch to jsdom

deployables/app/app/components/wallet/Account.tsx

@@ -1,23 +1,18 @@
 import { validateAddress } from '@/utils'
-import { ProviderType } from '@zodiac/schema'
 import { AddressInput, CopyToClipboard } from '@zodiac/ui'
 
 type AccountProps = {
-  type: ProviderType
   children: string
 }
 
-export const Account = ({ children, type }: AccountProps) => {
+export const Account = ({ children }: AccountProps) => {
   const address = validateAddress(children)
 
   return (
     <AddressInput
       readOnly
       value={address ?? undefined}
       label="Pilot Account"
-      description={
-        type === ProviderType.InjectedWallet ? 'MetaMask' : 'Wallet Connect'
-      }
       action={
         <CopyToClipboard iconOnly size="small" data={address}>
           Copy address

deployables/app/app/components/wallet/Connect.tsx

@@ -3,8 +3,13 @@ import { Labeled, PrimaryButton } from '@zodiac/ui'
 import { ConnectKitButton, ConnectKitProvider } from 'connectkit'
 import { useAccountEffect } from 'wagmi'
 
+export type OnConnectArgs = {
+  providerType: ProviderType
+  account: HexAddress
+}
+
 type ConnectProps = {
-  onConnect(args: { providerType: ProviderType; account: HexAddress }): void
+  onConnect?: (args: OnConnectArgs) => void
 }
 
 export const Connect = ({ onConnect }: ConnectProps) => {
@@ -14,6 +19,10 @@ export const Connect = ({ onConnect }: ConnectProps) => {
         return
       }
 
+      if (onConnect == null) {
+        return
+      }
+
       onConnect({
         account: address,
         providerType:

deployables/app/app/components/wallet/ConnectWallet.tsx

@@ -1,29 +1,21 @@
-import { invariant } from '@epic-web/invariant'
 import { ZERO_ADDRESS } from '@zodiac/chains'
 import { type HexAddress, ProviderType } from '@zodiac/schema'
 import { useEffect, useRef } from 'react'
 import { type ChainId } from 'ser-kit'
 import { useAccount, useAccountEffect, useDisconnect } from 'wagmi'
-import { Connect } from './Connect'
+import { Connect, type OnConnectArgs } from './Connect'
 import { Wallet } from './Wallet'
 
-type OnConnectArgs = {
-  providerType: ProviderType
-  account: HexAddress
-}
-
 export type ConnectWalletProps = {
   pilotAddress: HexAddress | null
   chainId?: ChainId
-  providerType?: ProviderType
-  onConnect(args: OnConnectArgs): void
-  onDisconnect(): void
+  onConnect?: (args: OnConnectArgs) => void
+  onDisconnect?: () => void
 }
 
 export const ConnectWallet = ({
   pilotAddress,
   chainId,
-  providerType,
   onConnect,
   onDisconnect,
 }: ConnectWalletProps) => {
@@ -42,7 +34,9 @@ export const ConnectWallet = ({
       if (disconnectRequestRef.current) {
         disconnectRequestRef.current = false
 
-        onDisconnect()
+        if (onDisconnect) {
+          onDisconnect()
+        }
       }
     },
   })
@@ -51,19 +45,15 @@ export const ConnectWallet = ({
     return <Connect onConnect={onConnect} />
   }
 
-  invariant(
-    providerType != null,
-    'providerType is required when pilotAddress is set',
-  )
-
   return (
     <Wallet
       chainId={chainId}
-      providerType={providerType}
       pilotAddress={pilotAddress}
       onDisconnect={() => {
         if (address == null) {
-          onDisconnect()
+          if (onDisconnect) {
+            onDisconnect()
+          }
         } else {
           disconnectRequestRef.current = true
 
@@ -82,7 +72,7 @@ export const ConnectWallet = ({
 
 type UseAutoReconnectOptions = {
   currentConnectedAddress: HexAddress | null
-  onConnect: (args: OnConnectArgs) => void
+  onConnect?: (args: OnConnectArgs) => void
 }
 
 const useAutoReconnect = ({
@@ -109,6 +99,10 @@ const useAutoReconnect = ({
       return
     }
 
+    if (onConnectRef.current == null) {
+      return
+    }
+
     onConnectRef.current({
       account: address,
       providerType:

deployables/app/app/components/wallet/Wallet.tsx

@@ -1,4 +1,3 @@
-import { ProviderType } from '@zodiac/schema'
 import type { ChainId } from 'ser-kit'
 import { useAccount, useReconnect, useSwitchChain } from 'wagmi'
 import { Account } from './Account'
@@ -9,15 +8,13 @@ import { WrongAccount } from './WrongAccount'
 
 type WalletProps = {
   pilotAddress: string
-  providerType: ProviderType
   chainId?: ChainId
 
   onDisconnect: () => void
 }
 
 export const Wallet = ({
   pilotAddress,
-  providerType,
   chainId,
   onDisconnect,
 }: WalletProps) => {
@@ -28,7 +25,7 @@ export const Wallet = ({
   const isServer = typeof document === 'undefined'
 
   if (isServer) {
-    return <Account type={providerType}>{pilotAddress}</Account>
+    return <Account>{pilotAddress}</Account>
   }
 
   // Wallet disconnected
@@ -38,7 +35,7 @@ export const Wallet = ({
         onDisconnect={onDisconnect}
         onReconnect={() => reconnect()}
       >
-        <Account type={providerType}>{pilotAddress}</Account>
+        <Account>{pilotAddress}</Account>
       </WalletDisconnected>
     )
   }
@@ -53,7 +50,7 @@ export const Wallet = ({
         }}
         onDisconnect={onDisconnect}
       >
-        <Account type={providerType}>{pilotAddress}</Account>
+        <Account>{pilotAddress}</Account>
       </SwitchChain>
     )
   }
@@ -68,15 +65,15 @@ export const Wallet = ({
   ) {
     return (
       <WrongAccount onDisconnect={onDisconnect}>
-        <Account type={providerType}>{pilotAddress}</Account>
+        <Account>{pilotAddress}</Account>
       </WrongAccount>
     )
   }
 
   if (address != null) {
     return (
       <Connected onDisconnect={onDisconnect}>
-        <Account type={providerType}>{pilotAddress}</Account>
+        <Account>{pilotAddress}</Account>
       </Connected>
     )
   }

deployables/app/app/root.tsx

@@ -1,3 +1,4 @@
+import { ToastContainer } from '@zodiac/ui'
 import {
   isRouteErrorResponse,
   Links,
@@ -19,6 +20,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
       </head>
       <body className="flex h-full flex-col text-base text-zinc-900 dark:text-white">
         {children}
+        <ToastContainer />
         <ScrollRestoration />
         <Scripts />
       </body>

deployables/app/app/routes.ts

@@ -18,6 +18,11 @@ export default [
   route('/new-route', 'routes/new-route.ts'),
   route('/edit-route/:data', 'routes/edit-route.$data.tsx'),
 
+  route(
+    '/submit/:route/:transactions',
+    'routes/submit.$route.$transactions.tsx',
+  ),
+
   ...prefix('/:address/:chainId', [
     route('modules', 'routes/$address.$chainId/modules.ts'),
     route('available-safes', 'routes/$address.$chainId/available-safes.ts'),

deployables/app/app/routes/DebugRouteData.tsx

@@ -1,4 +1,5 @@
 import { parseRouteData } from '@/utils'
+import { jsonStringify } from '@zodiac/schema'
 import hljs from 'highlight.js'
 import json from 'highlight.js/lib/languages/json'
 import 'highlight.js/styles/atom-one-dark.min.css'
@@ -13,12 +14,9 @@ export const DebugRouteData = () => {
     return null
   }
 
-  const json = hljs.highlight(
-    JSON.stringify(parseRouteData(data), undefined, 2),
-    {
-      language: 'json',
-    },
-  )
+  const json = hljs.highlight(jsonStringify(parseRouteData(data), 2), {
+    language: 'json',
+  })
 
   return (
     <div className="flex flex-1 flex-col gap-4 overflow-hidden bg-slate-800 pt-4 text-sm">