Skip to content

Commit

Permalink
Fix: mobile CSS and wallet connection
Browse files Browse the repository at this point in the history
  • Loading branch information
katspaugh committed Jul 25, 2022
1 parent cd987d4 commit cf3a93e
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 92 deletions.
31 changes: 10 additions & 21 deletions components/common/ChainSwitcher/index.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,31 @@
import { ReactElement } from 'react'
import { Button } from '@mui/material'
import { ReactElement, useCallback } from 'react'
import { Box, Button } from '@mui/material'
import { hexValue } from 'ethers/lib/utils'
import { useCurrentChain } from '@/hooks/useChains'
import useOnboard from '@/hooks/wallets/useOnboard'
import useIsWrongChain from '@/hooks/useIsWrongChain'

const Circle = ({ color }: { color: string }): ReactElement => {
return (
<span
style={{
width: '0.8em',
height: '0.8em',
borderRadius: '50%',
backgroundColor: color,
marginLeft: 1,
}}
/>
)
}
import css from './styles.module.css'

const ChainSwitcher = (): ReactElement | null => {
const chain = useCurrentChain()
const onboard = useOnboard()
const isWrongChain = useIsWrongChain()

const handleChainSwitch = () => {
const handleChainSwitch = useCallback(() => {
if (!chain) return
const chainId = hexValue(parseInt(chain.chainId))
onboard?.setChain({ chainId })
}
}, [onboard, chain])

return isWrongChain ? (
if (!isWrongChain) return null

return (
<Button onClick={handleChainSwitch} variant="outlined" size="small">
Switch to&nbsp;
<Circle color={chain?.theme?.backgroundColor || ''} />
<Box className={css.circle} bgcolor={chain?.theme?.backgroundColor || ''} />
&nbsp;{chain?.chainName}
</Button>
) : null
)
}

export default ChainSwitcher
6 changes: 6 additions & 0 deletions components/common/ChainSwitcher/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.circle {
width: 0.8em;
height: 0.8em;
border-radius: 50%;
margin-left: 0.2em;
}
4 changes: 4 additions & 0 deletions components/common/Header/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,8 @@
.menuButton {
display: block;
}

.container button {
font-size: 8px;
}
}
21 changes: 8 additions & 13 deletions hooks/wallets/wallets.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import type { RecommendedInjectedWallets, WalletInit } from '@web3-onboard/commo
import coinbaseModule from '@web3-onboard/coinbase'
import fortmaticModule from '@web3-onboard/fortmatic'
import injectedWalletModule from '@web3-onboard/injected-wallets'
import keepkeyModule from '@web3-onboard/keepkey'
// TODO: Breaking tests. Jest cannot find module when trying to mock
// import keystoneModule from '@web3-onboard/keystone'
import keystoneModule from '@web3-onboard/keystone/dist/index'
import ledgerModule from '@web3-onboard/ledger'
import portisModule from '@web3-onboard/portis'
import torusModule from '@web3-onboard/torus'
Expand All @@ -18,8 +16,7 @@ const enum WALLET_KEYS {
COINBASE = 'COINBASE',
FORTMATIC = 'FORTMATIC',
INJECTED = 'INJECTED',
KEEPKEY = 'KEEPKEY',
// KEYSTONE = 'KEYSTONE',
KEYSTONE = 'KEYSTONE',
LEDGER = 'LEDGER',
// MAGIC = 'MAGIC', // Magic requires an API key
PORTIS = 'PORTIS',
Expand All @@ -32,8 +29,7 @@ const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
[WALLET_KEYS.COINBASE]: 'coinbase',
[WALLET_KEYS.FORTMATIC]: 'fortmatic',
[WALLET_KEYS.INJECTED]: 'detectedwallet',
[WALLET_KEYS.KEEPKEY]: undefined,
// [WALLET_KEYS.KEYSTONE]: 'keystone',
[WALLET_KEYS.KEYSTONE]: 'keystone',
[WALLET_KEYS.LEDGER]: 'ledger',
[WALLET_KEYS.PORTIS]: 'portis',
[WALLET_KEYS.TORUS]: 'torus',
Expand All @@ -42,17 +38,16 @@ const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
}

const WALLET_MODULES: { [key in WALLET_KEYS]: () => WalletInit } = {
[WALLET_KEYS.INJECTED]: injectedWalletModule,
[WALLET_KEYS.WALLETCONNECT]: () => walletConnect({ bridge: WC_BRIDGE }),
[WALLET_KEYS.LEDGER]: ledgerModule,
[WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }),
[WALLET_KEYS.KEYSTONE]: keystoneModule,
[WALLET_KEYS.COINBASE]: () =>
coinbaseModule({ darkMode: !!window?.matchMedia('(prefers-color-scheme: dark)')?.matches }),
[WALLET_KEYS.FORTMATIC]: () => fortmaticModule({ apiKey: FORTMATIC_KEY }),
[WALLET_KEYS.INJECTED]: injectedWalletModule,
[WALLET_KEYS.KEEPKEY]: keepkeyModule,
// [WALLET_KEYS.KEYSTONE]: keystoneModule,
[WALLET_KEYS.LEDGER]: ledgerModule,
[WALLET_KEYS.PORTIS]: () => portisModule({ apiKey: PORTIS_KEY }),
[WALLET_KEYS.TORUS]: torusModule,
[WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }),
[WALLET_KEYS.WALLETCONNECT]: () => walletConnect({ bridge: WC_BRIDGE }),
}

