frontend: Introduce flags on IEthereumProvider to determine if discon…

…nectable and being a contract wallet

Makes these features reusable when we introduce other providers

frontend/src/components/RequestDialog.vue

@@ -77,7 +77,6 @@ import { useToggleOnActivation } from '@/composables/useToggleOnActivation';
 import { useTokenAllowance } from '@/composables/useTokenAllowance';
 import { useTransferRequest } from '@/composables/useTransferRequest';
 import { switchToActivities } from '@/router/navigation';
-import { SafeProvider } from '@/services/web3-provider';
 import { useConfiguration } from '@/stores/configuration';
 import { useEthereumProvider } from '@/stores/ethereum-provider';
 import { useTransferHistory } from '@/stores/transfer-history';
@@ -196,7 +195,8 @@ function resetFormValidation() {
 }
 
 watch(signerAddress, (currSignerAddress, prevSignerAddress) => {
-  if (provider.value instanceof SafeProvider) {
+  // Contract wallets should not prefill the target address as they need to be deployed separately per chain
+  if (provider.value && provider.value.isContractWallet) {
     return;
   }
 

frontend/src/components/wallet/Disconnect.vue

@@ -14,14 +14,13 @@ import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 
 import { useWallet } from '@/composables/useWallet';
-import { SafeProvider } from '@/services/web3-provider';
 import { useEthereumProvider } from '@/stores/ethereum-provider';
 import { useSettings } from '@/stores/settings';
 
 const ethereumProvider = useEthereumProvider();
 const { provider } = storeToRefs(ethereumProvider);
 const { connectedWallet } = storeToRefs(useSettings());
 
-const showDisconnect = computed(() => !(provider.value instanceof SafeProvider));
+const showDisconnect = computed(() => !!provider.value?.disconnectable);
 const { disconnectWallet: disconnect } = useWallet(provider, connectedWallet, ref());
 </script>

frontend/src/services/web3-provider/ethereum-provider.ts

@@ -12,6 +12,8 @@ export abstract class BasicEthereumProvider extends EventEmitter implements IEth
   signer: ShallowRef<JsonRpcSigner | undefined> = shallowRef(undefined);
   signerAddress: ShallowRef<string | undefined> = shallowRef(undefined);
   chainId: Ref<number> = ref(1);
+  disconnectable = true;
+  isContractWallet = false;
 
   protected web3Provider: Web3Provider;
   protected externalProvider: Eip1193Provider;

frontend/src/services/web3-provider/safe-provider.ts

@@ -24,6 +24,9 @@ export async function createSafeProvider(): Promise<SafeProvider | undefined> {
 }
 
 export class SafeProvider extends BasicEthereumProvider {
+  disconnectable = false;
+  isContractWallet = true;
+
   constructor(safe: SafeInfo, private sdk: SafeAppsSDK) {
     super(new SafeAppProvider(safe, sdk));
   }

frontend/src/services/web3-provider/types.ts

@@ -19,6 +19,8 @@ export interface IEthereumProvider {
   getChainId(): Promise<number>;
   addToken?(token: Token): Promise<boolean>;
   getActualTransactionHash?(internalTransactionHash: string): Promise<string>;
+  disconnectable: boolean;
+  isContractWallet: boolean;
 }
 
 export interface EventEmitter {

frontend/tests/unit/components/wallet/Disconnect.spec.ts

@@ -3,14 +3,23 @@ import { mount } from '@vue/test-utils';
 
 import Disconnect from '@/components/wallet/Disconnect.vue';
 import * as useWalletComposable from '@/composables/useWallet';
+import { MockedEthereumProvider } from '~/utils/mocks/ethereum-provider';
 
 vi.mock('@/composables/useWallet');
 
 const createWrapper = () => {
   return mount(Disconnect, {
     shallow: true,
     global: {
-      plugins: [createTestingPinia()],
+      plugins: [
+        createTestingPinia({
+          initialState: {
+            ethereumProvider: {
+              provider: new MockedEthereumProvider(),
+            },
+          },
+        }),
+      ],
     },
   });
 };

frontend/tests/utils/mocks/ethereum-provider.ts

@@ -65,6 +65,8 @@ export class MockedEthereumProvider implements IEthereumProvider, EventEmitter {
   readonly signer: ShallowRef<JsonRpcSigner | undefined>;
   readonly signerAddress: ShallowRef<string | undefined>;
   readonly chainId: Ref<number>;
+  disconnectable = true;
+  isContractWallet = false;
 
   constructor(options?: { chainId?: number; signer?: JsonRpcSigner; signerAddress?: string }) {
     this.signer = shallowRef(options?.signer);