Skip to content

Commit 3e9d294

Browse files
chybisovchybisov
authored
Merge branch 'main' into remove-wallet-balances
2 parents 4906579 + ae9b9b9 commit 3e9d294

10 files changed

Lines changed: 137 additions & 118 deletions

File tree

‎.github/workflows/delete-test-app.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ jobs:
1919
steps:
2020
- name: Set Project Name
2121
run: |
22-
export NAME=$(echo ${{ env.BRANCH_NAME }} | tr -d -c '[:alnum:]' | tr '[:upper:]' '[:lower:]')
22+
export NAME=$(printf '%s' "$BRANCH_NAME" | tr -d -c '[:alnum:]' | tr '[:upper:]' '[:lower:]')
2323
echo "PROJECT_NAME=widget-${NAME:0:10}" >> $GITHUB_ENV
2424
2525
- name: Delete project if present

‎.github/workflows/deploy-test-app.yaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ jobs:
3636

3737
- name: Set Project Name
3838
run: |
39-
export NAME=$(echo ${{ env.BRANCH_NAME }} | tr -d -c '[:alnum:]' | tr '[:upper:]' '[:lower:]')
39+
export NAME=$(printf '%s' "$BRANCH_NAME" | tr -d -c '[:alnum:]' | tr '[:upper:]' '[:lower:]')
4040
echo "PROJECT_NAME=widget-${NAME:0:10}" >> $GITHUB_ENV
4141
4242
- name: Create project if not present
@@ -104,7 +104,7 @@ jobs:
104104
},
105105
latest_deployment: null,
106106
name: "${{ env.PROJECT_NAME }}",
107-
production_branch: "${{ env.BRANCH_NAME }}"
107+
production_branch: process.env.BRANCH_NAME
108108
})
109109
})
110110
.then(r => r.json())
@@ -121,7 +121,7 @@ jobs:
121121
CLOUDFLARE_API_TOKEN: ${{ secrets.CF_PAGES_API_TOKEN }}
122122
CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
123123
run: |
124-
pnpm dlx wrangler@4.90.1 pages deploy ./packages/widget-playground-vite/dist/ --project-name ${{ env.PROJECT_NAME }} --branch ${{ env.BRANCH_NAME }}
124+
pnpm dlx wrangler@4.90.1 pages deploy ./packages/widget-playground-vite/dist/ --project-name "$PROJECT_NAME" --branch "$BRANCH_NAME"
125125
126126
- name: Resolve preview URL
127127
id: preview-url

‎packages/widget-checkout/src/CheckoutModal.tsx‎

Lines changed: 92 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface CheckoutModalContextValue {
2525
closeModal: () => void
2626
openCloseConfirmation: () => void
2727
panelEl: HTMLDivElement | null
28+
inline: boolean
2829
}
2930