export const getAllWallets = (): WalletInit[] => {
Expand Down
2 changes: 1 addition & 1 deletion jest.setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ jest.mock('@web3-onboard/coinbase', () => jest.fn())
jest.mock('@web3-onboard/fortmatic', () => jest.fn())
jest.mock('@web3-onboard/injected-wallets', () => jest.fn())
jest.mock('@web3-onboard/keepkey', () => jest.fn())
// jest.mock('@web3-onboard/keystone', () => jest.fn())
jest.mock('@web3-onboard/keystone/dist/index', () => jest.fn())
jest.mock('@web3-onboard/ledger', () => jest.fn())
jest.mock('@web3-onboard/portis', () => jest.fn())
jest.mock('@web3-onboard/torus', () => jest.fn())
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"@web3-onboard/fortmatic": "^2.0.3",
"@web3-onboard/injected-wallets": "^2.0.9",
"@web3-onboard/keepkey": "^2.1.1",
"@web3-onboard/keystone": "^2.1.2",
"@web3-onboard/keystone": "^2.1.7",
"@web3-onboard/ledger": "^2.1.1",
"@web3-onboard/portis": "^2.0.1",
"@web3-onboard/torus": "^2.0.2",
Expand Down Expand Up @@ -74,15 +74,14 @@
"@testing-library/user-event": "^14.2.1",
"@typechain/ethers-v5": "^8.0.0",
"@types/jest": "^28.1.4",
"cross-env": "^7.0.3",
"typechain": "^8.0.0",
"@types/js-cookie": "^3.0.2",
"@types/lodash": "^4.14.182",
"@types/node": "17.0.44",
"@types/react": "18.0.14",
"@types/react-dom": "18.0.5",
"@types/react-qr-reader": "^2.1.4",
"@types/semver": "^7.3.10",
"cross-env": "^7.0.3",
"eslint": "8.17.0",
"eslint-config-next": "12.2.0",
"eslint-config-prettier": "^8.5.0",
Expand All @@ -93,6 +92,7 @@
"pre-commit": "^1.2.2",
"prettier": "^2.7.0",
"ts-node": "^10.8.2",
"typechain": "^8.0.0",
"typescript": "4.7.3"
}
}
97 changes: 48 additions & 49 deletions styles/vars.css
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
/* This file is generated from the MUI theme colors. Do not edit directly. */

:root {
--color-text-primary: #162D45;
--color-text-secondary: #162D45;
--color-text-primary: #162d45;
--color-text-secondary: #162d45;
--color-text-disabled: #ddd;
--color-primary-dark: #0E7361;
--color-primary-main: #008C73;
--color-primary-light: #92C9BE;
--color-primary-background: #EFFAF8;
--color-secondary-main: #162D45;
--color-primary-dark: #0e7361;
--color-primary-main: #008c73;
--color-primary-light: #92c9be;
--color-primary-background: #effaf8;
--color-secondary-main: #162d45;
--color-secondary-light: #566976;
--color-border-main: #ACBAC3;
--color-border-light: #EEEFF0;
--color-border-background: #F6F7F8;
--color-error-dark: #C31717;
--color-error-main: #F02525;
--color-error-light: #FFCED6;
--color-error-background: #FFF3F5;
--color-border-main: #acbac3;
--color-border-light: #eeeff0;
--color-border-background: #f6f7f8;
--color-error-dark: #c31717;
--color-error-main: #f02525;
--color-error-light: #ffced6;
--color-error-background: #fff3f5;
--color-success-dark: #027128;
--color-success-main: #008C30;
--color-success-light: #99CDAB;
--color-info-dark: #247CB7;
--color-info-main: #3BA2E7;
--color-info-light: #A6D0EC;
--color-info-background: #EBF7FF;
--color-warning-dark: #E8663D;
--color-warning-main: #FFC05F;
--color-warning-light: #FBE5C5;
--color-warning-background: #FFF4E3;
--color-background-default: #F6F7F8;
--color-background-main: #F6F7F8;
--color-background-paper: #FFFFFF;
--color-background-light: #F1FAF8;
--color-success-main: #008c30;
--color-success-light: #99cdab;
--color-info-dark: #247cb7;
--color-info-main: #3ba2e7;
--color-info-light: #a6d0ec;
--color-info-background: #ebf7ff;
--color-warning-dark: #e8663d;
--color-warning-main: #ffc05f;
--color-warning-light: #fbe5c5;
--color-warning-background: #fff4e3;
--color-background-default: #f6f7f8;
--color-background-main: #f6f7f8;
--color-background-paper: #ffffff;
--color-background-light: #f1faf8;
--color-logo-main: #000000;
--space-1: 8px;
--space-2: 16px;
Expand All @@ -47,39 +47,38 @@
--space-12: 96px;
}

