Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(synapse-interface): Adds Hyperliquid bridge & deposit support #3461

Merged
merged 13 commits into from
Dec 13, 2024
Merged

feat(synapse-interface): Adds Hyperliquid bridge & deposit support #3461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c445292
Hyperliquid bridge wip
abtestingalpha Dec 13, 2024
d10ee5c
Moves receipt into Activity transactions
abtestingalpha Dec 13, 2024
5254bbc
Lint
abtestingalpha Dec 13, 2024
e1d62dc
Spellchecker
abtestingalpha Dec 13, 2024
e3535b1
Rec changes
abtestingalpha Dec 13, 2024
f948d4d
Announcement banner
abtestingalpha Dec 13, 2024
9e9afb0
Checks undefined fromToken
abtestingalpha Dec 13, 2024
af05fe7
Step indicator
abtestingalpha Dec 13, 2024
9dfe04f
Minimum deposit
abtestingalpha Dec 13, 2024
b1503aa
Remove approval
abtestingalpha Dec 13, 2024
91798b5
Fix svg console errors
abtestingalpha Dec 13, 2024
725c9a4
Merge branch 'master' into fe/hyperliquid
abtestingalpha Dec 13, 2024
4e225ee
Spellcheck
abtestingalpha Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions cspell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,13 @@
"ethersproject",
"ethtx",
"extralight",
"fastbridge",
"ftmscan",
"getids",
"gitbook",
"gorm",
"headlessui",
"hyperliquid",
"incentivized",
"interchain",
"ipfs",
Expand Down
2 changes: 1 addition & 1 deletion docs/bridge/blog-posts/2024-12-12-fastbridgev2-post.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ The real-time nature of WebSockets dramatically reduces quote latency. Rather th

:::info

The Synapse Intent Network is backwards combatible with the original Fastbridge Contracts.
The Synapse Intent Network is backwards compatible with the original Fastbridge Contracts.

:::

Expand Down
3 changes: 3 additions & 0 deletions packages/synapse-interface/assets/chains/hyperliquid.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
181 changes: 181 additions & 0 deletions packages/synapse-interface/components/HyperliquidDepositInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
import { ARBITRUM } from '@/constants/chains/master'

