UI for NFT

app/components/modules/Donate.jsx

@@ -110,6 +110,13 @@ class Donate extends React.Component {
         })
     }
 
+    showGiftNft = (e) => {
+        e.preventDefault()
+        const { opts, } = this.props
+        const { to, permlink, } = opts
+        this.props.showGiftNft(to, permlink)
+    }
+
     render() {
         const { currentUser, currentAccount, opts, uias, sliderMax } = this.props
         const { sym } = opts
@@ -189,6 +196,9 @@ class Donate extends React.Component {
                 <button type='submit' disabled={disabled} className='button'>
                     {tt('g.donate_support')}
                 </button>
+                <button className='button hollow' onClick={this.showGiftNft}>
+                    {tt('transfer_jsx.gift_nft')}
+                </button>
             </span>}
 
             <FormikAgent opts={opts} setFieldValue={setFieldValue}
@@ -261,6 +271,10 @@ export default connect(
         setDonateDefaults: (donateDefaults) => {
             dispatch(user.actions.setDonateDefaults(donateDefaults))
         },
+        showGiftNft: (author, permlink) => {
+            dispatch(user.actions.setGiftNftDefaults({ author, permlink }))
+            dispatch(user.actions.showGiftNft())
+        },
         dispatchSubmit: async ({
             to, amount, memo, isMemoEncrypted,
             permlink, is_comment, vote, myVote, voteAllowType, currentUser, errorCallback

app/components/modules/GiftNFT.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { Map } from 'immutable'
+import tt from 'counterpart'
+
+import transaction from 'app/redux/Transaction'
+
+class GiftNFT extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+        }
+    }
+
+    render() {
+        return <div>
+               <div className='row'>
+                   <h3>{tt('transfer_jsx.gift_nft')}</h3>
+               </div>
+
+        </div>
+    }
+}
+
+export default connect(
+    (state, ownProps) => {
+        const opts = state.user.get('donate_defaults', Map()).toJS()
+
+        const currentUser = state.user.getIn(['current'])
+        const currentAccount = currentUser && state.global.getIn(['accounts', currentUser.get('username')])
+
+
+        return { ...ownProps,
+            currentUser,
+            currentAccount,
+        }
+    },
+    dispatch => ({
+    })
+)(GiftNFT)

app/components/modules/Modals.jsx

@@ -7,6 +7,7 @@ import Reveal from 'react-foundation-components/lib/global/reveal';
 import LoginForm from 'app/components/modules/LoginForm';
 import ConfirmTransactionForm from 'app/components/modules/ConfirmTransactionForm';
 import Donate from 'app/components/modules/Donate'
+import GiftNFT from 'app/components/modules/GiftNFT'
 import SignUp from 'app/components/modules/SignUp'
 import ChangeAccount from 'app/components/modules/ChangeAccount'
 import AddAccount from 'app/components/modules/AddAccount'
@@ -22,6 +23,7 @@ class Modals extends React.Component {
         show_login_modal: PropTypes.bool,
         show_confirm_modal: PropTypes.bool,
         show_donate_modal: PropTypes.bool,
+        show_gift_nft_modal: PropTypes.bool,
         show_signup_modal: PropTypes.bool,
         show_promote_post_modal: PropTypes.bool,
         show_change_account_modal: PropTypes.bool,
@@ -53,12 +55,14 @@ class Modals extends React.Component {
             show_login_modal,
             show_confirm_modal,
             show_donate_modal,
+            show_gift_nft_modal,
             show_signup_modal,
             show_change_account_modal,
             show_add_account_modal,
             show_app_download_modal,
             hideLogin,
             hideDonate,
+            hideGiftNFT,
             hideConfirm,
             hideSignUp,
             hideChangeAccount,
@@ -89,6 +93,10 @@ class Modals extends React.Component {
                     <CloseButton onClick={hideDonate} />
                     <Donate />
                 </Reveal>}
+                {show_gift_nft_modal && <Reveal onHide={hideGiftNFT} show={show_gift_nft_modal} revealStyle={{ width: '600px' }}>
+                    <CloseButton onClick={hideGiftNFT} />
+                    <GiftNFT />
+                </Reveal>}
                 {show_signup_modal && <Reveal onHide={hideSignUp} show={show_signup_modal}>
                     <CloseButton onClick={hideSignUp} />
                     <SignUp />
@@ -119,6 +127,7 @@ export default connect(
             loginUnclosable,
             show_confirm_modal: state.transaction.get('show_confirm_modal'),
             show_donate_modal: state.user.get('show_donate_modal'),
+            show_gift_nft_modal: state.user.get('show_gift_nft_modal'),
             show_promote_post_modal: state.user.get('show_promote_post_modal'),
             show_signup_modal: state.user.get('show_signup_modal'),
             show_change_account_modal: state.user.get('show_change_account_modal'),
@@ -140,6 +149,10 @@ export default connect(
             if (e) e.preventDefault()
             dispatch(user.actions.hideDonate())
         },
+        hideGiftNFT: e => {
+            if (e) e.preventDefault()
+            dispatch(user.actions.hideGiftNft())
+        },
         hidePromotePost: e => {
             if (e) e.preventDefault();
             dispatch(user.actions.hidePromotePost())

app/locales/en.json

@@ -909,7 +909,8 @@
     "balance": "Balance",
     "private_key_in_memo": "Do not write your private keys in this field!",
     "verified_exchange_no_memo": "You must include a memo for your exchange transfer, according to exchanger's rules.",
-    "verified_exchange_liquid_only": "You may exchange tokens from GOLOS balance only."
+    "verified_exchange_liquid_only": "You may exchange tokens from GOLOS balance only.",
+    "gift_nft": "Gift NFT"
   },
   "user_saga_js": {
     "image_upload": {

app/locales/ru-RU.json

@@ -844,7 +844,8 @@
     "can_issue": "Можно выпустить",
     "private_key_in_memo": "Не пишите в этом поле приватные ключи!",
     "verified_exchange_no_memo": "Для перевода токенов на этот аккаунт нужно указать заметку/memo.",
-    "verified_exchange_liquid_only": "Перевод токенов на этот аккаунт с TIP-баланса невозможен, используйте основной баланс."
+    "verified_exchange_liquid_only": "Перевод токенов на этот аккаунт с TIP-баланса невозможен, используйте основной баланс.",
+    "gift_nft": "Подарить NFT"
   },
   "user_profile": {
     "unknown_account": "Неизвестный аккаунт",

app/redux/User.js

@@ -8,6 +8,7 @@ const defaultState = fromJS({
     show_login_modal: false,
     show_transfer_modal: false,
     show_donate_modal: false,
+    show_nft_gift_modal: false,
     show_convert_assets_modal: false,
     show_promote_post_modal: false,
     show_signup_modal: false,
@@ -71,6 +72,9 @@ export default createModule({
         { action: 'SHOW_DONATE', reducer: state => state.set('show_donate_modal', true) },
         { action: 'HIDE_DONATE', reducer: state => state.set('show_donate_modal', false) },
         { action: 'SET_DONATE_DEFAULTS', reducer: (state, {payload}) => state.set('donate_defaults', fromJS(payload)) },
+        { action: 'SHOW_GIFT_NFT', reducer: state => state.set('show_gift_nft_modal', true) },
+        { action: 'HIDE_GIFT_NFT', reducer: state => state.set('show_gift_nft_modal', false) },
+        { action: 'SET_GIFT_NFT_DEFAULTS', reducer: (state, {payload}) => state.set('gift_nft_defaults', fromJS(payload)) },
         { action: 'SHOW_CONVERT_ASSETS', reducer: state => state.set('show_convert_assets_modal', true) },
         { action: 'HIDE_CONVERT_ASSETS', reducer: state => state.set('show_convert_assets_modal', false) },
         { action: 'SET_CONVERT_ASSETS_DEFAULTS', reducer: (state, {payload}) => state.set('convert_assets_defaults', fromJS(payload)) },