Sort asset list in payments

package.json

@@ -18,6 +18,8 @@
     "@typescript-eslint/parser": "^2.2.0",
     "@waves.exchange/provider-cloud": "1.0.2",
     "@waves.exchange/provider-web": "1.0.2",
+    "@waves/node-api-js": "^1.2.5-beta.6",
+    "@waves/provider-metamask": "^0.0.13",
     "@waves/signer": "1.0.2",
     "@waves/ts-lib-crypto": "^1.4.3",
     "@waves/waves-transactions": "4.2.1",

src/components/Address/Address.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface IProps {
+    address: string;
+}
+
+export class Address extends React.Component<IProps> {
+
+    render() {
+        const address = this.props.address;
+
+        // 6...4
+        const formated = `${address.slice(0, 6)}...${address.slice(-4)}`
+
+        return (<div>{formated} </div>);
+    }
+}

src/components/Address/index.ts

@@ -0,0 +1 @@
+export * from './Address';

src/components/App/index.tsx

@@ -4,7 +4,7 @@ import { AccountStore } from "@stores";
 import { Route, Router } from 'react-router-dom';
 import DappUi from "@components/DappUi";
 import NotificationStore from "@stores/NotificationStore";
-import Home from "@components/Home";
+import { Home } from "@components/Home";
 import HistoryStore from "@stores/HistoryStore";
 import SignDialog from '@components/SignDialog';
 

src/components/Avatar/index.tsx

@@ -24,7 +24,7 @@ interface IProps {
     onClick?: () => void
 }
 