3031
export const CheckoutModalContext: React.Context<CheckoutModalContextValue | null> =
@@ -39,7 +40,7 @@ export type { CheckoutModalRef }
3940
export const CheckoutModal: ForwardRefExoticComponent<
4041
PropsWithChildren<CheckoutModalProps> & RefAttributes<CheckoutModalRef>
4142
> = forwardRef<CheckoutModalRef, PropsWithChildren<CheckoutModalProps>>(
42-
({ elementRef, open, onClose, children }, ref) => {
43+
({ elementRef, open, onClose, inline, children }, ref) => {
4344
const openRef = useRef(Boolean(open))
4445
const [visible, setVisible] = useState(Boolean(open))
4546
const [confirmOpen, setConfirmOpen] = useState(false)
@@ -98,68 +99,103 @@ export const CheckoutModal: ForwardRefExoticComponent<
9899

99100
const modalContext: CheckoutModalContextValue = useMemo(
100101
() => ({
101-
closeModal: closePanel,
102-
openCloseConfirmation: () => setConfirmOpen(true),
102+
closeModal: inline ? () => {} : closePanel,
103+
openCloseConfirmation: inline ? () => {} : () => setConfirmOpen(true),
103104
panelEl,
105+
inline: Boolean(inline),
104106
}),
105-
[closePanel, panelEl]
107+
[inline, closePanel, panelEl]
106108
)
107109

108-
return (
109-
<CheckoutModalContext.Provider value={modalContext}>
110-
<Modal
111-
open={visible}
112-
onClose={handleModalClose}
113-
keepMounted={false}
114-
slotProps={
115-
{
116-
backdrop: {
117-
sx: (theme: Theme) => ({
118-
backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.48)`,
119-
}),
120-
},
121-
transition: {
122-
timeout: { appear: 0, enter: 160, exit: 80 },
123-
},
124-
} as Parameters<typeof Modal>[0]['slotProps']
110+
const panel = (
111+
<Box
112+
ref={(el: HTMLDivElement | null) => {
113+
setPanelEl(el)
114+
if (elementRef) {
115+
elementRef.current = el
125116
}
126-
>
127-
<Box
128-
ref={(el: HTMLDivElement | null) => {
129-
setPanelEl(el)
130-
if (elementRef) {
131-
elementRef.current = el
117+
}}
118+
tabIndex={-1}
119+
role="dialog"
120+
aria-modal={inline ? undefined : 'true'}
121+
aria-label="Checkout"
122+
sx={(theme) =>
123+
inline
124+
? {
125+
position: 'relative',
126+
display: 'flex',
127+
flexDirection: 'column',
128+
minHeight: 0,
129+
outline: 'none',
130+
width: `min(100%, ${theme.breakpoints.values.sm}px)`,
131+
maxHeight: 'min(90dvh, 640px)',
132+
overflow: 'hidden',
133+
// Inherit only the host widget theme's card *appearance*
134+
// (radius, shadow/border) so the inline panel matches the
135+
// standard widget — never its layout props (display/height),
136+
// which would break the panel's internal scroll.
137+
background:
138+
theme.container?.background ??
139+
theme.vars.palette.background.default,
140+
borderRadius:
141+
theme.container?.borderRadius ??
142+
theme.vars.shape.borderRadiusTertiary,
143+
border: theme.container?.border,
144+
boxShadow: theme.container?.boxShadow,
145+
filter: theme.container?.filter,
132146
}
133-
}}
134-
tabIndex={-1}
135-
role="dialog"
136-
aria-modal="true"
137-
aria-label="Checkout"
138-
sx={(theme) => ({
139-
position: 'absolute',
140-
top: '50%',
141-
left: '50%',
142-
transform: 'translate(-50%, -50%)',
143-
width: `min(calc(100vw - 32px), ${theme.breakpoints.values.sm}px)`,
144-
maxHeight: '90dvh',
145-
display: 'flex',
146-
flexDirection: 'column',
147-
outline: 'none',
148-
borderRadius: theme.vars.shape.borderRadiusTertiary,
149-
boxShadow: theme.shadows[24],
150-
bgcolor: 'background.default',
151-
overflow: 'hidden',
152-
})}
147+
: {
148+
position: 'absolute',
149+
top: '50%',
150+
left: '50%',
151+
transform: 'translate(-50%, -50%)',
152+
width: `min(calc(100vw - 32px), ${theme.breakpoints.values.sm}px)`,
153+
maxHeight: '90dvh',
154+
display: 'flex',
155+
flexDirection: 'column',
156+
outline: 'none',
157+
borderRadius: theme.vars.shape.borderRadiusTertiary,
158+
boxShadow: theme.shadows[24],
159+
bgcolor: 'background.default',
160+
overflow: 'hidden',
161+
}
162+
}
163+
>
164+
{children}
165+
<CloseConfirmationDialog
166+
open={confirmOpen}
167+
onCancel={handleCancelConfirm}
168+
onConfirm={handleConfirmConfirm}
169+
container={panelEl}
170+
/>
171+
</Box>
172+
)
173+
174+
return (
175+
<CheckoutModalContext.Provider value={modalContext}>
176+
{inline ? (
177+
panel
178+
) : (
179+
<Modal
180+
open={visible}
181+
onClose={handleModalClose}
182+
keepMounted={false}
183+
slotProps={
184+
{
185+
backdrop: {
186+
sx: (theme: Theme) => ({
187+
backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.48)`,
188+
}),
189+
},
190+
transition: {
191+
timeout: { appear: 0, enter: 160, exit: 80 },
192+
},
193+
} as Parameters<typeof Modal>[0]['slotProps']
194+
}
153195
>
154-
{children}
155-
<CloseConfirmationDialog
156-
open={confirmOpen}
157-
onCancel={handleCancelConfirm}
158-
onConfirm={handleConfirmConfirm}
159-
container={panelEl}
160-
/>
161-
</Box>
162-
</Modal>
196+
{panel}
197+
</Modal>
198+
)}
163199
</CheckoutModalContext.Provider>
164200
)
165201
}

