Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: merge widgets work into main #3065

Merged
merged 35 commits into from
Jan 5, 2022
Merged
Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
d520f4d
feat: design system (#2622)
zzmp Oct 15, 2021
224ee8e
refactor: mv setInterval to lib (#2621)
zzmp Oct 15, 2021
2d9b81d
chore: widget tooling (#2620)
zzmp Oct 15, 2021
c42d3ce
feat: widgets swap settings and arch (#2629)
zzmp Oct 18, 2021
565d051
chore: run tests on widgets (#2635)
zzmp Oct 18, 2021
54dca94
chore: widgets nits (#2636)
zzmp Oct 18, 2021
56b2f78
fix: color name
zzmp Oct 18, 2021
5730dd4
fix: use inputs for a11y (#2646)
zzmp Oct 19, 2021
dae6c0e
fix: widgets styles (#2654)
zzmp Oct 22, 2021
b996277
feat: widgets token select (#2685)
zzmp Nov 1, 2021
f0d5fd4
feat: widgets UI (#2742)
zzmp Nov 11, 2021
fe129da
chore: widgets nits (#2786)
zzmp Nov 16, 2021
5b6c667
feat(widgets): add new @web3-react cosmos decorator (#2799)
JFrankfurt Nov 20, 2021
f264797
feat: token color mock (#2878)
zzmp Nov 30, 2021
f41f0f8
chore: merge main into widgets (#2893)
zzmp Nov 30, 2021
3447304
chore: merge main into widgets (#2923)
JFrankfurt Dec 3, 2021
416eefe
feat: Multicall lib integration for widgets (#2946)
JFrankfurt Dec 8, 2021
6fa8e05
feat: widgets style update (#2939)
zzmp Dec 9, 2021
1528a75
feat: widgets empty state (#2951)
zzmp Dec 10, 2021
2cb1d0e
make cosmos work with new required widget props (#2956)
JFrankfurt Dec 10, 2021
64979f8
separate connector atoms (#2959)
JFrankfurt Dec 10, 2021
00f1523
fix: widgets nits sans summary/status (#2960)
zzmp Dec 10, 2021
e60840c
feat: widgets summary (#2980)
zzmp Dec 15, 2021
57144b0
fix: widgets transitions (#2983)
zzmp Dec 15, 2021
6084452
feat: widgets status (#2987)
zzmp Dec 16, 2021
b30af78
feat: widgets fonts and transitions (#2998)
zzmp Dec 17, 2021
38f4655
Refactor use active web3 react (#3002)
JFrankfurt Dec 17, 2021
263840f
fix: cosmos modularization (#3014)
zzmp Dec 22, 2021
0f70c08
chore(widgets): Merge main into widgets (#3013)
JFrankfurt Dec 23, 2021
c4199ee
feat: widgets transitions (#3007)
zzmp Dec 29, 2021
769b2c4
refactor: cosmos web3 integration (#3052)
zzmp Dec 30, 2021
67eaeb4
chore: widget placeholders (#3061)
zzmp Dec 30, 2021
70a3215
Merge branch 'widgets' into merge-widgets-into-main
JFrankfurt Jan 4, 2022
3f8919b
pr feedback
JFrankfurt Jan 5, 2022
6b383b6
undo REACT_APP_IS_WIDGET network ternary
JFrankfurt Jan 5, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -1 +1 @@
REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
45 changes: 45 additions & 0 deletions .github/workflows/depcheck.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
name: Bundle Dependency Check
on:
push:
branches:
- main
- widgets
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove widgets from both branches lists

pull_request:
branches:
- main
- widgets

jobs:
depcheck:
name: Bundle depcheck
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2

- name: Set up node
uses: actions/setup-node@v2
with:
node-version: 14
registry-url: https://registry.npmjs.org

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"

- uses: actions/cache@v2
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-

- name: Install dependencies
run: yarn install --frozen-lockfile

- name: Bundle
run: yarn bundle

- name: Depcheck
run: yarn bundle:depcheck
2 changes: 2 additions & 0 deletions .github/workflows/integration-tests.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ on:
push:
branches:
- main
- widgets
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove widgets from both branches lists

pull_request:
branches:
- main
- widgets

jobs:
integration-tests:
Expand Down
2 changes: 2 additions & 0 deletions .github/workflows/lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ on:
push:
branches:
- main
- widgets
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove widgets from both branches lists

pull_request:
branches:
- main
- widgets

jobs:
run-linters:
Expand Down
2 changes: 2 additions & 0 deletions .github/workflows/unit-tests.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ on:
push:
branches:
- main
- widgets
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove widgets from both branches lists

pull_request:
branches:
- main
- widgets

jobs:
unit-tests:
Expand Down
8 changes: 8 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,18 @@
# generated contract types
/src/types/v3
/src/abis/types
/src/lib/locales/**/*.js
/src/lib/locales/**/en-US.po
/src/lib/locales/**/pseudo.po
/src/locales/**/*.js
/src/locales/**/en-US.po
/src/locales/**/pseudo.po
/src/state/data/generated.ts

# generated assets
/src/lib/assets/svg/*.tsx
/src/lib/assets/fonts/*.css

# dependencies
/node_modules

Expand Down
6 changes: 3 additions & 3 deletions cosmos.config.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"staticPath": "public",
"watchDirs": ["src"],
"watchDirs": ["src/lib"],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change this to src, or add src to it, as we'll now be mixing the codebases while we implement hooks

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeeah, was wondering about this one

"webpack": {
"configPath": "react-scripts/config/webpack.config"
"configPath": "react-scripts/config/webpack.config",
"overridePath": "cosmos.override.js"
}
}
14 changes: 14 additions & 0 deletions cosmos.override.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
const HtmlWebpackPlugin = require('html-webpack-plugin')

// Renders the cosmos fixtures in isolation, instead of using public/index.html.
module.exports = (webpackConfig) => ({
...webpackConfig,
plugins: webpackConfig.plugins.map((plugin) =>
plugin instanceof HtmlWebpackPlugin
? new HtmlWebpackPlugin({
templateContent: '<body></body>',
})
: plugin
),
})
28 changes: 28 additions & 0 deletions depcheck.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
#!/bin/node
/**
* Checks if any dependencies have been bundled with the interface library.
* Exits with non-zero status if dependencies are included in the bundle.
*/
/* eslint-disable */

const { readFile } = require('fs')

function checkDeps(err, sourcemap) {
if (err) {
console.error(err)
process.exit(1)
}

const includesDeps = sourcemap.includes('node_modules')
if (includesDeps) {
const deps = [...sourcemap.toString().matchAll(/node_modules[\\\/]([^\\\/]*)/g)].map(([, match]) => match)
console.error(`
Sourcemap includes node_modules folder(s). External deps must be bundled under "dependencies".

To fix, run: \`yarn add ${deps.join(' ')}\`
`)
process.exit(1)
}
}

readFile('dist/interface.esm.js.map', checkDeps)
2 changes: 2 additions & 0 deletions lingui.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,13 @@ const linguiConfig = {
'vi-VN',
'zh-CN',
'zh-TW',
'pseudo',
],
orderBy: 'messageId',
rootDir: '.',
runtimeConfigModule: ['@lingui/core', 'i18n'],
sourceLocale: 'en-US',
pseudoLocale: 'pseudo',
}

export default linguiConfig
67 changes: 47 additions & 20 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,12 @@
"@graphql-codegen/typescript-operations": "^1.18.2",
"@graphql-codegen/typescript-rtk-query": "^1.1.1",
"@lingui/cli": "^3.9.0",
"@lingui/macro": "^3.9.0",
"@lingui/react": "^3.9.0",
"@metamask/jazzicon": "^2.0.0",
"@popperjs/core": "^2.4.4",
"@reach/dialog": "^0.10.3",
"@reach/portal": "^0.10.3",
"@react-hook/window-scroll": "^1.3.0",
"@reduxjs/toolkit": "^1.6.1",
"@svgr/cli": "^5.5.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/react-hooks": "^7.0.2",
Expand Down Expand Up @@ -54,13 +52,13 @@
"@types/wcag-contrast": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^4.1.0",
"@typescript-eslint/parser": "^4.1.0",
"@uniswap/default-token-list": "^2.1.0",
"@uniswap/governance": "^1.0.2",
"@uniswap/liquidity-staker": "^1.0.2",
"@uniswap/merkle-distributor": "1.0.1",
"@uniswap/redux-multicall": "^1.0.0",
"@uniswap/router-sdk": "^1.0.1",
"@uniswap/router-sdk": "^1.0.3",
"@uniswap/sdk-core": "^3.0.1",
"@uniswap/smart-order-router": "^2.5.7",
"@uniswap/smart-order-router": "^2.5.4",
"@uniswap/token-lists": "^1.0.0-beta.27",
"@uniswap/v2-core": "1.0.0",
"@uniswap/v2-periphery": "^1.1.0-beta.0",
Expand All @@ -84,6 +82,7 @@
"d3": "^7.0.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-better-styled-components": "^1.1.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^4.0.0",
Expand All @@ -99,32 +98,23 @@
"ms.macro": "^2.0.0",
"multicodec": "^3.0.1",
"multihashes": "^4.0.2",
"node-vibrant": "^3.2.1-alpha.1",
"polished": "^3.3.2",
"polyfill-object.fromentries": "^1.0.1",
"prettier": "^2.2.1",
"qs": "^6.9.4",
"react": "^17.0.1",
"react-confetti": "^6.0.0",
"react-cosmos": "^5.6.3",
"react-dom": "^17.0.1",
"react-feather": "^2.0.8",
"react-ga": "^2.5.7",
"react-is": "^17.0.2",
"react-markdown": "^4.3.1",
"react-popper": "^2.2.3",
"react-redux": "^7.2.2",
"react-router-dom": "^5.0.0",
"react-scripts": "^4.0.3",
"react-spring": "^8.0.27",
"react-use-gesture": "^6.0.14",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"rebass": "^4.0.7",
"redux-localstorage-simple": "^2.3.1",
"sass": "^1.45.1",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zzmp what's this doing here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

microbundle is not as featureful as I thought, so there is an intermediate asset generation step which (1) generates React components out of svgs and (2) runs sass over our font files: yarn assets:generate.

The sass step in particular is done so that the font files can be set to use font-display: block (I think that swap is the default), which prevents the flash of unstyled content (FOUC for google-ability) that would otherwise occur. Note that it's in devDependencies, and not dependencies.
Aside: this is done slightly differently in the interface (vs. the widget), which serves a static copy of the font for cache-ability, and is something we can change in the future if need be.

"serve": "^11.3.2",
"start-server-and-test": "^1.11.0",
"styled-components": "^5.3.0",
"typechain": "^5.0.0",
"typescript": "^4.2.3",
"ua-parser-js": "^0.7.28",
Expand All @@ -147,13 +137,18 @@
"prei18n:extract": "touch src/locales/en-US.po",
"i18n:extract": "lingui extract --locale en-US",
"i18n:compile": "yarn i18n:extract && lingui compile",
"postinstall": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
"i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
"postinstall": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile && yarn assets:generate",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=./custom-test-env.js",
"test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
"bundle": "microbundle --tsconfig tsconfig.lib.json src/lib/index.tsx --format esm,cjs",
"cosmos": "open http://localhost:5000 && cross-env FAST_REFRESH=false cosmos"
"assets:generate": "yarn assets:svg:generate && yarn assets:font:generate",
"assets:svg:generate": "svgr -d src/lib/assets/svg --ext tsx --typescript src/lib/assets/svg && rm src/lib/assets/svg/index.tsx",
"assets:font:generate": "sass src/lib/assets/fonts/index.scss src/lib/assets/fonts/index.css --no-source-map -I node_modules",
"bundle": "microbundle --define process.env.REACT_APP_IS_WIDGET=true --tsconfig tsconfig.lib.json src/lib/index.tsx --format esm,cjs",
"bundle:depcheck": "node depcheck.js",
"cosmos": "cross-env FAST_REFRESH=false REACT_APP_IS_WIDGET=true cosmos"
},
"browserslist": {
"production": [
Expand All @@ -168,5 +163,37 @@
]
},
"license": "GPL-3.0-or-later",
"dependencies": {}
"dependencies": {
"@fontsource/ibm-plex-mono": "^4.5.1",
"@fontsource/inter": "^4.5.1",
"@lingui/core": "^3.9.0",
"@lingui/macro": "^3.9.0",
"@lingui/react": "^3.9.0",
"@popperjs/core": "^2.4.4",
"@uniswap/redux-multicall": "^1.0.0",
"immer": "^9.0.6",
"jotai": "^1.3.7",
"lodash": "^4.17.21",
"make-plural": "^7.0.0",
"node-vibrant": "^3.2.1-alpha.1",
"polished": "^3.3.2",
"popper-max-size-modifier": "^0.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-feather": "^2.0.8",
"react-popper": "^2.2.3",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"rebass": "^4.0.7",
"redux": "^4.1.2",
"styled-components": "^5.3.0",
"tiny-invariant": "^1.2.0",
"wcag-contrast": "^3.0.0",
"wicg-inert": "^3.1.1",
"widgets-web3-react/core": "npm:@web3-react/core@8.0.15-alpha.0",
"widgets-web3-react/eip1193": "npm:@web3-react/eip1193@8.0.15-alpha.0",
"widgets-web3-react/metamask": "npm:@web3-react/metamask@8.0.15-alpha.0",
"widgets-web3-react/network": "npm:@web3-react/network@8.0.15-alpha.0",
"widgets-web3-react/types": "npm:@web3-react/types@8.0.15-alpha.0"
}
}
3 changes: 2 additions & 1 deletion src/components/AccountDetails/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useCallback, useContext } from 'react'
import { ExternalLink as LinkIcon } from 'react-feather'
import { useAppDispatch } from 'state/hooks'
import styled, { ThemeContext } from 'styled-components/macro'
import { Connector } from 'widgets-web3-react/types'

import { ReactComponent as Close } from '../../assets/images/x.svg'
import { injected, portis, walletlink } from '../../connectors'
Expand Down Expand Up @@ -176,7 +177,7 @@ const IconWrapper = styled.div<{ size?: number }>`
`};
`

function WrappedStatusIcon({ connector }: { connector: AbstractConnector }) {
function WrappedStatusIcon({ connector }: { connector: AbstractConnector | Connector }) {
return (
<IconWrapper size={16}>
<StatusIcon connector={connector} />
Expand Down
3 changes: 2 additions & 1 deletion src/components/Identicon/StatusIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { AbstractConnector } from '@web3-react/abstract-connector'
import { Connector } from 'widgets-web3-react/types'

import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
Expand All @@ -7,7 +8,7 @@ import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
import { fortmatic, injected, portis, walletconnect, walletlink } from '../../connectors'
import Identicon from '../Identicon'

export default function StatusIcon({ connector }: { connector: AbstractConnector }) {
export default function StatusIcon({ connector }: { connector: AbstractConnector | Connector }) {
switch (connector) {
case injected:
return <Identicon />
Expand Down
3 changes: 1 addition & 2 deletions src/components/Popover/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { Options, Placement } from '@popperjs/core'
import Portal from '@reach/portal'
import useInterval from 'lib/hooks/useInterval'
import React, { useCallback, useMemo, useState } from 'react'
import { usePopper } from 'react-popper'
import styled from 'styled-components/macro'

import useInterval from '../../hooks/useInterval'

const PopoverContainer = styled.div<{ show: boolean }>`
z-index: 9999;
visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
Expand Down
3 changes: 2 additions & 1 deletion src/components/Web3Status/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { darken } from 'polished'
import { useMemo } from 'react'
import { Activity } from 'react-feather'
import styled, { css } from 'styled-components/macro'
import { Connector } from 'widgets-web3-react/types'

import { NetworkContextName } from '../../constants/misc'
import useENSName from '../../hooks/useENSName'
Expand Down Expand Up @@ -130,7 +131,7 @@ function Sock() {
)
}

function WrappedStatusIcon({ connector }: { connector: AbstractConnector }) {
function WrappedStatusIcon({ connector }: { connector: AbstractConnector | Connector }) {
return (
<IconWrapper size={16}>
<StatusIcon connector={connector} />
Expand Down
8 changes: 5 additions & 3 deletions src/constants/locales.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,12 @@ export const SUPPORTED_LOCALES = [
'zh-CN',
'zh-TW',
] as const
export type SupportedLocale = typeof SUPPORTED_LOCALES[number]
export type SupportedLocale = typeof SUPPORTED_LOCALES[number] | 'pseudo'

// eslint-disable-next-line import/first
import * as enUS from '../locales/en-US'
export const DEFAULT_LOCALE: SupportedLocale = 'en-US'

export { messages as DEFAULT_MESSAGES } from '../locales/en-US'
export const DEFAULT_CATALOG = enUS

export const LOCALE_LABEL: { [locale in SupportedLocale]: string } = {
'af-ZA': 'Afrikaans',
Expand Down Expand Up @@ -72,4 +73,5 @@ export const LOCALE_LABEL: { [locale in SupportedLocale]: string } = {
'vi-VN': 'Tiếng Việt',
'zh-CN': '简体中文',
'zh-TW': '繁体中文',
pseudo: 'ƥƨèúδô',
}