-const Avatar: React.FunctionComponent<IProps> = (props) => {
+export const Avatar: React.FunctionComponent<IProps> = (props) => {
     const {size = SIZE, address, onClick} = props;
     avatar.config({rows: 8, cells: 8});
     const src = address ? avatar.create(address, {size: size * 3}) : '';
@@ -58,5 +58,4 @@ export const Logout = ({onClick}: { onClick?: () => void }) => <svg css={css`rig
     </defs>
 </svg>;
 
-
 export default Avatar;

src/components/DappUi/ArgumentInput.tsx

@@ -14,17 +14,21 @@ import styled from "@emotion/styled";
 import {convertListTypes} from "@components/DappUi/Card";
 import {debounce} from "debounce";
 
+import { isList, isUnion } from './helpers';
+
 interface IArgumentInputProps {
-    name: string
-    type: string
-    onChange: (name: string, type: ICallableArgumentType | string, value?: string, index?: number) => void
-    onChangeType?: (name: string, type: ICallableArgumentType | string, index?: number) => void
-    onChangeByteVectorType: (name: string, byteVectorType: 'base58' | 'base64', index?: number) => void
-    index?: number
-    value?: string
-    css?: any
-    notificationStore?: NotificationStore
-    byteVectorType?: string | undefined
+    name: string;
+    type: string;
+    onChange: (name: string, type: ICallableArgumentType | string, value?: string, index?: number) => void;
+    onChangeType?: (name: string, type: ICallableArgumentType | string, index?: number) => void;
+    onChangeByteVectorType: (name: string, byteVectorType: 'base58' | 'base64', index?: number) => void;
+    onChangeUnionSubType: (name: string, unionSubType: string, index?: number) => void;
+    index?: number;
+    value?: string;
+    css?: any;
+    notificationStore?: NotificationStore;
+    byteVectorType?: string | undefined;
+    unionSubType?: string | undefined;
 }
 
 const RadioSet = styled.div`
@@ -34,11 +38,18 @@ margin: 0 -15px;
 & > * {
   margin: 0 15px;
 }
-`
+`;
+
+const Wrapper = styled.div`
+flex: 1;
+display: flex;
+`;
+
 
 export const ArgumentInput: React.FC<IArgumentInputProps> = inject('notificationStore')(observer((props) => {
     let {type, value, css: style, index, name} = props;
-    const [byteVectorType, setByteVectorType] = useState('')
+    const [byteVectorType, setByteVectorType] = useState('');
+    const [unionSubType, setUnionSubType] = useState('');
     let inputValue = value
     const setInputValue = (value: string | undefined) => inputValue = value
 
@@ -48,6 +59,11 @@ export const ArgumentInput: React.FC<IArgumentInputProps> = inject('notification
         props.onChangeByteVectorType(props.name, byteVectorType, index);
     };
 
+    const handleChangeUnionSubType = (unionSubType: string) => {
+        setUnionSubType(unionSubType);
+        props.onChangeUnionSubType(props.name, unionSubType, index);
+    };
+
     const debouncedHandleChange = debounce((value?: string) => {
         setInputValue(value)
         props.onChange(name, type, inputValue, index)
@@ -69,46 +85,75 @@ export const ArgumentInput: React.FC<IArgumentInputProps> = inject('notification
     };
 
     const singleInputSwitcher = (type: string): React.ReactElement => {
-
-        if (type === 'Boolean') return <RadioSet css={style}>
-            <Radio value="true" state={value} onChange={handleChange} label="True"/>
-            <Radio value="false" state={value} onChange={handleChange} label="False"/>
-        </RadioSet>;
-
-        else if (type === 'ByteVector') return <Wrapper>
-            <Select
-                value={props.byteVectorType || byteVectorType}
-                onChange={handleChangeByteVectorType}
-                css={[style, css`margin-right: 8px; max-width: 90px`]}
-            >
-                <Option value="base58">base58</Option>
-                <Option value="base64">base64</Option>
-            </Select>
-            <Input
-                defaultValue={value}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => debouncedHandleChange(e.target.value)}
-                onBlur={validateByteVector}
-                css={style} spellCheck={false}
-            />
-        </Wrapper>;
-
-        else if (type === 'Int') return <InputNumber
-            defaultValue={inputValue}
-            spellCheck={false}
-            onChange={(e: string) => debouncedHandleChange(!isNaN(+e) ? e : '0')}
-        />;
-
-        else if (type === 'String') return <Input
-            defaultValue={value}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => debouncedHandleChange(e.target.value)}
-            css={style} spellCheck={false}
-        />;
-
-        else return <Input css={style} disabled/>;
+        if (type === 'Boolean') {
+            return (
+                <RadioSet css={style}>
+                    <Radio value="true" state={value} onChange={handleChange} label="True"/>
+                    <Radio value="false" state={value} onChange={handleChange} label="False"/>
+                </RadioSet>
+            );
+        } else if (type === 'ByteVector') {
+            return  (
+                <Wrapper>
+                    <Select
+                        value={props.byteVectorType || byteVectorType}
+                        onChange={handleChangeByteVectorType}
+                        css={[style, css`margin-right: 8px; max-width: 90px`]}
+                    >
+                        <Option value="base58" key={'base58'}>base58</Option>
+                        <Option value="base64" key={'base64'}>base64</Option>
+                    </Select>
+                    <Input
+                        defaultValue={value}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => debouncedHandleChange(e.target.value)}
+                        onBlur={validateByteVector}
+                        css={style} spellCheck={false}
+                    />
+                </Wrapper>
+            );
+        } else if (type === 'Int') {
+            return (
+                <InputNumber
+                    defaultValue={inputValue}
+                    spellCheck={false}
+                    onChange={(e: string) => debouncedHandleChange(!isNaN(+e) ? e : '0')}
+                />
+            );
+        } else if (type === 'String') {
+            return (
+                <Input
+                    defaultValue={value}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => debouncedHandleChange(e.target.value)}
+                    css={style} spellCheck={false}
+                />
+            );
+        } else if(isUnion(type)) {
+            const list = type.split('|');
+
+            return  (
+                <Wrapper>
+                    <Select
+                        value={props.unionSubType || unionSubType}
+                        onChange={handleChangeUnionSubType}
+                        css={[style, css`margin-right: 8px; max-width: 90px`]}
+                    >
+                        {list.map((item) => <Option value={item} key={item}>{item}</Option>)}
+                    </Select>
+                    <Input
+                        defaultValue={value}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => debouncedHandleChange(e.target.value)}
+                        css={style} spellCheck={false}
+                    />
+                </Wrapper>
+            );
+        } else {
+            return (<Input css={style} disabled/>);
+        };
+
     }
 
     const inputSwitcher = (type: string): React.ReactElement => {
-        if (type.startsWith('List')) {
+        if (isList(type)) {
             const listsTypes = convertListTypes(type);
             return <Wrapper>
                 {listsTypes.length > 1
@@ -119,7 +164,7 @@ export const ArgumentInput: React.FC<IArgumentInputProps> = inject('notification
                         }}
                         css={[style, css`margin-right: 8px; max-width: 100px`]}
                     >
-                        {listsTypes.map(t => <Option value={t}>{t}</Option>)}
+                        {listsTypes.map(type => <Option value={type} key={type}>{type}</Option>)}
                     </Select>
                     : null}
                 {singleInputSwitcher(listsTypes.length > 1 ? type : listsTypes[0])}
@@ -128,9 +173,4 @@ export const ArgumentInput: React.FC<IArgumentInputProps> = inject('notification
     }
 
     return inputSwitcher(type)
-}))
-
-const Wrapper = styled.div`
-flex: 1;
-display: flex;
-`
+}));

