+
@@ -76,7 +75,9 @@ export const Button = ({
>
{icon}
{text && (
-
+
{text} {rightIcon}
)}
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 453a5a69..00065406 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -42,7 +42,7 @@ const Profile = () => {
diff --git a/src/components/WalletProvider.tsx b/src/components/WalletProvider.tsx
index 0698038c..17a4f33a 100644
--- a/src/components/WalletProvider.tsx
+++ b/src/components/WalletProvider.tsx
@@ -1,9 +1,13 @@
+import { ArIO } from '@ar.io/sdk/web';
+import { ARNS_REGISTRY_ADDRESS } from '@src/constants';
import { useEffectOnce } from '@src/hooks/useEffectOnce';
import { ArConnectWalletConnector } from '@src/services/wallets/ArConnectWalletConnector';
import { useGlobalState } from '@src/store';
+import { KEY_WALLET_TYPE } from '@src/store/persistent';
import { WALLET_TYPES } from '@src/types';
import { mioToIo } from '@src/utils';
import { ArweaveTransactionID } from '@src/utils/ArweaveTransactionId';
+import { showErrorToast } from '@src/utils/toast';
import Ar from 'arweave/web/ar';
import { ReactElement, useEffect } from 'react';
@@ -15,10 +19,16 @@ const WalletProvider = ({ children }: { children: ReactElement }) => {
const setWalletStateInitialized = useGlobalState(
(state) => state.setWalletStateInitialized,
);
+ const setGateway = useGlobalState((state) => state.setGateway);
+
+ const wallet = useGlobalState((state) => state.wallet);
const updateWallet = useGlobalState((state) => state.updateWallet);
const setBalances = useGlobalState((state) => state.setBalances);
const arweave = useGlobalState((state) => state.arweave);
const arIOReadSDK = useGlobalState((state) => state.arIOReadSDK);
+ const setArIOWriteableSDK = useGlobalState(
+ (state) => state.setArIOWriteableSDK,
+ );
useEffect(() => {
window.addEventListener('arweaveWalletLoaded', updateIfConnected);
@@ -48,7 +58,7 @@ const WalletProvider = ({ children }: { children: ReactElement }) => {
setBalances(arBalance, ioBalance);
} catch (error) {
- // eventEmitter.emit('error', error);
+ showErrorToast(`${error}`);
}
};
@@ -56,8 +66,38 @@ const WalletProvider = ({ children }: { children: ReactElement }) => {
}
}, [walletAddress, blockHeight, arIOReadSDK, arweave, setBalances]);
+ useEffect(() => {
+ if (wallet) {
+ const signer = wallet.signer;
+
+ if (signer) {
+ const writeable = ArIO.init({
+ contractTxId: ARNS_REGISTRY_ADDRESS.toString(),
+ signer,
+ });
+ setArIOWriteableSDK(writeable);
+ }
+ } else {
+ setArIOWriteableSDK(undefined);
+ }
+ }, [setArIOWriteableSDK, wallet]);
+
+ useEffect(() => {
+ if (walletAddress) {
+ const update = async () => {
+ const gateway = await arIOReadSDK.getGateway({
+ address: walletAddress.toString(),
+ });
+ setGateway(gateway);
+ };
+ update();
+ } else {
+ setGateway(undefined);
+ }
+ }, [arIOReadSDK, setGateway, walletAddress]);
+
const updateIfConnected = async () => {
- const walletType = window.localStorage.getItem('walletType');
+ const walletType = window.localStorage.getItem(KEY_WALLET_TYPE);
try {
if (walletType === WALLET_TYPES.ARCONNECT) {
@@ -67,7 +107,7 @@ const WalletProvider = ({ children }: { children: ReactElement }) => {
updateWallet(address, connector);
}
} catch (error) {
- // eventEmitter.emit('error', error);
+ showErrorToast(`${error}`);
} finally {
setWalletStateInitialized(true);
}
diff --git a/src/components/forms/FormRow.tsx b/src/components/forms/FormRow.tsx
new file mode 100644
index 00000000..77ff7e18
--- /dev/null
+++ b/src/components/forms/FormRow.tsx
@@ -0,0 +1,134 @@
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { FormErrorIcon } from '../icons';
+
+export enum RowType {
+ TOP,
+ MIDDLE,
+ BOTTOM,
+ SINGLE,
+}
+
+const ROUND_STYLES = {
+ [RowType.TOP]: 'rounded-t-md',
+ [RowType.BOTTOM]: 'rounded-b-md',
+ [RowType.SINGLE]: 'rounded-md',
+ [RowType.MIDDLE]: '',
+};
+
+const FormRow = ({
+ formPropertyName,
+ formState,
+ placeholder,
+ enabled = true,
+ setFormState,
+ errorMessages,
+ setErrorMessages,
+ label,
+ rowType = RowType.MIDDLE,
+ leftComponent,
+ rightComponent,
+ validateProperty,
+}: {
+ formPropertyName: string;
+ placeholder?: string;
+ enabled?: boolean;
+ formState: Record
;
+ setFormState: (formState: Record) => void;
+ errorMessages: Record;
+ setErrorMessages: (errorMessages: Record) => void;
+ label: string;
+ rowType?: RowType;
+ leftComponent?: JSX.Element;
+ rightComponent?: JSX.Element;
+ validateProperty: (value: string) => string | undefined;
+}) => {
+ const roundStyle = ROUND_STYLES[rowType];
+
+ const errorMessage = errorMessages[formPropertyName];
+ const hasError = enabled && errorMessage?.trim().length > 0;
+
+ return (
+ <>
+
+
+
+
+ {leftComponent}
+
{
+ if (hasError) {
+ const cleared = { ...errorMessages };
+ delete cleared[formPropertyName];
+ setErrorMessages(cleared);
+ }
+ setFormState({
+ ...formState,
+ [formPropertyName]: e.target.value,
+ });
+ }}
+ onBlur={() => {
+ const errMessage = validateProperty(
+ formState[formPropertyName],
+ );
+ if (errMessage) {
+ setErrorMessages({
+ ...errorMessages,
+ [formPropertyName]: errMessage,
+ });
+ } else {
+ const cleared = { ...errorMessages };
+ delete cleared[formPropertyName];
+ setErrorMessages(cleared);
+ }
+ }}
+ />
+ {hasError && (
+
+
+
+
+
+
+
+
+
+
+ {errorMessage}
+
+
+
+
+
+
+ )}
+ {rightComponent}
+
+
+
);
}
diff --git a/src/layout/Sidebar.tsx b/src/layout/Sidebar.tsx
index 444580b4..538e2109 100644
--- a/src/layout/Sidebar.tsx
+++ b/src/layout/Sidebar.tsx
@@ -2,25 +2,22 @@ import { ARIO_DOCS_URL, GATEWAY_CONTRACT_URL } from '@src/constants';
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
+import Button from '@src/components/Button';
import {
ArioLogoIcon,
- BinocularsIcon,
CloseDrawerIcon,
ContractIcon,
- DashboardIcon,
DocsIcon,
GatewaysIcon,
LinkArrowIcon,
OpenDrawerIcon,
- StakingIcon,
} from '../components/icons';
-import Button from '@src/components/Button';
const ROUTES_PRIMARY = [
- { title: 'Dashboard', icon:
, path: '/dashboard' },
+ // { title: 'Dashboard', icon:
, path: '/dashboard' },
{ title: 'Gateways', icon:
, path: '/gateways' },
- { title: 'Staking', icon:
, path: '/staking' },
- { title: 'Observers', icon:
, path: '/observers' },
+ // { title: 'Staking', icon:
, path: '/staking' },
+ // { title: 'Observers', icon:
, path: '/observers' },
];
const ROUTES_SECONDARY = [
@@ -74,19 +71,19 @@ const Sidebar = () => {
- {ROUTES_SECONDARY.map(({ title, icon, path }, index) => (
- }
- title={path}
- text={sidebarOpen ? title : undefined}
- onClick={() => {
- window.open(path, '_blank');
- }}
- />
- ))}
+ {ROUTES_SECONDARY.map(({ title, icon, path }, index) => (
+ }
+ title={path}
+ text={sidebarOpen ? title : undefined}
+ onClick={() => {
+ window.open(path, '_blank');
+ }}
+ />
+ ))}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index a2c69239..4ad41107 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,6 +1,6 @@
import Header from "@src/components/Header";
-function Dashboard() {
+const Dashboard = () => {
return (
diff --git a/src/pages/Gateways/Banner.tsx b/src/pages/Gateways/Banner.tsx
new file mode 100644
index 00000000..38e8cc33
--- /dev/null
+++ b/src/pages/Gateways/Banner.tsx
@@ -0,0 +1,115 @@
+import {
+ BannerRightChevron,
+ GatewayHoverIcon,
+ GatewayIcon,
+ PinkArrowIcon,
+ StartGatewayCubes,
+} from '@src/components/icons';
+import ConnectModal from '@src/components/modals/ConnectModal';
+import StartGatewayModal from '@src/components/modals/StartGatewayModal';
+import { GatewayStatus, useGatewayInfo } from '@src/hooks/useGatewayInfo';
+import { useGlobalState } from '@src/store';
+import { useState } from 'react';
+
+const InfoSection = ({ label, value }: { label: string; value: string }) => {
+ return (
+
+ );
+};
+
+const Banner = () => {
+ const walletAddress = useGlobalState((state) => state.walletAddress);
+
+ const [loginOpen, setLoginOpen] = useState(false);
+ const [startGatewayOpen, setStartGatewayOpen] = useState(false);
+
+ const { gatewayInfo, gatewayStatus } = useGatewayInfo();
+
+ return gatewayStatus !== GatewayStatus.NOT_FOUND ? (
+
+
+
setLoginOpen(false)} />
+ setStartGatewayOpen(false)}
+ />
+
+ ) : (
+
+
+
setLoginOpen(false)} />
+ setStartGatewayOpen(false)}
+ />
+
+ );
+};
+
+export default Banner;
diff --git a/src/pages/Gateways.tsx b/src/pages/Gateways/index.tsx
similarity index 57%
rename from src/pages/Gateways.tsx
rename to src/pages/Gateways/index.tsx
index 50e86e61..1237f0db 100644
--- a/src/pages/Gateways.tsx
+++ b/src/pages/Gateways/index.tsx
@@ -1,12 +1,11 @@
import Header from "@src/components/Header";
+import Banner from "./Banner";
-function Gateways() {
+const Gateways = () => {
return (
);
}
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index ee1b4d76..a9531723 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -1,4 +1,4 @@
-function NotFound() {
+const NotFound = () => {
return (
Page Not Found
diff --git a/src/pages/Observers.tsx b/src/pages/Observers.tsx
index 483d0122..69f31209 100644
--- a/src/pages/Observers.tsx
+++ b/src/pages/Observers.tsx
@@ -1,6 +1,6 @@
import Header from "@src/components/Header";
-function Observers() {
+const Observers = () => {
return (
diff --git a/src/pages/Staking.tsx b/src/pages/Staking.tsx
index eac28179..9fa249b2 100644
--- a/src/pages/Staking.tsx
+++ b/src/pages/Staking.tsx
@@ -1,6 +1,6 @@
import Header from '@src/components/Header';
-function Staking() {
+const Staking = () => {
return (
diff --git a/src/services/wallets/ArConnectWalletConnector.ts b/src/services/wallets/ArConnectWalletConnector.ts
index 77c50b48..3412e680 100644
--- a/src/services/wallets/ArConnectWalletConnector.ts
+++ b/src/services/wallets/ArConnectWalletConnector.ts
@@ -1,13 +1,12 @@
import { ArconnectError, WalletNotInstalledError } from '@src/utils/errors';
import { PermissionType } from 'arconnect';
-import { ApiConfig } from 'arweave/node/lib/api';
-// import { CustomSignature, SignatureType, Transaction } from 'warp-contracts';
+import { ApiConfig } from 'arweave/web/lib/api';
-// import { ARCONNECT_UNRESPONSIVE_ERROR } from '../../components/layout/Notifications/Notifications';
-import { ArconnectSigner } from '@ar.io/sdk';
+import { ArconnectSigner } from '@ar.io/sdk/web';
import { executeWithTimeout } from '@src/utils';
import { ArweaveTransactionID } from '@src/utils/ArweaveTransactionId';
import { ArweaveWalletConnector, WALLET_TYPES } from '../../types';
+import { KEY_WALLET_TYPE } from '@src/store/persistent';
export const ARCONNECT_WALLET_PERMISSIONS: PermissionType[] = [
'ACCESS_ADDRESS',
@@ -15,6 +14,7 @@ export const ARCONNECT_WALLET_PERMISSIONS: PermissionType[] = [
'ACCESS_PUBLIC_KEY',
'SIGN_TRANSACTION',
'ACCESS_ARWEAVE_CONFIG',
+ 'SIGNATURE',
];
export const ARCONNECT_UNRESPONSIVE_ERROR =
'There was an issue initializing ArConnect. Please reload the page to initialize.';
@@ -25,15 +25,7 @@ export class ArConnectWalletConnector implements ArweaveWalletConnector {
constructor() {
this._wallet = window?.arweaveWallet;
- // this.signer = new ArconnectSigner(this._wallet, );
-
- // {
- // signer: async (transaction: Transaction) => {
- // const signedTransaction = await this._wallet.sign(transaction);
- // Object.assign(transaction, signedTransaction);
- // },
- // // type: 'arweave' as SignatureType,
- // };
+ this.signer = new ArconnectSigner(this._wallet, null as any);
}
// The API has been shown to be unreliable, so we call each function with a timeout
@@ -61,7 +53,7 @@ export class ArConnectWalletConnector implements ArweaveWalletConnector {
return;
}
// confirm they have the extension installed
- localStorage.setItem('walletType', WALLET_TYPES.ARCONNECT);
+ localStorage.setItem(KEY_WALLET_TYPE, WALLET_TYPES.ARCONNECT);
const permissions = await this.safeArconnectApiExecutor(
this._wallet?.getPermissions,
);
@@ -86,15 +78,14 @@ export class ArConnectWalletConnector implements ArweaveWalletConnector {
// TODO: add arweave configs here
)
.catch((err) => {
- localStorage.removeItem('walletType');
+ localStorage.removeItem(KEY_WALLET_TYPE);
console.error(err);
throw new ArconnectError('User cancelled authentication.');
});
- // this.signer.signer.bind(this);
}
async disconnect(): Promise
{
- localStorage.removeItem('walletType');
+ localStorage.removeItem(KEY_WALLET_TYPE);
return this.safeArconnectApiExecutor(this._wallet?.disconnect);
}
diff --git a/src/store/index.ts b/src/store/index.ts
index dfca185b..feee2116 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,17 @@
-import { ArIO, ArIOReadable, EpochDistributionData } from '@ar.io/sdk/web';
-import { THEME_TYPES } from '@src/constants';
+import {
+ ArIO,
+ ArIOReadable,
+ ArIOWritable,
+ EpochDistributionData,
+ Gateway,
+} from '@ar.io/sdk/web';
+import {
+ ARNS_REGISTRY_ADDRESS,
+ DEFAULT_ARWEAVE_HOST,
+ DEFAULT_ARWEAVE_PORT,
+ DEFAULT_ARWEAVE_PROTOCOL,
+ THEME_TYPES,
+} from '@src/constants';
import { ArweaveWalletConnector } from '@src/types';
import { ArweaveTransactionID } from '@src/utils/ArweaveTransactionId';
import Arweave from 'arweave/web';
@@ -11,10 +23,12 @@ export type GlobalState = {
theme: ThemeType;
arweave: Arweave;
arIOReadSDK: ArIOReadable;
+ arIOWriteableSDK?: ArIOWritable;
blockHeight?: number;
currentEpoch?: EpochDistributionData;
walletAddress?: ArweaveTransactionID;
wallet?: ArweaveWalletConnector;
+ gateway?: Gateway;
balances: {
ar: number;
io: number;
@@ -30,6 +44,8 @@ export type GlobalStateActions = {
walletAddress?: ArweaveTransactionID,
wallet?: ArweaveWalletConnector,
) => void;
+ setGateway: (gateway?: Gateway) => void;
+ setArIOWriteableSDK: (arIOWriteableSDK?: ArIOWritable) => void;
setBalances(ar: number, io: number): void;
setWalletStateInitialized: (initialized: boolean) => void;
reset: () => void;
@@ -37,8 +53,12 @@ export type GlobalStateActions = {
export const initialGlobalState: GlobalState = {
theme: THEME_TYPES.DARK,
- arweave: Arweave.init({}),
- arIOReadSDK: ArIO.init(),
+ arweave: Arweave.init({
+ host: DEFAULT_ARWEAVE_HOST,
+ protocol: DEFAULT_ARWEAVE_PROTOCOL,
+ port: DEFAULT_ARWEAVE_PORT,
+ }),
+ arIOReadSDK: ArIO.init({ contractTxId: ARNS_REGISTRY_ADDRESS.toString() }),
balances: {
ar: 0,
io: 0,
@@ -64,12 +84,23 @@ export class GlobalStateActionBase implements GlobalStateActions {
this.set({ currentEpoch });
};
- updateWallet = (walletAddress?: ArweaveTransactionID, wallet?: ArweaveWalletConnector) => {
+ updateWallet = (
+ walletAddress?: ArweaveTransactionID,
+ wallet?: ArweaveWalletConnector,
+ ) => {
this.set({ walletAddress, wallet });
};
+ setGateway = (gateway?: Gateway) => {
+ this.set({ gateway });
+ };
+
+ setArIOWriteableSDK = (arIOWriteableSDK?: ArIOWritable) => {
+ this.set({ arIOWriteableSDK });
+ };
+
setBalances = (ar: number, io: number) => {
- this.set ({ balances: { ar, io } });
+ this.set({ balances: { ar, io } });
};
setWalletStateInitialized = (initialized: boolean) => {
diff --git a/src/store/persistent.ts b/src/store/persistent.ts
new file mode 100644
index 00000000..d12cdca0
--- /dev/null
+++ b/src/store/persistent.ts
@@ -0,0 +1,35 @@
+import { JoinNetworkParams } from '@ar.io/sdk/web';
+
+// KEYS FOR LOCAL STORAGE
+export const KEY_WALLET_TYPE = 'walletType';
+
+// PENDING DATA CACHE
+export interface PendingDataCache {
+ pendingJoinNetworkParams?: JoinNetworkParams;
+}
+
+export const getPendingDataCache = (
+ walletAddress: string | undefined,
+): PendingDataCache => {
+ if (!walletAddress) return {};
+ const pendingDataCache = localStorage.getItem(walletAddress);
+ return pendingDataCache ? JSON.parse(pendingDataCache) : {};
+};
+
+export const storePendingDataCache = (
+ walletAddress: string,
+ pendingDataCache: PendingDataCache,
+) => {
+ localStorage.setItem(walletAddress, JSON.stringify(pendingDataCache));
+};
+
+export const updatePendingDataCache = (
+ walletAddress: string,
+ pendingDataCache: PendingDataCache,
+) => {
+ const currentPendingDataCache = getPendingDataCache(walletAddress);
+ storePendingDataCache(walletAddress, {
+ ...currentPendingDataCache,
+ ...pendingDataCache,
+ });
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 26fe176f..fa5f4ee5 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,9 @@
import { THEME_TYPES } from '../constants';
+const COMMA_NUMBER_FORMAT = new Intl.NumberFormat('en-US', {
+ maximumFractionDigits: 1,
+});
+
// for tailwind css, need the change the root
export const applyThemePreference = (theme: string) => {
const { DARK, LIGHT } = THEME_TYPES;
@@ -34,4 +38,13 @@ export const formatBalance = (ar: number) => {
export function mioToIo(mio: number): number {
return mio / 1_000_000;
-}
\ No newline at end of file
+}
+
+/** Format number with commas, with maximum one fraction digit */
+export function formatWithCommas(num: number) {
+ return COMMA_NUMBER_FORMAT.format(num);
+}
+
+/** Utility for simulating delay times. Useful for development work and testing;
+ * do not use in production code. */
+export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
diff --git a/src/utils/toast.tsx b/src/utils/toast.tsx
new file mode 100644
index 00000000..98cae1ed
--- /dev/null
+++ b/src/utils/toast.tsx
@@ -0,0 +1,15 @@
+import { ToastCloseIcon } from '@src/components/icons';
+import toast from 'react-hot-toast';
+
+export const showErrorToast = (message: string) => {
+ toast.custom((t) => {
+ return (
+
+
{message}
+
+