From 08e7b0728b20c885415efea75a7923a1e68115ca Mon Sep 17 00:00:00 2001 From: dave Date: Thu, 14 Apr 2022 20:49:04 +0100 Subject: [PATCH] Uni-merge WIDGET FIX (#402) * fix cosmos config * mod state * mod widget * fix export --- cosmos.config.json | 2 +- src/cosmos.decorator.tsx | 13 +- .../lib/components/Widget/WidgetMod.tsx | 145 ++++++++++++++++++ src/custom/lib/components/Widget/index.tsx | 4 + src/custom/lib/state/index.ts | 12 ++ src/lib/components/Error/ErrorBoundary.tsx | 1 + src/lib/components/Input.tsx | 1 + 7 files changed, 172 insertions(+), 6 deletions(-) create mode 100644 src/custom/lib/components/Widget/WidgetMod.tsx create mode 100644 src/custom/lib/components/Widget/index.tsx create mode 100644 src/custom/lib/state/index.ts diff --git a/cosmos.config.json b/cosmos.config.json index c78607b74d..e7b5b4d8de 100644 --- a/cosmos.config.json +++ b/cosmos.config.json @@ -1,7 +1,7 @@ { "watchDirs": ["src"], "webpack": { - "configPath": "react-scripts/config/webpack.config", + "configPath": "./cosmos.webpack.config", "overridePath": "cosmos.override.js" }, "port": 5001 diff --git a/src/cosmos.decorator.tsx b/src/cosmos.decorator.tsx index 9a30947e92..b8ccc98bcb 100644 --- a/src/cosmos.decorator.tsx +++ b/src/cosmos.decorator.tsx @@ -5,6 +5,7 @@ import store from 'state' import styled from 'styled-components/macro' import ThemeProvider from 'theme' import { LanguageProvider } from 'i18n' +import { HashRouter } from 'react-router-dom' const Wrapper = styled(Flex)` padding: 1.2rem 0.6rem; @@ -17,11 +18,13 @@ const Wrapper = styled(Flex)` const Fixture = ({ children }: { children: ReactNode }) => { return ( - - - {children} - - + + + + {children} + + + ) } diff --git a/src/custom/lib/components/Widget/WidgetMod.tsx b/src/custom/lib/components/Widget/WidgetMod.tsx new file mode 100644 index 0000000000..d37df84576 --- /dev/null +++ b/src/custom/lib/components/Widget/WidgetMod.tsx @@ -0,0 +1,145 @@ +import { Provider as EthersProvider } from '@ethersproject/abstract-provider' +import { Provider as Eip1193Provider } from '@web3-react/types' +import { DEFAULT_LOCALE, SupportedLocale } from 'constants/locales' +import { Provider as AtomProvider } from 'jotai' +import { TransactionsUpdater } from 'lib/hooks/transactions' +import { BlockUpdater } from 'lib/hooks/useBlockNumber' +import useEip1193Provider from 'lib/hooks/useEip1193Provider' +import { UNMOUNTING } from 'lib/hooks/useUnmount' +import { Provider as I18nProvider } from 'lib/i18n' +import { MulticallUpdater } from 'lib/state/multicall' +import store from 'lib/state' +import styled, { keyframes, Theme, ThemeProvider } from 'lib/theme' +import { PropsWithChildren, StrictMode, useState } from 'react' +import { Provider as ReduxProvider } from 'react-redux' + +import { Modal, Provider as DialogProvider } from '@src/lib/components/Dialog' +import ErrorBoundary, { ErrorHandler } from '@src/lib/components/Error/ErrorBoundary' +import WidgetPropValidator from '@src/lib/components/Error/WidgetsPropsValidator' +import Web3Provider from '@src/lib/components/Web3Provider' + +const WidgetWrapper = styled.div<{ width?: number | string }>` + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background-color: ${({ theme }) => theme.container}; + border-radius: ${({ theme }) => theme.borderRadius}em; + color: ${({ theme }) => theme.primary}; + display: flex; + flex-direction: column; + font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on; + font-size: 16px; + font-smooth: always; + font-variant: none; + height: 348px; + min-width: 300px; + padding: 0.25em; + position: relative; + user-select: none; + width: ${({ width }) => width && (isNaN(Number(width)) ? width : `${width}px`)}; + + * { + box-sizing: border-box; + font-family: ${({ theme }) => theme.fontFamily}; + + @supports (font-variation-settings: normal) { + font-family: ${({ theme }) => theme.fontFamilyVariable}; + } + } +` + +const slideDown = keyframes` + to { + transform: translateY(calc(100% - 0.25em)); + } +` +const slideUp = keyframes` + from { + transform: translateY(calc(100% - 0.25em)); + } +` + +const DialogWrapper = styled.div` + height: calc(100% - 0.5em); + left: 0; + margin: 0.25em; + overflow: hidden; + position: absolute; + top: 0; + width: calc(100% - 0.5em); + + @supports (overflow: clip) { + overflow: clip; + } + + ${Modal} { + animation: ${slideUp} 0.25s ease-in-out; + } + + ${Modal}.${UNMOUNTING} { + animation: ${slideDown} 0.25s ease-in-out; + } +` + +function Updaters() { + return ( + <> + + + + + ) +} + +export type WidgetProps = { + theme?: Theme + locale?: SupportedLocale + provider?: Eip1193Provider | EthersProvider + jsonRpcEndpoint?: string + width?: string | number + dialog?: HTMLElement | null + className?: string + onError?: ErrorHandler +} + +export default function Widget(props: PropsWithChildren) { + const { + children, + theme, + locale = DEFAULT_LOCALE, + provider, + jsonRpcEndpoint, + width = 360, + dialog: userDialog, + className, + onError, + } = props + const eip1193 = useEip1193Provider(provider) + const [dialog, setDialog] = useState(null) + return ( + + + + + + + + + {/* MOD: pass custom store to redux provider */} + + + + + {children} + + + + + + + + + + + ) +} diff --git a/src/custom/lib/components/Widget/index.tsx b/src/custom/lib/components/Widget/index.tsx new file mode 100644 index 0000000000..6a037f2881 --- /dev/null +++ b/src/custom/lib/components/Widget/index.tsx @@ -0,0 +1,4 @@ +import Widget from './WidgetMod' + +export * from './WidgetMod' +export default Widget diff --git a/src/custom/lib/state/index.ts b/src/custom/lib/state/index.ts new file mode 100644 index 0000000000..e11466fa5f --- /dev/null +++ b/src/custom/lib/state/index.ts @@ -0,0 +1,12 @@ +import { createMulticall } from '@uniswap/redux-multicall' +import { combineReducers, createStore } from 'redux' + +import price from 'state/price/reducer' // MOD + +export * from '@src/lib/state/multicall' + +const multicall = createMulticall() +const reducer = combineReducers({ [multicall.reducerPath]: multicall.reducer, price }) +export const store = createStore(reducer) + +export default store diff --git a/src/lib/components/Error/ErrorBoundary.tsx b/src/lib/components/Error/ErrorBoundary.tsx index 01fee12f0b..3dc16af395 100644 --- a/src/lib/components/Error/ErrorBoundary.tsx +++ b/src/lib/components/Error/ErrorBoundary.tsx @@ -8,6 +8,7 @@ export type ErrorHandler = (error: Error, info: ErrorInfo) => void interface ErrorBoundaryProps { onError?: ErrorHandler + children?: any } type ErrorBoundaryState = { diff --git a/src/lib/components/Input.tsx b/src/lib/components/Input.tsx index 1134f1fc26..65c23b757b 100644 --- a/src/lib/components/Input.tsx +++ b/src/lib/components/Input.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/prop-types */ import JSBI from 'jsbi' import styled, { css } from 'lib/theme' import { forwardRef, HTMLProps, useCallback, useEffect, useState } from 'react'