LaconicNetwork/vega-frontend-monorepo
6
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: wire up party profile query

Browse Source
This commit is contained in:
Matthew Russell
2024-03-04 14:32:39 +00:00
parent 83f45704b8
commit 124adfbc2c
3 changed files with 93 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/trading/components/vega-wallet-connect-button/PartyProfiles.graphql
+14
View File
@@ -0,0 +1,14 @@
query PartyProfiles($partyIds: [ID!]) {
partiesProfilesConnection(ids: $partyIds) {
edges {
node {
partyId
alias
metadata {
key
value
}
}
}
}
}
apps/trading/components/vega-wallet-connect-button/__generated__/PartyProfiles.ts
Generated
+57
View File
@@ -0,0 +1,57 @@
import * as Types from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type PartyProfilesQueryVariables = Types.Exact<{
partyIds?: Types.InputMaybe<Array<Types.Scalars['ID']> | Types.Scalars['ID']>;
}>;
export type PartyProfilesQuery = { __typename?: 'Query', partiesProfilesConnection?: { __typename?: 'PartiesProfilesConnection', edges: Array<{ __typename?: 'PartyProfileEdge', node: { __typename?: 'PartyProfile', partyId: string, alias: string, metadata: Array<{ __typename?: 'Metadata', key: string, value: string }> } }> } | null };
export const PartyProfilesDocument = gql`
query PartyProfiles($partyIds: [ID!]) {
partiesProfilesConnection(ids: $partyIds) {
edges {
node {
partyId
alias
metadata {
key
value
}
}
}
}
}
`;
/**
* __usePartyProfilesQuery__
*
* To run a query within a React component, call `usePartyProfilesQuery` and pass it any options that fit your needs.
* When your component renders, `usePartyProfilesQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = usePartyProfilesQuery({
* variables: {
* partyIds: // value for 'partyIds'
* },
* });
*/
export function usePartyProfilesQuery(baseOptions?: Apollo.QueryHookOptions<PartyProfilesQuery, PartyProfilesQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<PartyProfilesQuery, PartyProfilesQueryVariables>(PartyProfilesDocument, options);
}
export function usePartyProfilesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyProfilesQuery, PartyProfilesQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<PartyProfilesQuery, PartyProfilesQueryVariables>(PartyProfilesDocument, options);
}
export type PartyProfilesQueryHookResult = ReturnType<typeof usePartyProfilesQuery>;
export type PartyProfilesLazyQueryHookResult = ReturnType<typeof usePartyProfilesLazyQuery>;
export type PartyProfilesQueryResult = Apollo.QueryResult<PartyProfilesQuery, PartyProfilesQueryVariables>;
apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
+22 -34
View File
@@ -13,11 +13,12 @@ import {
TradingDropdownSeparator,
TradingDropdownItem,
TradingDropdownRadioItem,
Tooltip,
TradingDropdownItemIndicator,
} from '@vegaprotocol/ui-toolkit';
import { isBrowserWalletInstalled, type Key } from '@vegaprotocol/wallet';
import { useDialogStore, useVegaWallet } from '@vegaprotocol/wallet-react';
import { useCopyTimeout } from '@vegaprotocol/react-helpers';
import classNames from 'classnames';
import { ViewType, useSidebar } from '../sidebar';
import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
import { useT } from '../../lib/use-t';
@@ -147,44 +148,31 @@ const KeypairItem = ({ pk, active }: { pk: Key; active: boolean }) => {
return (
<TradingDropdownRadioItem value={pk.publicKey}>
<div
className="flex flex-1 mr-2 justify-between"
className={classNames('flex-1 mr-2', {
'text-default': active,
'text-muted': !active,
})}
data-testid={`key-${pk.publicKey}`}
>
<span className="flex flex-col grow gap-px mr-2 max-w-[292px]">
<span className="flex items-center gap-1 justify-between">
<span>{truncateByChars(pk.publicKey)}</span>
<CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
<Tooltip description={t('Copied')} open={copied}>
<button
data-testid="copy-vega-public-key"
onClick={(e) => e.stopPropagation()}
>
<span className="sr-only">{t('Copy')}</span>
<VegaIcon name={VegaIconNames.COPY} />
</button>
</Tooltip>
</CopyToClipboard>
</span>
<span className="flex items-center gap-1 justify-between">
<span className="text-xs text-secondary text-ellipsis overflow-hidden">
<span className="uppercase">On chain alias:</span>{' '}
foobarsdfsldjf;laksdjf;alskdjfaksldjfsdfjadskfjdskjfksdjfksdjf
</span>
<button title={t('Edit alias')}>
<span className="sr-only">{t('Edit alias')}</span>
<VegaIcon name={VegaIconNames.EDIT} />
<span className={classNames('mr-2 uppercase')}>
{pk.name}
{' | '}
{truncateByChars(pk.publicKey)}
</span>
<span className="inline-flex items-center gap-1">
<CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
<button
data-testid="copy-vega-public-key"
onClick={(e) => e.stopPropagation()}
>
<span className="sr-only">{t('Copy')}</span>
<VegaIcon name={VegaIconNames.COPY} />
</button>
</span>
<span className="flex gap-1 justify-between">
<span className="text-xs text-secondary">
<span className="uppercase">Key alias:</span>
{pk.name}
</span>
</span>
</CopyToClipboard>
{copied && <span className="text-xs">{t('Copied')}</span>}
</span>
</div>
{/* <TradingDropdownItemIndicator /> */}
<TradingDropdownItemIndicator />
</TradingDropdownRadioItem>
);
};