38 |
51 | Requesting...
52 |
53 | )
54 | }
55 |
56 | // Untouched
57 | if (feeGrantStatus === 'untouched') {
58 | return (
59 |
68 | )
69 | }
70 |
71 | // Success
72 | if (feeGrantStatus === 'success') {
73 | return (
74 |
75 |
78 | )
79 | }
80 |
81 | // Fail
82 | if (feeGrantStatus === 'fail') {
83 | return (
84 |
85 |
88 | )
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/src/components/FeedbackButton.tsx:
--------------------------------------------------------------------------------
1 | import './FloatingCTAButton.scss'
2 |
3 | interface Props {
4 | url: string
5 | }
6 |
7 | function FeedbackButton(props: Props) {
8 | return (
9 |
10 |
15 | Feedback
16 |
17 |
18 | )
19 | }
20 |
21 | export default FeedbackButton
22 |
--------------------------------------------------------------------------------
/src/components/FloatingCTAButton.scss:
--------------------------------------------------------------------------------
1 | @-webkit-keyframes textFadeIn {
2 | from {
3 | opacity: 0;
4 | -webkit-transform: translate3d(-100%, 0, 0);
5 | transform: translate3d(-100%, 0, 0);
6 | }
7 |
8 | to {
9 | opacity: 1;
10 | -webkit-transform: translate3d(0, 0, 0);
11 | transform: translate3d(0, 0, 0);
12 | }
13 | }
14 | @keyframes textFadeIn {
15 | from {
16 | opacity: 0;
17 | -webkit-transform: translate3d(-100%, 0, 0);
18 | transform: translate3d(-100%, 0, 0);
19 | }
20 |
21 | to {
22 | opacity: 1;
23 | -webkit-transform: translate3d(0, 0, 0);
24 | transform: translate3d(0, 0, 0);
25 | }
26 | }
27 |
28 | .floatingCTAButton {
29 | position: fixed;
30 | bottom: 20px;
31 | right: 20px;
32 | z-index: 40;
33 | overflow: hidden;
34 | color: #fff;
35 | border-radius: 9999px;
36 | display: flex;
37 | flex-direction: row;
38 | align-items: center;
39 | padding: 0.5rem;
40 |
41 | .icon-circle {
42 | width: 1.75rem;
43 | height: 1.75rem;
44 | font-size: 1.5rem;
45 | margin: 0.5rem;
46 | display: inline-block;
47 | z-index: 5000 !important;
48 | transition: padding-right 350ms ease;
49 | flex: 0 1 auto;
50 | }
51 |
52 | .cta-text {
53 | flex: 0 1 auto;
54 | visibility: hidden;
55 | padding: 0;
56 | width: 0;
57 | height: 0;
58 | z-index: 1;
59 | transition: padding 350ms ease-in-out;
60 | }
61 |
62 | &:hover {
63 | .icon-circle {
64 | }
65 | .cta-text {
66 | visibility: visible;
67 | padding: 0 1.25rem 0 0.25rem;
68 | width: inherit;
69 | height: inherit;
70 |
71 | animation: textFadeIn;
72 | animation-duration: 350ms;
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/components/FloatingCTAButton.tsx:
--------------------------------------------------------------------------------
1 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
2 | import { faComment } from '@fortawesome/free-solid-svg-icons'
3 | import './FloatingCTAButton.scss'
4 | import { Link } from 'react-router-dom'
5 |
6 | interface Props {
7 | url: string
8 | text: string
9 | }
10 |
11 | function FloatingCTAButton(props: Props) {
12 | return (
13 |
14 |
15 |
18 |
19 | )
20 | }
21 |
22 | export default FloatingCTAButton
23 |
--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import Title from './Title'
2 |
3 | interface Props {
4 | title: string
5 | description?: string
6 | }
7 |
8 | const Header = (props: Props) => {
9 | return (
10 | <>
11 | {/* Title */}
12 | 16 | {props.description} 17 |
18 | )} 19 | 20 | ) 21 | } 22 | 23 | export default Header 24 | -------------------------------------------------------------------------------- /src/components/PercentagePicker.tsx: -------------------------------------------------------------------------------- 1 | interface Props { 2 | setAmountByPercentage: (percentage: number) => void 3 | disabled?: boolean 4 | } 5 | 6 | export default function PercentagePicker(props: Props) { 7 | return ( 8 |
9 |
17 |
25 |
33 |
41 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Title.tsx:
--------------------------------------------------------------------------------
1 | import Tooltip from '@mui/material/Tooltip'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
4 |
5 | interface IProps {
6 | title: string
7 | tooltip?: string
8 | className?: string
9 | }
10 |
11 | export default function Title(props: IProps) {
12 | function TitleContent() {
13 | return (
14 |
15 |
22 | )
23 | }
24 |
25 | if (props.tooltip) {
26 | return (
27 | {props.title}
16 | {props.tooltip ? ( 17 | 18 |
25 | {/* Search */}
26 |
42 |
43 |
27 |
41 |
28 |
40 |
29 |
31 | setSearchQuery(e.target.value)}
34 | type="text"
35 | id="search"
36 | className="block w-full sm:w-72 p-2.5 pl-10 text-sm rounded-lg text-neutral-800 dark:text-white bg-white dark:bg-neutral-800 placeholder-neutral-600 dark:placeholder-neutral-400 border border-neutral-300 dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-cyan-500"
37 | placeholder="Search Asset"
38 | />
39 |
44 | {tokens
45 | ? displayedAssets.map((token: Token, i: number) =>
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/Wallet/StatusDot.tsx:
--------------------------------------------------------------------------------
1 | type Status = 'connected' | 'disconnected'
2 |
3 | type Props = {
4 | status: Status
5 | }
6 |
7 | function StatusDot(props: Props) {
8 | if (props.status === 'connected') {
9 | return (
10 |
11 |
12 |
13 |
14 | )
15 | }
16 |
17 | return
18 | }
19 |
20 | export default StatusDot
21 |
--------------------------------------------------------------------------------
/src/context/ThemeContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useEffect, useState } from 'react'
2 | import { useUserPreferencesStore } from 'store/UserPreferences'
3 | import { Theme } from 'types/Theme'
4 |
5 | const ThemeContext = createContext(null)
6 |
7 | const ThemeContextProvider = ({ children }: any) => {
8 | // the value that will be given to the context
9 | const { theme } = useUserPreferencesStore()
10 |
11 | function setThemeClassToBody(theme: Theme) {
12 | if (theme === 'light') {
13 | document.body.classList.remove('dark')
14 | } else if (theme === 'dark') {
15 | document.body.classList.add('dark')
16 | }
17 | }
18 |
19 | // always save option to localStorage
20 | useEffect(() => {
21 | if (theme !== null) {
22 | setThemeClassToBody(theme)
23 | }
24 | }, [theme])
25 |
26 | return
4 |
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/pages/apps/components/SkeletonLoaders/SkeletonLoaders.tsx:
--------------------------------------------------------------------------------
1 | import SkeletonLoader from './SkeletonLoader'
2 |
3 | interface Props {
4 | amount?: number
5 | }
6 |
7 | /**
8 | * Render multiple SkeletonLoader components based on the specified amount.
9 | *
10 | * @param {number} [amount=20] - The number of SkeletonLoaders to render. Default is 20.
11 | *
12 | * @remarks
13 | * This function is intended for use in the /apps context.
14 | *
15 | * @example
16 | * ```tsx
17 | *
33 | {/* Image */}
34 | {props.image && (
35 |
56 |
57 | )
58 | }
59 |
60 | export default AppTile
61 |
--------------------------------------------------------------------------------
/src/pages/apps/components/tile/Tag.tsx:
--------------------------------------------------------------------------------
1 | import Badge from 'components/UI/Badge/Badge'
2 |
3 | interface Props {
4 | name: string
5 | }
6 | const Tag = (props: Props) => {
7 | return (
8 | <>
9 |
36 | 
41 |
42 | )}
43 | {/* Name */}
44 | {props.name}
45 |
46 | {/* Description */}
47 | {props.description}
48 |
49 | {/* Tags */}
50 | {props.tags?.length! > 0 && (
51 |
52 | {props.tags?.map((tag) =>
54 | )}
55 |
31 | {/* Inner */}
32 |
52 |
53 | )
54 | }
55 |
56 | export default SwingModal
57 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/CurrentPrice.tsx:
--------------------------------------------------------------------------------
1 | import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { toCurrencyString, trackMixPanelEvent } from 'utils/commons'
4 | import { Link } from 'react-router-dom'
5 | import { useUserPreferencesStore } from 'store/UserPreferences'
6 |
7 | interface Props {
8 | price?: number
9 | }
10 |
11 | export default function CurrentPrice(props: Props) {
12 | const { currency } = useUserPreferencesStore()
13 | return (
14 |
33 |
51 |
34 |
50 | {
37 | e.stopPropagation()
38 | }}
39 | >
40 | {/* Close Button */}
41 |
47 |
49 |
15 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/MiniTile.tsx:
--------------------------------------------------------------------------------
1 | interface Props {
2 | name: string
3 | value?: string
4 | }
5 |
6 | export default function MiniTile(props: Props) {
7 | return (
8 | <>
9 |
16 |
27 |
17 |
26 | Current Price
18 |
19 | {props.price ? (
20 | <>{toCurrencyString(props.price, currency)}
21 | ) : (
22 |
23 | )}
24 |
25 |
28 | {
32 | trackMixPanelEvent('Clicked buy SCRT on current price')
33 | }}
34 | >
35 | Get SCRT
36 |
39 |
10 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/PriceVolTVLChart/components/RangeSwitch.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react'
2 | import { PriceVolumeHistoryContext } from '../PriceVolumeTVL'
3 |
4 | function RangeSwitch() {
5 | const { chartType, chartRange, setChartRange } = useContext(PriceVolumeHistoryContext)
6 |
7 | return (
8 | <>
9 | {chartType !== 'TVL' && (
10 | <>
11 |
23 |
35 |
47 |
48 | )}
49 |
50 | {chartType === 'TVL' && (
51 | <>
52 |
64 |
65 | )}
66 |
67 | )
68 | }
69 |
70 | export default RangeSwitch
71 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/PriceVolTVLChart/components/TypeSwitch.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react'
2 | import { PriceVolumeHistoryContext } from '../PriceVolumeTVL'
3 |
4 | function TypeSwitch() {
5 | const { chartType, setChartType } = useContext(PriceVolumeHistoryContext)
6 |
7 | return (
8 | <>
9 |
11 |
20 | {props.name}
12 |
13 | {props.value ? (
14 | <>{props.value}
15 | ) : (
16 |
17 | )}
18 |
19 |
10 |
22 |
34 |
46 |
47 |
48 | )
49 | }
50 |
51 | export default TypeSwitch
52 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/QuadTile.tsx:
--------------------------------------------------------------------------------
1 | interface Item {
2 | key: string
3 | value: string
4 | }
5 |
6 | interface Props {
7 | item1?: Item
8 | item2?: Item
9 | item3?: Item
10 | item4?: Item
11 | }
12 |
13 | export default function QuadTile(props: Props) {
14 | return (
15 | <>
16 |
17 |
84 |
85 | )
86 | }
87 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/SocialMedia.tsx:
--------------------------------------------------------------------------------
1 | import { faDiscord, faTelegram, faTwitter } from '@fortawesome/free-brands-svg-icons'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { trackMixPanelEvent } from 'utils/commons'
4 |
5 | export default function SocialMedia() {
6 | return (
7 | <>
8 |
18 |
83 |
19 | {/* First Item */}
20 |
50 |
21 |
34 | {/* Second Item */}
35 |
22 |
33 |
23 | {props.item1?.key}
24 |
25 |
26 | {props.item1?.value ? (
27 | <>{props.item1.value}
28 | ) : (
29 |
30 | )}
31 |
32 |
36 |
49 |
37 |
48 |
38 | {props.item2?.key}
39 |
40 |
41 | {props.item2?.value ? (
42 | <>{props.item2?.value}
43 | ) : (
44 |
45 | )}
46 |
47 |
51 | {/* Third Item */}
52 |
82 |
53 |
66 | {/* Fourth Item */}
67 |
54 |
65 |
55 | {props.item3?.key}
56 |
57 |
58 | {props.item3?.value ? (
59 | <>{props.item3.value}
60 | ) : (
61 |
62 | )}
63 |
64 |
68 |
81 |
69 |
80 |
70 | {props.item4?.key}
71 |
72 |
73 | {props.item4?.value ? (
74 | <>{props.item4.value}
75 | ) : (
76 |
77 | )}
78 |
79 |
9 |
25 |
26 |
42 |
43 |
59 |
60 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/src/pages/ibc/components/IbcSelect.tsx:
--------------------------------------------------------------------------------
1 | interface IProps {
2 | imgSrc: string
3 | altText: string
4 | optionName: string
5 | }
6 |
7 | export default function IbcSelect(props: IProps) {
8 | return (
9 |
10 | 
11 | {props.optionName}
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/pages/ibc/components/ibcSchema.ts:
--------------------------------------------------------------------------------
1 | import * as yup from 'yup'
2 | import { isIbcMode } from 'types/IbcMode'
3 | import { chains } from 'utils/config'
4 |
5 | export const ibcSchema = yup.object().shape({
6 | amount: yup
7 | .number()
8 | .typeError('Please enter a valid amount')
9 | .required('Please enter a valid amount')
10 | .test('min-amount', 'Please enter a valid amount', function (value) {
11 | const { token } = this.parent
12 | if (token && typeof token.decimals === 'number') {
13 | const minAmount = Math.pow(10, -token.decimals)
14 | if (value < minAmount) {
15 | return this.createError({
16 | message: `Please enter an amount of at least ${minAmount}`
17 | })
18 | }
19 | }
20 | return true
21 | }),
22 | token: yup.mixed().required('Token is required'),
23 | chain: yup
24 | .mixed()
25 | .required('Please select a chain')
26 | .test('isValidChain', 'Please select a valid chain', (chainValue: any) =>
27 | Object.values(chains).some((chain) => chain.chain_name === chainValue.chain_name)
28 | ),
29 | ibcMode: yup
30 | .string()
31 | .required('Please pick an IBC Mode')
32 | .test('isIbcMode', 'Invalid IBC Mode', (value) => isIbcMode(value))
33 | })
34 |
--------------------------------------------------------------------------------
/src/pages/powertools/components/ApiStatusIcon.tsx:
--------------------------------------------------------------------------------
1 | import Tooltip from '@mui/material/Tooltip'
2 | import React from 'react'
3 | import { ApiStatus } from 'types/ApiStatus'
4 |
5 | type Props = {
6 | apiStatus?: ApiStatus
7 | }
8 |
9 | function ApiStatusIcon({ apiStatus = 'loading', ...props }: Props) {
10 | const colorClass: Record
47 | {/* Title*/}
48 |
54 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/src/pages/send/sendSchema.ts:
--------------------------------------------------------------------------------
1 | import * as yup from 'yup'
2 | import { validateAddress } from 'secretjs'
3 |
4 | export const sendSchema = yup.object().shape({
5 | amount: yup
6 | .number()
7 | .typeError('Please enter a valid amount')
8 | .required('Please enter a valid amount')
9 | .test('min-amount', 'Please enter a valid amount', function (value) {
10 | const { token } = this.parent
11 | if (token && typeof token.decimals === 'number') {
12 | const minAmount = Math.pow(10, -token.decimals)
13 | if (value < minAmount) {
14 | return this.createError({
15 | message: `Please enter an amount of at least ${minAmount}`
16 | })
17 | }
18 | }
19 | return true
20 | }),
21 | token: yup.mixed().required('Token is required'),
22 | recipient: yup
23 | .string()
24 | .required('Add a recipient')
25 | .test('isValidAddress', 'Please enter a valid recipient', (value) => {
26 | if (!value) return false
27 | return validateAddress(value).isValid
28 | }),
29 | memo: yup.string().max(255, 'Memo too long')
30 | })
31 |
--------------------------------------------------------------------------------
/src/pages/staking/components/ClaimRewardsModal.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, useState } from 'react'
2 | import { StakingContext } from 'pages/staking/Staking'
3 | import FeeGrant from '../../../components/FeeGrant/FeeGrant'
4 | import { useSecretNetworkClientStore } from 'store/secretNetworkClient'
5 | import Modal from 'components/UI/Modal/Modal'
6 | import { StakingService } from 'services/staking.service'
7 | import Button from 'components/UI/Button/Button'
8 | import { tokens } from 'utils/config'
9 |
10 | interface Props {
11 | open: boolean
12 | onClose: any
13 | }
14 |
15 | export default function ClaimRewardsModal(props: Props) {
16 | const { secretNetworkClient, feeGrantStatus } = useSecretNetworkClientStore()
17 |
18 | const { delegatorDelegations, totalPendingRewards } = useContext(StakingContext)
19 |
20 | if (!props.open) return null
21 |
22 | async function handleClaimRewards() {
23 | await StakingService.performClaimStakingRewards({
24 | delegatorDelegations: delegatorDelegations,
25 | secretNetworkClient: secretNetworkClient,
26 | feeGrantStatus: feeGrantStatus
27 | })
28 | }
29 |
30 | return (
31 | <>
32 |
51 |
53 |
40 |
54 |
41 |
47 | Claimable Amount
42 |
43 | {totalPendingRewards}
44 | {` SCRT`}
45 |
46 |
48 |
50 |
53 |
8 |
38 |
39 | )
40 | }
41 |
42 | export default NoScrtWarning
43 |
--------------------------------------------------------------------------------
/src/pages/staking/components/StakingStats/AvailableBalance.tsx:
--------------------------------------------------------------------------------
1 | import BigNumber from 'bignumber.js'
2 | import { APIContext } from 'context/APIContext'
3 | import { useContext, useEffect, useState } from 'react'
4 | import { useTokenPricesStore } from 'store/TokenPrices'
5 | import { useUserPreferencesStore } from 'store/UserPreferences'
6 | import { useSecretNetworkClientStore } from 'store/secretNetworkClient'
7 | import { toCurrencyString } from 'utils/commons'
8 | import { tokens } from 'utils/config'
9 | import { scrtToken } from 'utils/tokens'
10 |
11 | function AvailableBalance() {
12 | const { getBalance } = useSecretNetworkClientStore()
13 |
14 | const scrtBalance = getBalance(
15 | tokens.find((token) => token.name === 'SCRT'),
16 | false
17 | )
18 |
19 | const { currency } = useUserPreferencesStore()
20 | const { convertCurrency } = useContext(APIContext)
21 |
22 | const { getValuePrice, priceMapping } = useTokenPricesStore()
23 |
24 | const [availableBalanceInCurrency, setAvailableBalanceInCurrency] = useState
9 |
37 |
10 |
36 |
12 |
35 |
13 | {`You do not have any SCRT for Staking`}
14 |
15 | -
16 |
-
17 |
18 | Get SCRT
19 |
20 | 21 |
22 | -
23 |
29 | Learn more about Staking
30 |
31 | 32 |
33 |
40 |
63 | )
64 | }
65 |
66 | export default AvailableBalance
67 |
--------------------------------------------------------------------------------
/src/pages/staking/components/StakingStats/ClaimableRewards.tsx:
--------------------------------------------------------------------------------
1 | import BigNumber from 'bignumber.js'
2 | import Button from 'components/UI/Button/Button'
3 | import { APIContext } from 'context/APIContext'
4 | import { StakingContext } from 'pages/staking/Staking'
5 | import { useContext, useEffect, useState } from 'react'
6 | import { useTokenPricesStore } from 'store/TokenPrices'
7 | import { useUserPreferencesStore } from 'store/UserPreferences'
8 | import { toCurrencyString } from 'utils/commons'
9 | import { scrtToken } from 'utils/tokens'
10 |
11 | function ClaimableRewards() {
12 | const { setIsClaimRewardsModalOpen, totalPendingRewards } = useContext(StakingContext)
13 | const { convertCurrency } = useContext(APIContext)
14 | const { getValuePrice, priceMapping } = useTokenPricesStore()
15 | const { currency } = useUserPreferencesStore()
16 |
17 | const [claimableRewardsInCurrency, setClaimableRewardsInCurrency] = useStateAvailable Balance
41 |
42 |
43 | {scrtBalance !== null ? (
44 | <>{new BigNumber(scrtBalance).dividedBy(`1e${scrtToken.decimals}`).toNumber()}
45 | ) : (
46 |
53 |
47 |
48 |
49 | )}
50 |
51 | SCRT
52 |
54 | {availableBalanceInCurrency ? (
55 | <>{availableBalanceInCurrency}
56 | ) : (
57 |
62 |
58 |
59 |
60 | )}
61 |
41 |
71 | )
72 | }
73 |
74 | export default ClaimableRewards
75 |
--------------------------------------------------------------------------------
/src/pages/staking/components/StakingStats/StakingAmount.tsx:
--------------------------------------------------------------------------------
1 | import BigNumber from 'bignumber.js'
2 | import { APIContext } from 'context/APIContext'
3 | import { StakingContext } from 'pages/staking/Staking'
4 | import { useContext, useEffect, useState } from 'react'
5 | import { useTokenPricesStore } from 'store/TokenPrices'
6 | import { useUserPreferencesStore } from 'store/UserPreferences'
7 | import { Nullable } from 'types/Nullable'
8 | import { toCurrencyString } from 'utils/commons'
9 | import { scrtToken } from 'utils/tokens'
10 |
11 | type Props = {
12 | stakedAmount?: Nullable
42 |
65 | Claimable Rewards
43 |
44 | {totalPendingRewards !== null ? (
45 | <>
46 | {totalPendingRewards}
47 | SCRT
48 |
49 | ) : (
50 |
55 |
51 |
52 |
53 | )}
54 |
56 | {claimableRewardsInCurrency ? (
57 | <>{claimableRewardsInCurrency}
58 | ) : (
59 |
64 |
60 |
61 |
62 | )}
63 |
66 |
69 |
70 |
35 |
58 | )
59 | }
60 |
61 | export default StakingAmount
62 |
--------------------------------------------------------------------------------
/src/pages/staking/components/StakingStats/StakingStats.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react'
2 | import StakingAmount from './StakingAmount'
3 | import AvailableBalance from './AvailableBalance'
4 | import ClaimableRewards from './ClaimableRewards'
5 | import { StakingContext } from 'pages/staking/Staking'
6 |
7 | function StakingStats() {
8 | const { getTotalAmountStaked } = useContext(StakingContext)
9 |
10 | const stakedAmount = getTotalAmountStaked() || null
11 |
12 | return (
13 | Total Staked
36 |
37 | {props.stakedAmount !== null ? (
38 | <>
39 | {props.stakedAmount}
40 | SCRT
41 |
42 | ) : (
43 |
48 |
44 |
45 |
46 | )}
47 |
49 | {stakedAmountInCurrency ? (
50 | <>{stakedAmountInCurrency}
51 | ) : (
52 |
57 |
53 |
54 |
55 | )}
56 |
14 |
31 | )
32 | }
33 |
34 | export default StakingStats
35 |
--------------------------------------------------------------------------------
/src/pages/wrap/Wrap.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useContext, createContext } from 'react'
2 | import { Token, tokens } from 'utils/config'
3 | import { wrapPageTitle, wrapPageDescription, wrapJsonLdSchema } from 'utils/commons'
4 | import { Helmet } from 'react-helmet-async'
5 | import FeeGrantInfoModal from './components/FeeGrantInfoModal'
6 | import mixpanel from 'mixpanel-browser'
7 | import { WrappingMode, isWrappingMode } from 'types/WrappingMode'
8 | import { useSecretNetworkClientStore } from 'store/secretNetworkClient'
9 | import Title from 'components/Title'
10 | import WrapForm from './components/WrapForm'
11 | import SCRTUnwrapWarning from './components/SCRTUnwrapWarning'
12 |
13 | export function Wrap() {
14 | const { getBalance } = useSecretNetworkClientStore()
15 | const scrtBalance = getBalance(
16 | tokens.find((token) => token.name === 'SCRT'),
17 | false
18 | )
19 |
20 | useEffect(() => {
21 | if (import.meta.env.VITE_MIXPANEL_ENABLED === 'true') {
22 | mixpanel.init(import.meta.env.VITE_MIXPANEL_PROJECT_TOKEN, {
23 | debug: false
24 | })
25 | mixpanel.identify('Dashboard-App')
26 | mixpanel.track('Open Wrap Tab')
27 | }
28 | }, [])
29 |
30 | const infoMsg = `Converting publicly visible tokens into its privacy-preserving equivalent Secret Token and vice versa. These tokens are not publicly visible and require a viewing key.`
31 |
32 | const [isFeeGrantInfoModalOpen, setIsFeeGrantInfoModalOpen] = useState(false)
33 |
34 | return (
35 | <>
36 |
15 | {/* Total Staked */}
16 |
30 |
17 |
19 |
20 | {/* Available Balance */}
21 |
22 |
24 |
25 | {/* Claimable Rewards */}
26 |
27 |
29 |
68 | {/* Title: Secret Wrap / Secret Unwrap */}
69 |
76 |
77 | )
78 | }
79 |
--------------------------------------------------------------------------------
/src/pages/wrap/components/FeeGrantInfoModal.tsx:
--------------------------------------------------------------------------------
1 | import { faInfoCircle, faXmark } from '@fortawesome/free-solid-svg-icons'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { useEffect } from 'react'
4 |
5 | interface Props {
6 | open?: boolean
7 | onClose?: any
8 | }
9 |
10 | const FeeGrantInfoModal = (props: Props) => {
11 | // disable body scroll on open
12 | useEffect(() => {
13 | if (props.open) {
14 | document.body.classList.add('overflow-hidden')
15 | } else {
16 | document.body.classList.remove('overflow-hidden')
17 | }
18 | }, [props.open])
19 |
20 | if (!props.open) return null
21 |
22 | return (
23 |
73 |
75 |
24 |
67 | )
68 | }
69 |
70 | export default FeeGrantInfoModal
71 |
--------------------------------------------------------------------------------
/src/pages/wrap/components/SCRTUnwrapWarning.tsx:
--------------------------------------------------------------------------------
1 | import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 |
4 | function SCRTUnwrapWarning() {
5 | return (
6 |
25 |
66 |
26 |
65 | {
29 | e.stopPropagation()
30 | }}
31 | >
32 | {/* Header */}
33 |
64 |
34 |
40 |
41 |
42 | {/* Header */}
43 |
44 |
45 |
48 |
60 |
61 | {/* Body */}
62 |
63 |
45 |
48 | 49 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti, ducimus? Modi inventore, deleniti 50 | culpa quasi quis reiciendis sint, consectetur voluptate eaque ea aliquam rerum natus vel nostrum, quod 51 | praesentium quidem! 52 |
53 | 59 |
7 |
20 | )
21 | }
22 |
23 | export default SCRTUnwrapWarning
24 |
--------------------------------------------------------------------------------
/src/pages/wrap/components/wrap.scss:
--------------------------------------------------------------------------------
1 | .no-spinner::-webkit-inner-spin-button,
2 | .no-spinner::-webkit-outer-spin-button {
3 | -webkit-appearance: none;
4 | margin: 0;
5 | }
6 |
7 | .no-spinner {
8 | -moz-appearance: textfield;
9 | }
10 |
--------------------------------------------------------------------------------
/src/services/notification.service.ts:
--------------------------------------------------------------------------------
1 | import toast from 'react-hot-toast'
2 | import { NotificationType } from 'types/NotificationType'
3 |
4 | function notify(notification: string, type: NotificationType, toastId: string = null) {
5 | // Define an options object for toast, if toastId is provided
6 | const options = {
7 | id: toastId || undefined,
8 | duration: type === 'success' ? 10000 : Infinity,
9 | onClick: () => {
10 | toast.dismiss()
11 | },
12 | style: {
13 | maxWidth: '35vw',
14 | whiteSpace: 'pre-wrap' as any,
15 | wordBreak: 'break-word' as any
16 | },
17 | position: 'bottom-right' as any
18 | }
19 |
20 | switch (type) {
21 | case 'error':
22 | return toast.error(notification, options)
23 |
24 | case 'loading':
25 | return toast.loading(notification, options)
26 |
27 | case 'success':
28 | return toast.success(notification, options)
29 |
30 | default:
31 | return null
32 | }
33 | }
34 |
35 | export const NotificationService = {
36 | notify
37 | }
38 |
--------------------------------------------------------------------------------
/src/services/send.service.ts:
--------------------------------------------------------------------------------
1 | import BigNumber from 'bignumber.js'
2 | import { BroadcastMode, MsgExecuteContract, MsgSend, SecretNetworkClient } from 'secretjs'
3 | import { FeeGrantStatus } from 'types/FeeGrantStatus'
4 | import { Nullable } from 'types/Nullable'
5 | import { allTokens, faucetAddress, queryTxResult, randomPadding } from 'utils/commons'
6 | import { Token, tokens } from 'utils/config'
7 |
8 | function getSupportedTokens() {
9 | return [allTokens[0]].concat(
10 | allTokens.map((token: Token) => (token.name === 'SCRT' ? { ...token, address: 'native' } : token))
11 | )
12 | }
13 |
14 | interface IBaseProps {
15 | amount: string
16 | recipient: string
17 | memo?: string
18 | secretNetworkClient: SecretNetworkClient
19 | feeGrantStatus: FeeGrantStatus
20 | }
21 |
22 | interface IPropsToken extends IBaseProps {
23 | token: Token
24 | }
25 |
26 | // Main function to perform the sending
27 | async function performSending(props: IPropsToken): Promise
8 |
19 |
9 |
18 | -
11 |
- Please unwrap some sSCRT into SCRT using a fee grant. 13 |
- 14 | Do NOT try to create a viewing key first, instead unwrap 0.1 sSCRT directly. 15 | 16 |
You do not have any SCRT to pay for gas
12 |