export const HyperliquidDepositInfo = ({
fromChainId,
isOnArbitrum,
hasDepositedOnHyperliquid,
}) => {
Comment on lines +3 to +7
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add TypeScript types to component props

Adding TypeScript types will improve type safety and developer experience:

-export const HyperliquidDepositInfo = ({
+interface HyperliquidDepositInfoProps {
+  fromChainId: number;
+  isOnArbitrum: boolean;
+  hasDepositedOnHyperliquid: boolean;
+}
+
+export const HyperliquidDepositInfo: React.FC<HyperliquidDepositInfoProps> = ({
   fromChainId,
   isOnArbitrum,
   hasDepositedOnHyperliquid,
 }) => {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const HyperliquidDepositInfo = ({
fromChainId,
isOnArbitrum,
hasDepositedOnHyperliquid,
}) => {
interface HyperliquidDepositInfoProps {
fromChainId: number;
isOnArbitrum: boolean;
hasDepositedOnHyperliquid: boolean;
}
export const HyperliquidDepositInfo: React.FC<HyperliquidDepositInfoProps> = ({
fromChainId,
isOnArbitrum,
hasDepositedOnHyperliquid,
}) => {

if (fromChainId !== ARBITRUM.id) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="text-[#97FCE4] mb-2">Step 1</div>
<div className="flex items-center space-x-2">
<GreenStep1Circle />
<div>Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-white/65">Step 2</div>
<div className="flex items-center space-x-2">
<GrayStep2Circle />
<div className="text-white/65">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}

if (hasDepositedOnHyperliquid) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="mb-2 text-white/65">Step 1</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-white/65">Step 2</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}

if (fromChainId === ARBITRUM.id && isOnArbitrum) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="mb-2 text-white/65">Step 1</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-[#97FCE4]">Step 2</div>
<div className="flex items-center space-x-2">
<GreenStep2Circle />
<div className="text-[#97FCE4]">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}
}
Comment on lines +3 to +76
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Ensure all code paths return a value in 'HyperliquidDepositInfo' component

The HyperliquidDepositInfo function may not return any value if none of the conditions are met. This could lead to rendering issues or unexpected behavior. Ensure that all possible code paths return a React element.

Consider adding a default return statement at the end of the function:

  }

+ return null; // or return a default component or message
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const HyperliquidDepositInfo = ({
fromChainId,
isOnArbitrum,
hasDepositedOnHyperliquid,
}) => {
if (fromChainId !== ARBITRUM.id) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="text-[#97FCE4] mb-2">Step 1</div>
<div className="flex items-center space-x-2">
<GreenStep1Circle />
<div>Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-white/65">Step 2</div>
<div className="flex items-center space-x-2">
<GrayStep2Circle />
<div className="text-white/65">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}
if (hasDepositedOnHyperliquid) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="mb-2 text-white/65">Step 1</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-white/65">Step 2</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}
if (fromChainId === ARBITRUM.id && isOnArbitrum) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="mb-2 text-white/65">Step 1</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-[#97FCE4]">Step 2</div>
<div className="flex items-center space-x-2">
<GreenStep2Circle />
<div className="text-[#97FCE4]">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}
}
export const HyperliquidDepositInfo = ({
fromChainId,
isOnArbitrum,
hasDepositedOnHyperliquid,
}) => {
if (fromChainId !== ARBITRUM.id) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="text-[#97FCE4] mb-2">Step 1</div>
<div className="flex items-center space-x-2">
<GreenStep1Circle />
<div>Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-white/65">Step 2</div>
<div className="flex items-center space-x-2">
<GrayStep2Circle />
<div className="text-white/65">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}
if (hasDepositedOnHyperliquid) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="mb-2 text-white/65">Step 1</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-white/65">Step 2</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}
if (fromChainId === ARBITRUM.id && isOnArbitrum) {
return (
<div className="flex flex-col p-2 mb-2 space-y-1 text-sm ">
<div className="flex justify-between">
<div>
<div className="mb-2 text-white/65">Step 1</div>
<div className="flex items-center space-x-2">
<CompletedCheckMarkCircle />
<div className="text-white/65">Bridge (Arbitrum)</div>
</div>
</div>
<div>
<div className="mb-2 text-[#97FCE4]">Step 2</div>
<div className="flex items-center space-x-2">
<GreenStep2Circle />
<div className="text-[#97FCE4]">Deposit (Hyperliquid)</div>
</div>
</div>
</div>
</div>
)
}
return null; // or return a default component or message
}


const CompletedCheckMarkCircle = () => {
return (
<svg
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1"
y="1"
width="32"
height="32"
rx="16"
stroke="#565058"
strokeWidth="2"
/>
<path
d="M13.7112 23.204C13.7112 23.06 13.6952 22.996 13.6312 22.996L13.2632 23.172C13.2632 23.092 13.2152 23.044 13.1352 23.012L13.0072 22.996C12.8952 22.996 12.8472 23.012 12.6872 23.108C12.6392 23.012 12.5752 22.9 12.5272 22.804C12.1112 22.004 11.6792 20.804 11.4872 20.276C11.3912 20.004 11.2952 19.444 11.1832 18.596C11.3112 18.676 11.4072 18.708 11.4552 18.708C11.5192 18.708 11.5992 18.596 11.6632 18.372C11.6952 18.42 11.7592 18.436 11.8392 18.436C11.8872 18.436 11.9512 18.42 11.9832 18.372L12.2392 17.988L12.5272 18.084H12.5432C12.5752 18.084 12.6232 18.036 12.7032 17.988C12.7832 17.94 12.8472 17.908 12.8952 17.908L12.9432 17.924C13.1992 18.052 13.3752 18.276 13.4552 18.628C13.6472 19.444 13.8232 19.844 14.0312 19.844C14.2072 19.844 14.4472 19.636 14.7032 19.236C14.9592 18.836 15.2152 18.292 15.5032 17.636C15.5192 17.764 15.5352 17.828 15.5672 17.828C15.6632 17.828 15.9032 17.268 16.4952 16.324C17.3752 14.9 19.5512 12.164 20.1112 11.78C20.5272 11.492 20.8472 11.22 21.0712 10.98C21.0392 11.14 21.0072 11.252 21.0072 11.3C21.0072 11.348 21.0392 11.364 21.0712 11.364L21.5192 11.14V11.204C21.5192 11.284 21.5352 11.332 21.5832 11.332C21.6472 11.332 21.9032 11.076 21.9352 10.98L21.9032 11.204L22.4472 10.884L22.3192 11.172C22.4792 11.06 22.6072 10.996 22.6872 10.996C22.7672 10.996 22.8152 11.124 22.8152 11.204C22.8152 11.332 22.7032 11.508 22.5272 11.732C22.3352 11.988 21.8552 12.484 20.4152 14.132C19.7912 14.836 17.0232 18.596 16.4952 19.492L15.5032 21.172C15.0712 21.892 14.7992 22.356 14.6552 22.532C14.5112 22.708 14.3352 22.884 14.1272 23.044L13.9832 22.964L13.8552 23.044L13.7112 23.204Z"
fill="#97FCE4"
/>
<circle cx="17" cy="17" r="16" stroke="#565058" strokeWidth="2" />
</svg>
)
}

const GreenStep1Circle = () => {
return (
<svg
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1"
y="1"
width="32"
height="32"
rx="16"
stroke="#97FCE4"
strokeWidth="2"
/>
<path
d="M17.2346 22.5V13.124C16.4666 13.828 15.6346 14.18 14.5786 14.372V13.076C15.6986 12.836 16.6746 12.26 17.4586 11.3H18.6106V22.5H17.2346Z"
fill="#FCFCFD"
/>
</svg>
)
}

const GreenStep2Circle = () => {
return (
<svg
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1"
y="1"
width="32"
height="32"
rx="16"
stroke="#97FCE4"
strokeWidth="2"
/>
<path
d="M13.5034 22.5L13.4874 21.236L17.6954 17.604C19.0074 16.468 19.5674 15.54 19.5674 14.532C19.5674 13.284 18.7354 12.468 17.4234 12.468C15.8554 12.468 14.9754 13.572 15.1354 15.236L13.7274 15.14C13.5514 12.788 15.0874 11.172 17.4234 11.172C19.6314 11.172 21.0714 12.5 21.0714 14.532C21.0714 15.892 20.3194 17.14 18.5914 18.596L15.5514 21.188H21.0714V22.5H13.5034Z"
fill="#97FCE4"
/>
</svg>
)
}

const GrayStep2Circle = () => {
return (
<svg
width="34"
height="34"
viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1"
y="1"
width="32"
height="32"
rx="16"
stroke="#565058"
strokeWidth="2"
/>
<path
d="M13.5034 22.5L13.4874 21.236L17.6954 17.604C19.0074 16.468 19.5674 15.54 19.5674 14.532C19.5674 13.284 18.7354 12.468 17.4234 12.468C15.8554 12.468 14.9754 13.572 15.1354 15.236L13.7274 15.14C13.5514 12.788 15.0874 11.172 17.4234 11.172C19.6314 11.172 21.0714 12.5 21.0714 14.532C21.0714 15.892 20.3194 17.14 18.5914 18.596L15.5514 21.188H21.0714V22.5H13.5034Z"
fill="#C0BCC2"
/>
</svg>
)
}
Comment on lines +78 to +181
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add accessibility attributes to SVG components

SVG components should include proper accessibility attributes:

 const CompletedCheckMarkCircle = () => {
   return (
     <svg
+      role="img"
+      aria-label="Step completed"
       width="34"
       height="34"

Apply similar changes to other SVG components with appropriate aria-labels.

Committable suggestion skipped: line range outside the PR's diff.

4 changes: 2 additions & 2 deletions packages/synapse-interface/components/StateManagedBridge/BridgeQuoteResetTimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const AnimatedLoadingCircle = () => {
fill="none"
className="absolute block -rotate-90"
>
<circle r="8" pathLength="1" stroke-dashArray="0.05" stroke-opacity=".5">
<circle r="8" pathLength="1" strokeDasharray="0.05" stroke-opacity=".5">
<animate
attributeName="stroke-dashoffset"
to="-1"
Expand Down Expand Up @@ -95,7 +95,7 @@ const AnimatedProgressCircle = ({
begin={`${convertMsToSeconds(duration)}s`}
/>
</circle>
<circle r="8" stroke-dasharray="1" pathLength="1">
<circle r="8" strokeDasharray="1" pathLength="1">
<animate
attributeName="stroke-dashoffset"
values="2; 1"
Expand Down
17 changes: 16 additions & 1 deletion packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { TransactionButton } from '@/components/buttons/TransactionButton'
import { useBridgeValidations } from './hooks/useBridgeValidations'
import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
import { useConfirmNewBridgePrice } from './hooks/useConfirmNewBridgePrice'
import { HYPERLIQUID } from '@/constants/chains/master'
import { HYPERLIQUID_MINIMUM_DEPOSIT } from '@/constants'

export const BridgeTransactionButton = ({
approveTxn,
Expand Down Expand Up @@ -57,6 +59,13 @@ export const BridgeTransactionButton = ({
const { showDestinationWarning, isDestinationWarningAccepted } =
useBridgeDisplayState()

const hasHyperliquidMinDeposit =
toChainId === HYPERLIQUID.id
? Number(debouncedFromValue) > HYPERLIQUID_MINIMUM_DEPOSIT
? true
: false
: true
Comment on lines +62 to +67
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Simplify the nested ternary operator

The nested ternary operator can be simplified to improve readability.

-  const hasHyperliquidMinDeposit =
-    toChainId === HYPERLIQUID.id
-      ? Number(debouncedFromValue) > HYPERLIQUID_MINIMUM_DEPOSIT
-        ? true
-        : false
-      : true
+  const hasHyperliquidMinDeposit =
+    toChainId !== HYPERLIQUID.id || 
+    Number(debouncedFromValue) > HYPERLIQUID_MINIMUM_DEPOSIT
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const hasHyperliquidMinDeposit =
toChainId === HYPERLIQUID.id
? Number(debouncedFromValue) > HYPERLIQUID_MINIMUM_DEPOSIT
? true
: false
: true
const hasHyperliquidMinDeposit =
toChainId !== HYPERLIQUID.id ||
Number(debouncedFromValue) > HYPERLIQUID_MINIMUM_DEPOSIT
🧰 Tools
🪛 Biome (1.9.4)

[error] 64-66: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)


const {
hasValidInput,
hasValidQuote,
Expand All @@ -78,7 +87,8 @@ export const BridgeTransactionButton = ({
(isConnected && !hasValidQuote) ||
(isConnected && !hasSufficientBalance) ||
(isConnected && isQuoteStale) ||
(destinationAddress && !isAddress(destinationAddress))
(destinationAddress && !isAddress(destinationAddress)) ||
!hasHyperliquidMinDeposit

let buttonProperties

Expand Down Expand Up @@ -138,6 +148,11 @@ export const BridgeTransactionButton = ({
label: t('Amount must be greater than fee'),
onClick: null,
}
} else if (!hasHyperliquidMinDeposit) {
buttonProperties = {
label: `${HYPERLIQUID_MINIMUM_DEPOSIT} USDC Minimum`,
onClick: null,
}
} else if (
bridgeQuote.bridgeModuleName !== null &&
!isLoading &&
Expand Down
Loading
Loading