Squid Dev Documentation
Ask or search…
⌃K

Customization Guide

To customize the widget's theme interactively, visit the Squid Widget Studio. Copy paste the config code snippet into your code via this button:
​
There are a number of ways to configure the widget’s behaviour, UX and design:

Default configuration example

You can use the widget with default values like this:
import { SquidWidget } from '@0xsquid/widget';
// ...
<SquidWidget />

Full configuration example

<SquidWidget config={
{
companyName: "Squid",
slippage: 1, // default slippage
style: {
neutralContent: "#9DA7B1",
baseContent: "#FFFDFD",
base100: "#434565",
base200: "#202230",
base300: "#161522",
error: "#ED6A5E",
warning: "#FFB155",
success: "#62C555",
primary: "#AB67CB",
secondary: "#37394C",
secondaryContent: "#B2BCD3",
neutral: "#383A4C",
roundedBtn: "24px",
roundedBox: "20px",
roundedDropDown: "0px",
displayDivider: false,
advanced: {
transparentWidget: false,
},
},
hideAnimations: true,
instantExec: true,
infiniteApproval: true,
apiUrl: "https://api.squidrouter.com",
mainLogoUrl: "",
titles: {
swap: "Convert",
settings: "Settings",
wallets: "Wallets",
tokens: "Tokens",
chains: "Chains",
history: "History",
transaction: "Transaction",
destination: "Destination address",
},
priceImpactWarnings: {
warning: 3,
critical: 5,
},
initialFromChainId: 42161, // Arbitrum
initialToChainId: 1284, // Moonbeam
favTokens: [
{
address: "0x539bdE0d7Dbd336b79148AA742883198BBF60342", // Token address for MAGIC
chainId: 42161, // Chain ID for Arbitrum
},
{
address: "0x0E358838ce72d5e61E0018a2ffaC4bEC5F4c88d2", // Token address for STELLA
chainId: 1284, // Chain ID for Moonbeam
},
],
defaultTokens: [
{
address: "0xd4d42F0b6DEF4CE0383636770eF773390d85c61A", // Token address for SUSHI
chainId: 42161, // Chain ID for Arbitrum
},
{
address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE", // Token address for GLMR
chainId: 1284, // Chain ID for Moonbeam
},
],
}
}/>
All configuration types can be found at Configuration Types​