diff --git a/nym-wallet/Cargo.lock b/nym-wallet/Cargo.lock
index 8feb2dec68..24f918e136 100644
--- a/nym-wallet/Cargo.lock
+++ b/nym-wallet/Cargo.lock
@@ -7467,9 +7467,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
[[package]]
name = "tokio"
-version = "1.44.2"
+version = "1.45.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e6b88822cbe49de4185e3a4cbf8321dd487cf5fe0c5c65695fef6346371e9c48"
+checksum = "75ef51a33ef1da925cea3e4eb122833cb377c61439ca401b770f54902b806779"
dependencies = [
"backtrace",
"bytes",
diff --git a/nym-wallet/src/components/Buy/SignMessageModal.stories.tsx b/nym-wallet/src/components/Buy/SignMessageModal.stories.tsx
deleted file mode 100644
index 201192ac16..0000000000
--- a/nym-wallet/src/components/Buy/SignMessageModal.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from '@mui/material';
-import { MockBuyContextProvider } from 'src/context/mocks/buy';
-
-import { SignMessageModal } from './SignMessageModal';
-
-export default {
- title: 'Buy/SignMessage',
- component: SignMessageModal,
-};
-
-export const SignMessage = () => {
- const [open, setOpen] = useState(false);
-
- return (
-
-
- {open && (
- {
- setOpen(false);
- }}
- />
- )}
-
- );
-};
diff --git a/nym-wallet/src/components/Buy/SignMessageModal.tsx b/nym-wallet/src/components/Buy/SignMessageModal.tsx
deleted file mode 100644
index bc9f6eebfc..0000000000
--- a/nym-wallet/src/components/Buy/SignMessageModal.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Stack, Typography, Box } from '@mui/material';
-import { useBuyContext } from 'src/context';
-import { SimpleModal } from '../Modals/SimpleModal';
-import { ErrorModal } from '../Modals/ErrorModal';
-import { TextFieldWithPaste } from '../Clipboard/ClipboardFormFields';
-import { CopyToClipboard } from '../Clipboard/ClipboardActions';
-
-export const SignMessageModal = ({ onClose }: { onClose: () => void }) => {
- const [message, setMessage] = useState('');
- const [signature, setSignature] = useState('');
-
- const { signMessage, loading, refresh, error } = useBuyContext();
-
- const handleSign = async () => {
- if (!message) {
- return;
- }
- try {
- const sig = await signMessage(message);
- setSignature(sig || '');
- } catch (err) {
- // eslint-disable-next-line no-console
- console.error('Signing failed:', err);
- setSignature('');
- }
- };
-
- const handleMessageChange = (value: string) => {
- setMessage(value);
- };
-
- if (error) {
- return (
- {
- refresh();
- }}
- />
- );
- }
-
- return (
-
-
-
-
- Message to Sign
-
- handleMessageChange(e.target.value)}
- InputLabelProps={{ shrink: false }}
- />
-
-
-
-
- Signature
-
-
-
-
-
- ) : undefined,
- }}
- />
-
-
-
-
- );
-};
diff --git a/nym-wallet/src/components/Buy/Tutorial.stories.tsx b/nym-wallet/src/components/Buy/Tutorial.stories.tsx
index ec73a796eb..c0410d396f 100644
--- a/nym-wallet/src/components/Buy/Tutorial.stories.tsx
+++ b/nym-wallet/src/components/Buy/Tutorial.stories.tsx
@@ -1,15 +1,10 @@
import React from 'react';
import { Tutorial } from './Tutorial';
-import { MockBuyContextProvider } from '../../context/mocks/buy';
export default {
title: 'Buy/Tutorial',
component: Tutorial,
};
-export const TutorialPage = () => (
-
-
-
-);
+export const TutorialPage = () => ;
diff --git a/nym-wallet/src/components/Buy/Tutorial.tsx b/nym-wallet/src/components/Buy/Tutorial.tsx
index f2b556c9b6..d3e0a11fce 100644
--- a/nym-wallet/src/components/Buy/Tutorial.tsx
+++ b/nym-wallet/src/components/Buy/Tutorial.tsx
@@ -1,148 +1,128 @@
-import React, { useContext, useState } from 'react';
-import { Button, Stack, Typography, Grid, useMediaQuery, useTheme } from '@mui/material';
-import { Tune as TuneIcon, BorderColor as BorderColorIcon } from '@mui/icons-material';
-import { CoinMark } from '@nymproject/react/coins/CoinMark';
-import { PoweredByBity } from 'src/svg-icons';
-import { AppContext } from 'src/context';
-import { ClientAddress } from '@nymproject/react/client-address/ClientAddress';
+import React from 'react';
+import { Box, Typography, Grid, Link, Card, CardContent, Stack } from '@mui/material';
import { NymCard } from '..';
-import { SignMessageModal } from './SignMessageModal';
+import BitfinexIcon from 'src/svg-icons/bitfinex.svg';
+import KrakenIcon from 'src/svg-icons/kraken.svg';
+import BybitIcon from 'src/svg-icons/bybit.svg';
+import GateIcon from 'src/svg-icons/gate22.svg';
+import HTXIcon from 'src/svg-icons/htx.svg';
-// TODO retrieve this value from env
-const EXCHANGE_URL = 'https://buy.nymtech.net';
-
-const borderColor = 'rgba(141, 147, 153, 0.2)';
-
-const TutorialStep = ({
- step,
- title,
- text,
- icon,
- borderRight,
- borderBottom,
+const ExchangeCard = ({
+ name,
+ tokenType,
+ url,
+ IconComponent
}: {
- step: number;
- title: string;
- text: React.ReactNode;
- icon: React.ReactNode;
- borderRight?: boolean;
- borderBottom?: boolean;
+ name: string;
+ tokenType: string;
+ url: string;
+ IconComponent: React.FunctionComponent>;
}) => (
-
-
-
- {icon}
-
- {`STEP ${step}`}
-
+
+
+
+
+
+
+
+ {name}
+
+
+ {tokenType}
+
+
+ GET NYM
+
+
-
- {title}
-
- {text}
-
-
+
+
);
export const Tutorial = () => {
- const { clientDetails } = useContext(AppContext);
- const [showSignModal, setShowSignModal] = useState(false);
- const theme = useTheme();
- const showBorder = useMediaQuery(theme.breakpoints.up('md'));
+ const exchanges = [
+ {
+ name: 'Bitfinex',
+ tokenType: 'Native NYM, ERC-20',
+ url: 'https://www.bitfinex.com/',
+ IconComponent: BitfinexIcon
+ },
+ {
+ name: 'Kraken',
+ tokenType: 'Native NYM',
+ url: 'https://www.kraken.com/',
+ IconComponent: KrakenIcon
+ },
+ {
+ name: 'Bybit',
+ tokenType: 'ERC-20',
+ url: 'https://www.bybit.com/en/',
+ IconComponent: BybitIcon
+ },
+ {
+ name: 'Gate.io',
+ tokenType: 'ERC-20',
+ url: 'https://www.gate.io/',
+ IconComponent: GateIcon
+ },
+ {
+ name: 'HTX',
+ tokenType: 'ERC-20',
+ url: 'https://www.htx.com/',
+ IconComponent: HTXIcon
+ },
+ ];
return (
}
>
-
- Follow below 3 steps to quickly and easily buy or sell NYM tokens. You can purchase up to 1000 Swiss Francs per
- day.
+
+ You can get NYM tokens from these exchanges
- {showSignModal && setShowSignModal(false)} />}
-
- }
- text={
- t.palette.nym.text.muted }}>
- Click on{' '}
-
- Buy/Sell NYM
- {' '}
- button and follow the steps in the browser window that opens. You will be asked for purchase details i.e.
- amount, wallet address, etc.
-
- }
- borderRight={showBorder}
- borderBottom={!showBorder}
- />
- }
- text={
- t.palette.nym.text.muted }}>
- When asked for signature, copy the message and sign it using{' '}
-
- Sign message
- {' '}
- button below. Then copy and paste your signature back in the browser window.
-
- }
- borderRight={showBorder}
- borderBottom={!showBorder}
- />
- }
- text={
- t.palette.nym.text.muted }}>
- {`Send the defined BTC amount to Bity's address that's given to you. As soon as your BTC tx has 4
- confirmations, Bity will send the purchased NYM tokens to your wallet.`}
-
- }
- />
+
+
+ {exchanges.map((exchange) => (
+
+
+
+ ))}
-
-
-
-
-
-
-
);
};
diff --git a/nym-wallet/src/context/buy.tsx b/nym-wallet/src/context/buy.tsx
deleted file mode 100644
index 4444268591..0000000000
--- a/nym-wallet/src/context/buy.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { sign } from 'src/requests';
-import { Console } from 'src/utils/console';
-// import { AppContext } from './main';
-
-export type TBuyContext = {
- loading: boolean;
- error?: string;
- signMessage: (message: string) => Promise;
- refresh: () => Promise;
-};
-
-export const BuyContext = createContext({
- loading: false,
- signMessage: async () => '',
- refresh: async () => undefined,
-});
-
-export const BuyContextProvider: FCWithChildren = ({ children }): JSX.Element => {
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState();
-
- const refresh = useCallback(async () => {
- setError(undefined);
- }, []);
-
- useEffect(() => {
- refresh();
- }, [refresh]);
-
- const signMessage = async (message: string) => {
- let signature;
- setLoading(true);
- try {
- signature = await sign(message);
- } catch (e: any) {
- Console.log(`Sign message operation failed: ${e}`);
- setError(`Sign message operation failed: ${e}`);
- } finally {
- setLoading(false);
- }
- return signature;
- };
-
- const memoizedValue = useMemo(
- () => ({
- loading,
- error,
- refresh,
- signMessage,
- }),
- [loading, error],
- );
-
- return {children};
-};
-
-export const useBuyContext = () => useContext(BuyContext);
diff --git a/nym-wallet/src/context/index.tsx b/nym-wallet/src/context/index.tsx
index 5007dd7b17..2229332eb3 100644
--- a/nym-wallet/src/context/index.tsx
+++ b/nym-wallet/src/context/index.tsx
@@ -2,4 +2,5 @@ export * from './main';
export * from './auth';
export * from './accounts';
export * from './bonding';
-export * from './buy';
+export * from './delegations';
+export * from './rewards';
diff --git a/nym-wallet/src/context/mocks/buy.tsx b/nym-wallet/src/context/mocks/buy.tsx
deleted file mode 100644
index 934b9f54d9..0000000000
--- a/nym-wallet/src/context/mocks/buy.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { BuyContext } from '../buy';
-import { mockSleep } from './utils';
-
-export const MockBuyContextProvider: FCWithChildren = ({ children }): JSX.Element => {
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState();
-
- const refresh = useCallback(async () => {
- setError(undefined);
- }, []);
-
- const signMessage = async (message: string) => {
- setLoading(true);
- await mockSleep(1042);
- setLoading(false);
- return `imagineareallyrealisticsignaturehash${message}`;
- };
-
- useEffect(() => {
- refresh();
- }, [refresh]);
-
- const memoizedValue = useMemo(
- () => ({
- loading,
- error,
- refresh,
- signMessage,
- }),
- [loading, error],
- );
-
- return {children};
-};
diff --git a/nym-wallet/src/pages/buy/index.stories.tsx b/nym-wallet/src/pages/buy/index.stories.tsx
index 5782f4298f..d7ab6c7127 100644
--- a/nym-wallet/src/pages/buy/index.stories.tsx
+++ b/nym-wallet/src/pages/buy/index.stories.tsx
@@ -1,15 +1,10 @@
import React from 'react';
import { Tutorial } from '../../components/Buy/Tutorial';
-import { MockBuyContextProvider } from '../../context/mocks/buy';
export default {
title: 'Buy/Page',
component: Tutorial,
};
-export const BuyPage = () => (
-
-
-
-);
+export const BuyPage = () => ;
diff --git a/nym-wallet/src/pages/buy/index.tsx b/nym-wallet/src/pages/buy/index.tsx
index 894d080727..90d359e269 100644
--- a/nym-wallet/src/pages/buy/index.tsx
+++ b/nym-wallet/src/pages/buy/index.tsx
@@ -1,9 +1,4 @@
import React from 'react';
-import { BuyContextProvider } from 'src/context';
import { Tutorial } from 'src/components/Buy/Tutorial';
-export const BuyPage = () => (
-
-
-
-);
+export const BuyPage = () => ;
diff --git a/nym-wallet/src/svg-icons/bitfinex.svg b/nym-wallet/src/svg-icons/bitfinex.svg
new file mode 100644
index 0000000000..a3596f66a8
--- /dev/null
+++ b/nym-wallet/src/svg-icons/bitfinex.svg
@@ -0,0 +1,4 @@
+
diff --git a/nym-wallet/src/svg-icons/bybit.svg b/nym-wallet/src/svg-icons/bybit.svg
new file mode 100644
index 0000000000..3c51a7a137
--- /dev/null
+++ b/nym-wallet/src/svg-icons/bybit.svg
@@ -0,0 +1,25 @@
+
diff --git a/nym-wallet/src/svg-icons/gate22.svg b/nym-wallet/src/svg-icons/gate22.svg
new file mode 100644
index 0000000000..fbd96c23a9
--- /dev/null
+++ b/nym-wallet/src/svg-icons/gate22.svg
@@ -0,0 +1,4 @@
+
diff --git a/nym-wallet/src/svg-icons/htx.svg b/nym-wallet/src/svg-icons/htx.svg
new file mode 100644
index 0000000000..a88a36b235
--- /dev/null
+++ b/nym-wallet/src/svg-icons/htx.svg
@@ -0,0 +1,4 @@
+
diff --git a/nym-wallet/src/svg-icons/index.ts b/nym-wallet/src/svg-icons/index.ts
index e0bd754736..ec0d4b9c49 100644
--- a/nym-wallet/src/svg-icons/index.ts
+++ b/nym-wallet/src/svg-icons/index.ts
@@ -3,4 +3,3 @@ export * from './undelegate';
export * from './bond';
export * from './unbond';
export * from './bonding';
-export * from './poweredByBity';
diff --git a/nym-wallet/src/svg-icons/kraken.svg b/nym-wallet/src/svg-icons/kraken.svg
new file mode 100644
index 0000000000..d15a792793
--- /dev/null
+++ b/nym-wallet/src/svg-icons/kraken.svg
@@ -0,0 +1,11 @@
+
diff --git a/nym-wallet/src/svg-icons/poweredByBity.tsx b/nym-wallet/src/svg-icons/poweredByBity.tsx
deleted file mode 100644
index 458a77369f..0000000000
--- a/nym-wallet/src/svg-icons/poweredByBity.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { SvgIcon, SvgIconProps } from '@mui/material';
-
-export const PoweredByBity = (props: SvgIconProps) => (
-
-
-
-);