From b3b7856fcd0f3fc8fd84c6e36b7d5a1ecaffe9f4 Mon Sep 17 00:00:00 2001 From: Valentino Conti <41705567+valentinoConti@users.noreply.github.com> Date: Tue, 2 Apr 2024 10:02:18 -0300 Subject: [PATCH] Add Rabby wallet support (#70) --- frontend/components/wallets/EVM.tsx | 31 +++++++++++++++++++++++++---- frontend/images/rabby.svg | 8 ++++++++ 2 files changed, 35 insertions(+), 4 deletions(-) create mode 100644 frontend/images/rabby.svg diff --git a/frontend/components/wallets/EVM.tsx b/frontend/components/wallets/EVM.tsx index cb87c30b..7eff5962 100644 --- a/frontend/components/wallets/EVM.tsx +++ b/frontend/components/wallets/EVM.tsx @@ -25,6 +25,7 @@ import walletConnect from '@images/wallet-connect.svg' import metamask from '@images/metamask.svg' import okx from '@images/okx.svg' import phantom from '@images/phantom.svg' +import rabby from '@images/rabby.svg' import { getInjectiveAddress } from '../../utils/getInjectiveAddress' @@ -96,6 +97,7 @@ export function EVMWalletButton({ const { address, status, isConnected, connector } = useAccount() const { connect, connectors } = useConnect() const hasOKXWallet = typeof (window as any).okxwallet !== 'undefined' + const hasRabbyWallet = typeof (window as any).rabby !== 'undefined' // If the wallet is connected or loadable, try to connect to it. // Else, redirect user to the wallet webpage. @@ -107,13 +109,16 @@ export function EVMWalletButton({ } else if (connector.name === 'OKX Wallet') { if (hasOKXWallet) connect({ connector }) else window.open('https://www.okx.com/web3', '_blank') + } else if (connector.name === 'Rabby') { + if (hasRabbyWallet) connect({ connector }) + else window.open('https://rabby.io/', '_blank') } else { // Wallet flow is handled pretty well by coinbase and walletconnect. // We don't need to customize connect({ connector }) } }, - [connect, hasOKXWallet] + [connect, hasOKXWallet, hasRabbyWallet] ) const wallets = () => { @@ -140,6 +145,21 @@ export function EVMWalletButton({ onSelect: () => onSelect(OKX_connector), }) + const Rabby_connector = new InjectedConnector({ + chains, + options: { + name: 'Rabby', + getProvider: () => + typeof window !== undefined ? (window as any).rabby : undefined, + }, + }) + + allConnectors.push({ + name: 'Rabby', + icon: getIcon(Rabby_connector.id as WalletIds, 'Rabby'), + onSelect: () => onSelect(Rabby_connector), + }) + return allConnectors } @@ -155,18 +175,21 @@ export function EVMWalletButton({ onClick={disconnect} address={isInjective ? getInjectiveAddress(address) : address} disabled={disableOnConnect} - icon={getIcon(connector?.id as WalletIds)} + icon={getIcon(connector?.id as WalletIds, connector?.name)} /> )} /> ) } -function getIcon(id: WalletIds | undefined) { +function getIcon(id: WalletIds | undefined, name?: any) { if (id === undefined) return undefined if (id === 'metaMask') return metamask if (id === 'coinbaseWallet') return coinbase if (id === 'phantom') return phantom - if (id === 'injected') return okx + if (id === 'injected') { + if (name === 'Rabby') return rabby + return okx + } return walletConnect } diff --git a/frontend/images/rabby.svg b/frontend/images/rabby.svg new file mode 100644 index 00000000..d5785813 --- /dev/null +++ b/frontend/images/rabby.svg @@ -0,0 +1,8 @@ + + + + + + + +