Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin' into mo-tests
Browse files Browse the repository at this point in the history
  • Loading branch information
dimpar committed Apr 15, 2024
2 parents 01ccc4a + d742627 commit 9fb02e1
Show file tree
Hide file tree
Showing 34 changed files with 458 additions and 133 deletions.
1 change: 1 addition & 0 deletions dapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@reduxjs/toolkit": "^2.2.0",
"@sentry/react": "^7.98.0",
"@sentry/types": "^7.102.0",
"@tabler/icons-react": "^3.1.0",
"@tanstack/react-table": "^8.11.3",
"@types/react-slick": "^0.23.13",
"axios": "^1.6.7",
Expand Down
3 changes: 2 additions & 1 deletion dapp/src/acre-react/hooks/useStakeFlow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ export function useStakeFlow(): UseStakeFlowReturn {

const stake = useCallback(async () => {
if (!stakeFlow) throw new Error("Initialize stake first")

// The current waiting time for repeat transactions is very long.
// TODO: Find the right value and pass it as additional options.
await stakeFlow.stake()
}, [stakeFlow])

Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react"
import { createIcon } from "@chakra-ui/react"

export const Bitcoin = createIcon({
displayName: "Bitcoin",
export const BitcoinIcon = createIcon({
displayName: "BitcoinIcon",
viewBox: "0 0 28 28",
path: [
<g clipPath="url(#clip0_1935_2913)">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from "react"
import { createIcon } from "@chakra-ui/react"

export const ConnectETHAccount = createIcon({
displayName: "ConnectETHAccount",
export const CableWithPlugIcon = createIcon({
displayName: "CableWithPlugIcon",
viewBox: "0 0 127 122",
defaultProps: {
fill: "none",
Expand All @@ -13,35 +13,17 @@ export const ConnectETHAccount = createIcon({
stroke="url(#paint0_linear_3172_24686)"
strokeWidth="2"
/>,
<g clipPath="url(#clip0_3172_24686)">
<rect
x="33"
y="33"
width="56"
height="56"
rx="28"
fill="white"
fillOpacity="0.1"
/>
<rect x="33" y="33" width="56" height="56" fill="#231F20" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M60.9967 46.0004L60.9969 46V46.0007L70.4934 61.4816L60.9969 66.9965V66.9969L60.9967 66.9967L60.9965 66.9968L60.996 66.9963L51.5 61.4816L60.9961 46.0014L60.9965 46L60.9967 46.0004ZM60.9969 76.3989V76.401L51.5 63.2528L60.9969 68.7652V68.7664L60.9978 68.7654L70.5003 63.2529L60.9978 76.4012L60.9969 76.3989Z"
fill="#FFFDF9"
/>
</g>,
<path
d="M127 55C127 58.866 123.866 62 120 62C116.134 62 113 58.866 113 55L113 50L127 50L127 55Z"
fill="#F34900"
fill="currentColor"
/>,
<path
d="M125 50L122 50L122 46.5C122 45.6716 122.672 45 123.5 45C124.328 45 125 45.6716 125 46.5L125 50Z"
fill="#F34900"
fill="currentColor"
/>,
<path
d="M118 50L115 50L115 46.5C115 45.6716 115.672 45 116.5 45C117.328 45 118 45.6716 118 46.5L118 50Z"
fill="#F34900"
fill="currentColor"
/>,
<path
d="M122.5 52.5L117.5 57.5M117.5 52.5L122.5 57.5"
Expand All @@ -59,8 +41,8 @@ export const ConnectETHAccount = createIcon({
y2="62.5"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F34900" stopOpacity="0" />
<stop offset="1" stopColor="#F34900" />
<stop stopColor="currentColor" stopOpacity="0" />
<stop offset="1" stopColor="currentColor" />
</linearGradient>
<clipPath id="clip0_3172_24686">
<rect x="33" y="33" width="56" height="56" rx="28" fill="white" />
Expand Down
65 changes: 0 additions & 65 deletions dapp/src/assets/icons/ConnectBTCAccount.tsx

This file was deleted.

23 changes: 0 additions & 23 deletions dapp/src/assets/icons/Ethereum.tsx

This file was deleted.

31 changes: 31 additions & 0 deletions dapp/src/assets/icons/EthereumIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from "react"
import { createIcon } from "@chakra-ui/react"

export const EthereumIcon = createIcon({
displayName: "EthereumIcon",
viewBox: "0 0 56 57",
path: [
<g clipPath="url(#clip0_7755_23923)">
<rect
y="0.5"
width="56"
height="56"
rx="28"
fill="white"
fillOpacity="0.1"
/>
<rect y="0.5" width="56" height="56" fill="#231F20" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M27.9967 13.5004L27.9969 13.5V13.5007L37.4934 28.9816L27.9969 34.4965V34.4969L27.9967 34.4967L27.9965 34.4968L27.996 34.4963L18.5 28.9816L27.9961 13.5014L27.9965 13.5L27.9967 13.5004ZM27.9969 43.8989V43.901L18.5 30.7528L27.9969 36.2652V36.2664L27.9978 36.2654L37.5003 30.7529L27.9978 43.9012L27.9969 43.8989Z"
fill="#FFFDF9"
/>
</g>,
<defs>
<clipPath id="clip0_7755_23923">
<rect y="0.5" width="56" height="56" rx="28" fill="white" />
</clipPath>
</defs>,
],
})
7 changes: 3 additions & 4 deletions dapp/src/assets/icons/index.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
export * from "./Info"
export * from "./Bitcoin"
export * from "./Ethereum"
export * from "./ArrowUpRight"
export * from "./ArrowLeft"
export * from "./ArrowRight"
export * from "./AcreLogo"
export * from "./ConnectBTCAccount"
export * from "./ConnectETHAccount"
export * from "./AlertInfo"
export * from "./stBTC"
export * from "./BTC"
Expand All @@ -19,3 +15,6 @@ export * from "./SortDESC"
export * from "./Pause"
export * from "./ChevronRight"
export * from "./LoadingSpinnerSuccessIcon"
export * from "./BitcoinIcon"
export * from "./EthereumIcon"
export * from "./CableWithPlugIcon"
4 changes: 2 additions & 2 deletions dapp/src/components/Header/ConnectWallet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from "#/hooks"
import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
import { TextMd } from "#/components/shared/Typography"
import { Bitcoin, EthereumIcon } from "#/assets/icons"
import { BitcoinIcon, EthereumIcon } from "#/assets/icons"
import { Account } from "@ledgerhq/wallet-api-client"
import { CURRENCY_ID_BITCOIN } from "#/constants"
import {
Expand Down Expand Up @@ -64,7 +64,7 @@ export default function ConnectWallet() {
<Button
variant="card"
colorScheme={customDataBtcAccount.colorScheme}
leftIcon={<Icon as={Bitcoin} boxSize={6} />}
leftIcon={<Icon as={BitcoinIcon} boxSize={6} />}
onClick={handleConnectBitcoinAccount}
>
{customDataBtcAccount.text}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ import {
import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
import { logPromiseFailure } from "#/utils"
import StakeFormModal from "../ActiveStakingStep/StakeFormModal"
import UnstakeFormModal from "../ActiveUnstakingStep/UnstakeFormModal"
import StakeFormModal from "./ActiveStakingStep/StakeFormModal"
import UnstakeFormModal from "./ActiveUnstakingStep/UnstakeFormModal"

const TABS = Object.values(ACTION_FLOW_TYPES)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export default function DepositBTCModal() {
setStatus(PROCESS_STATUSES.SUCCEEDED)
}, [setStatus])

// TODO: After a failed attempt, we should display the message
const onStakeBTCError = useCallback(() => {
setStatus(PROCESS_STATUSES.FAILED)
}, [setStatus])
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React, { useMemo } from "react"
import {
Box,
Button,
HStack,
Icon,
ModalBody,
ModalFooter,
ModalHeader,
} from "@chakra-ui/react"
import { CableWithPlugIcon } from "#/assets/icons"
import { TextMd, TextSm } from "#/components/shared/Typography"
import IconWrapper from "#/components/shared/IconWrapper"
import { getExpirationTimestamp, getPercentValue } from "#/utils"
import { useCountdown } from "#/hooks"
import { ONE_MINUTE_IN_SECONDS, ONE_SEC_IN_MILLISECONDS } from "#/constants"
import { IconShieldCheckFilled, IconX } from "@tabler/icons-react"

const getCounterData = (minutes: string, seconds: string) => {
const isLessThanMinute = parseInt(minutes, 10) <= 0

const progressPercent = `${
isLessThanMinute
? getPercentValue(parseInt(seconds, 10), ONE_MINUTE_IN_SECONDS)
: 100
}%`
const label = `${isLessThanMinute ? "0" : "1"}:${seconds}`

return { label, progressPercent }
}

export default function RetryModal({ retry }: { retry: () => void }) {
const retryTimestamp = useMemo(
() =>
getExpirationTimestamp(ONE_MINUTE_IN_SECONDS * ONE_SEC_IN_MILLISECONDS),
[],
)
const { minutes, seconds } = useCountdown(retryTimestamp, true, retry)

const { label, progressPercent } = getCounterData(minutes, seconds)

return (
<>
<ModalHeader color="red.400">Oops! There was an error.</ModalHeader>
<ModalBody gap={10} pt={4}>
<IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.400">
<Icon as={IconX} color="red.400" boxSize={14} strokeWidth={1} />
</IconWrapper>
<TextMd>
Your deposit didn&apos;t go through but no worries, your funds are
safe.
</TextMd>
<HStack gap={1}>
<TextMd>Auto-retry in</TextMd>
<TextMd fontWeight="bold" textAlign="left" minW={10}>
{label}
</TextMd>
<Box
w={3}
h={3}
aspectRatio={1}
borderRadius="50%"
background={`conic-gradient(var(--chakra-colors-brand-400) ${progressPercent}, transparent 0)`}
transition="background"
/>
<Box />
</HStack>
</ModalBody>
<ModalFooter mt={4}>
<Button size="lg" width="100%" onClick={retry}>
Retry
</Button>
<HStack>
<Icon as={IconShieldCheckFilled} boxSize={5} color="gold.700" />
<TextSm color="grey.700">Your funds are secure.</TextSm>
</HStack>
</ModalFooter>
</>
)
}
Loading

0 comments on commit 9fb02e1

Please sign in to comment.