Skip to content

Commit

Permalink
Merge pull request #184 from scrtlabs/Silent-swap
Browse files Browse the repository at this point in the history 
Add silent swap
  • Loading branch information
@SecretSaturn
SecretSaturn authored Oct 24, 2024
2 parents c95917f + 82c994c commit 9e93c43
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 159 deletions.
202 changes: 108 additions & 94 deletions src/pages/bridge/Bridge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,9 @@ import { Link } from 'react-router-dom'
import { Helmet } from 'react-helmet-async'
import { bridgeJsonLdSchema, bridgePageDescription, bridgePageTitle, formatNumber, pageTitle } from 'utils/commons'
import mixpanel from 'mixpanel-browser'
import { useEffect, useState, useContext } from 'react'
import { useEffect, useState } from 'react'
import { trackMixPanelEvent } from 'utils/commons'
import SquidModal from './SquidModal'
import HoudiniModal from './HoudiniModal'
import { useSecretNetworkClientStore } from 'store/secretNetworkClient'
import Title from 'components/Title'
import { useUserPreferencesStore } from 'store/UserPreferences'
Expand All @@ -21,7 +20,7 @@ function Bridge() {
const { theme } = useUserPreferencesStore()
const [isSquidModalOpen, setIsSquidModalOpen] = useState(false)
const [isSwingModalOpen, setIsSwingModalOpen] = useState(false)
const [isHoudiniModalOpen, setIsHoudiniModalOpen] = useState(false)
const [isSilentModalOpen, setIsSilentModalOpen] = useState(false)

const { walletAddress } = useSecretNetworkClientStore()

Expand All @@ -48,122 +47,137 @@ function Bridge() {

<script type="application/ld+json">{JSON.stringify(bridgeJsonLdSchema)}</script>
</Helmet>
<div className="max-w-2xl mx-auto px-6 text-neutral-600 dark:text-neutral-400 leading-7 text-justify">
{/* Title */}
{/* Title */}
<div className="py-4">
<Title title={'Bridge'} />
</div>

<div className="max-w-2xl mx-auto px-6 text-neutral-600 dark:text-neutral-400 leading-7 text-justify divide-y divide-gray-300 dark:divide-gray-600">
{/* SilentSwap Section */}
<div className="py-4">
<p>
SilentSwap is the official privacy cross-chain aggregator for Secret Network. It offers a fast, cheap, and
convenient way to privately and securely swap your assets by leveraging Secret Network's confidential
computing layer. SilentSwap obfuscates the trace between sender and receiver in an entirely noncustodial,
trustless, and permisionless manner. It is fully compliant and allows users to trade or transfer in private,
all abstracted in a seamless user experience.
</p>
<a
href="https://app.silentswap.com"
target="_blank"
rel="noopener noreferrer"
className="text-white block mt-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
>
Go to Silent Swap
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
</a>
</div>

<p>
Use the{' '}
{/* Protip Section */}
<div className="py-4">
<p>
<span className="select-none">
<span className="inline-block bg-emerald-500 dark:bg-emerald-800 text-white text-xs py-0.5 px-1.5 rounded uppercase font-semibold">
Protip
</span>{' '}
–{' '}
</span>
If you want to bridge Axelar Assets (such as USDC, USDT) from other Cosmos based chains (Osmosis, Kujira) to
Secret, please use the IBC tab:
<Link
to={'/ibc'}
className="text-white block mt-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
onClick={() => {
trackMixPanelEvent('Clicked IBC transfer link (from Bridge page)')
}}
>
<FontAwesomeIcon icon={faShuffle} className="mr-2" />
Go to IBC Transfers
</Link>
</p>
</div>

{/* Secret Tunnel Section */}
<div className="py-4">
<p>
Use the{' '}
<a
href="https://tunnel.scrt.network"
target="_blank"
rel="noopener noreferrer"
className="pb-0.5 border-b border-neutral-400 dark:border-neutral-600 hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white transition-colors"
onClick={() => {
trackMixPanelEvent('Clicked Secret Tunnel link (from Bridge page)')
}}
>
Secret Tunnel
</a>{' '}
to bridge your assets from blockchains such as Ethereum, Binance Smart Chain (BSC), and Axelar to the Secret
Network.
</p>
<a
href="https://tunnel.scrt.network"
target="_blank"
className="pb-0.5 border-b border-neutral-400 dark:border-neutral-600 hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white transition-colors"
rel="noopener noreferrer"
className="text-white block mt-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
onClick={() => {
trackMixPanelEvent('Clicked Secret Tunnel link (from Bridge page)')
}}
>
Secret Tunnel
</a>{' '}
to bridge your assets from blockchains such as Ethereum, Binance Smart Chain (BSC) and Axelar to Secret
Network.
</p>
<a
href="https://tunnel.scrt.network"
target="_blank"
className="text-white block my-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
onClick={() => {
trackMixPanelEvent('Clicked Secret Tunnel link (from Bridge page)')
}}
>
Go to Secret Tunnel
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
</a>
<p>
Alternatively, use Squid Router to bridge your assets into Secret Network.
Go to Secret Tunnel
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
</a>
</div>

{/* Squid Router Section */}
<div className="py-4">
<p>Alternatively, use Squid Router to bridge your assets into Secret Network.</p>
<a
target="_blank"
className="text-white block my-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
href="#"
className="text-white block mt-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
onClick={() => {
trackMixPanelEvent('Clicked Squid Router Modal (from Bridge page)')
setIsSquidModalOpen(true)
}}
>
Use Squid Router
</a>
</p>
<SquidModal
open={isSquidModalOpen}
onClose={() => {
setIsSquidModalOpen(false)
document.body.classList.remove('overflow-hidden')
}}
theme={theme}
/>
<p>
You can also use Swing Swap to bridge your assets into Secret Network.
</div>

{/* Swing Swap Section */}
<div className="py-4">
<p>You can also use Swing Swap to bridge your assets into Secret Network.</p>
<a
target="_blank"
className="text-white block my-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
href="#"
className="text-white block mt-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
onClick={() => {
trackMixPanelEvent('Clicked Squid Router Modal (from Bridge page)')
trackMixPanelEvent('Clicked Swing Swap Modal (from Bridge page)')
setIsSwingModalOpen(true)
}}
>
Use Swing Swap
</a>
</p>
<SwingModal
open={isSwingModalOpen}
onClose={() => {
setIsSwingModalOpen(false)
document.body.classList.remove('overflow-hidden')
}}
theme={theme}
secretAddress={''}
/>
<p>
Or anonymously bridge your assets into SCRT using Houdini Swap.
<a
target="_blank"
className="text-white block my-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
onClick={() => {
trackMixPanelEvent('Clicked Houdini Swap Modal (from Bridge page)')
setIsHoudiniModalOpen(true)
}}
>
Use Houdini Swap
</a>
</p>
<HoudiniModal
open={isHoudiniModalOpen}
onClose={() => {
setIsHoudiniModalOpen(false)
document.body.classList.remove('overflow-hidden')
}}
theme={theme}
secretAddress={walletAddress}
/>
<p>
<span className="select-none">
<span className="inline-block bg-emerald-500 dark:bg-emerald-800 text-white text-xs py-0.5 px-1.5 rounded uppercase font-semibold">
Protip
</span>{' '}
–{' '}
</span>
If you want to bridge Axelar Assets (such as USDC, USDT) from other Cosmos based chains (Osmosis, Kujira) to
Secret, please use the IBC tab:
<Link
to={'/ibc'}
className="text-white block my-6 p-3 w-full text-center font-semibold bg-cyan-600 dark:bg-cyan-600 rounded-lg text-sm hover:bg-cyan-500 dark:hover:bg-cyan-500 focus:bg-cyan-600 dark:focus:bg-cyan-600 transition-colors"
onClick={() => {
trackMixPanelEvent('Clicked IBC transfer link (from Bridge page)')
}}
>
<FontAwesomeIcon icon={faShuffle} className="mr-2" />
Go to IBC Transfers
</Link>
</p>
</div>
</div>

{/* Modals should be outside the divided container to avoid being affected by divide-y */}
<SquidModal
open={isSquidModalOpen}
onClose={() => {
setIsSquidModalOpen(false)
document.body.classList.remove('overflow-hidden')
}}
theme={theme}
/>
<SwingModal
open={isSwingModalOpen}
onClose={() => {
setIsSwingModalOpen(false)
document.body.classList.remove('overflow-hidden')
}}
theme={theme}
secretAddress={''}
/>
</>
)
}
Expand Down
65 changes: 0 additions & 65 deletions src/pages/bridge/HoudiniModal.tsx
View file

This file was deleted.

0 comments on commit 9e93c43

Please sign in to comment.