313e6e1217
* scaffold dealticket package, remove trading views from react-helpers * add deal ticket component, add intent utils, expand dialog and form group styles * add splash component, show market not found message if market doesnt exist * tidy up error handling * add handleError method for vega tx hook * add better testname for provider test, flesh out tests a bit more for deal ticket * Add unit tests for useVegaTransaction and useOrderSubmit hooks * add wrapper component for order dialog styles * add vega styled loader to ui toolkit and use in order dialog * add title prop to order dialog * split limit and market tickets into own files * add button radio component * revert dialog styles * move splash component to ui-toolkit, add story * convert intent to enum * Make button always type=button unless type prop is passed * inline filter logic for tif selector * add date-fns, add datetime to helpers * add order types to wallet package, make price undefined if order type is market * use enums in deal ticket logic * tidy up order state by moving submit and transaction hooks out of deal ticket * add comment for dialog styles * remove decimal from price input * add types package, delete old generated types from trading project * rename types package to graphql * update generate command to point to correct locations * fix use order submit test * use intent shadow helper * remove date-fns and format manually, update submit button error to use input-error * remove stray console.log
82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { useCallback, useState } from 'react';
|
|
import { Dialog } from '@vegaprotocol/ui-toolkit';
|
|
import { VegaConnector } from './connectors';
|
|
import { RestConnectorForm } from './rest-connector-form';
|
|
import { useEffect } from 'react';
|
|
import { RestConnector } from './connectors/rest-connector';
|
|
import { useVegaWallet } from './hooks';
|
|
|
|
export interface VegaConnectDialogProps {
|
|
connectors: { [name: string]: VegaConnector };
|
|
dialogOpen: boolean;
|
|
setDialogOpen: (isOpen: boolean) => void;
|
|
}
|
|
|
|
export function VegaConnectDialog({
|
|
connectors,
|
|
dialogOpen,
|
|
setDialogOpen,
|
|
}: VegaConnectDialogProps) {
|
|
const { connect } = useVegaWallet();
|
|
|
|
// Selected connector, we need to show the auth form if the rest connector (which is
|
|
// currently the only way to connect) is selected.
|
|
const [selectedConnector, setSelectedConnector] =
|
|
useState<VegaConnector | null>(null);
|
|
|
|
// Connects with the provided connector instance and closes the modal
|
|
const connectAndClose = useCallback(
|
|
(connector: VegaConnector) => {
|
|
connect(connector);
|
|
setDialogOpen(false);
|
|
},
|
|
[connect, setDialogOpen]
|
|
);
|
|
|
|
// Effect to immediately connect if the selected connector is NOT a
|
|
// rest connector
|
|
useEffect(() => {
|
|
if (
|
|
selectedConnector !== null &&
|
|
selectedConnector instanceof RestConnector === false
|
|
) {
|
|
connectAndClose(selectedConnector);
|
|
}
|
|
}, [selectedConnector, connectAndClose]);
|
|
|
|
return (
|
|
<Dialog
|
|
open={dialogOpen}
|
|
onChange={setDialogOpen}
|
|
title="Connect to your Vega Wallet"
|
|
>
|
|
{selectedConnector instanceof RestConnector ? (
|
|
<RestConnectorForm
|
|
connector={selectedConnector}
|
|
onAuthenticate={() => {
|
|
connectAndClose(selectedConnector);
|
|
}}
|
|
/>
|
|
) : (
|
|
<ul
|
|
className="flex flex-col justify-center gap-4 items-start"
|
|
data-testid="connectors-list"
|
|
>
|
|
{Object.entries(connectors).map(([key, connector]) => (
|
|
<li key={key} className="mb-12 last:mb-0">
|
|
<button
|
|
key={key}
|
|
onClick={() => setSelectedConnector(connector)}
|
|
className="capitalize hover:text-vega-pink dark:hover:text-vega-yellow"
|
|
>
|
|
{key} provider
|
|
</button>
|
|
<p>{connector.description}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</Dialog>
|
|
);
|
|
}
|