[data-theme="dark"] {
[data-theme='dark'] {
--color-text-primary: #ffffff;
--color-text-secondary: #ffffff;
--color-text-disabled: #ffffff4d;
--color-action-active: #ffffff;
--color-primary-dark: #0E7361;
--color-primary-main: #008C73;
--color-primary-light: #92C9BE;
--color-primary-dark: #0e7361;
--color-primary-main: #008c73;
--color-primary-light: #92c9be;
--color-primary-background: #3e454d;
--color-secondary-main: #EFFAF8;
--color-secondary-main: #effaf8;
--color-secondary-light: #566976;
--color-border-main: #ACBAC3;
--color-border-main: #acbac3;
--color-border-light: #25282b;
--color-border-background: #444444;
--color-error-dark: #C31717;
--color-error-main: #F02525;
--color-error-light: #FFCED6;
--color-error-background: #FFF3F5;
--color-error-dark: #c31717;
--color-error-main: #f02525;
--color-error-light: #ffced6;
--color-error-background: #fff3f5;
--color-success-dark: #027128;
--color-success-main: #008C30;
--color-success-light: #99CDAB;
--color-info-dark: #247CB7;
--color-info-main: #3BA2E7;
--color-info-light: #A6D0EC;
--color-info-background: #EBF7FF;
--color-warning-dark: #E8663D;
--color-warning-main: #FFC05F;
--color-warning-light: #FBE5C5;
--color-warning-background: #FFF4E3;
--color-success-main: #008c30;
--color-success-light: #99cdab;
--color-info-dark: #247cb7;
--color-info-main: #3ba2e7;
--color-info-light: #a6d0ec;
--color-info-background: #ebf7ff;
--color-warning-dark: #e8663d;
--color-warning-main: #ffc05f;
--color-warning-light: #fbe5c5;
--color-warning-background: #fff4e3;
--color-background-default: #121212;
--color-background-main: #121212;
--color-background-paper: #1e1f20;
--color-background-light: #282e2d;
--color-logo-main: #ffffff;
}

20 changes: 15 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4261,6 +4261,16 @@
joi "^17.4.2"
rxjs "^7.5.2"

"@web3-onboard/common@^2.1.6":
version "2.1.6"
resolved "https://registry.yarnpkg.com/@web3-onboard/common/-/common-2.1.6.tgz#29d1a4a98b24a08af9f532707225ad5054e25bb6"
integrity sha512-mVmkjM/hI4WeK9uN3TNt/+v7VtNdwoTbAzTRAOcUSIZRK3q1ptWQoL0tydRimXCTfvv+EUJxlJHb+1+QqmRVPw==
dependencies:
"@ethereumjs/common" "2.6.2"
ethers "5.5.4"
joi "^17.4.2"
rxjs "^7.5.2"

"@web3-onboard/core@^2.2.12":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.4.0.tgz#37948f6826cc147a16e7ae56bae01c03a4675994"
Expand Down Expand Up @@ -4308,15 +4318,15 @@
"@web3-onboard/common" "^2.1.5"
ethereumjs-util "^7.1.3"

"@web3-onboard/keystone@^2.1.2":
version "2.1.6"
resolved "https://registry.yarnpkg.com/@web3-onboard/keystone/-/keystone-2.1.6.tgz#4f8b635133994b5eb9719f35b069384fe4835729"
integrity sha512-Ivfdei6yxzRnaYh4ycsOKY3xYz1MTD2CxuboMZZ8iAjKIYMBUDGBYOXKy+1q7nU750D+dKMVnGVQonEcBQj++Q==
"@web3-onboard/keystone@^2.1.7":
version "2.1.7"
resolved "https://registry.yarnpkg.com/@web3-onboard/keystone/-/keystone-2.1.7.tgz#a4f6d31c199f72667ad7bf77dba530a82fefe4b5"
integrity sha512-7DLNivF0CbkQRuVdhtLkz3AYnQnuLDAf48M66QUCNeciYAEf4j/rPIR2CCCWJ84gLLEVRQTJohG+Afat0kX3dg==
dependencies:
"@ethereumjs/tx" "^3.4.0"
"@ethersproject/providers" "^5.5.0"
"@keystonehq/eth-keyring" "^0.14.0-alpha.10.3"
"@web3-onboard/common" "^2.1.5"
"@web3-onboard/common" "^2.1.6"

"@web3-onboard/ledger@^2.1.1":
version "2.1.5"
Expand Down

0 comments on commit cf3a93e

Please sign in to comment.