Block wallet integration

src/cow-react/modules/wallet/api/types.ts

@@ -12,6 +12,7 @@ export enum ConnectionType {
   ALPHA = 'ALPHA',
   TALLY = 'TALLY',
   TRUST = 'TRUST',
+  BLOCK = 'BLOCK',
 }
 
 export const BACKFILLABLE_WALLETS = [ConnectionType.INJECTED, ConnectionType.WALLET_CONNECT]

src/cow-react/modules/wallet/api/utils/connection.ts

@@ -24,6 +24,8 @@ export function getConnectionName(connectionType: ConnectionType, isMetaMask?: b
       return 'Tally'
     case ConnectionType.TRUST:
       return 'Trust'
+    case ConnectionType.BLOCK:
+      return 'Block'
   }
 }
 

src/cow-react/modules/wallet/web3-react/connection/block.tsx

@@ -0,0 +1,45 @@
+import { Connector } from '@web3-react/types'
+import { ConnectionType } from '@cow/modules/wallet'
+import { getConnectionName } from '@cow/modules/wallet/api/utils/connection'
+import { useIsActiveWallet } from 'hooks/useIsActiveWallet'
+
+import { ConnectWalletOption } from '@cow/modules/wallet/api/pure/ConnectWalletOption'
+import { initializeConnector } from '@web3-react/core'
+import { InjectedWallet } from '@cow/modules/wallet/web3-react/connectors/Injected'
+import { Web3ReactConnection } from '../types'
+
+import { default as BlockImage } from '@cow/modules/wallet/api/assets/block.png'
+
+const WALLET_LINK = 'https://blockwallet.io/'
+const BASE_PROPS = {
+  color: '#4196FC',
+  icon: BlockImage,
+  id: 'block',
+}
+
+const [blockWallet, blockWalletHooks] = initializeConnector<Connector>(
+  (actions) =>
+    new InjectedWallet({
+      actions,
+      walletUrl: WALLET_LINK,
+      searchKeywords: ['isBlock', 'isBlockWallet'],
+    })
+)
+export const blockWalletConnection: Web3ReactConnection = {
+  connector: blockWallet,
+  hooks: blockWalletHooks,
+  type: ConnectionType.BLOCK,
+}
+
+export function BlockWalletOption({ tryActivation }: { tryActivation: (connector: Connector) => void }) {
+  const isActive = useIsActiveWallet(blockWalletConnection)
+
+  return (
+    <ConnectWalletOption
+      {...BASE_PROPS}
+      isActive={isActive}
+      onClick={() => tryActivation(blockWalletConnection.connector)}
+      header={getConnectionName(ConnectionType.BLOCK)}
+    />
+  )
+}

src/cow-react/modules/wallet/web3-react/connection/index.tsx

@@ -22,6 +22,7 @@ import { AmbireOption } from './ambire'
 import { AlphaOption } from './alpha'
 import { tallyWalletConnection, TallyWalletOption } from './tally'
 import { trustWalletConnection, TrustWalletOption } from './trust'
+import { blockWalletConnection, BlockWalletOption } from './block'
 
 const CONNECTIONS: Web3ReactConnection[] = [
   gnosisSafeConnection,
@@ -32,6 +33,7 @@ const CONNECTIONS: Web3ReactConnection[] = [
   networkConnection,
   tallyWalletConnection,
   trustWalletConnection,
+  blockWalletConnection,
 ]
 
 export function isChainAllowed(connector: Connector, chainId: number) {
@@ -45,6 +47,7 @@ export function isChainAllowed(connector: Connector, chainId: number) {
     case gnosisSafeConnection.connector:
     case tallyWalletConnection.connector:
     case trustWalletConnection.connector:
+    case blockWalletConnection.connector:
       return ALL_SUPPORTED_CHAIN_IDS.includes(chainId)
     default:
       return false
@@ -82,6 +85,8 @@ export function getWeb3ReactConnection(c: Connector | ConnectionType): Web3React
         return tallyWalletConnection
       case ConnectionType.TRUST:
         return trustWalletConnection
+      case ConnectionType.BLOCK:
+        return blockWalletConnection
     }
   }
 }
@@ -128,6 +133,7 @@ export function ConnectWalletOptions({ tryActivation }: { tryActivation: TryActi
   const tallyOption =
     (!isInjectedMobileBrowser && isChrome && !isChromeMobile && <TallyWalletOption tryActivation={tryActivation} />) ??
     null
+  const blockOption = (!isInjectedMobileBrowser && <BlockWalletOption tryActivation={tryActivation} />) ?? null
 
   return (
     <>
@@ -139,6 +145,7 @@ export function ConnectWalletOptions({ tryActivation }: { tryActivation: TryActi
       {alphaOption}
       {tallyOption}
       {trustOption}
+      {blockOption}
     </>
   )
 }

src/state/connection/reducer.ts

@@ -18,6 +18,7 @@ export const initialState: ConnectionState = {
     [ConnectionType.ALPHA]: undefined,
     [ConnectionType.TALLY]: undefined,
     [ConnectionType.TRUST]: undefined,
+    [ConnectionType.BLOCK]: undefined,
   },
 }