add current key selector, fix revoke token/disconnect
This commit is contained in:
parent
fba3101753
commit
59d0beebe2
@ -1,7 +1,7 @@
|
|||||||
import { Callout, Button } from '@vegaprotocol/ui-toolkit';
|
import { Callout, Button } from '@vegaprotocol/ui-toolkit';
|
||||||
|
|
||||||
export function Index() {
|
export function Index() {
|
||||||
const vegaWallet = useVegaWallet();
|
const { publicKey, publicKeys, selectPublicKey } = useVegaWallet();
|
||||||
return (
|
return (
|
||||||
<div className="m-24 ">
|
<div className="m-24 ">
|
||||||
<Callout
|
<Callout
|
||||||
@ -17,7 +17,23 @@ export function Index() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Callout>
|
</Callout>
|
||||||
<pre>{JSON.stringify(vegaWallet, null, 2)}</pre>
|
<h1>Vega wallet</h1>
|
||||||
|
{publicKey && <p>Current: {publicKey.pub}</p>}
|
||||||
|
{publicKeys?.length && (
|
||||||
|
<select
|
||||||
|
name="change-key"
|
||||||
|
value={publicKey?.pub}
|
||||||
|
onChange={(e) => selectPublicKey(e.target.value)}
|
||||||
|
>
|
||||||
|
{publicKeys.map((pk) => (
|
||||||
|
<option key={pk.pub} value={pk.pub}>
|
||||||
|
{pk.name} ({pk.pub})
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
)}
|
||||||
|
<h2>Public keys</h2>
|
||||||
|
<pre>{JSON.stringify(publicKeys, null, 2)}</pre>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -42,7 +42,6 @@ export function VegaConnectDialog({
|
|||||||
{selectedConnector instanceof RestConnector ? (
|
{selectedConnector instanceof RestConnector ? (
|
||||||
<RestConnectorForm
|
<RestConnectorForm
|
||||||
connector={selectedConnector}
|
connector={selectedConnector}
|
||||||
setDialogOpen={setDialogOpen}
|
|
||||||
onAuthenticate={() => {
|
onAuthenticate={() => {
|
||||||
connectAndClose(selectedConnector);
|
connectAndClose(selectedConnector);
|
||||||
}}
|
}}
|
||||||
@ -57,19 +56,7 @@ export function VegaConnectDialog({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{Object.entries(connectors).map(([key, connector]) => (
|
{Object.entries(connectors).map(([key, connector]) => (
|
||||||
<button
|
<button key={key} onClick={() => setSelectedConnector(connector)}>
|
||||||
key={key}
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedConnector(connector);
|
|
||||||
// if (key === 'rest') {
|
|
||||||
// // show form so that we can get an authentication token before 'connecting'
|
|
||||||
// setIsRestConnector(true);
|
|
||||||
// } else {
|
|
||||||
// connect(connector);
|
|
||||||
// setDialogOpen(false);
|
|
||||||
// }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{key} provider
|
{key} provider
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
@ -20,27 +20,6 @@ export class RestConnector implements VegaConnector {
|
|||||||
authMethods: {
|
authMethods: {
|
||||||
bearer: `Bearer ${LocalStorage.getItem('vega_wallet_token')}`,
|
bearer: `Bearer ${LocalStorage.getItem('vega_wallet_token')}`,
|
||||||
},
|
},
|
||||||
promiseMiddleware: [
|
|
||||||
{
|
|
||||||
pre: async (requestContext) => {
|
|
||||||
const headers = requestContext.getHeaders();
|
|
||||||
if (
|
|
||||||
'Authorization' in headers &&
|
|
||||||
headers['Authorization'] === 'Bearer null'
|
|
||||||
) {
|
|
||||||
console.log('first login: getting and setting auth header');
|
|
||||||
requestContext.setHeaderParam(
|
|
||||||
'Authorization',
|
|
||||||
`Bearer ${LocalStorage.getItem('vega_wallet_token')}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return requestContext;
|
|
||||||
},
|
|
||||||
post: async (requestContext) => {
|
|
||||||
return requestContext;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
this.service = new DefaultApi(this.apiConfig);
|
this.service = new DefaultApi(this.apiConfig);
|
||||||
}
|
}
|
||||||
@ -57,12 +36,28 @@ export class RestConnector implements VegaConnector {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async connect() {
|
async connect() {
|
||||||
const res = await this.service.keysGet();
|
const res = await this.service.keysGet(
|
||||||
|
// Needs token passed in in case its the users first session and there was no
|
||||||
|
// token stored
|
||||||
|
createConfiguration({
|
||||||
|
authMethods: {
|
||||||
|
bearer: `Bearer ${LocalStorage.getItem('vega_wallet_token')}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
return res.keys;
|
return res.keys;
|
||||||
}
|
}
|
||||||
|
|
||||||
async disconnect() {
|
async disconnect() {
|
||||||
await this.service.authTokenDelete();
|
await this.service.authTokenDelete(
|
||||||
|
// Needs token passed in in case its the users first session and there was no
|
||||||
|
// token stored
|
||||||
|
createConfiguration({
|
||||||
|
authMethods: {
|
||||||
|
bearer: `Bearer ${LocalStorage.getItem('vega_wallet_token')}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
LocalStorage.removeItem('vega_wallet_token');
|
LocalStorage.removeItem('vega_wallet_token');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,11 +2,27 @@ import { VegaKey } from '@vegaprotocol/vegawallet-service-api-client';
|
|||||||
import { createContext } from 'react';
|
import { createContext } from 'react';
|
||||||
import { VegaConnector } from './connectors';
|
import { VegaConnector } from './connectors';
|
||||||
|
|
||||||
interface VegaWalletContextShape {
|
export interface VegaKeyExtended extends VegaKey {
|
||||||
publicKey: VegaKey | null;
|
name: string;
|
||||||
publicKeys: VegaKey[] | null;
|
}
|
||||||
|
|
||||||
|
export interface VegaWalletContextShape {
|
||||||
|
/** The current select public key */
|
||||||
|
publicKey: VegaKeyExtended | null;
|
||||||
|
|
||||||
|
/** Public keys stored in users wallet */
|
||||||
|
publicKeys: VegaKeyExtended[] | null;
|
||||||
|
|
||||||
|
/** Calls connect on the supplied connector, storing the returned keys */
|
||||||
connect: (connector: VegaConnector) => Promise<void>;
|
connect: (connector: VegaConnector) => Promise<void>;
|
||||||
|
|
||||||
|
/** Disconnects from the connector and clears public key state */
|
||||||
disconnect: () => Promise<void>;
|
disconnect: () => Promise<void>;
|
||||||
|
|
||||||
|
/** Sets the current selected public key */
|
||||||
|
selectPublicKey: (publicKey: string) => void;
|
||||||
|
|
||||||
|
/** Reference to the connector */
|
||||||
connector: VegaConnector | null;
|
connector: VegaConnector | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { VegaKey } from '@vegaprotocol/vegawallet-service-api-client';
|
|
||||||
import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
|
import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
|
||||||
|
import { VegaKeyExtended, VegaWalletContextShape } from '.';
|
||||||
import { VegaConnector } from './connectors';
|
import { VegaConnector } from './connectors';
|
||||||
import { VegaWalletContext } from './context';
|
import { VegaWalletContext } from './context';
|
||||||
|
|
||||||
@ -8,16 +8,23 @@ interface VegaWalletProviderProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
|
export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
|
||||||
const [publicKey, setPublicKey] = useState<VegaKey | null>(null);
|
const [publicKey, setPublicKey] = useState<VegaKeyExtended | null>(null);
|
||||||
const [publicKeys, setPublicKeys] = useState<VegaKey[] | null>(null);
|
const [publicKeys, setPublicKeys] = useState<VegaKeyExtended[] | null>(null);
|
||||||
const connector = useRef<VegaConnector | null>(null);
|
const connector = useRef<VegaConnector | null>(null);
|
||||||
|
|
||||||
const connect = useCallback(async (c: VegaConnector) => {
|
const connect = useCallback(async (c: VegaConnector) => {
|
||||||
connector.current = c;
|
connector.current = c;
|
||||||
try {
|
try {
|
||||||
const res = await c.connect();
|
const res = await connector.current.connect();
|
||||||
setPublicKeys(res);
|
const publicKeysWithName = res.map((pk) => {
|
||||||
setPublicKey(res[0]);
|
const nameMeta = pk.meta?.find((m) => m.key === 'name');
|
||||||
|
return {
|
||||||
|
...pk,
|
||||||
|
name: nameMeta?.value ? nameMeta.value : 'None',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setPublicKeys(publicKeysWithName);
|
||||||
|
setPublicKey(publicKeysWithName[0]);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log('connect failed');
|
console.log('connect failed');
|
||||||
}
|
}
|
||||||
@ -34,15 +41,33 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const contextValue = useMemo(() => {
|
const selectPublicKey = useCallback(
|
||||||
|
(key: string) => {
|
||||||
|
if (!publicKeys || !publicKeys.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedKey = publicKeys.find((k) => k.pub === key);
|
||||||
|
|
||||||
|
if (!selectedKey) {
|
||||||
|
throw new Error('Public key doesnt exist');
|
||||||
|
}
|
||||||
|
|
||||||
|
setPublicKey(selectedKey);
|
||||||
|
},
|
||||||
|
[publicKeys]
|
||||||
|
);
|
||||||
|
|
||||||
|
const contextValue = useMemo<VegaWalletContextShape>(() => {
|
||||||
return {
|
return {
|
||||||
publicKey,
|
publicKey,
|
||||||
publicKeys,
|
publicKeys,
|
||||||
|
selectPublicKey,
|
||||||
connect,
|
connect,
|
||||||
disconnect,
|
disconnect,
|
||||||
connector: connector.current,
|
connector: connector.current,
|
||||||
};
|
};
|
||||||
}, [publicKey, publicKeys, connect, disconnect, connector]);
|
}, [publicKey, publicKeys, selectPublicKey, connect, disconnect, connector]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VegaWalletContext.Provider value={contextValue}>
|
<VegaWalletContext.Provider value={contextValue}>
|
||||||
|
@ -8,13 +8,11 @@ interface FormFields {
|
|||||||
|
|
||||||
interface RestConnectorFormProps {
|
interface RestConnectorFormProps {
|
||||||
connector: RestConnector;
|
connector: RestConnector;
|
||||||
setDialogOpen: (isOpen: boolean) => void;
|
|
||||||
onAuthenticate: () => void;
|
onAuthenticate: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function RestConnectorForm({
|
export function RestConnectorForm({
|
||||||
connector,
|
connector,
|
||||||
setDialogOpen,
|
|
||||||
onAuthenticate,
|
onAuthenticate,
|
||||||
}: RestConnectorFormProps) {
|
}: RestConnectorFormProps) {
|
||||||
const {
|
const {
|
||||||
@ -41,7 +39,7 @@ export function RestConnectorForm({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="vega-wallet-form">
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div style={{ marginBottom: 10 }}>
|
<div style={{ marginBottom: 10 }}>
|
||||||
<input
|
<input
|
||||||
{...register('wallet', { required: 'Required' })}
|
{...register('wallet', { required: 'Required' })}
|
||||||
|
@ -24,7 +24,7 @@
|
|||||||
"autoprefixer": "^10.4.2",
|
"autoprefixer": "^10.4.2",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
"@radix-ui/react-dialog": "^0.1.5",
|
"@radix-ui/react-dialog": "^0.1.5",
|
||||||
"@vegaprotocol/vegawallet-service-api-client": "^0.3.0",
|
"@vegaprotocol/vegawallet-service-api-client": "^0.4.1",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"env-cmd": "^10.1.0",
|
"env-cmd": "^10.1.0",
|
||||||
"graphql": "^15.7.2",
|
"graphql": "^15.7.2",
|
||||||
|
@ -5221,10 +5221,10 @@
|
|||||||
"@typescript-eslint/types" "5.10.2"
|
"@typescript-eslint/types" "5.10.2"
|
||||||
eslint-visitor-keys "^3.0.0"
|
eslint-visitor-keys "^3.0.0"
|
||||||
|
|
||||||
"@vegaprotocol/vegawallet-service-api-client@^0.3.0":
|
"@vegaprotocol/vegawallet-service-api-client@^0.4.1":
|
||||||
version "0.3.0"
|
version "0.4.1"
|
||||||
resolved "https://registry.yarnpkg.com/@vegaprotocol/vegawallet-service-api-client/-/vegawallet-service-api-client-0.3.0.tgz#93ef25f94a2fb3280928053eceed945d00bb0a3a"
|
resolved "https://registry.yarnpkg.com/@vegaprotocol/vegawallet-service-api-client/-/vegawallet-service-api-client-0.4.1.tgz#182a15ad49652d33a6db2eb55fa934bc71855cc4"
|
||||||
integrity sha512-JQHdKI/B6hvnqdXQpWi+zsU2tiJJzkNaZE/aOFFbrdl9gUooF94piDzc5PPBx3YO4NA7mWKwaf4VqRckzjVKXw==
|
integrity sha512-c8TtLZTcGg2wQs30hyyTGNMH02cg8KcLymegWVxSQ9Id3M4SrdUVOlPoaGpKxjmUVUtQLoY/0+wtAJQVZBErmw==
|
||||||
dependencies:
|
dependencies:
|
||||||
es6-promise "^4.2.4"
|
es6-promise "^4.2.4"
|
||||||
url-parse "^1.4.3"
|
url-parse "^1.4.3"
|
||||||
|
Loading…
Reference in New Issue
Block a user