Skip to content

Commit

Permalink
Merge pull request #356 from reservoirprotocol/ted/prd-127-add-single…
Browse files Browse the repository at this point in the history 
…-chain-mode-to-relay-swap-widget

Add single chain mode to swap widget
  • Loading branch information
@ted-palmer
ted-palmer authored Nov 7, 2024
2 parents 5cb8b91 + 0c92f0e commit 8736eeb
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 50 deletions.
5 changes: 5 additions & 0 deletions .changeset/fair-feet-build.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@reservoir0x/relay-kit-ui': patch
---

Add single chain mode to swap widget
57 changes: 49 additions & 8 deletions demo/pages/ui/swap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const SwapWidgetPage: NextPage = () => {
const { setWalletFilter } = useWalletFilter()
const { setShowAuthFlow, primaryWallet } = useDynamicContext()
const { theme } = useTheme()
const [singleChainMode, setSingleChainMode] = useState(false)
const _switchWallet = useSwitchWallet()
const { setShowLinkNewWalletModal } = useDynamicModals()
const userWallets = useUserWallets()
Expand Down Expand Up @@ -133,14 +134,37 @@ const SwapWidgetPage: NextPage = () => {
}}
>
<SwapWidget
defaultToToken={{
chainId: 10,
address: '0x0000000000000000000000000000000000000000',
decimals: 18,
name: 'ETH',
symbol: 'ETH',
logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
}}
key={`swap-widget-${singleChainMode ? 'single' : 'multi'}-chain`}
lockChainId={singleChainMode ? 8453 : undefined}
singleChainMode={singleChainMode}
defaultToToken={
singleChainMode
? {
chainId: 8453,
address: '0x4200000000000000000000000000000000000006',
decimals: 18,
name: 'WETH',
symbol: 'WETH',
logoURI:
'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png'
}
: {
chainId: 10,
address: '0x0000000000000000000000000000000000000000',
decimals: 18,
name: 'ETH',
symbol: 'ETH',
logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
}
}
// defaultToToken={{
// chainId: 10,
// address: '0x0000000000000000000000000000000000000000',
// decimals: 18,
// name: 'ETH',
// symbol: 'ETH',
// logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
// }}
// lockToToken={true}
// lockFromToken={true}
defaultFromToken={{
Expand Down Expand Up @@ -239,6 +263,23 @@ const SwapWidgetPage: NextPage = () => {
}}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '40px'
}}
>
<div>
<label>Single Chain Mode: </label>
<input
type="checkbox"
checked={singleChainMode}
onChange={(e) => setSingleChainMode(e.target.checked)}
/>
</div>
</div>
</Layout>
)
}
Expand Down
102 changes: 60 additions & 42 deletions packages/ui/src/components/widgets/SwapWidget/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ type BaseSwapWidgetProps = {
lockToToken?: boolean
lockFromToken?: boolean
lockChainId?: number
singleChainMode?: boolean
tokens?: Token[]
wallet?: AdaptedWallet
onFromTokenChange?: (token?: Token) => void
Expand Down Expand Up @@ -83,6 +84,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
lockToToken = false,
lockFromToken = false,
lockChainId,
singleChainMode = false,
tokens,
wallet,
multiWalletSupportEnabled = false,
Expand Down Expand Up @@ -110,6 +112,8 @@ const SwapWidget: FC<SwapWidgetProps> = ({
decimals: 18,
logoURI: `${ASSETS_RELAY_API}/icons/1/light.png`
}
const isSingleChainLocked = singleChainMode && lockChainId !== undefined

return (
<SwapWidgetRenderer
context="Swap"
Expand Down Expand Up @@ -318,24 +322,29 @@ const SwapWidget: FC<SwapWidgetProps> = ({
/>
) : null}
</Flex>
<ChainTrigger
token={fromToken}
chain={fromChain}
locked={
lockChainId !== undefined &&
lockChainId === fromToken?.chainId
}
onClick={() => {
setFromTokenSelectorType('chain')
fromTokenSelectorOpenState[1](
!fromTokenSelectorOpenState[0]
)
onAnalyticEvent?.(EventNames.SWAP_START_TOKEN_SELECT, {
type: 'chain',
direction: 'input'
})
}}
/>
{!isSingleChainLocked && (
<ChainTrigger
token={fromToken}
chain={fromChain}
locked={
lockChainId !== undefined &&
lockChainId === fromToken?.chainId
}
onClick={() => {
setFromTokenSelectorType('chain')
fromTokenSelectorOpenState[1](
!fromTokenSelectorOpenState[0]
)
onAnalyticEvent?.(
EventNames.SWAP_START_TOKEN_SELECT,
{
type: 'chain',
direction: 'input'
}
)
}}
/>
)}
<Flex align="center" justify="between" css={{ gap: '4' }}>
<AmountInput
value={
Expand Down Expand Up @@ -399,9 +408,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
context="from"
multiWalletSupportEnabled={multiWalletSupportEnabled}
chainIdsFilter={
lockChainId !== undefined &&
fromToken?.chainId === lockChainId
? [fromToken.chainId]
isSingleChainLocked
? [lockChainId]
: fromToken?.chainId !== undefined &&
fromToken?.chainId === lockChainId
? [fromToken?.chainId]
: undefined
}
restrictedTokensList={tokens?.filter(
Expand Down Expand Up @@ -631,24 +642,29 @@ const SwapWidget: FC<SwapWidgetProps> = ({
</AnchorButton>
) : null}
</Flex>
<ChainTrigger
token={toToken}
chain={toChain}
locked={
lockChainId !== undefined &&
lockChainId === toToken?.chainId
}
onClick={() => {
setToTokenSelectorType('chain')
toTokenSelectorOpenState[1](
!toTokenSelectorOpenState[0]
)
onAnalyticEvent?.(EventNames.SWAP_START_TOKEN_SELECT, {
type: 'chain',
direction: 'output'
})
}}
/>
{!isSingleChainLocked && (
<ChainTrigger
token={toToken}
chain={toChain}
locked={
lockChainId !== undefined &&
lockChainId === toToken?.chainId
}
onClick={() => {
setToTokenSelectorType('chain')
toTokenSelectorOpenState[1](
!toTokenSelectorOpenState[0]
)
onAnalyticEvent?.(
EventNames.SWAP_START_TOKEN_SELECT,
{
type: 'chain',
direction: 'output'
}
)
}}
/>
)}
<Flex align="center" justify="between" css={{ gap: '4' }}>
<AmountInput
value={
Expand Down Expand Up @@ -738,9 +754,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
}
onAnalyticEvent={onAnalyticEvent}
chainIdsFilter={
lockChainId !== undefined &&
toToken?.chainId === lockChainId
? [toToken.chainId]
isSingleChainLocked
? [lockChainId]
: toToken?.chainId !== undefined &&
toToken?.chainId === lockChainId
? [toToken?.chainId]
: undefined
}
restrictedTokensList={tokens?.filter(
Expand Down

0 comments on commit 8736eeb

Please sign in to comment.