‎packages/widget-checkout/src/LifiWidgetCheckout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export const LifiWidgetCheckout: ForwardRefExoticComponent<
5656
elementRef={props.elementRef}
5757
open={props.open}
5858
onClose={props.onClose}
59+
inline={props.inline}
5960
>
6061
<ErrorBoundary>
6162
<CheckoutConfigGuard>

‎packages/widget-checkout/src/components/Header.test.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,12 @@ function setup({
7272
const Wrapper = ({ children }: { children: ReactNode }) => (
7373
<OnRampSessionsContext.Provider value={store}>
7474
<CheckoutModalContext.Provider
75-
value={{ closeModal, openCloseConfirmation, panelEl: null }}
75+
value={{
76+
closeModal,
77+
openCloseConfirmation,
78+
panelEl: null,
79+
inline: false,
80+
}}
7681
>
7782
{children}
7883
</CheckoutModalContext.Provider>

‎packages/widget-checkout/src/components/Header.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -138,13 +138,15 @@ export const Header: React.FC<HeaderProps> = ({ title: titleProp }) => {
138138
<HeaderControlsContainer
139139
sx={{ justifyContent: 'flex-end', flexShrink: 0 }}
140140
>
141-
<IconButton
142-
onClick={handleClose}
143-
size="medium"
144-
aria-label={t('button.close')}
145-
>
146-
<CloseIcon />
147-
</IconButton>
141+
{!modalContext?.inline ? (
142+
<IconButton
143+
onClick={handleClose}
144+
size="medium"
145+
aria-label={t('button.close')}
146+
>
147+
<CloseIcon />
148+
</IconButton>
149+
) : null}
148150
</HeaderControlsContainer>
149151
</HeaderAppBar>
150152
<AbandonConfirmationDialog

‎packages/widget-checkout/src/pages/SelectSourcePage/ConnectedAccountRow.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
FundingOptionRow,
55
FundingOptionSubtitle,
66
FundingOptionTitle,
7+
GenericIconWrap,
78
OptionTextCell,
89
} from './SelectSourceFundingOptions.style.js'
910

@@ -33,18 +34,15 @@ export function ConnectedAccountRow({
3334
}: ConnectedAccountRowProps): JSX.Element {
3435
return (
3536
<FundingOptionRow sx={{ alignItems: 'center' }}>
36-
<Avatar
37-
src={iconSrc}
38-
alt=""
39-
sx={(theme) => ({
40-
width: 40,
41-
height: 40,
42-
flexShrink: 0,
43-
bgcolor: theme.vars.palette.action.hover,
44-
})}
45-
>
46-
{!iconSrc ? fallbackIcon : null}
47-
</Avatar>
37+
{iconSrc ? (
38+
<Avatar
39+
src={iconSrc}
40+
alt=""
41+
sx={{ width: 40, height: 40, flexShrink: 0 }}
42+
/>
43+
) : (
44+
<GenericIconWrap>{fallbackIcon}</GenericIconWrap>
45+
)}
4846
<OptionTextCell>
4947
<FundingOptionTitle>{title}</FundingOptionTitle>
5048
<FundingOptionSubtitle noWrap>{subtitle}</FundingOptionSubtitle>

‎packages/widget-checkout/src/pages/SelectSourcePage/SelectSourcePage.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { parseUnits } from '@lifi/sdk'
2-
import { useAccount, useWalletMenu } from '@lifi/wallet-management'
2+
import {
3+
getConnectorIcon,
4+
useAccount,
5+
useWalletMenu,
6+
} from '@lifi/wallet-management'
37
import {
48
FormKeyHelper,
59
PageContainer,
@@ -146,7 +150,7 @@ export const SelectSourcePage: React.FC = () => {
146150
}
147151
return {
148152
address: a.address,
149-
icon: a.connector?.icon,
153+
icon: getConnectorIcon(a.connector),
150154
walletName:
151155
a.connector?.displayName ?? a.connector?.name ?? a.name ?? undefined,
152156
}

‎packages/widget-checkout/src/types/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export interface CheckoutModalProps {
2626
elementRef?: RefObject<HTMLDivElement | null>
2727
open?: boolean
2828
onClose?(): void
29+
/** Render inline (non-modal) instead of as a centered modal overlay. */
30+
inline?: boolean
2931
}
3032

3133
export type CheckoutProps = CheckoutModalProps &

0 commit comments

Comments
 (0)