Add subscan links to solo multisigs or proxy (#345)

packages/ui/src/hooks/useSubscanLink.tsx

@@ -1,11 +1,22 @@
+import { useCallback } from 'react'
 import { useNetwork } from '../contexts/NetworkContext'
-import { getSubscanExtrinsicLink } from '../utils'
+import { getSubscanExtrinsicLink, getSubscanAccountLink } from '../utils'
 
 export const useGetSubscanLinks = () => {
   const { selectedNetworkInfo } = useNetwork()
 
+  const _getSubscanExtrinsicLink = useCallback(
+    (txHash: string) => getSubscanExtrinsicLink(selectedNetworkInfo?.explorerNetworkName, txHash),
+    [selectedNetworkInfo]
+  )
+
+  const _getSubscanAccountLink = useCallback(
+    (account?: string, multisig = false) =>
+      getSubscanAccountLink(selectedNetworkInfo?.explorerNetworkName, account, multisig),
+    [selectedNetworkInfo]
+  )
   return {
-    getSubscanExtrinsicLink: (txHash: string) =>
-      getSubscanExtrinsicLink(selectedNetworkInfo?.explorerNetworkName, txHash)
+    getSubscanExtrinsicLink: _getSubscanExtrinsicLink,
+    getSubscanAccountLink: _getSubscanAccountLink
   }
 }

packages/ui/src/pages/Home/MultisigActionMenu.tsx

@@ -5,21 +5,34 @@ import { HiOutlinePencil } from 'react-icons/hi2'
 import { MdOutlineLockReset as LockResetIcon } from 'react-icons/md'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import { useModals } from '../../contexts/ModalsContext'
+import { HiOutlineArrowTopRightOnSquare as LaunchIcon } from 'react-icons/hi2'
+import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 
 interface MultisigActionMenuProps {
   withSendButton?: boolean
 }
 
 const MultisigActionMenu = ({ withSendButton = true }: MultisigActionMenuProps) => {
-  const { selectedHasProxy, selectedIsWatched } = useMultiProxy()
+  const { selectedHasProxy, selectedIsWatched, selectedMultiProxy } = useMultiProxy()
   const { setIsEditModalOpen, setIsChangeMultiModalOpen, setIsSendModalOpen } = useModals()
+  const { getSubscanAccountLink } = useGetSubscanLinks()
 
   const options: MenuOption[] = useMemo(() => {
     const opts = [
       {
         text: 'Edit names',
         icon: <HiOutlinePencil size={20} />,
         onClick: () => setIsEditModalOpen(true)
+      },
+      {
+        text: 'Subscan',
+        icon: <LaunchIcon size={20} />,
+        onClick: () =>
+          window.open(
+            selectedMultiProxy?.proxy
+              ? getSubscanAccountLink(selectedMultiProxy?.proxy)
+              : getSubscanAccountLink(selectedMultiProxy?.multisigs[0].address, true)
+          )
       }
     ]
 
@@ -33,7 +46,14 @@ const MultisigActionMenu = ({ withSendButton = true }: MultisigActionMenuProps)
       })
 
     return opts
-  }, [selectedHasProxy, selectedIsWatched, setIsChangeMultiModalOpen, setIsEditModalOpen])
+  }, [
+    getSubscanAccountLink,
+    selectedHasProxy,
+    selectedIsWatched,
+    selectedMultiProxy,
+    setIsChangeMultiModalOpen,
+    setIsEditModalOpen
+  ])
 
   return (
     <>

packages/ui/src/utils/getSubscanAccountLink.ts

@@ -0,0 +1,11 @@
+export const getSubscanAccountLink = (
+  network?: string,
+  account?: string,
+  multisigTab?: boolean
+) => {
+  if (!network || !account) return
+
+  return `https://${network}.subscan.io/account/${account}${
+    multisigTab ? '?tab=multisig_extrinsic' : ''
+  }`
+}

packages/ui/src/utils/index.ts

@@ -4,6 +4,7 @@ export * from './isProxyCall'
 export * from './decode'
 export * from './getDisplayAddress'
 export * from './bnUtils'
-export * from './getSubscanLink'
+export * from './getSubscanExtrinsicLink'
+export * from './getSubscanAccountLink'
 export * from './getExtrinsicName'
 export * from './getDisplayArgs'