neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display chain icons in Teleport selector (#5426)

Browse Source
This commit is contained in:
Jaco 2021-06-03 09:35:41 +03:00 committed by GitHub
parent ca5cefa20f
commit edb58b700f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/page-parachains/src/Teleport.tsx
View File

@ -1,10 +1,13 @@
// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
// SPDX-License-Identifier: Apache-2.0
import BN from 'bn.js';
import type BN from 'bn.js';
import type { LinkOption } from '@polkadot/apps-config/endpoints/types';
import type { Option } from '@polkadot/apps-config/settings/types';
import React, { useMemo, useState } from 'react';
import { Dropdown, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
import { ChainImg, Dropdown, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
import { useApi, useTeleport } from '@polkadot/react-hooks';
import { Available } from '@polkadot/react-query';
import { BN_ZERO } from '@polkadot/util';
@ -16,7 +19,25 @@ interface Props {
}
const INVALID_PARAID = Number.MAX_SAFE_INTEGER;
const DEFAULT_WEIGHT = 100_000_000; // 30_000_000 as per the code, add a margin
const DEFAULT_WEIGHT = 30_000_000 * 2; // 30_000_000 as per the code, add a margin
function createOption ({ info, paraId, text }: LinkOption, index: number): Option {
return {
text: (
<div
className='ui--Dropdown-item'
key={paraId}
>
<ChainImg
className='ui--Dropdown-icon'
logo={info}
/>
<div className='ui--Dropdown-name'>{text}</div>
</div>
),
value: paraId || index
};
}
function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
const { t } = useTranslation();
@ -31,7 +52,7 @@ function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
const { allowTeleport, destinations, isParachain } = useTeleport();
const chainOpts = useMemo(
() => destinations.map(({ paraId, text }, index) => ({ text, value: paraId || index })),
() => destinations.map(createOption),
[destinations]
);