Skip to content

Commit 765e343

Browse files
heyllogheyllog
committed
feat(onramp): draft crypto onramp
1 parent 99bf962 commit 765e343

36 files changed

Lines changed: 1284 additions & 22 deletions

‎packages/appkit-react/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"dependencies": {
4646
"@ton/appkit": "workspace:*",
4747
"clsx": "2.1.1",
48+
"qrcode.react": "^4.2.0",
4849
"radix-ui": "^1.4.3",
4950
"rosetta": "1.1.0"
5051
},

‎packages/appkit-react/src/components/logo-with-network/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* Copyright (c) TonTech.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
*/
8+
9+
export { LogoWithNetwork } from './logo-with-network';
10+
export type { LogoWithNetworkProps } from './logo-with-network';

‎packages/appkit-react/src/components/logo-with-network/logo-with-network.module.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.root {
2+
position: relative;
3+
display: inline-flex;
4+
}
5+
6+
.networkBadge {
7+
position: absolute;
8+
bottom: -2px;
9+
right: -2px;
10+
border: var(--ta-border-width-m) solid var(--ta-color-background);
11+
border-radius: var(--ta-border-radius-full);
12+
overflow: hidden;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
}

‎packages/appkit-react/src/components/logo-with-network/logo-with-network.stories.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* Copyright (c) TonTech.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
*/
8+
9+
import type { Meta, StoryObj } from '@storybook/react-vite';
10+
11+
import { LogoWithNetwork } from './logo-with-network';
12+
13+
const meta: Meta<typeof LogoWithNetwork> = {
14+
title: 'Private/Components/LogoWithNetwork',
15+
component: LogoWithNetwork,
16+
tags: ['autodocs'],
17+
argTypes: {
18+
size: {
19+
control: { type: 'range', min: 20, max: 100, step: 5 },
20+
},
21+
},
22+
};
23+
24+
export default meta;
25+
26+
type Story = StoryObj<typeof LogoWithNetwork>;
27+
28+
export const WithNetworkBadge: Story = {
29+
args: {
30+
size: 40,
31+
src: 'https://ton.org/download/ton_symbol.png',
32+
alt: 'TON',
33+
networkSrc: 'https://cryptologos.cc/logos/ethereum-eth-logo.png',
34+
networkAlt: 'ETH',
35+
},
36+
};
37+
38+
export const FallbackOnly: Story = {
39+
args: {
40+
size: 40,
41+
fallback: 'BTC',
42+
alt: 'BTC',
43+
networkAlt: 'ETH',
44+
},
45+
};
46+
47+
export const WithoutNetwork: Story = {
48+
args: {
49+
size: 40,
50+
src: 'https://ton.org/download/ton_symbol.png',
51+
alt: 'TON',
52+
},
53+
};

‎packages/appkit-react/src/components/logo-with-network/logo-with-network.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Copyright (c) TonTech.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
*/
8+
9+
import { forwardRef } from 'react';
10+
import type { ComponentPropsWithoutRef, ComponentRef } from 'react';
11+
import clsx from 'clsx';
12+
13+
import { Logo } from '../logo';
14+
import styles from './logo-with-network.module.css';
15+
16+
export interface LogoWithNetworkProps extends ComponentPropsWithoutRef<'span'> {
17+
/** Size of the main logo in pixels */
18+
size?: number;
19+
/** Image source for the main logo */
20+
src?: string;
21+
/** Alt text for the main logo */
22+
alt?: string;
23+
/** Fallback text for the main logo */
24+
fallback?: string;
25+
/** Image source for the network badge */
26+
networkSrc?: string;
27+
/** Alt text for the network badge */
28+
networkAlt?: string;
29+
}
30+
31+
export const LogoWithNetwork = forwardRef<ComponentRef<'span'>, LogoWithNetworkProps>(
32+
({ size = 30, src, alt, fallback, networkSrc, networkAlt, className, ...props }, ref) => {
33+
return (
34+
<span ref={ref} className={clsx(styles.root, className)} {...props}>
35+
<Logo size={size} src={src} alt={alt} fallback={fallback} />
36+
{!!networkSrc && (
37+
<span className={styles.networkBadge}>
38+
<Logo size={size * 0.4} src={networkSrc} alt={networkAlt} fallback={networkAlt?.[0]} />
39+
</span>
40+
)}
41+
</span>
42+
);
43+
},
44+
);
45+
46+
LogoWithNetwork.displayName = 'LogoWithNetwork';

‎packages/appkit-react/src/components/token-selector/token-selector.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,30 @@ import styles from './token-selector.module.css';
1212
import { Button } from '../button';
1313
import type { ButtonProps } from '../button';
1414
import { Logo } from '../logo';
15+
import { LogoWithNetwork } from '../logo-with-network';
1516

1617
export interface TokenSelectorProps extends ButtonProps {
1718
title: string;
1819
icon?: string;
1920
iconFallback?: string;
21+
/** When provided, renders a network badge overlay on the icon */
22+
networkIcon?: string;
2023
}
2124

