Link to safes

src/Address.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import { link } from 'svelte-routing';
   import { ethers } from 'ethers';
-  import { explorerLink } from '@app/utils';
+  import { explorerLink, safeLink } from '@app/utils';
   import Blockies from '@app/Blockies.svelte';
   import Loading from '@app/Loading.svelte';
   import type { Config } from '@app/config';
@@ -53,12 +53,13 @@
   {#if addressType === AddressType.Org}
     <a use:link href={`/orgs/${address}`}>{addressLabel}</a>
     <span class="badge">org</span>
+  {:else if addressType === AddressType.Safe}
+    <a href={safeLink(address, config)} target="_blank">{addressLabel}</a>
+    <span class="badge">safe</span>
   {:else}
     <a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
     {#if addressType === AddressType.Contract}
       <span class="badge">contract</span>
-    {:else if addressType === AddressType.Safe}
-      <span class="badge">safe</span>
     {:else if addressType === AddressType.EOA}
       <!-- Don't show anything for EOAs -->
     {:else}

src/config.json

@@ -11,7 +11,8 @@
       "address": "0x0000000000000000000000000000000000000000"
     },
     "safe": {
-      "api": "https://safe-transaction.gnosis.io/api/v1"
+      "api": "https://safe-transaction.gnosis.io/api/v1",
+      "viewer": "https://gnosis-safe.io/app/#/safes"
     }
   },
   "ropsten": {
@@ -30,7 +31,8 @@
       "contractHash": "0xc5bd5bc3cbcb709540df530c5ad2a9d91463ebb891a789286872938d963c12e9"
     },
     "safe": {
-      "api": null
+      "api": null,
+      "viewer": null
     }
   },
   "rinkeby": {
@@ -49,7 +51,8 @@
       "contractHash": "0xc5bd5bc3cbcb709540df530c5ad2a9d91463ebb891a789286872938d963c12e9"
     },
     "safe": {
-      "api": "https://safe-transaction.rinkeby.gnosis.io/api/v1"
+      "api": "https://safe-transaction.rinkeby.gnosis.io/api/v1",
+      "viewer": "https://rinkeby.gnosis-safe.io/app/#/safes"
     }
   },
   "seed": {

src/config.ts

@@ -25,7 +25,7 @@ export class Config {
   provider: ethers.providers.JsonRpcProvider;
   signer: ethers.Signer & TypedDataSigner | null;
   seed: { url: string };
-  safe: { api: string | null };
+  safe: { api: string | null, viewer: string | null };
 
   constructor(
     network: { name: string, chainId: number },

src/utils.ts

@@ -81,6 +81,14 @@ export function explorerLink(addr: string, config: Config): string {
   return `https://etherscan.io/address/${addr}`;
 }
 
+// Get the Gnosis Safe link of an address, eg. Etherscan.
+export function safeLink(addr: string, config: Config): string {
+  if (config.safe.viewer) {
+    return `${config.safe.viewer}/${addr}`;
+  }
+  return explorerLink(addr, config);
+}
+
 // Query a subgraph.
 export async function querySubgraph(
   query: string,