feat: inline wallet icons as data URLs (#210)

.changeset/breezy-hats-talk.md

@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Inline built-in wallet icons as data URLs

packages/rainbowkit/build.js

@@ -25,6 +25,10 @@ esbuild
       './src/components/index.ts',
     ],
     format: 'esm',
+    loader: {
+      '.png': 'dataurl',
+      '.svg': 'dataurl',
+    },
     outdir: 'dist',
     platform: 'browser',
     plugins: [

packages/rainbowkit/src/global.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg' {
+  const dataUrl: string;
+  export default dataUrl;
+}
+
+declare module '*.png' {
+  const dataUrl: string;
+  export default dataUrl;
+}

packages/rainbowkit/src/wallets/getDefaultWallets.ts

@@ -1,10 +1,13 @@
 import { Chain as WagmiChain } from 'wagmi';
 import { WalletList } from './Wallet';
-import { coinbase, CoinbaseOptions } from './walletConnectors/coinbase';
-import { injected } from './walletConnectors/injected';
-import { metaMask } from './walletConnectors/metaMask';
-import { rainbow } from './walletConnectors/rainbow';
-import { walletConnect } from './walletConnectors/walletConnect';
+import {
+  coinbase,
+  CoinbaseOptions,
+} from './walletConnectors/coinbase/coinbase';
+import { injected } from './walletConnectors/injected/injected';
+import { metaMask } from './walletConnectors/metaMask/metaMask';
+import { rainbow } from './walletConnectors/rainbow/rainbow';
+import { walletConnect } from './walletConnectors/walletConnect/walletConnect';
 
 export const getDefaultWallets = ({
   appName,

packages/rainbowkit/src/wallets/walletConnectors/argent.ts → packages/rainbowkit/src/wallets/walletConnectors/argent/argent.ts

@@ -1,8 +1,9 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
-import { Chain } from '../../components/RainbowKitProvider/RainbowKitChainContext';
-import { isAndroid } from '../../utils/isMobile';
-import { Wallet } from '../Wallet';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { isAndroid } from '../../../utils/isMobile';
+import { Wallet } from '../../Wallet';
+import iconDataUrl from './argent.svg';
 
 export interface ArgentOptions {
   chains: Chain[];
@@ -12,8 +13,7 @@ export interface ArgentOptions {
 export const argent = ({ chains, infuraId }: ArgentOptions): Wallet => ({
   id: 'argent',
   name: 'Argent',
-  iconUrl:
-    'https://cloudflare-ipfs.com/ipfs/QmdLEksT8MYzJN8JT1FUBBnpwYWWWw1bG9FBM97ttJTfay',
+  iconUrl: iconDataUrl,
   downloadUrls: {
     android:
       'https://play.google.com/store/apps/details?id=im.argent.contractwalletclient',

packages/rainbowkit/src/wallets/walletConnectors/coinbase.ts → packages/rainbowkit/src/wallets/walletConnectors/coinbase/coinbase.ts

@@ -1,8 +1,9 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import { WalletLinkConnector } from 'wagmi/connectors/walletLink';
-import { Chain } from '../../components/RainbowKitProvider/RainbowKitChainContext';
-import { Wallet } from '../Wallet';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { Wallet } from '../../Wallet';
+import iconDataUrl from './coinbase.svg';
 
 export interface CoinbaseOptions {
   chains: Chain[];
@@ -18,8 +19,7 @@ export const coinbase = ({
   id: 'coinbase',
   name: 'Coinbase Wallet',
   shortName: 'Coinbase',
-  iconUrl:
-    'https://cloudflare-ipfs.com/ipfs/QmUavPiuPLYip1yG5tURat6gEqPf2ApffQ3BXE2RBr7Y4j',
+  iconUrl: iconDataUrl,
   downloadUrls: {
     browserExtension:
       'https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad',

packages/rainbowkit/src/wallets/walletConnectors/index.ts

@@ -1,10 +1,10 @@
-import { argent } from './argent';
-import { coinbase } from './coinbase';
-import { injected } from './injected';
-import { metaMask } from './metaMask';
-import { rainbow } from './rainbow';
-import { trust } from './trust';
-import { walletConnect } from './walletConnect';
+import { argent } from './argent/argent';
+import { coinbase } from './coinbase/coinbase';
+import { injected } from './injected/injected';
+import { metaMask } from './metaMask/metaMask';
+import { rainbow } from './rainbow/rainbow';
+import { trust } from './trust/trust';
+import { walletConnect } from './walletConnect/walletConnect';
 
 export const wallet = {
   argent,

packages/rainbowkit/src/wallets/walletConnectors/injected/injected.ts

@@ -0,0 +1,26 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { Wallet } from '../../Wallet';
+import iconDataUrl from './injected.png';
+
+export interface InjectedOptions {
+  chains: Chain[];
+  infuraId?: string;
+  shimDisconnect?: boolean;
+}
+
+export const injected = ({
+  chains,
+  shimDisconnect,
+}: InjectedOptions): Wallet => ({
+  id: 'injected',
+  name: 'Injected Wallet',
+  iconUrl: iconDataUrl,
+  createConnector: () => ({
+    connector: new InjectedConnector({
+      chains,
+      options: { shimDisconnect },
+    }),
+  }),
+});

packages/rainbowkit/src/wallets/walletConnectors/metaMask.ts → packages/rainbowkit/src/wallets/walletConnectors/metaMask/metaMask.ts

@@ -1,9 +1,10 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { InjectedConnector } from 'wagmi/connectors/injected';
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
-import { Chain } from '../../components/RainbowKitProvider/RainbowKitChainContext';
-import { isAndroid, isMobile } from '../../utils/isMobile';
-import { Wallet } from '../Wallet';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { isAndroid, isMobile } from '../../../utils/isMobile';
+import { Wallet } from '../../Wallet';
+import iconDataUrl from './metaMask.svg';
 
 export interface MetaMaskOptions {
   chains: Chain[];
@@ -26,8 +27,7 @@ export const metaMask = ({
   return {
     id: 'metaMask',
     name: 'MetaMask',
-    iconUrl:
-      'https://cloudflare-ipfs.com/ipfs/QmYAF8F4tdhpHo6M6AH2vZVrWN1zQCVYeXDrrVUVUYowfz',
+    iconUrl: iconDataUrl,
     installed: !shouldUseWalletConnect ? isMetaMaskInjected : undefined,
     downloadUrls: {
       browserExtension:

packages/rainbowkit/src/wallets/walletConnectors/rainbow.ts → packages/rainbowkit/src/wallets/walletConnectors/rainbow/rainbow.ts

@@ -1,8 +1,9 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
-import { Chain } from '../../components/RainbowKitProvider/RainbowKitChainContext';
-import { isAndroid } from '../../utils/isMobile';
-import { Wallet } from '../Wallet';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { isAndroid } from '../../../utils/isMobile';
+import { Wallet } from '../../Wallet';
+import iconDataUrl from './rainbow.svg';
 
 export interface RainbowOptions {
   chains: Chain[];
@@ -12,8 +13,7 @@ export interface RainbowOptions {
 export const rainbow = ({ chains, infuraId }: RainbowOptions): Wallet => ({
   id: 'rainbow',
   name: 'Rainbow',
-  iconUrl:
-    'https://cloudflare-ipfs.com/ipfs/QmWopCuWwX5y9QN67rnukFwp7UJkwdTJcURfEkBhjCxg3a',
+  iconUrl: iconDataUrl,
   downloadUrls: {
     android: 'https://play.google.com/store/apps/details?id=me.rainbow',
     ios: 'https://apps.apple.com/us/app/rainbow-ethereum-wallet/id1457119021',

packages/rainbowkit/src/wallets/walletConnectors/trust.ts → packages/rainbowkit/src/wallets/walletConnectors/trust/trust.ts

@@ -1,8 +1,9 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
-import { Chain } from '../../components/RainbowKitProvider/RainbowKitChainContext';
-import { isAndroid } from '../../utils/isMobile';
-import { Wallet } from '../Wallet';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { isAndroid } from '../../../utils/isMobile';
+import { Wallet } from '../../Wallet';
+import iconDataUrl from './trust.svg';
 
 export interface TrustOptions {
   chains: Chain[];
@@ -12,8 +13,7 @@ export interface TrustOptions {
 export const trust = ({ chains, infuraId }: TrustOptions): Wallet => ({
   id: 'trust',
   name: 'Trust Wallet',
-  iconUrl:
-    'https://cloudflare-ipfs.com/ipfs/Qmc8gX8mQNih2jcjqiJnbfEC8aXMUWZszTqJKcn98UHJFg',
+  iconUrl: iconDataUrl,
   downloadUrls: {
     android:
       'https://play.google.com/store/apps/details?id=com.wallet.crypto.trustapp',