Uni-merge WIDGET FIX (#402)

* fix cosmos config

* mod state

* mod widget

* fix export

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

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 (
     <Provider store={store}>
-      <ThemeProvider>
-        <LanguageProvider>
-          <Wrapper>{children}</Wrapper>
-        </LanguageProvider>
-      </ThemeProvider>
+      <HashRouter>
+        <ThemeProvider>
+          <LanguageProvider>
+            <Wrapper>{children}</Wrapper>
+          </LanguageProvider>
+        </ThemeProvider>
+      </HashRouter>
     </Provider>
   )
 }

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 (
+    <>
+      <BlockUpdater />
+      <MulticallUpdater />
+      <TransactionsUpdater />
+    </>
+  )
+}
+
+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<WidgetProps>) {
+  const {
+    children,
+    theme,
+    locale = DEFAULT_LOCALE,
+    provider,
+    jsonRpcEndpoint,
+    width = 360,
+    dialog: userDialog,
+    className,
+    onError,
+  } = props
+  const eip1193 = useEip1193Provider(provider)
+  const [dialog, setDialog] = useState<HTMLDivElement | null>(null)
+  return (
+    <StrictMode>
+      <I18nProvider locale={locale}>
+        <ThemeProvider theme={theme}>
+          <WidgetWrapper width={width} className={className}>
+            <DialogWrapper ref={setDialog} />
+            <DialogProvider value={userDialog || dialog}>
+              <ErrorBoundary onError={onError}>
+                <WidgetPropValidator {...props}>
+                  {/* MOD: pass custom store to redux provider */}
+                  <ReduxProvider store={store}>
+                    <AtomProvider>
+                      <Web3Provider provider={eip1193} jsonRpcEndpoint={jsonRpcEndpoint}>
+                        <Updaters />
+                        {children}
+                      </Web3Provider>
+                    </AtomProvider>
+                  </ReduxProvider>
+                </WidgetPropValidator>
+              </ErrorBoundary>
+            </DialogProvider>
+          </WidgetWrapper>
+        </ThemeProvider>
+      </I18nProvider>
+    </StrictMode>
+  )
+}

src/custom/lib/components/Widget/index.tsx

@@ -0,0 +1,4 @@
+import Widget from './WidgetMod'
+
+export * from './WidgetMod'
+export default Widget

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

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 = {

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'