Configure
Adjust the theme here. Presets are part of the configuration area.
Get your code from affiliate.wheelx.fi and earn up to 15% commission.
Generated Config
Copy the generated config block directly into the host app.
const widgetConfig: WheelxWidgetConfig = {
"mode": "bridge-and-swap",
"defaultTokens": {
"from": {
"chainId": 8453,
"address": "0xfde4C96c8593536E31F229EA8f37b2ADa2699bb2",
"symbol": "USDT"
},
"to": {
"chainId": 8453,
"address": "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
"symbol": "USDC"
}
},
"styles": {
"formContainer": {
"backgroundColor": "#fbfbff",
"border": "1px solid",
"borderColor": "#d9ddfb",
"boxShadow": "0 28px 80px rgba(2, 6, 23, 0.24)",
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"formTitleText": {
"color": "#111827",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"formFooterText": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"sectionContainer": {
"backgroundColor": "#eef2ff",
"border": "1px solid",
"borderColor": "#d8def5"
},
"sectionLabelText": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"tokenSelector": {
"backgroundColor": "#eef2ff",
"border": "1px solid",
"borderColor": "#d8def5"
},
"tokenPrimaryText": {
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"tokenSecondaryText": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"tokenIconBadge": {
"backgroundColor": "#ffffff",
"borderColor": "#d8def5"
},
"balanceText": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"recipientBadge": {
"backgroundColor": "#ffffff",
"color": "#4b5563",
"border": "1px solid",
"borderColor": "#d8def5"
},
"amountInputContainer": {
"backgroundColor": "#ffffff",
"border": "1px solid",
"borderColor": "#c7d2fe"
},
"amountInputText": {
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif",
"_placeholder": {
"color": "#6b7280"
},
"_disabled": {
"color": "#1f2937",
"opacity": 1
}
},
"amountUsdText": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"primaryButton": {
"background": "linear-gradient(135deg, #38bdf8 0%, #7c3aed 100%)",
"color": "#ffffff",
"border": "none",
"boxShadow": "none"
},
"primaryButtonLoading": {
"backgroundColor": "#d8def5",
"color": "#1f2937"
},
"primaryButtonWarning": {
"background": "linear-gradient(135deg, #38bdf8 0%, #7c3aed 100%)",
"color": "#ffffff"
},
"primaryButtonText": {
"color": "#ffffff",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"quickHalfButton": {
"backgroundColor": "#f8f5ff",
"color": "#7c3aed",
"border": "1px solid",
"borderColor": "#7c3aed",
"minWidth": 0,
"paddingInline": "6px",
"boxShadow": "none",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"quickMaxButton": {
"backgroundColor": "#7c3aed",
"color": "#ffffff",
"border": "1px solid",
"borderColor": "#7c3aed",
"minWidth": 0,
"paddingInline": "6px",
"boxShadow": "none",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"slippagePopoverContent": {
"backgroundColor": "#fbfbff",
"border": "1px solid",
"borderColor": "#d9ddfb",
"color": "#1f2937"
},
"slippageAutoButton": {
"backgroundColor": "#f8f5ff",
"color": "#7c3aed",
"borderColor": "#7c3aed"
},
"slippageCustomInput": {
"backgroundColor": "#ffffff",
"color": "#1f2937",
"borderColor": "#c7d2fe"
},
"slippageTitleText": {
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"slippageDescriptionText": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"slippageButtonText": {
"color": "inherit",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"quoteInfoContainer": {
"backgroundColor": "#eef2ff",
"border": "1px solid",
"borderColor": "#d8def5"
},
"quoteTooltipContent": {
"backgroundColor": "#ffffff",
"border": "1px solid",
"borderColor": "#c7d2fe",
"color": "#1f2937"
},
"quoteInfoCard": {
"backgroundColor": "#ffffff",
"border": "1px solid",
"borderColor": "#d8def5"
},
"quoteInfoLabel": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"quoteInfoValue": {
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"quoteInfoFreeBadge": {
"color": "#ffffff",
"background": "#10b981"
},
"tokenModalContent": {
"backgroundColor": "#f8faff",
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif",
"border": "1px solid",
"borderColor": "#d9ddfb",
"boxShadow": "0 24px 80px rgba(2, 6, 23, 0.4)"
},
"tokenModalTitleText": {
"color": "#111827",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"tokenModalSearchInput": {
"backgroundColor": "#ffffff",
"borderColor": "#c7d2fe",
"color": "#1f2937",
"_placeholder": {
"color": "#6b7280"
},
"_focus": {
"borderColor": "#7c3aed",
"outlineWidth": "0px"
},
"_focusVisible": {
"borderColor": "#7c3aed",
"outlineWidth": "0px",
"boxShadow": "none"
}
},
"tokenModalChainPanel": {
"backgroundColor": "#eef2ff"
},
"tokenModalTokenPanel": {
"backgroundColor": "#eef2ff"
},
"tokenModalSectionLabelText": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"tokenModalChainRowHover": {
"backgroundColor": "#e7e9ff"
},
"tokenModalChainRowActive": {
"backgroundColor": "#ddd8ff",
"borderColor": "#c7d2fe"
},
"tokenModalChainText": {
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"tokenModalChainsWithAssetsRow": {
"backgroundColor": "#f1f3ff",
"border": "1px solid",
"borderColor": "transparent",
"borderRadius": "14px"
},
"tokenModalChainsWithAssetsRowActive": {
"backgroundColor": "#ddd8ff",
"borderColor": "#c7d2fe"
},
"tokenModalTokenRowHover": {
"backgroundColor": "#e7e9ff"
},
"tokenModalTokenPrimaryText": {
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"tokenModalTokenSecondaryText": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"tokenModalCategoryTab": {
"backgroundColor": "#f1f3ff",
"color": "#6b7280",
"border": "1px solid",
"borderColor": "#d8def5"
},
"tokenModalCategoryTabActive": {
"backgroundColor": "#ddd8ff",
"color": "#1f2937",
"borderColor": "#c7d2fe"
},
"tokenModalCategoryTabText": {
"color": "inherit",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"differentAddressDialogContent": {
"backgroundColor": "#f8faff",
"color": "#1f2937",
"border": "1px solid",
"borderColor": "#d9ddfb",
"boxShadow": "0 24px 80px rgba(2, 6, 23, 0.4)"
},
"differentAddressDialogTitleText": {
"color": "#111827",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"differentAddressDialogInput": {
"backgroundColor": "#ffffff",
"borderColor": "#c7d2fe",
"color": "#1f2937",
"_placeholder": {
"color": "#6b7280"
},
"_focus": {
"borderColor": "#7c3aed",
"outlineWidth": "0px"
},
"_focusVisible": {
"borderColor": "#7c3aed",
"outlineWidth": "0px",
"boxShadow": "none"
}
},
"differentAddressDialogCancelButton": {
"backgroundColor": "#f1f3ff",
"color": "#1f2937",
"border": "1px solid",
"borderColor": "#c7d2fe",
"_hover": {
"backgroundColor": "#ddd8ff"
}
},
"differentAddressDialogSaveButton": {
"background": "linear-gradient(135deg, #38bdf8 0%, #7c3aed 100%)",
"color": "#ffffff",
"border": "none",
"_hover": {
"opacity": 0.92
}
},
"differentAddressDialogCloseButton": {
"backgroundColor": "#f8faff",
"border": "1px solid",
"borderColor": "#c7d2fe",
"color": "#6b7280",
"borderRadius": "12px"
},
"txStateCard": {
"backgroundColor": "#eef2ff",
"border": "1px solid",
"borderColor": "#d8def5"
},
"txStateRouteContainer": {
"backgroundColor": "#eef2ff",
"border": "1px solid",
"borderColor": "#d8def5"
},
"txStateSummaryContainer": {
"backgroundColor": "#eef2ff",
"border": "1px solid",
"borderColor": "#d8def5"
},
"txStateTokenCard": {
"backgroundColor": "#ffffff",
"border": "1px solid",
"borderColor": "#d8def5"
},
"txStateLabel": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"txStateValue": {
"color": "#1f2937",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"txStatePrimaryButton": {
"background": "linear-gradient(135deg, #38bdf8 0%, #7c3aed 100%)",
"color": "#ffffff",
"border": "none"
},
"txStateStatusLink": {
"color": "#7c3aed",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"txStateStatusError": {
"color": "#fb7185",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"txStateStatusWarning": {
"color": "#fbbf24",
"fontFamily": "var(--font-geist-sans), sans-serif"
},
"txStateStatusProgress": {
"color": "#6b7280",
"fontFamily": "var(--font-geist-sans), sans-serif"
}
}
}