31 |
60 | );
61 | };
62 |
--------------------------------------------------------------------------------
/src/components/Loading.tsx:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 | import { useContext } from 'preact/hooks';
3 | import { ConfigContext } from '../AppContext';
4 | import { clsxp } from '../libs/utils';
5 |
6 | const Loading = () => {
7 | const { classPrefix } = useContext(ConfigContext);
8 |
9 | return (
10 |
30 | );
31 | };
32 |
33 | export default Loading;
34 |
--------------------------------------------------------------------------------
/src/components/NumberInputWithSlider.tsx:
--------------------------------------------------------------------------------
1 | import { FunctionalComponent, h } from 'preact';
2 | import { useContext, useRef } from 'preact/hooks';
3 | import RcInputNumber from '../libs/rc-input-number';
4 | import RcSlider from 'react-input-slider';
5 | import { formatACSCurrency } from '../libs/utils';
6 | import { ConfigContext } from '../AppContext';
7 | import { clsxp } from '../libs/utils';
8 |
9 | export interface InputProps {
10 | invalid?: boolean;
11 | invalidText?: string | null;
12 | onChangeOfValue: (value: number) => void;
13 | value: number;
14 | disabled: boolean;
15 | min: number;
16 | max: number;
17 | }
18 |
19 | function setNativeValue(
20 | element: HTMLInputElement,
21 | value: string | number | undefined
22 | ) {
23 | if (element) {
24 | const valueSetter = Object.getOwnPropertyDescriptor(element, 'value')?.set;
25 | const prototype = Object.getPrototypeOf(element);
26 | const prototypeValueSetter = Object.getOwnPropertyDescriptor(
27 | prototype,
28 | 'value'
29 | )?.set;
30 |
31 | if (valueSetter && valueSetter !== prototypeValueSetter) {
32 | prototypeValueSetter?.call(element, value);
33 | } else {
34 | valueSetter?.call(element, value);
35 | }
36 | }
37 | }
38 |
39 | export const NumberInputWithSlider: FunctionalComponent
35 | {copied ? (
36 |
58 | {children}
59 |
37 | Copied!
38 |
39 | ) : (
40 |
41 |
56 | )}
57 |
42 |
47 |
53 |
43 | {shortBase58}
44 |
45 |
80 | formatACSCurrency(newValue)}
88 | onChange={handleChange}
89 | />
90 |
123 | );
124 | };
125 |
--------------------------------------------------------------------------------
/src/components/ProgressModal.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment, h } from 'preact';
2 | import { RouteLink } from '../layout/Router';
3 | import { useContext, useEffect, useState } from 'preact/hooks';
4 | import { ConfigContext } from '../AppContext';
5 | import { clsxp } from '../libs/utils';
6 | import Loading from './Loading';
7 |
8 | const ProgressModal = ({
9 | working,
10 | doneStepName,
11 | }: {
12 | working: string;
13 | doneStepName: string;
14 | }) => {
15 | const { classPrefix } = useContext(ConfigContext);
16 | const [countdown, setCountdown] = useState(5);
17 |
18 | useEffect(() => {
19 | if (working === doneStepName && countdown > 0) {
20 | const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
21 | return () => clearTimeout(timer);
22 | }
23 | }, [working, doneStepName, countdown]);
24 |
25 | const isButtonDisabled = working !== doneStepName || countdown > 0;
26 |
27 | return (
28 |
91 |
114 |
115 | {value === max && max && min && max > min ? (
116 | Min
117 | ) : null}
118 | {value !== max && max && min && min < max ? (
119 | Max
120 | ) : null}
121 |
122 |
30 | Sign a transaction
31 |
32 |
33 | {working === doneStepName
34 | ? 'Transaction sent successfully.'
35 | : 'We need you to sign a transaction to lock your funds.'}
36 |
37 |
58 |
17 | {children}
18 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/components/wallet-adapter/ConnectionProvider.tsx:
--------------------------------------------------------------------------------
1 | import { type ConnectionConfig, Connection } from '@solana/web3.js';
2 | import { ComponentChildren, h } from 'preact';
3 | import { useMemo } from 'preact/hooks';
4 | import { ConnectionContext } from './useConnection';
5 |
6 | export interface ConnectionProviderProps {
7 | children: ComponentChildren;
8 | endpoint: string;
9 | config?: ConnectionConfig;
10 | }
11 |
12 | export const ConnectionProvider = ({
13 | children,
14 | endpoint,
15 | config = { commitment: 'confirmed' },
16 | }: ConnectionProviderProps) => {
17 | const connection = useMemo(
18 | () => new Connection(endpoint, config),
19 | [endpoint, config]
20 | );
21 |
22 | return (
23 |
19 |
32 |
20 |
30 |
31 |
21 | {messages
22 | .filter((message) => message != null && message !== '')
23 | .map((message, i) => (
24 |
29 | {message}
27 | ))}
28 |
92 | {children}
93 |
94 | );
95 | };
96 |
--------------------------------------------------------------------------------
/src/components/wallet-adapter/ui/WalletConnectButton.tsx:
--------------------------------------------------------------------------------
1 | import { useWallet } from "../useWallet";
2 | import { type FunctionalComponent, h } from "preact";
3 | import { useCallback, useContext, useMemo } from "preact/hooks";
4 | import type { ButtonProps } from "./Button";
5 | import { Button } from "./Button";
6 | import { ConfigContext } from "../../../AppContext";
7 | import { clsxp } from "../../../libs/utils";
8 |
9 | export const WalletConnectButton: FunctionalComponent
192 |
,
358 | portal
359 | )
360 | );
361 | };
362 |
--------------------------------------------------------------------------------
/src/components/wallet-adapter/ui/WalletModalButton.tsx:
--------------------------------------------------------------------------------
1 | import { type FunctionalComponent, h } from "preact";
2 | import { useCallback, useContext } from "preact/hooks";
3 | import { ConfigContext } from "../../../AppContext";
4 | import { clsxp } from "../../../libs/utils";
5 | import type { ButtonProps } from "./Button";
6 | import { Button } from "./Button";
7 | import { useWalletModal } from "./useWalletModal";
8 |
9 | export const WalletModalButton: FunctionalComponent
193 |
357 |
194 | {installedWallets.length ? (
195 |
196 |
271 | ) : (
272 |
273 |
296 |
329 |
333 |
351 |
352 | ) : null}
353 |
354 | )}
355 |
356 | 199 | Connect your wallet 200 |
201 |
207 | You need a Solana wallet to
208 |
connect to the website.
209 |
-
211 | {installedWallets.map((wallet) => (
212 |
276 | You'll need a wallet 277 |
278 |
281 |
293 |
294 | {otherWallets.length ? (
295 | -
339 | {otherWallets.map((wallet) => (
340 |
119 |
121 | );
122 | }
123 | if (!base58) {
124 | return (
125 |
126 |
128 | );
129 | }
130 |
131 | return (
132 |
133 |
145 |
161 | );
162 | };
163 |
164 | export default Main;
165 |
--------------------------------------------------------------------------------
/src/layout/Router.tsx:
--------------------------------------------------------------------------------
1 | import { h, createContext, VNode, ComponentType, createElement } from 'preact';
2 | import { useState, useEffect } from 'preact/hooks';
3 |
4 | const DEFAULT_ROUTE = '/';
5 |
6 | interface Props {
7 | /**
8 | * Specifies all URLs and their respectful components.
9 | */
10 | routes: {
11 | [DEFAULT_ROUTE]: VNode;
12 | [key: string]: VNode;
13 | };
14 | onChange?: (route: string) => void;
15 | }
16 |
17 | /**
18 | * Stores current URL of the router and allows to change it programmatically.
19 | */
20 | export const RouterContext = createContext<{
21 | route: string;
22 | setRoute: (route: string) => void;
23 | }>({ route: DEFAULT_ROUTE, setRoute: (_: string) => undefined });
24 |
25 | /**
26 | * Oversimplified router component.
27 | */
28 | export const Router = ({ routes, onChange }: Props) => {
29 | const [route, setRoute] = useState(DEFAULT_ROUTE);
30 | useEffect(() => onChange?.(route), [route]);
31 |
32 | return (
33 |
152 |
160 | {
533 | setFocus(true);
534 | }}
535 | onBlur={onBlur}
536 | onKeyDown={onKeyDown}
537 | onKeyUp={onKeyUp}
538 | onCompositionStart={onCompositionStart}
539 | onCompositionEnd={onCompositionEnd}
540 | >
541 |
563 | );
564 | });
565 |
566 | InputNumber.displayName = "InputNumber";
567 |
568 | export default InputNumber;
569 |
--------------------------------------------------------------------------------
/src/libs/rc-input-number/hooks/useCursor.ts:
--------------------------------------------------------------------------------
1 | import { useRef } from 'preact/hooks';
2 | import warning from 'rc-util/lib/warning';
3 | /**
4 | * Keep input cursor in the correct position if possible.
5 | * Is this necessary since we have `formatter` which may mass the content?
6 | */
7 | export default function useCursor(
8 | input: HTMLInputElement | null,
9 | focused: boolean,
10 | ): [() => void, () => void] {
11 | const selectionRef = useRef<{
12 | start?: number;
13 | end?: number;
14 | value?: string;
15 | beforeTxt?: string;
16 | afterTxt?: string;
17 | }>(null);
18 |
19 | function recordCursor() {
20 | // Record position
21 | try {
22 | if (!input) return;
23 |
24 | const { selectionStart: start, selectionEnd: end, value } = input;
25 | const beforeTxt = value.substring(0, start ?? 0);
26 | const afterTxt = value.substring(end ?? 0);
27 |
28 | selectionRef.current = {
29 | start,
30 | end,
31 | value,
32 | beforeTxt,
33 | afterTxt,
34 | };
35 | } catch (e) {
36 | // Fix error in Chrome:
37 | // Failed to read the 'selectionStart' property from 'HTMLInputElement'
38 | // http://stackoverflow.com/q/21177489/3040605
39 | }
40 | }
41 |
42 | /**
43 | * Restore logic:
44 | * 1. back string same
45 | * 2. start string same
46 | */
47 | function restoreCursor() {
48 | if (input && selectionRef.current && focused) {
49 | try {
50 | const { value } = input;
51 | const { beforeTxt, afterTxt, start } = selectionRef.current;
52 |
53 | let startPos = value.length;
54 | if (!afterTxt || !beforeTxt || !selectionRef.current?.afterTxt)
55 | return;
56 |
57 | if (value.endsWith(afterTxt)) {
58 | startPos = value.length - selectionRef.current.afterTxt.length;
59 | } else if (value.startsWith(beforeTxt)) {
60 | startPos = beforeTxt.length;
61 | } else {
62 | if (!start) return;
63 | const beforeLastChar = beforeTxt[start - 1];
64 | const newIndex = value.indexOf(beforeLastChar, start - 1);
65 | if (newIndex !== -1) {
66 | startPos = newIndex + 1;
67 | }
68 | }
69 |
70 | input.setSelectionRange(startPos, startPos);
71 | } catch (e) {
72 | warning(
73 | false,
74 | `Something warning of cursor restore. Please fire issue about this: ${e.message}`,
75 | );
76 | }
77 | }
78 | }
79 |
80 | return [recordCursor, restoreCursor];
81 | }
82 |
--------------------------------------------------------------------------------
/src/libs/rc-input-number/hooks/useFrame.ts:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from 'preact/hooks';
2 | import raf from 'rc-util/lib/raf';
3 |
4 | /**
5 | * Always trigger latest once when call multiple time
6 | */
7 | export default () => {
8 | const idRef = useRef(0);
9 |
10 | const cleanUp = () => {
11 | raf.cancel(idRef.current);
12 | };
13 |
14 | useEffect(() => cleanUp, []);
15 |
16 | return (callback: () => void) => {
17 | cleanUp();
18 |
19 | idRef.current = raf(() => {
20 | callback();
21 | });
22 | };
23 | };
24 |
--------------------------------------------------------------------------------
/src/libs/rc-input-number/index.ts:
--------------------------------------------------------------------------------
1 | import InputNumber from './InputNumber';
2 |
3 | export default InputNumber;
4 |
--------------------------------------------------------------------------------
/src/libs/rc-input-number/utils/MiniDecimal.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-classes-per-file */
2 |
3 | import { getNumberPrecision, isE, num2str, trimNumber, validateNumber } from './numberUtil';
4 | import { supportBigInt } from './supportUtil';
5 |
6 | export type ValueType = string | number;
7 |
8 | export interface DecimalClass {
9 | add: (value: ValueType) => DecimalClass;
10 |
11 | isEmpty: () => boolean;
12 |
13 | isNaN: () => boolean;
14 |
15 | isInvalidate: () => boolean;
16 |
17 | toNumber: () => number;
18 |
19 | /**
20 | * Parse value as string. Will return empty string if `isInvalidate`.
21 | * You can set `safe=false` to get origin string content.
22 | */
23 | toString: (safe?: boolean) => string;
24 |
25 | equals: (target: DecimalClass) => boolean;
26 |
27 | lessEquals: (target: DecimalClass) => boolean;
28 |
29 | negate: () => DecimalClass;
30 | }
31 |
32 | /**
33 | * We can remove this when IE not support anymore
34 | */
35 | export class NumberDecimal implements DecimalClass {
36 | origin: string = '';
37 | number: number;
38 | empty: boolean;
39 |
40 | constructor(value: ValueType) {
41 | if ((!value && value !== 0) || !String(value).trim()) {
42 | this.empty = true;
43 | return;
44 | }
45 |
46 | this.origin = String(value);
47 | this.number = Number(value);
48 | }
49 |
50 | negate() {
51 | return new NumberDecimal(-this.toNumber());
52 | }
53 |
54 | add(value: ValueType) {
55 | if (this.isInvalidate()) {
56 | return new NumberDecimal(value);
57 | }
58 |
59 | const target = Number(value);
60 |
61 | if (Number.isNaN(target)) {
62 | return this;
63 | }
64 |
65 | const number = this.number + target;
66 |
67 | // [Legacy] Back to safe integer
68 | if (number > Number.MAX_SAFE_INTEGER) {
69 | return new NumberDecimal(Number.MAX_SAFE_INTEGER);
70 | }
71 |
72 | if (number < Number.MIN_SAFE_INTEGER) {
73 | return new NumberDecimal(Number.MIN_SAFE_INTEGER);
74 | }
75 |
76 | const maxPrecision = Math.max(getNumberPrecision(this.number), getNumberPrecision(target));
77 | return new NumberDecimal(number.toFixed(maxPrecision));
78 | }
79 |
80 | isEmpty() {
81 | return this.empty;
82 | }
83 |
84 | isNaN() {
85 | return Number.isNaN(this.number);
86 | }
87 |
88 | isInvalidate() {
89 | return this.isEmpty() || this.isNaN();
90 | }
91 |
92 | equals(target: DecimalClass) {
93 | return this.toNumber() === target?.toNumber();
94 | }
95 |
96 | lessEquals(target: DecimalClass) {
97 | return this.add(target.negate().toString()).toNumber() <= 0;
98 | }
99 |
100 | toNumber() {
101 | return this.number;
102 | }
103 |
104 | toString(safe: boolean = true) {
105 | if (!safe) {
106 | return this.origin;
107 | }
108 |
109 | if (this.isInvalidate()) {
110 | return '';
111 | }
112 |
113 | return num2str(this.number);
114 | }
115 | }
116 |
117 | export class BigIntDecimal implements DecimalClass {
118 | origin: string = '';
119 | negative: boolean;
120 | integer: bigint;
121 | decimal: bigint;
122 | /** BigInt will convert `0009` to `9`. We need record the len of decimal */
123 | decimalLen: number;
124 | empty: boolean;
125 | nan: boolean;
126 |
127 | constructor(value: string | number) {
128 | if ((!value && value !== 0) || !String(value).trim()) {
129 | this.empty = true;
130 | return;
131 | }
132 |
133 | this.origin = String(value);
134 |
135 | // Act like Number convert
136 | if (value === '-') {
137 | this.nan = true;
138 | return;
139 | }
140 |
141 | let mergedValue = value;
142 |
143 | // We need convert back to Number since it require `toFixed` to handle this
144 | if (isE(mergedValue)) {
145 | mergedValue = Number(mergedValue);
146 | }
147 |
148 | mergedValue = typeof mergedValue === 'string' ? mergedValue : num2str(mergedValue);
149 |
150 | if (validateNumber(mergedValue)) {
151 | const trimRet = trimNumber(mergedValue);
152 | this.negative = trimRet.negative;
153 | const numbers = trimRet.trimStr.split('.');
154 | this.integer = BigInt(numbers[0]);
155 | const decimalStr = numbers[1] || '0';
156 | this.decimal = BigInt(decimalStr);
157 | this.decimalLen = decimalStr.length;
158 | } else {
159 | this.nan = true;
160 | }
161 | }
162 |
163 | private getMark() {
164 | return this.negative ? '-' : '';
165 | }
166 |
167 | private getIntegerStr() {
168 | return this.integer.toString();
169 | }
170 |
171 | private getDecimalStr() {
172 | return this.decimal.toString().padStart(this.decimalLen, '0');
173 | }
174 |
175 | /**
176 | * Align BigIntDecimal with same decimal length. e.g. 12.3 + 5 = 1230000
177 | * This is used for add function only.
178 | */
179 | private alignDecimal(decimalLength: number): bigint {
180 | const str = `${this.getMark()}${this.getIntegerStr()}${this.getDecimalStr().padEnd(
181 | decimalLength,
182 | '0',
183 | )}`;
184 | return BigInt(str);
185 | }
186 |
187 | negate() {
188 | const clone = new BigIntDecimal(this.toString());
189 | clone.negative = !clone.negative;
190 | return clone;
191 | }
192 |
193 | add(value: ValueType): BigIntDecimal {
194 | if (this.isInvalidate()) {
195 | return new BigIntDecimal(value);
196 | }
197 |
198 | const offset = new BigIntDecimal(value);
199 | if (offset.isInvalidate()) {
200 | return this;
201 | }
202 |
203 | const maxDecimalLength = Math.max(this.getDecimalStr().length, offset.getDecimalStr().length);
204 | const myAlignedDecimal = this.alignDecimal(maxDecimalLength);
205 | const offsetAlignedDecimal = offset.alignDecimal(maxDecimalLength);
206 |
207 | const valueStr = (myAlignedDecimal + offsetAlignedDecimal).toString();
208 |
209 | // We need fill string length back to `maxDecimalLength` to avoid parser failed
210 | const { negativeStr, trimStr } = trimNumber(valueStr);
211 | const hydrateValueStr = `${negativeStr}${trimStr.padStart(maxDecimalLength + 1, '0')}`;
212 |
213 | return new BigIntDecimal(
214 | `${hydrateValueStr.slice(0, -maxDecimalLength)}.${hydrateValueStr.slice(-maxDecimalLength)}`,
215 | );
216 | }
217 |
218 | isEmpty() {
219 | return this.empty;
220 | }
221 |
222 | isNaN() {
223 | return this.nan;
224 | }
225 |
226 | isInvalidate() {
227 | return this.isEmpty() || this.isNaN();
228 | }
229 |
230 | equals(target: DecimalClass) {
231 | return this.toString() === target?.toString();
232 | }
233 |
234 | lessEquals(target: DecimalClass) {
235 | return this.add(target.negate().toString()).toNumber() <= 0;
236 | }
237 |
238 | toNumber() {
239 | if (this.isNaN()) {
240 | return NaN;
241 | }
242 | return Number(this.toString());
243 | }
244 |
245 | toString(safe: boolean = true) {
246 | if (!safe) {
247 | return this.origin;
248 | }
249 |
250 | if (this.isInvalidate()) {
251 | return '';
252 | }
253 |
254 | return trimNumber(`${this.getMark()}${this.getIntegerStr()}.${this.getDecimalStr()}`).fullStr;
255 | }
256 | }
257 |
258 | export default function getMiniDecimal(value: ValueType): DecimalClass {
259 | // We use BigInt here.
260 | // Will fallback to Number if not support.
261 | if (supportBigInt()) {
262 | return new BigIntDecimal(value);
263 | }
264 | return new NumberDecimal(value);
265 | }
266 |
267 | /**
268 | * Align the logic of toFixed to around like 1.5 => 2.
269 | * If set `cutOnly`, will just remove the over decimal part.
270 | */
271 | export function toFixed(numStr: string, separatorStr: string, precision?: number, cutOnly = false) : string {
272 | if (numStr === '') {
273 | return '';
274 | }
275 | const { negativeStr, integerStr, decimalStr } = trimNumber(numStr);
276 | const precisionDecimalStr = `${separatorStr}${decimalStr}`;
277 |
278 | const numberWithoutDecimal = `${negativeStr}${integerStr}`;
279 |
280 | if (precision && precision >= 0) {
281 | // We will get last + 1 number to check if need advanced number
282 | const advancedNum = Number(decimalStr[precision]);
283 |
284 | if (advancedNum >= 5 && !cutOnly) {
285 | const advancedDecimal = getMiniDecimal(numStr).add(
286 | `${negativeStr}0.${'0'.repeat(precision)}${10 - advancedNum}`,
287 | );
288 | return toFixed(advancedDecimal.toString(), separatorStr, precision, cutOnly);
289 | }
290 |
291 | if (precision === 0) {
292 | return numberWithoutDecimal;
293 | }
294 |
295 | return `${numberWithoutDecimal}${separatorStr}${decimalStr
296 | .padEnd(precision, '0')
297 | .slice(0, precision)}`;
298 | }
299 |
300 | if (precisionDecimalStr === '.0') {
301 | return numberWithoutDecimal;
302 | }
303 |
304 | return `${numberWithoutDecimal}${precisionDecimalStr}`;
305 | }
306 |
--------------------------------------------------------------------------------
/src/libs/rc-input-number/utils/numberUtil.ts:
--------------------------------------------------------------------------------
1 | import { supportBigInt } from './supportUtil';
2 |
3 | /**
4 | * Format string number to readable number
5 | */
6 | export function trimNumber(numStr: string) {
7 | let str = numStr.trim();
8 |
9 | let negative = str.startsWith('-');
10 |
11 | if (negative) {
12 | str = str.slice(1);
13 | }
14 |
15 | str = str
16 | // Remove decimal 0. `1.000` => `1.`, `1.100` => `1.1`
17 | .replace(/(\.\d*[^0])0*$/, '$1')
18 | // Remove useless decimal. `1.` => `1`
19 | .replace(/\.0*$/, '')
20 | // Remove integer 0. `0001` => `1`, 000.1' => `.1`
21 | .replace(/^0+/, '');
22 |
23 | if (str.startsWith('.')) {
24 | str = `0${str}`;
25 | }
26 |
27 | const trimStr = str || '0';
28 | const splitNumber = trimStr.split('.');
29 |
30 | const integerStr = splitNumber[0] || '0';
31 | const decimalStr = splitNumber[1] || '0';
32 |
33 | if (integerStr === '0' && decimalStr === '0') {
34 | negative = false;
35 | }
36 |
37 | const negativeStr = negative ? '-' : '';
38 |
39 | return {
40 | negative,
41 | negativeStr,
42 | trimStr,
43 | integerStr,
44 | decimalStr,
45 | fullStr: `${negativeStr}${trimStr}`,
46 | };
47 | }
48 |
49 | export function isE(number: string | number) {
50 | const str = String(number);
51 |
52 | return !Number.isNaN(Number(str)) && str.includes('e');
53 | }
54 |
55 | /**
56 | * [Legacy] Convert 1e-9 to 0.000000001.
57 | * This may lose some precision if user really want 1e-9.
58 | */
59 | export function getNumberPrecision(number: string | number) {
60 | const numStr: string = String(number);
61 |
62 | if (isE(number)) {
63 | let precision = Number(numStr.slice(numStr.indexOf('e-') + 2));
64 |
65 | const decimalMatch = numStr.match(/\.(\d+)/);
66 | if (decimalMatch?.[1]) {
67 | precision += decimalMatch[1].length;
68 | }
69 | return precision;
70 | }
71 |
72 | return numStr.includes('.') && validateNumber(numStr)
73 | ? numStr.length - numStr.indexOf('.') - 1
74 | : 0;
75 | }
76 |
77 | /**
78 | * Convert number (includes scientific notation) to -xxx.yyy format
79 | */
80 | export function num2str(number: number): string {
81 | let numStr: string = String(number);
82 | if (isE(number)) {
83 | if (number > Number.MAX_SAFE_INTEGER) {
84 | return String(supportBigInt() ? BigInt(number).toString() : Number.MAX_SAFE_INTEGER);
85 | }
86 |
87 | if (number < Number.MIN_SAFE_INTEGER) {
88 | return String(supportBigInt() ? BigInt(number).toString() : Number.MIN_SAFE_INTEGER);
89 | }
90 |
91 | numStr = number.toFixed(getNumberPrecision(numStr));
92 | }
93 |
94 | return trimNumber(numStr).fullStr;
95 | }
96 |
97 | export function validateNumber(num: string | number) {
98 | if (typeof num === 'number') {
99 | return !Number.isNaN(num);
100 | }
101 |
102 | // Empty
103 | if (!num) {
104 | return false;
105 | }
106 |
107 | return (
108 | // Normal type: 11.28
109 | /^\s*-?\d+(\.\d+)?\s*$/.test(num) ||
110 | // Pre-number: 1.
111 | /^\s*-?\d+\.\s*$/.test(num) ||
112 | // Post-number: .1
113 | /^\s*-?\.\d+\s*$/.test(num)
114 | );
115 | }
116 |
117 | export function getDecupleSteps(step: string | number) {
118 | const stepStr = typeof step === 'number' ? num2str(step) : trimNumber(step).fullStr;
119 | const hasPoint = stepStr.includes('.');
120 | if (!hasPoint) {
121 | return step + '0';
122 | }
123 | return trimNumber(stepStr.replace(/(\d)\.(\d)/g, '$1$2.')).fullStr;
124 | }
125 |
--------------------------------------------------------------------------------
/src/libs/rc-input-number/utils/supportUtil.ts:
--------------------------------------------------------------------------------
1 | export function supportBigInt() {
2 | return typeof BigInt === 'function';
3 | }
--------------------------------------------------------------------------------
/src/libs/send.ts:
--------------------------------------------------------------------------------
1 | import bs58 from 'bs58';
2 | import { sleep } from '@accessprotocol/js';
3 | import { PromisePool } from '@supercharge/promise-pool';
4 | import {
5 | Commitment,
6 | ComputeBudgetProgram,
7 | Connection,
8 | PublicKey,
9 | Transaction,
10 | TransactionInstruction,
11 | TransactionMessage,
12 | VersionedTransaction,
13 | } from '@solana/web3.js';
14 |
15 | export const confirmTxs = async (
16 | txs: Array
542 |
561 |
562 |
100 | {connected && disconnecting && (
101 |
102 |
106 | )}
107 | {connected && !disconnecting && (
108 |
109 |
116 | )}
117 |
118 |
180 | );
181 | };
182 |
--------------------------------------------------------------------------------
/src/routes/Stake.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment, h } from 'preact';
2 | import { Info } from 'phosphor-react';
3 | import {
4 | BondV2Account,
5 | CentralStateV2,
6 | fullLock,
7 | getBondV2Accounts,
8 | StakeAccount,
9 | StakePool,
10 | } from '@accessprotocol/js';
11 | import { PublicKey } from '@solana/web3.js';
12 | import { useContext, useEffect, useMemo, useState } from 'preact/hooks';
13 |
14 | import { Header } from '../components/Header';
15 | import { RouteLink } from '../layout/Router';
16 | import { ConfigContext } from '../AppContext';
17 | import { useConnection } from '../components/wallet-adapter/useConnection';
18 | import { useWallet } from '../components/wallet-adapter/useWallet';
19 | import { getStakeAccounts, getUserACSBalance, } from '../libs/program';
20 | import { Tooltip } from '../components/Tooltip';
21 | import { NumberInputWithSlider } from '../components/NumberInputWithSlider';
22 | import Loading from '../components/Loading';
23 | import { ProgressModal } from '../components/ProgressModal';
24 | import { clsxp, formatACSCurrency } from '../libs/utils';
25 | import env from '../libs/env';
26 | import { sendTxDirectly } from '../libs/send';
27 |
28 | const DONE_STEP = 'Done';
29 | const IDLE_STEP = 'Idle';
30 |
31 | const ACCOUNT_CREATION_ACS_PRICE = 50;
32 |
33 | const calculateFees = (amount: number,
34 | feeBasisPoints: number,
35 | forever: boolean,
36 | stakeAccount?: StakeAccount | null,
37 | bondV2Accounts?: BondV2Account[],
38 | ) => {
39 | let accountCreationFee = ACCOUNT_CREATION_ACS_PRICE;
40 | if ((!forever && stakeAccount) || (forever && bondV2Accounts && bondV2Accounts.length > 0)) {
41 | accountCreationFee = 0;
42 | }
43 | const protocolFee = forever ? 0 : amount * (feeBasisPoints / 10000);
44 | return protocolFee + accountCreationFee;
45 | };
46 |
47 | export const Stake = () => {
48 | const { poolId, poolName, element, classPrefix } = useContext(ConfigContext);
49 | const { connection } = useConnection();
50 | const { publicKey, signTransaction, signAllTransactions } =
51 | useWallet();
52 | const [working, setWorking] = useState(IDLE_STEP);
53 | const [balance, setBalance] = useState
103 | Disconnecting...
104 |
105 |
113 | Disconnect
114 |
115 |
119 |
131 |
132 |
133 |
134 |
146 |
147 |
135 |
142 |
136 | {formatPenyACSCurrency(
137 | (stakedAmount ?? 0) + (bondsAmount ?? 0) + (foreverAmount ?? 0)
138 | )}{' '}
139 | ACS locked
140 |
141 |
143 | {formatPenyACSCurrency(balance ?? 0)} ACS available
144 |
145 |
148 |
152 | Lock
153 |
154 | {hasUnlockableAmount ? (
155 |
159 | Unlock ACS
160 |
161 | ) : (
162 |
169 | Unlock ACS
170 |
171 | )}
172 |
178 |
179 |
270 | {stakeModalOpen && error && (
271 |
272 |
279 | Close
280 |
281 |
282 | )}
283 | {stakeModalOpen && !error && (
284 |
291 |
292 |
296 | Cancel
297 |
298 |
299 |
300 | {stakeAccount !== undefined &&
301 | bondV2Accounts !== undefined &&
302 | balance !== undefined && (
303 |
304 |
408 | )}
409 | {(stakeAccount === undefined ||
410 | bondV2Accounts === undefined ||
411 | stakedPool == null ||
412 | balance === undefined) && (
413 |
418 | )}
419 |
420 | );
421 | };
422 |
--------------------------------------------------------------------------------
/src/routes/Unstake.tsx:
--------------------------------------------------------------------------------
1 | import { h } from 'preact';
2 |
3 | import { Header } from '../components/Header';
4 | import { RouteLink } from '../layout/Router';
5 | import { useContext } from 'preact/hooks';
6 | import { ConfigContext } from '../AppContext';
7 | import env from '../libs/env';
8 | import clsx from 'clsx';
9 | import { clsxp } from '../libs/utils';
10 |
11 | export const Unstake = () => {
12 | const { poolId, classPrefix } = useContext(ConfigContext);
13 |
14 | return (
15 |
273 | Error occured:
274 |
275 |
276 | {error}
277 |
278 |
305 | {poolName}
306 |
307 | {!insufficientBalance ? (
308 |
309 | Both {poolName} and you will get ACS rewards
310 | split equally.
311 |
312 | ) : (
313 | 314 | {invalidText} 315 |
316 | )} 317 | 318 |
319 | {insufficientBalance && (
320 |
330 | Get ACS/SOL on access
331 |
332 | )}
333 | {!insufficientBalance && (
334 | <>
335 | {
343 | setStakeAmount(value);
344 | }}
345 | />
346 |
407 |
347 | {
350 |
351 | setForever(!forever);
352 | }}
353 | checked={forever}
354 | />
355 | Forever Lock
358 |
364 |
365 |
366 |
367 | {!forever ?
368 | () : ()
381 | }
382 |
383 | )}
384 |
385 |
386 |
406 |
389 | {fee > 0 ? (
390 | <>
391 |
398 |
399 |
400 |
401 | ) : (
402 |
405 | Fees: {formatACSCurrency(fee)} ACS
392 | No additional fees
403 | )}
404 |
414 |
416 | )}
417 |
16 |
17 |
21 | Cancel
22 |
23 |
24 |
25 |
45 | );
46 | };
47 |
--------------------------------------------------------------------------------
/src/validations/subscriptions.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 |
3 | export const serverOffchainBasicSubscription = z.object({
4 | AssetId: z.string().optional(),
5 | Owner: z.string(),
6 | Pool: z.string(),
7 | Locked: z.number().optional(),
8 | Bonds: z.number().optional(),
9 | Forever: z.number().optional(),
10 | CreatedAt: z.coerce.date(),
11 | UpdatedAt: z.coerce.date().optional(),
12 | });
13 |
14 | export const serverOffchainBasicSubscriptions = z.array(
15 | serverOffchainBasicSubscription,
16 | );
17 |
18 | export const offchainBasicSubscriptionSchema =
19 | serverOffchainBasicSubscription.transform((item) => ({
20 | assetId: item.AssetId,
21 | owner: item.Owner,
22 | pool: item.Pool,
23 | locked: item.Locked,
24 | bonds: item.Bonds,
25 | forever: item.Forever,
26 | createdAt: item.CreatedAt,
27 | updatedAt: item.UpdatedAt,
28 | }));
29 |
30 | export const offchainBasicSubscriptionsSchema =
31 | serverOffchainBasicSubscriptions.transform((items) =>
32 | items.map((item) => ({
33 | assetId: item.AssetId,
34 | owner: item.Owner,
35 | pool: item.Pool,
36 | locked: item.Locked,
37 | bonds: item.Bonds,
38 | forever: item.Forever,
39 | createdAt: item.CreatedAt,
40 | updatedAt: item.UpdatedAt,
41 | })),
42 | );
43 |
44 | export type OffchainBasicSubscription = z.infer<
45 | typeof offchainBasicSubscriptionSchema
46 | >;
47 |
48 | export type OffchainBasicSubscriptions = z.infer<
49 | typeof offchainBasicSubscriptionsSchema
50 | >;
51 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ['./src/**/*.{js,jsx,ts,tsx}'],
4 | theme: {
5 | extend: {
6 | colors: {
7 | 'indigo': {
8 | 50: '#E5EDFF',
9 | 100: '#D1DEFF',
10 | 200: '#B2C8FF',
11 | 300: '#99B5FF',
12 | 400: '#84A7FF',
13 | 500: '#749BFF',
14 | 600: '#5582F6',
15 | 700: '#396EF4',
16 | 800: '#1E4DC7',
17 | 900: '#163480',
18 | },
19 | },
20 | },
21 | },
22 | plugins: [],
23 | }
24 |
--------------------------------------------------------------------------------
/test/common.ts:
--------------------------------------------------------------------------------
1 | import { Configurations } from '../src/models';
2 |
3 | export const testConfig = (override?: {}): Configurations =>
4 | Object.assign(
5 | {
6 | poolId: '1',
7 | poolName: 'name',
8 | },
9 | override
10 | );
11 |
12 | /** This closely replicates what installation script does on page (e.g. /dev/index.html) */
13 | export const install = (name: string, config?: PartialUnlock ACS
26 |
27 | ACS unlocking is currently only possible in the Access app.
28 |
29 |
30 |
31 |
37 | Unlock ACS on Access
38 |
39 |
40 |
44 |
41 | This will redirect you to accessprotocol.co
42 |
43 |