From 95a75fb3dd9d8b4c9a0f3f3b03ee6d4397312ab3 Mon Sep 17 00:00:00 2001 From: Nur Fikri Date: Fri, 5 Jul 2024 04:58:23 +0700 Subject: [PATCH] feat(widget): encapsulate skip-go-widget --- initia-registry | 2 +- package.json | 1 + packages/widget/package.json | 1 + packages/widget/postcss.config.cjs | 11 +- packages/widget/src/provider/index.tsx | 20 ++-- packages/widget/src/ui/AssetInput.tsx | 2 +- .../widget/src/ui/Dialog/DialogContent.tsx | 24 ++-- .../ui/HistoryDialog/HistoryClearButton.tsx | 9 +- .../src/ui/HistoryDialog/HistoryList.tsx | 17 +-- .../widget/src/ui/HistoryDialog/index.tsx | 108 +++++++++--------- .../widget/src/ui/PreviewRoute/ChainStep.tsx | 5 +- .../src/ui/PreviewRoute/SetAddressDialog.tsx | 10 +- packages/widget/src/ui/PreviewRoute/index.tsx | 10 +- packages/widget/src/ui/PriceImpactWarning.tsx | 2 +- .../widget/src/ui/SettingsDialog/index.tsx | 90 ++++++++------- packages/widget/src/ui/SimpleTooltip.tsx | 66 ++++++----- packages/widget/src/ui/TransactionDialog.tsx | 2 +- packages/widget/src/ui/Widget.tsx | 6 +- yarn.lock | 11 ++ 19 files changed, 204 insertions(+), 193 deletions(-) diff --git a/initia-registry b/initia-registry index e7bed2386..b82033705 160000 --- a/initia-registry +++ b/initia-registry @@ -1 +1 @@ -Subproject commit e7bed2386e33fa555951d8481f8c3e39ad67b7ce +Subproject commit b82033705c2c5af5e8ddb9e73decca2a1afa25c8 diff --git a/package.json b/package.json index e3d369317..e43c4d7bc 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "minimatch": "^9.0.3", "msw": "^1.2.3", "p-map": "^7.0.2", + "postcss-prefixwrap": "^1.49.0", "proxy-from-env": "^1.1.0", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/packages/widget/package.json b/packages/widget/package.json index 0e52bd691..398682949 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -47,6 +47,7 @@ "@types/styled-components": "^5.1.25", "autoprefixer": "^10.4.19", "postcss": "^8.4.38", + "postcss-prefixwrap": "^1.49.0", "tailwindcss": "^3.4.3", "tailwindcss-animate": "^1.0.7", "typed-query-selector": "^2.11.2", diff --git a/packages/widget/postcss.config.cjs b/packages/widget/postcss.config.cjs index 12a703d90..a6c51947a 100644 --- a/packages/widget/postcss.config.cjs +++ b/packages/widget/postcss.config.cjs @@ -1,6 +1,9 @@ +/** @type {import('tailwindcss').Config} */ module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, + important: true, + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + require('postcss-prefixwrap')('.skip-go-widget'), + ], }; diff --git a/packages/widget/src/provider/index.tsx b/packages/widget/src/provider/index.tsx index 11e41cfea..89f5b7204 100644 --- a/packages/widget/src/provider/index.tsx +++ b/packages/widget/src/provider/index.tsx @@ -62,14 +62,16 @@ export const SwapWidgetProvider: React.FC = ({ ...skipApiProviderProps }) => { return ( - - {children} - - +
+ + {children} + + +
); }; diff --git a/packages/widget/src/ui/AssetInput.tsx b/packages/widget/src/ui/AssetInput.tsx index 47fa37c67..f78ff1643 100644 --- a/packages/widget/src/ui/AssetInput.tsx +++ b/packages/widget/src/ui/AssetInput.tsx @@ -236,7 +236,7 @@ function AssetInput({ 'disabled:opacity-75', css` background-color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} disabled={maxButtonDisabled} diff --git a/packages/widget/src/ui/Dialog/DialogContent.tsx b/packages/widget/src/ui/Dialog/DialogContent.tsx index 506ba84f4..e150fc0c1 100644 --- a/packages/widget/src/ui/Dialog/DialogContent.tsx +++ b/packages/widget/src/ui/Dialog/DialogContent.tsx @@ -16,17 +16,19 @@ export function DialogContent({ children, onInteractOutside }: Props) { return ( - - - {children} - +
+ + + {children} + +
); } diff --git a/packages/widget/src/ui/HistoryDialog/HistoryClearButton.tsx b/packages/widget/src/ui/HistoryDialog/HistoryClearButton.tsx index 8b2b1451a..1e0fd916b 100644 --- a/packages/widget/src/ui/HistoryDialog/HistoryClearButton.tsx +++ b/packages/widget/src/ui/HistoryDialog/HistoryClearButton.tsx @@ -4,8 +4,6 @@ import { ComponentProps } from 'react'; import { SimpleTooltip } from '../SimpleTooltip'; import { txHistory, useTxHistory } from '../../store/tx-history'; import { cn } from '../../utils/ui'; -import { useSwapWidgetUIStore } from '../../store/swap-widget'; -import { css } from '@emotion/css'; type Props = ComponentProps<'button'>; @@ -15,7 +13,7 @@ export const HistoryClearButton = ({ className, ...props }: Props) => { if (!hasHistory) return null; return ( - + - diff --git a/packages/widget/src/ui/HistoryDialog/index.tsx b/packages/widget/src/ui/HistoryDialog/index.tsx index 814cf39ca..fe26557a6 100644 --- a/packages/widget/src/ui/HistoryDialog/index.tsx +++ b/packages/widget/src/ui/HistoryDialog/index.tsx @@ -25,61 +25,63 @@ export const HistoryDialog = () => { return ( - - -
-
- +

Transaction History

+
+ +
+ - - -

Transaction History

-
- + + + {entries && entries.length < 1 && ( + + No recent transactions. + + )} + {entries?.map(([id, data]) => ( + + ))} + {!isReady && ( +
+ Loading transaction history... +
+ )} + + + + + + +
- - - - {entries && entries.length < 1 && ( - - No recent transactions. - - )} - {entries?.map(([id, data]) => ( - - ))} - {!isReady && ( -
- Loading transaction history... -
- )} - - - - - - - -
- + +
); }; diff --git a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx b/packages/widget/src/ui/PreviewRoute/ChainStep.tsx index b482675e7..182d04433 100644 --- a/packages/widget/src/ui/PreviewRoute/ChainStep.tsx +++ b/packages/widget/src/ui/PreviewRoute/ChainStep.tsx @@ -399,7 +399,8 @@ export const ChainStep = ({ className={cn( 'flex flex-row items-center text-sm font-semibold underline', css` - color: ${useSwapWidgetUIStore.getState().colors.primary}; + color: ${useSwapWidgetUIStore.getState().colors + .primary} !important; ` )} href={stepState.explorerLink.link} @@ -483,7 +484,7 @@ export const ChainStep = ({ !isNotFocused ? css` color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` : 'text-neutral-400' )} diff --git a/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx b/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx index dd4843b38..5e68be3ee 100644 --- a/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx +++ b/packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx @@ -163,7 +163,7 @@ export const SetAddressDialog = ({ // css` // border: 1px solid // ${useSwapWidgetUIStore.getState().colors - // .primary}; + // .primary} !important; // ` )} onClick={async () => { @@ -237,9 +237,9 @@ export const SetAddressDialog = ({ css` border-color: ${useSwapWidgetUIStore.getState() - .colors.primary}; + .colors.primary} !important; background-color: ${useSwapWidgetUIStore.getState() - .colors.primary}; + .colors.primary} !important; ` )} onClick={() => save()} @@ -252,9 +252,9 @@ export const SetAddressDialog = ({ 'flex w-12 items-center justify-center rounded-md border-2', css` border-color: ${useSwapWidgetUIStore.getState() - .colors.primary}; + .colors.primary} !important; color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} onClick={() => cancel()} diff --git a/packages/widget/src/ui/PreviewRoute/index.tsx b/packages/widget/src/ui/PreviewRoute/index.tsx index fbe55235a..1bc552315 100644 --- a/packages/widget/src/ui/PreviewRoute/index.tsx +++ b/packages/widget/src/ui/PreviewRoute/index.tsx @@ -305,7 +305,7 @@ export const PreviewRoute = ({ 'disabled:cursor-not-allowed disabled:opacity-75', css` background-color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} onClick={() => submitMutation.mutate()} @@ -328,7 +328,8 @@ export const PreviewRoute = ({ 'outline-none transition-transform', 'disabled:cursor-not-allowed disabled:opacity-75', css` - background-color: ${useSwapWidgetUIStore.getState().colors.primary}; + background-color: ${useSwapWidgetUIStore.getState().colors + .primary} !important; ` )} onClick={async () => { @@ -416,7 +417,8 @@ export const PreviewRoute = ({ className={cn( 'right-7 text-xs font-medium', css` - color: ${useSwapWidgetUIStore.getState().colors.primary}; + color: ${useSwapWidgetUIStore.getState().colors + .primary} !important; ` )} onClick={() => setIsExpanded(false)} @@ -579,7 +581,7 @@ export const PreviewRoute = ({ 'disabled:cursor-not-allowed disabled:opacity-75', css` background-color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} onClick={control.close} diff --git a/packages/widget/src/ui/PriceImpactWarning.tsx b/packages/widget/src/ui/PriceImpactWarning.tsx index aebc70207..d9d00c9d3 100644 --- a/packages/widget/src/ui/PriceImpactWarning.tsx +++ b/packages/widget/src/ui/PriceImpactWarning.tsx @@ -45,7 +45,7 @@ export const PriceImpactWarning = ({ `hover:opacity-90`, css` background-color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} onClick={() => { diff --git a/packages/widget/src/ui/SettingsDialog/index.tsx b/packages/widget/src/ui/SettingsDialog/index.tsx index 0c2e69024..ab767a4ca 100644 --- a/packages/widget/src/ui/SettingsDialog/index.tsx +++ b/packages/widget/src/ui/SettingsDialog/index.tsx @@ -13,54 +13,56 @@ export const SettingsDialog = () => { const [isOpen, { close }] = useDisclosureKey('settingsDialog'); return ( - - - {' '} -
-
- -

Swap Settings

-
- -
- -

- Gas is used to meter transactions and allocate resources fairly - among users. Users must pay a gas fee, usually in the native token, - to have their transactions processed by the network. -
- - Learn more - -

- -

- Slippage is how much price movement you can tolerate between the - time you send out a transaction and the time it's executed. -
- - Learn more - -

- {/* +
+ + + {' '} +
+
+ +

Swap Settings

+
+ +
+ +

+ Gas is used to meter transactions and allocate resources fairly + among users. Users must pay a gas fee, usually in the native + token, to have their transactions processed by the network. +
+ + Learn more + +

+ +

+ Slippage is how much price movement you can tolerate between the + time you send out a transaction and the time it's executed. +
+ + Learn more + +

+ {/*

Removes all of your data from the app, which includes connected wallets state, transaction history, and settings.

*/} -
- +
+ +
); }; diff --git a/packages/widget/src/ui/SimpleTooltip.tsx b/packages/widget/src/ui/SimpleTooltip.tsx index e394b8973..5145b44b3 100644 --- a/packages/widget/src/ui/SimpleTooltip.tsx +++ b/packages/widget/src/ui/SimpleTooltip.tsx @@ -28,41 +28,45 @@ export const SimpleTooltip = (props: Props) => { {children} - - {label} - + - + > + {label} + + +
); diff --git a/packages/widget/src/ui/TransactionDialog.tsx b/packages/widget/src/ui/TransactionDialog.tsx index 8d88697d8..267e10c2e 100644 --- a/packages/widget/src/ui/TransactionDialog.tsx +++ b/packages/widget/src/ui/TransactionDialog.tsx @@ -75,7 +75,7 @@ function TransactionDialog({ 'enabled:hover:rotate-1 enabled:hover:scale-102', css` background-color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} disabled={!route || (typeof isLoading === 'boolean' && isLoading)} diff --git a/packages/widget/src/ui/Widget.tsx b/packages/widget/src/ui/Widget.tsx index 8039aab91..0767f9b96 100644 --- a/packages/widget/src/ui/Widget.tsx +++ b/packages/widget/src/ui/Widget.tsx @@ -209,7 +209,7 @@ export const SwapWidgetUI = ({ 'relative rounded-full p-[4px]', css` background-color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} > @@ -218,7 +218,7 @@ export const SwapWidgetUI = ({ 'absolute h-6 w-6 animate-ping rounded-full', css` background-color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} /> @@ -252,7 +252,7 @@ export const SwapWidgetUI = ({ 'enabled:hover:rotate-1 enabled:hover:scale-105', css` background-color: ${useSwapWidgetUIStore.getState().colors - .primary}; + .primary} !important; ` )} disabled={!sourceChain} diff --git a/yarn.lock b/yarn.lock index 5c3680058..ec92b71cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7910,6 +7910,7 @@ __metadata: clsx: ^2.1.1 match-sorter: ^6.3.4 postcss: ^8.4.38 + postcss-prefixwrap: ^1.49.0 react-hot-toast: ^2.4.1 react-icons: ^5.2.1 tailwind-merge: ^2.3.0 @@ -20220,6 +20221,15 @@ __metadata: languageName: node linkType: hard +"postcss-prefixwrap@npm:^1.49.0": + version: 1.49.0 + resolution: "postcss-prefixwrap@npm:1.49.0" + peerDependencies: + postcss: "*" + checksum: 29a0e5dfa28aee072a62737f9e7e9af0631ea9a2eb956c6c6bf1717969468c1267ccdac1614386af83c43773429c8830b942be979ab82c4099d7726ce9fc3a35 + languageName: node + linkType: hard + "postcss-reduce-initial@npm:^5.1.2": version: 5.1.2 resolution: "postcss-reduce-initial@npm:5.1.2" @@ -22108,6 +22118,7 @@ __metadata: minimatch: ^9.0.3 msw: ^1.2.3 p-map: ^7.0.2 + postcss-prefixwrap: ^1.49.0 proxy-from-env: ^1.1.0 react: ^18.0.0 react-dom: ^18.0.0