22-
export const TokenSelector: FC<TokenSelectorProps> = ({ title, icon, iconFallback, ...props }) => {
25+
export const TokenSelector: FC<TokenSelectorProps> = ({ title, icon, iconFallback, networkIcon, ...props }) => {
2326
return (
2427
<Button className={styles.tokenSelector} variant="gray" size="s" {...props}>
25-
<Logo size={24} src={icon} fallback={iconFallback || title[0]} alt={title} />
28+
{networkIcon ? (
29+
<LogoWithNetwork
30+
size={24}
31+
src={icon}
32+
fallback={iconFallback || title[0]}
33+
alt={title}
34+
networkSrc={networkIcon}
35+
/>
36+
) : (
37+
<Logo size={24} src={icon} fallback={iconFallback || title[0]} alt={title} />
38+
)}
2639

2740
<span className={styles.symbol}>{title}</span>
2841

‎packages/appkit-react/src/features/onramp/components/onramp-token-selectors/onramp-token-selectors.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { TokenSelector } from '../../../../components/token-selector';
1414
import { useI18n } from '../../../settings/hooks/use-i18n';
1515

1616
export interface OnrampTokenSelectorsProps extends ComponentProps<'div'> {
17-
from: { title: string; logoSrc?: string };
18-
to: { title: string; logoSrc?: string };
17+
from: { title: string; logoSrc?: string; network?: string; networkLogoSrc?: string };
18+
to: { title: string; logoSrc?: string; network?: string; networkLogoSrc?: string };
1919
onFromClick: () => void;
2020
onToClick: () => void;
2121
}
@@ -47,6 +47,7 @@ export const OnrampTokenSelectors: FC<OnrampTokenSelectorsProps> = ({
4747
className={styles.tokenSelector}
4848
title={t('onramp.forCurrency', { symbol: to.title })}
4949
icon={to.logoSrc}
50+
networkIcon={to.networkLogoSrc}
5051
onClick={onToClick}
5152
/>
5253
</div>

‎packages/appkit-react/src/features/onramp/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
*
77
*/
88

9-
export * from './components/onramp-widget';
10-
export * from './components/onramp-widget-provider';
9+
export * from './widgets/fiat-onramp/onramp-widget';
10+
export * from './widgets/crypto-onramp/crypto-onramp-widget';
11+
1112
export * from './types';

‎packages/appkit-react/src/features/onramp/mock-data/crypto-payment-methods.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* Copyright (c) TonTech.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
*/
8+
9+
import type { CryptoPaymentMethod } from '../types';
10+
11+
export const CRYPTO_PAYMENT_METHODS: CryptoPaymentMethod[] = [
12+
{
13+
id: 'ton',
14+
symbol: 'TON',
15+
name: 'Toncoin',
16+
network: 'TON',
17+
networkId: 'ton',
18+
logo: 'https://asset.ston.fi/img/EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM9c/c8d21a3d93f9b574381e0a8d8f16d48b325dd8f54ce172f599c1e9d6c62f03f7',
19+
depositAddress: 'EQC0000000000000000000000000000000000000000000000001',
20+
},
21+
{
22+
id: 'btc',
23+
symbol: 'BTC',
24+
name: 'Bitcoin',
25+
network: 'Bitcoin',
26+
networkId: 'bitcoin',
27+
logo: 'https://assets.coingecko.com/coins/images/1/standard/bitcoin.png',
28+
depositAddress: 'bc1qgq026aa8sttge7afejvml5kkxhjk39x53fs58',
29+
},
30+
{
31+
id: 'usdt-tron',
32+
symbol: 'USDT',
33+
name: 'Tether',
34+
network: 'Tron',
35+
networkId: 'tron',
36+
logo: 'https://asset.ston.fi/img/EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs/1a87edfee9a28b05578853952e5effb8cc30af1e0fb90043aa2ce19dce490849',
37+
networkLogo: 'https://coin-images.coingecko.com/coins/images/22471/large/xOesRfpN_400x400.jpg',
38+
depositAddress: 'TXyz1234567890abcdefghijklmnopqrstuvwxy',
39+
},
40+
{
41+
id: 'usdt-eth',
42+
symbol: 'USDT',
43+
name: 'Tether',
44+
network: 'Ethereum',
45+
networkId: 'ethereum',
46+
logo: 'https://asset.ston.fi/img/EQCxE6mUtQJKFnGfaROTKOt1lZbDiiX1kCixRv7Nw2Id_sDs/1a87edfee9a28b05578853952e5effb8cc30af1e0fb90043aa2ce19dce490849',
47+
networkLogo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png',
48+
depositAddress: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
49+
},
50+
{
51+
id: 'eth',
52+
symbol: 'ETH',
53+
name: 'Ethereum',
54+
network: 'Ethereum',
55+
networkId: 'ethereum',
56+
logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png',
57+
depositAddress: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
58+
},
59+
{
60+
id: 'usdc',
61+
symbol: 'USDC',
62+
name: 'USD Coin',
63+
network: 'Ethereum',
64+
networkId: 'ethereum',
65+
logo: 'https://assets.coingecko.com/coins/images/6319/standard/USDC.png?1769615602',
66+
networkLogo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png',
67+
depositAddress: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
68+
},
69+
{
70+
id: 'sol',
71+
symbol: 'SOL',
72+
name: 'Solana',
73+
network: 'Solana',
74+
networkId: 'solana',
75+
logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png',
76+
depositAddress: '9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin',
77+
},
78+
];

‎packages/appkit-react/src/features/onramp/types.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,24 @@ export interface OnrampAmountPreset {
3232
amount: string;
3333
label: string;
3434
}
35+
36+
export interface CryptoPaymentMethod {
37+
id: string;
38+
/** Token symbol, e.g. "BTC", "USDT" */
39+
symbol: string;
40+
/** Token name, e.g. "Bitcoin", "Tether" */
41+
name: string;
42+
/** Human-readable network name, e.g. "Tron", "Ethereum", "Bitcoin" */
43+
network: string;
44+
/** Network id used for filter tabs, e.g. "tron", "ethereum" */
45+
networkId: string;
46+
logo?: string;
47+
networkLogo?: string;
48+
/** Mock deposit address for this method */
49+
depositAddress?: string;
50+
}
51+
52+
export interface PaymentMethodSectionConfig {
53+
title: string;
54+
ids: string[];
55+
}

0 commit comments

Comments
 (0)