diff --git a/packages/widget/CHANGELOG.md b/packages/widget/CHANGELOG.md index cfea9964ac..bc3ba55416 100644 --- a/packages/widget/CHANGELOG.md +++ b/packages/widget/CHANGELOG.md @@ -15,122 +15,62 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.35](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.34...@synapsecns/widget@0.0.35) (2024-02-05) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.34](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.33...@synapsecns/widget@0.0.34) (2024-02-05) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.33](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.32...@synapsecns/widget@0.0.33) (2024-02-04) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.32](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.31...@synapsecns/widget@0.0.32) (2024-02-02) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.31](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.30...@synapsecns/widget@0.0.31) (2024-02-02) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.30](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.29...@synapsecns/widget@0.0.30) (2024-02-02) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.29](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.28...@synapsecns/widget@0.0.29) (2024-02-02) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.28](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.27...@synapsecns/widget@0.0.28) (2024-02-02) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.27](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.26...@synapsecns/widget@0.0.27) (2024-02-02) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.26](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.25...@synapsecns/widget@0.0.26) (2024-02-01) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.25](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.24...@synapsecns/widget@0.0.25) (2024-02-01) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.24](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.23...@synapsecns/widget@0.0.24) (2024-02-01) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.23](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.22...@synapsecns/widget@0.0.23) (2024-02-01) **Note:** Version bump only for package @synapsecns/widget - - - - ## [0.0.22](https://github.com/synapsecns/sanguine/compare/@synapsecns/widget@0.0.21...@synapsecns/widget@0.0.22) (2024-02-01) **Note:** Version bump only for package @synapsecns/widget - - - - ## 0.0.21 (2024-02-01) **Note:** Version bump only for package @synapsecns/widget diff --git a/packages/widget/examples/landing-page/src/app/page.tsx b/packages/widget/examples/landing-page/src/app/page.tsx index 8bee622ce0..65b5b22edf 100644 --- a/packages/widget/examples/landing-page/src/app/page.tsx +++ b/packages/widget/examples/landing-page/src/app/page.tsx @@ -68,13 +68,13 @@ const consumerExamples = { dfk: { customTheme: { bgColor: 'light', - '--synapse-text': 'hsl(12deg 85% 13%)', - '--synapse-secondary': 'hsl(12deg 85% 20%)', + '--synapse-text': 'hsl(12deg 85% 10%)', + '--synapse-secondary': 'hsl(12deg 40% 40%)', '--synapse-select-bg': 'hsl(35deg 100% 87%)', '--synapse-surface': 'hsl(32deg 69% 78%)', '--synapse-root': 'hsl(35deg 100% 87%)', '--synapse-border': 'hsl(29deg 53% 68%)', - '--synapse-focus': 'hsl(12deg 85% 15%)', + '--synapse-focus': 'hsl(12deg 85% 25%)', '--synapse-accent': 'hsl(12deg 85% 15%)', }, targetTokens: [ETH, USDC, JEWEL, XJEWEL, WJEWEL], @@ -90,7 +90,7 @@ const customRpcs: CustomRpcs = { export default function Home() { const [config, setConfig] = useState(initialConfig) - const [container, setContainer] = useState(true) + const [container, setContainer] = useState(false) const { web3Provider } = useEthereumWallet() diff --git a/packages/widget/src/components/BridgeButton.tsx b/packages/widget/src/components/BridgeButton.tsx index 71eb20423c..f8907a3fce 100644 --- a/packages/widget/src/components/BridgeButton.tsx +++ b/packages/widget/src/components/BridgeButton.tsx @@ -41,8 +41,8 @@ export const BridgeButton = ({ p-2 text-lg font-sans font-medium tracking-wide rounded-md w-full border border-solid border-[--synapse-button-border] hover:border-[--synapse-focus] disabled:hover:border-[--synapse-button-border] - active:opacity-40 disabled:opacity-70 - text-[--synapse-button-text] disabled:text-[--synapse-secondary] + active:opacity-70 disabled:opacity-40 + text-[--synapse-button-text] cursor-pointer disabled:cursor-not-allowed ` diff --git a/packages/widget/src/components/Widget.tsx b/packages/widget/src/components/Widget.tsx index a4f5f0e299..15ce908cc0 100644 --- a/packages/widget/src/components/Widget.tsx +++ b/packages/widget/src/components/Widget.tsx @@ -72,7 +72,7 @@ interface WidgetProps { export const Widget = ({ customTheme, - container, + container = false, targetChainIds, targetTokens, protocolName, @@ -343,7 +343,7 @@ export const Widget = ({ } const containerStyle = ` - ${container === false ? 'p-0' : 'p-2 rounded-lg'}` + ${container === false ? 'p-2 rounded-[inherit]' : 'p-2 rounded-lg'}` const cardStyle = ` grid grid-cols-[1fr_auto] diff --git a/packages/widget/src/components/icons/ConnectedIndicator.tsx b/packages/widget/src/components/icons/ConnectedIndicator.tsx index b4c42bd020..e0da1e2790 100644 --- a/packages/widget/src/components/icons/ConnectedIndicator.tsx +++ b/packages/widget/src/components/icons/ConnectedIndicator.tsx @@ -7,14 +7,14 @@ export const ConnectedIndicator = () => { fill="none" xmlns="http://www.w3.org/2000/svg" > - ) diff --git a/packages/widget/src/components/ui/ChainOption.tsx b/packages/widget/src/components/ui/ChainOption.tsx index 1a8590ea2b..96c528b359 100644 --- a/packages/widget/src/components/ui/ChainOption.tsx +++ b/packages/widget/src/components/ui/ChainOption.tsx @@ -8,10 +8,12 @@ export const ChainOption = ({ option, isSelected, onSelect, + isOrigin, }: { option: Chain isSelected: boolean onSelect: (option: Chain) => void + isOrigin?: boolean }) => { const web3Context = useContext(Web3Context) @@ -25,7 +27,7 @@ export const ChainOption = ({ className={` pl-2.5 pr-2.5 py-2.5 rounded-[.1875rem] border border-solid hover:border-[--synapse-focus] active:opacity-40 - cursor-pointer whitespace-nowrap + cursor-pointer whitespace-nowrap group flex justify-between items-center ${ isSelected ? 'border-[--synapse-focus] hover:opacity-70' @@ -34,10 +36,15 @@ export const ChainOption = ({ `} onClick={() => onSelect(option)} > -
-
{option.name}
- {option.id === networkId && } -
+ {option.name} + {isOrigin && + (option.id === networkId ? ( + + ) : ( + + Switch + + ))} ) } diff --git a/packages/widget/src/components/ui/ChainPopoverSelect.tsx b/packages/widget/src/components/ui/ChainPopoverSelect.tsx index 315b21d2a5..f08181c63d 100644 --- a/packages/widget/src/components/ui/ChainPopoverSelect.tsx +++ b/packages/widget/src/components/ui/ChainPopoverSelect.tsx @@ -92,15 +92,20 @@ export const ChainPopoverSelect = ({ animate-slide-down origin-top `} > - - {targets && targets.length > 0 && ( - - )} +
+ + {targets && targets.length > 0 && ( + + )} +
{activeTab === 'All' ? ( hasFilteredResults ? (
    @@ -110,6 +115,7 @@ export const ChainPopoverSelect = ({ option={option} isSelected={option?.name === selected?.name} onSelect={() => handleSelect(option)} + isOrigin={isOrigin} /> ))} {hasFilteredRemaining && ( @@ -128,6 +134,7 @@ export const ChainPopoverSelect = ({ option={option} isSelected={option?.name === selected?.name} onSelect={() => handleSelect(option)} + isOrigin={isOrigin} /> ))}
@@ -148,6 +155,7 @@ export const ChainPopoverSelect = ({ option={option} isSelected={option?.name === selected?.name} onSelect={() => handleSelect(option)} + isOrigin={isOrigin} /> ))} diff --git a/packages/widget/src/components/ui/SearchInput.tsx b/packages/widget/src/components/ui/SearchInput.tsx index fe8f65934d..9c04b7cafd 100644 --- a/packages/widget/src/components/ui/SearchInput.tsx +++ b/packages/widget/src/components/ui/SearchInput.tsx @@ -34,7 +34,7 @@ export const SearchInput = ({ style={{ background: 'var(--synapse-select-bg)' }} className={` text-[--synapse-text] placeholder:text-[--synapse-secondary] - w-full border border-solid border-[--synapse-focus] shadow-none text-base + w-full border border-solid border-[--synapse-focus] shadow-none text-sm focus:ring-0 focus:border-[--synapse-focus] focus:outline-none px-2 py-1.5 rounded `} diff --git a/packages/widget/src/components/ui/ToggleTabs.tsx b/packages/widget/src/components/ui/ToggleTabs.tsx index 1872854276..ea42048fa7 100644 --- a/packages/widget/src/components/ui/ToggleTabs.tsx +++ b/packages/widget/src/components/ui/ToggleTabs.tsx @@ -22,7 +22,7 @@ export const ToggleTabs: React.FC = ({ return (
diff --git a/packages/widget/src/components/ui/TokenPopoverSelect.tsx b/packages/widget/src/components/ui/TokenPopoverSelect.tsx index 1497939a61..410b71be52 100644 --- a/packages/widget/src/components/ui/TokenPopoverSelect.tsx +++ b/packages/widget/src/components/ui/TokenPopoverSelect.tsx @@ -95,12 +95,14 @@ export const TokenPopoverSelect = ({ animate-slide-down origin-top `} > - +
+ +
{hasFilteredResults ? (
    {filteredSortedOptionsWithBalances?.map( @@ -166,7 +168,7 @@ const TokenOption = ({ className={` flex gap-4 items-center justify-between cursor-pointer rounded border border-solid - hover:border-[--synapse-focus] active:opacity-40 + hover:border-[--synapse-focus] active:opacity-40 group ${ option?.symbol === selected?.symbol ? 'border-[--synapse-focus] hover:opacity-70' @@ -189,7 +191,17 @@ const TokenOption = ({ } `} > - {parsedBalance ?? '−'} + {parsedBalance ? ( + parsedBalance === '0.0' ? ( + '−' + ) : ( + parsedBalance + ) + ) : ( + + Receive + + )} ) diff --git a/packages/widget/src/utils/generateTheme.ts b/packages/widget/src/utils/generateTheme.ts index 3ec47cee9c..4a296bf6cf 100644 --- a/packages/widget/src/utils/generateTheme.ts +++ b/packages/widget/src/utils/generateTheme.ts @@ -64,6 +64,11 @@ export function generateTheme(theme: CustomThemeVariables = {}) { '--synapse-button-bg': 'var(--synapse-surface)', '--synapse-button-text': 'var(--synapse-text)', '--synapse-button-border': 'var(--synapse-border)', + + '--synapse-progress': 'hsl(265deg 100% 75%)', + '--synapse-progress-flash': 'hsl(185deg 100% 45%)', + '--synapse-progress-success': 'hsl(105deg 100% 60%)', + '--synapse-progress-error': 'hsl(15deg 100% 65%)', } : { '--synapse-text': hslString(h, s, l, a, 0.04), @@ -82,6 +87,11 @@ export function generateTheme(theme: CustomThemeVariables = {}) { '--synapse-button-bg': 'var(--synapse-surface)', '--synapse-button-text': 'var(--synapse-text)', '--synapse-button-border': 'var(--synapse-border)', + + '--synapse-progress': 'hsl(265deg 100% 65%)', + '--synapse-progress-flash': 'hsl(215deg 100% 65%)', + '--synapse-progress-success': 'hsl(120deg 100% 30%)', + '--synapse-progress-error': 'hsl(15deg 100% 65%)', } for (const key in theme) if (/^--/.test(key)) generatedTheme[key] = theme[key]