Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: node selector #118

Merged
merged 2 commits into from
Jan 11, 2024
Merged

feat: node selector #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e0560f
feat: node selector
samsiegart Jan 11, 2024
e280fa3
fix: use sans font in dialogs
samsiegart Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
"devDependencies": {
"@agoric/cosmic-proto": "^0.3.0",
"@agoric/ertp": "^0.16.2",
"@agoric/rpc": "^0.7.2",
"@agoric/rpc": "^0.9.0",
"@agoric/smart-wallet": "^0.5.3",
"@agoric/ui-components": "^0.9.0",
"@agoric/web-components": "^0.13.2",
"@agoric/web-components": "^0.15.0",
"@agoric/zoe": "^0.26.2",
"@endo/eventual-send": "^0.17.6",
"@endo/init": "^0.5.60",
Expand Down
4 changes: 4 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { INTER_LOGO } from 'assets/assets';
import { MdBarChart } from 'react-icons/md';
import { FiExternalLink } from 'react-icons/fi';
import NoticeBanner from 'components/NoticeBanner';
import ChainConnectionErrorDialog from 'components/ChainConnectionErrorDialog';
import NodeSelectorDialog from 'components/NodeSelectorDialog';

import 'styles/globals.css';

Expand Down Expand Up @@ -53,6 +55,8 @@ const App = () => {
</a>
</motion.div>
</motion.div>
<ChainConnectionErrorDialog />
<NodeSelectorDialog />
</>
);
};
Expand Down
122 changes: 122 additions & 0 deletions src/components/ActionsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import { Dialog, Transition } from '@headlessui/react';
import clsx from 'clsx';
import { Fragment, ReactElement, useRef } from 'react';

type DialogAction = {
label: string;
action: () => void;
};

type Props = {
isOpen: boolean;
onClose: () => void;
title: string;
body: ReactElement;
primaryAction?: DialogAction;
secondaryAction?: DialogAction;
primaryActionDisabled?: boolean;
// Whether to initially focus the primary action.
initialFocusPrimary?: boolean;
overflow?: boolean;
};

const ActionsDialog = ({
isOpen,
onClose,
title,
body,
primaryAction,
secondaryAction,
primaryActionDisabled = false,
initialFocusPrimary = false,
overflow = false,
}: Props) => {
const primaryButtonRef = useRef(null);

return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog
as="div"
className="relative z-50"
onClose={onClose}
initialFocus={initialFocusPrimary ? primaryButtonRef : undefined}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center text-center cursor-pointer">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel
className={clsx(
'cursor-default w-full max-w-2xl pt-6 px-2 transform bg-white text-left align-middle shadow-xl transition-all rounded-2xl',
overflow ? 'overflow-visible' : 'overflow-hidden'
)}
>
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900 mx-8"
>
{title}
</Dialog.Title>
<div className="mt-4 mx-8">{body}</div>
<div className="py-6 px-8">
<div className="flex justify-end gap-1">
{secondaryAction && (
<button
className={clsx(
'inline-flex justify-center rounded-md border border-transparent',
'px-4 py-2 text-sm font-medium focus:outline-none focus-visible:ring-2',
'focus-visible:ring-purple-500 focus-visible:ring-offset-2',
'bg-gray-100 text-gray-500 hover:bg-gray-200 mx-4'
)}
onClick={secondaryAction.action}
>
{secondaryAction.label}
</button>
)}
{primaryAction && (
<button
ref={primaryButtonRef}
disabled={primaryActionDisabled}
className={clsx(
'inline-flex justify-center rounded-md border border-transparent',
'px-4 py-2 text-sm font-medium focus:outline-none focus-visible:ring-2',
'focus-visible:ring-purple-500 focus-visible:ring-offset-2',
primaryActionDisabled
? 'bg-gray-100 text-gray-300'
: 'bg-purple-100 text-purple-900 hover:bg-purple-200'
)}
onClick={primaryAction.action}
>
{primaryAction.label}
</button>
)}
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
);
};