src/components/DappUi/Card/Card.helpers.ts

@@ -0,0 +1,43 @@
+import { ICallableArgumentType } from "@stores/MetaStore";
+import { IArgumentInput } from './Card.interface';
+
+export const convertListTypes = (listType: string) => {
+    const inputTypes = [];
+
+    if (listType.includes('Int')) {
+        inputTypes.push('Int')
+    }
+    if (listType.includes('String')) {
+        inputTypes.push('String')
+    }
+    if (listType.includes('Boolean')) {
+        inputTypes.push('Boolean')
+    }
+    if (listType.includes('ByteVector')) {
+        inputTypes.push('ByteVector')
+    }
+    return inputTypes
+}
+
+export const defaultValue = (type: ICallableArgumentType) => {
+    if (type.startsWith('List')) {
+        const listTypes = convertListTypes(type)
+        if (listTypes.length === 1) type = listTypes[0] as ICallableArgumentType
+        return [{type: type, value: ''}];
+    } else return type === 'String' || type === 'ByteVector' ? '' : undefined
+};
+
+export const isValidBase64 = (str: string) => /^[A-Za-z0-9+/=]+/g.test(str) || str.length === 0
+export const isValidBase58 = (str: string) => (/^[A-Za-z1-9=]+/g.test(str) && !/[O0Il+/]/g.test(str)) || str.length === 0
+
+export const isValidArg = (arg: IArgumentInput) => {
+    const { value, type, byteVectorType } = arg;
+
+    if (value === '') {
+        return !(type === 'String' || type === 'ByteVector');
+    } else if (type === 'ByteVector' && value !== undefined) {
+        return !(byteVectorType === 'base58' ? isValidBase58(value as string) : isValidBase64(value as string))
+    } else {
+        return value === undefined;
+    }
+}

src/components/DappUi/Card/Card.interface.ts

@@ -0,0 +1,34 @@
+/** @jsx jsx **/
+import DappStore from "@stores/DappStore";
+import { ICallableArgumentType, TCallableFuncArgumentsArray } from "@stores/MetaStore";
+import AccountStore from '@stores/AccountStore';
+
+export interface IArgument {
+    type: ICallableArgumentType,
+    value: string | undefined | IArgumentInput[]
+    byteVectorType?: 'base58' | 'base64'
+}
+
+export interface IArgumentInput {
+    type: ICallableArgumentType,
+    value: string | undefined
+    byteVectorType?: 'base58' | 'base64'
+}
+
+export interface IInjectedProps {
+    dappStore?: DappStore
+    accountStore?: AccountStore
+}
+
+export interface IProps extends IInjectedProps {
+    funcName: string
+    funcArgs: TCallableFuncArgumentsArray
+    address: string
+    key?: string
+}
+
+export interface IState {
+    args: { [name: string]: IArgument }
+    payments: { assetId: string, tokens: string }[]
+    address: string | null
+}