export default ActionsDialog;
96 changes: 61 additions & 35 deletions src/components/ChainConnection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,12 @@ import {
termsIndexAgreedUponAtom,
smartWalletProvisionedAtom,
provisionToastIdAtom,
ChainConnection as ChainConnectionStore,
networkConfigPAtom,
rpcNodeAtom,
apiNodeAtom,
chainConnectionErrorAtom,
savedApiNodeAtom,
savedRpcNodeAtom,
} from 'store/app';
import {
watchContract,
Expand All @@ -32,37 +36,45 @@ import { makeAgoricChainStorageWatcher } from '@agoric/rpc';
import { sample } from 'lodash-es';
import ProvisionSmartWalletDialog from './ProvisionSmartWalletDialog';
import { querySwingsetParams } from 'utils/swingsetParams';
import { loadable } from 'jotai/utils';

import 'react-toastify/dist/ReactToastify.css';
import 'styles/globals.css';
import { loadable } from 'jotai/utils';
import SettingsButton from './SettingsButton';

const autoCloseDelayMs = 7000;

const useSmartWalletFeeQuery = (
chainConnection: ChainConnectionStore | null
) => {
const useSmartWalletFeeQuery = () => {
const [smartWalletFee, setFee] = useState<bigint | null>(null);
const [error, setError] = useState<Error | null>(null);
const [error, setError] = useState<unknown | null>(null);
const networkConfig = useAtomValue(loadable(networkConfigPAtom));

useEffect(() => {
const fetchParams = async () => {
assert(chainConnection);
if (networkConfig.state === 'loading') {
return;
}
if (networkConfig.state === 'hasError') {
setError(networkConfig.error);
}
const fetchParams = async (rpc: string) => {
try {
const params = await querySwingsetParams(
chainConnection.watcher.rpcAddr
);
const params = await querySwingsetParams(rpc);
console.debug('swingset params', params);
setFee(BigInt(params.params.powerFlagFees[0].fee[0].amount));
} catch (e: any) {
setError(e);
}
};

if (chainConnection) {
fetchParams();
if (networkConfig.state === 'hasData') {
const rpc = sample(networkConfig.data.rpcAddrs);
if (!rpc) {
setError('No RPC available in network config');
} else {
fetchParams(rpc);
}
}
}, [chainConnection]);
}, [networkConfig]);

return { smartWalletFee, error };
};
Expand All @@ -85,8 +97,14 @@ const ChainConnection = () => {
const [isTermsDialogOpen, setIsTermsDialogOpen] = useState(false);
const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState(false);
const { smartWalletFee, error: smartWalletFeeError } =
useSmartWalletFeeQuery(chainConnection);
useSmartWalletFeeQuery();
const networkConfig = useAtomValue(loadable(networkConfigPAtom));
const setRpcNode = useSetAtom(rpcNodeAtom);
const setApiNode = useSetAtom(apiNodeAtom);
const setChainConnectionError = useSetAtom(chainConnectionErrorAtom);
const savedApi = useAtomValue(savedApiNodeAtom);
const savedRpc = useAtomValue(savedRpcNodeAtom);

const areLatestTermsAgreed = termsAgreed === currentTermsIndex;

const handleTermsDialogClose = () => {
Expand Down Expand Up @@ -138,18 +156,11 @@ const ChainConnection = () => {
(err: Error) => console.error('got watchPurses err', err)
);

watchContract(
chainConnection.watcher,
{
setMetricsIndex,
setGovernedParamsIndex,
setInstanceIds,
},
() =>
toast.error(
'Error reading contract data from chain. See debug console for more info.'
)
);
watchContract(chainConnection.watcher, {
setMetricsIndex,
setGovernedParamsIndex,
setInstanceIds,
});
}, [
chainConnection,
mergeBrandToInfo,
Expand Down Expand Up @@ -180,17 +191,22 @@ const ChainConnection = () => {
if (networkConfig.state === 'hasError') {
throw new Error(Errors.networkConfig);
}

const config = networkConfig.data;
const rpc = sample(config.rpcAddrs);
if (!rpc) {
const rpc = savedRpc || sample(config.rpcAddrs);
const api = savedApi || sample(config.apiAddrs);
const chainId = config.chainName;

if (!rpc || !api || !chainId) {
throw new Error(Errors.networkConfig);
}
const chainId = config.chainName;
const watcher = makeAgoricChainStorageWatcher(rpc, chainId, e => {
setRpcNode(rpc);
setApiNode(api);
const watcher = makeAgoricChainStorageWatcher(api, chainId, e => {
console.error(e);
throw e;
setChainConnectionError(e);
});
const connection = await makeAgoricWalletConnection(watcher);
const connection = await makeAgoricWalletConnection(watcher, rpc);
setChainConnection({
...connection,
watcher,
Expand All @@ -208,7 +224,7 @@ const ChainConnection = () => {
toast.error('Network not found.');
break;
default:
toast.error('Error connecting to network:' + e.message);
setChainConnectionError(e);
break;
}
} finally {
Expand All @@ -219,7 +235,16 @@ const ChainConnection = () => {
if (connectionInProgress) {
connect();
}
}, [connectionInProgress, networkConfig, setChainConnection]);
}, [
connectionInProgress,
networkConfig,
savedApi,
savedRpc,
setApiNode,
setChainConnection,
setChainConnectionError,
setRpcNode,
]);

const status = (() => {
if (connectionInProgress) {
Expand All @@ -232,6 +257,7 @@ const ChainConnection = () => {

return (
<div className="flex flex-row space-x-2">
<SettingsButton />
<div className="flex flex-row align-middle">
<NetworkDropdown />
</div>
Expand Down
Loading