`
+ return html``
} else {
const avatarNode = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
const avatarUrl = avatarNode.protocol + '://' + avatarNode.domain + ':' + avatarNode.port
const url = `${avatarUrl}/arbitrary/THUMBNAIL/${this.accountInfo.names[0].name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`
- return html`
${this.boughtBTCTemplate()}
@@ -1191,7 +1191,7 @@ class UserInfoView extends connect(store)(LitElement) {
-
${this.soldBTCTemplate()}
diff --git a/qortal-ui-core/src/notifications/notification-actions/new-message.js b/qortal-ui-core/src/notifications/notification-actions/new-message.js
index faaaad32..f430fdd2 100644
--- a/qortal-ui-core/src/notifications/notification-actions/new-message.js
+++ b/qortal-ui-core/src/notifications/notification-actions/new-message.js
@@ -2,7 +2,6 @@ import { store } from '../../store.js'
import { doPageUrl } from '../../redux/app/app-actions.js'
export const newMessage = (data) => {
-
const alert = playSound(data.sound)
// Should I show notification ?
@@ -18,7 +17,7 @@ export const newMessage = (data) => {
}
notify.onclick = (e) => {
- const pageUrl = `/app/q-chat/${data.req.url}`
+ const pageUrl = `/app/q-chat/?chat=${data.req.url}`
store.dispatch(doPageUrl(pageUrl))
}
} else {
@@ -26,7 +25,7 @@ export const newMessage = (data) => {
const notify = new Notification(data.title, data.options)
notify.onclick = (e) => {
- const pageUrl = `/app/q-chat/${data.req.url}`
+ const pageUrl = `/app/q-chat/?chat=${data.req.url}`
store.dispatch(doPageUrl(pageUrl))
}
}
diff --git a/qortal-ui-core/src/plugins/streams.js b/qortal-ui-core/src/plugins/streams.js
index ad6696d1..9cb6c3f7 100644
--- a/qortal-ui-core/src/plugins/streams.js
+++ b/qortal-ui-core/src/plugins/streams.js
@@ -9,6 +9,7 @@ const CHAT_HEADS_STREAM_NAME = 'chat_heads'
const NODE_CONFIG_STREAM_NAME = 'node_config'
const COPY_MENU_SWITCH = 'copy_menu_switch'
const FRAME_PASTE_MENU_SWITCH = 'frame_paste_menu_switch'
+const CHAT_LAST_SEEN = 'chat_last_seen'
export const loggedInStream = new EpmlStream(LOGIN_STREAM_NAME, () => store.getState().app.loggedIn)
export const configStream = new EpmlStream(CONFIG_STREAM_NAME, () => store.getState().config)
@@ -18,6 +19,7 @@ export const chatHeadsStateStream = new EpmlStream(CHAT_HEADS_STREAM_NAME, () =>
export const nodeConfigStream = new EpmlStream(NODE_CONFIG_STREAM_NAME, () => store.getState().app.nodeConfig)
export const copyMenuSwitchStream = new EpmlStream(COPY_MENU_SWITCH, () => store.getState().app.copyMenuSwitch)
export const framePasteMenuSwitchStream = new EpmlStream(FRAME_PASTE_MENU_SWITCH, () => store.getState().app.framePasteMenuSwitch)
+export const chatLastSeenStream = new EpmlStream(CHAT_LAST_SEEN, () => store.getState().app.chatLastSeen)
let oldState = {
@@ -46,6 +48,9 @@ store.subscribe(() => {
if (oldState.app.framePasteMenuSwitch !== state.app.framePasteMenuSwitch) {
framePasteMenuSwitchStream.emit(state.app.framePasteMenuSwitch)
}
+ if (oldState.app.chatLastSeen !== state.app.chatLastSeen) {
+ chatLastSeenStream.emit(state.app.chatLastSeen)
+ }
if (oldState.app.selectedAddress !== state.app.selectedAddress) {
selectedAddressStream.emit({
diff --git a/qortal-ui-core/src/redux/app/actions/app-core.js b/qortal-ui-core/src/redux/app/actions/app-core.js
index e96b11b4..894f2c2e 100644
--- a/qortal-ui-core/src/redux/app/actions/app-core.js
+++ b/qortal-ui-core/src/redux/app/actions/app-core.js
@@ -1,5 +1,5 @@
// Core App Actions here...
-import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH } from '../app-action-types.js'
+import { UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, CHAT_HEADS, ACCOUNT_INFO, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } from '../app-action-types.js'
export const doUpdateBlockInfo = (blockObj) => {
return (dispatch, getState) => {
@@ -105,3 +105,31 @@ const framePasteMenuSwitch = (payload) => {
payload
}
}
+
+export const addAutoLoadImageChat = (payload) => {
+ return {
+ type: ADD_AUTO_LOAD_IMAGES_CHAT,
+ payload
+ }
+}
+
+export const removeAutoLoadImageChat = (payload) => {
+ return {
+ type: REMOVE_AUTO_LOAD_IMAGES_CHAT,
+ payload
+ }
+}
+
+export const setChatLastSeen = (payload) => {
+ return {
+ type: SET_CHAT_LAST_SEEN,
+ payload
+ }
+}
+export const addChatLastSeen = (payload) => {
+ return {
+ type: ADD_CHAT_LAST_SEEN,
+ payload
+ }
+}
+
diff --git a/qortal-ui-core/src/redux/app/app-action-types.js b/qortal-ui-core/src/redux/app/app-action-types.js
index 00f4c54d..518d4cd7 100644
--- a/qortal-ui-core/src/redux/app/app-action-types.js
+++ b/qortal-ui-core/src/redux/app/app-action-types.js
@@ -20,3 +20,7 @@ export const ADD_NEW_PLUGIN_URL = 'ADD_NEW_PLUGIN_URL'
export const COPY_MENU_SWITCH = 'COPY_MENU_SWITCH'
export const PASTE_MENU_SWITCH = 'PASTE_MENU_SWITCH'
export const FRAME_PASTE_MENU_SWITCH = 'FRAME_PASTE_MENU_SWITCH'
+export const ADD_AUTO_LOAD_IMAGES_CHAT = 'ADD_AUTO_LOAD_IMAGES_CHAT'
+export const REMOVE_AUTO_LOAD_IMAGES_CHAT = 'REMOVE_AUTO_LOAD_IMAGES_CHAT'
+export const SET_CHAT_LAST_SEEN = 'SET_CHAT_LAST_SEEN'
+export const ADD_CHAT_LAST_SEEN = 'ADD_CHAT_LAST_SEEN'
diff --git a/qortal-ui-core/src/redux/app/app-reducer.js b/qortal-ui-core/src/redux/app/app-reducer.js
index 0fa9b67a..68a48675 100644
--- a/qortal-ui-core/src/redux/app/app-reducer.js
+++ b/qortal-ui-core/src/redux/app/app-reducer.js
@@ -1,8 +1,14 @@
// Loading state, login state, isNavDrawOpen state etc. None of this needs to be saved to localstorage.
-import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH } from './app-action-types.js'
+import { loadStateFromLocalStorage, saveStateToLocalStorage } from '../../localStorageHelpers.js'
+import { LOG_IN, LOG_OUT, NETWORK_CONNECTION_STATUS, INIT_WORKERS, ADD_PLUGIN_URL, ADD_PLUGIN, ADD_NEW_PLUGIN_URL, NAVIGATE, SELECT_ADDRESS, ACCOUNT_INFO, CHAT_HEADS, UPDATE_BLOCK_INFO, UPDATE_NODE_STATUS, UPDATE_NODE_INFO, LOAD_NODE_CONFIG, SET_NODE, ADD_NODE, PAGE_URL, COPY_MENU_SWITCH, PASTE_MENU_SWITCH, FRAME_PASTE_MENU_SWITCH, ADD_AUTO_LOAD_IMAGES_CHAT, REMOVE_AUTO_LOAD_IMAGES_CHAT, SET_CHAT_LAST_SEEN, ADD_CHAT_LAST_SEEN } from './app-action-types.js'
import { initWorkersReducer } from './reducers/init-workers.js'
import { loginReducer } from './reducers/login-reducer.js'
import { setNode, addNode } from './reducers/manage-node.js'
+import localForage from "localforage";
+const chatLastSeen = localForage.createInstance({
+ name: "chat-last-seen",
+});
+
const INITIAL_STATE = {
loggedIn: false,
@@ -42,7 +48,9 @@ const INITIAL_STATE = {
framePasteMenuSwitch: {
isOpen: false,
elementId: ''
- }
+ },
+ autoLoadImageChats: loadStateFromLocalStorage('autoLoadImageChats') || [],
+ chatLastSeen: []
}
export default (state = INITIAL_STATE, action) => {
@@ -146,6 +154,60 @@ export default (state = INITIAL_STATE, action) => {
...state,
framePasteMenuSwitch: action.payload
}
+ case ADD_AUTO_LOAD_IMAGES_CHAT: {
+ const findChat = state.autoLoadImageChats.findIndex((chat)=> chat === action.payload)
+ console.log({findChat})
+ if(findChat !== -1) return state
+ const updatedState = [...state.autoLoadImageChats, action.payload]
+
+ saveStateToLocalStorage('autoLoadImageChats', updatedState)
+ return {
+ ...state,
+ autoLoadImageChats: updatedState
+ }
+ }
+
+ case REMOVE_AUTO_LOAD_IMAGES_CHAT: {
+ const updatedState = state.autoLoadImageChats.filter((chat)=> chat !== action.payload)
+ saveStateToLocalStorage('autoLoadImageChats', updatedState)
+ return {
+ ...state,
+ autoLoadImageChats: updatedState
+ }
+ }
+ case SET_CHAT_LAST_SEEN: {
+ return {
+ ...state,
+ chatLastSeen: action.payload
+ }
+ }
+ case ADD_CHAT_LAST_SEEN: {
+ const chatId = action.payload.key
+ const timestamp = action.payload.timestamp
+ if(!chatId || !timestamp) return state
+ let newChatLastSeen = [...state.chatLastSeen]
+ const findChatIndex = state.chatLastSeen.findIndex((chat)=> chat.key === chatId)
+ if(findChatIndex !== -1){
+
+ newChatLastSeen[findChatIndex] = {
+ key: chatId,
+ timestamp,
+ }
+ }
+ if(findChatIndex === -1){
+
+ newChatLastSeen = [...newChatLastSeen, {
+ key: chatId,
+ timestamp,
+ }]
+ }
+ chatLastSeen.setItem(chatId, timestamp)
+ return {
+ ...state,
+ chatLastSeen: newChatLastSeen
+ }
+ }
+
default:
return state
}
diff --git a/qortal-ui-core/src/styles/switch-theme.css b/qortal-ui-core/src/styles/switch-theme.css
index 564b0a35..2a700a48 100644
--- a/qortal-ui-core/src/styles/switch-theme.css
+++ b/qortal-ui-core/src/styles/switch-theme.css
@@ -9,7 +9,8 @@ html {
--copybutton: #707584;
--chat-group: #080808;
--chat-bubble: #9f9f9f0a;
- --chat-bubble-bg: #f3f3f3;
+ --chat-bubble-bg: #e6e6e6;
+ --chat-bubble-myBg: #d1ddf2;
--chat-bubble-msg-color: #080808;
--reaction-bubble-outline: #6b6969;
--chat-menu-bg: #ffffff;
@@ -70,6 +71,7 @@ html[theme="dark"] {
--chat-group: #ffffff;
--chat-bubble: #9694941a;
--chat-bubble-bg: #2d3749;
+ --chat-bubble-myBg: #40444d;
--chat-bubble-msg-color: #ffffff;
--reaction-bubble-outline: #ffffff;
--chat-menu-bg: #32394c;
diff --git a/qortal-ui-crypto/api/constants.js b/qortal-ui-crypto/api/constants.js
index ae139416..11c0cbbf 100644
--- a/qortal-ui-crypto/api/constants.js
+++ b/qortal-ui-crypto/api/constants.js
@@ -159,7 +159,7 @@ const ADDRESS_VERSION = 58
const PROXY_URL = "/proxy/"
// Chat reference timestamp
-const CHAT_REFERENCE_FEATURE_TRIGGER_TIMESTAMP = 0
+const CHAT_REFERENCE_FEATURE_TRIGGER_TIMESTAMP = 1674316800000
// Used as a salt for all qora addresses. Salts used for storing your private keys in local storage will be randomly generated
const STATIC_SALT = new Uint8Array([54, 190, 201, 206, 65, 29, 123, 129, 147, 231, 180, 166, 171, 45, 95, 165, 78, 200, 208, 194, 44, 207, 221, 146, 45, 238, 68, 68, 69, 102, 62, 6])
diff --git a/qortal-ui-crypto/api/transactions/names/UpdateNameTransaction.js b/qortal-ui-crypto/api/transactions/names/UpdateNameTransaction.js
new file mode 100644
index 00000000..bfc31563
--- /dev/null
+++ b/qortal-ui-crypto/api/transactions/names/UpdateNameTransaction.js
@@ -0,0 +1,73 @@
+'use strict'
+import TransactionBase from '../TransactionBase.js'
+import { QORT_DECIMALS } from '../../constants.js'
+
+export default class UpdateNameTransaction extends TransactionBase {
+ constructor() {
+ super()
+ this.type = 4
+ }
+
+ render(html) {
+ return html`
+ ${this._dialogUpdateName1}
+ this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
${this.isImageLoaded ? html`${avatarImg}` : html`` }
${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`account_circle ` : html`` }
- ${!this.isImageLoaded && this.chatInfo.name ? html`
+
`
}
- firstUpdated() {
+ async firstUpdated() {
let configLoaded = false
+ this.lastReadMessageTimestamp = await chatLastSeen.getItem(this.chatInfo.url) || 0
parentEpml.ready().then(() => {
parentEpml.subscribe('selected_address', async selectedAddress => {
this.selectedAddress = {}
@@ -142,6 +198,15 @@ class ChatHead extends LitElement {
if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
this.selectedAddress = selectedAddress
})
+ parentEpml.subscribe('chat_last_seen', async chatList => {
+ const parsedChatList = JSON.parse(chatList)
+ const findChatSeen = parsedChatList.find(chat=> chat.key === this.chatInfo.url)
+
+ if(findChatSeen && this.lastReadMessageTimestamp !== findChatSeen.timestamp){
+ this.lastReadMessageTimestamp = findChatSeen.timestamp
+ this.requestUpdate()
+ }
+ })
parentEpml.subscribe('config', c => {
if (!configLoaded) {
configLoaded = true
@@ -156,7 +221,18 @@ class ChatHead extends LitElement {
if(changedProperties.has('activeChatHeadUrl')){
return true
}
+ if(changedProperties.has('lastReadMessageTimestamp')){
+ return true
+ }
if(changedProperties.has('chatInfo')){
+
+ const prevChatInfo = changedProperties.get('chatInfo')
+
+ if(prevChatInfo.address !== this.chatInfo.address){
+
+ this.isImageLoaded = false
+ this.requestUpdate()
+ }
return true
}
diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index 25561083..e3d53560 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -12,7 +12,8 @@ import { Editor, Extension } from '@tiptap/core'
import * as zip from "@zip.js/zip.js";
import { saveAs } from 'file-saver';
import './ChatGifs/ChatGifs.js';
-// import localForage from "localforage";
+
+import localForage from "localforage";
registerTranslateConfig({
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
});
@@ -41,9 +42,13 @@ import { replaceMessagesEdited } from '../../utils/replace-messages-edited.js';
import { publishData } from '../../utils/publish-image.js';
import { EmojiPicker } from 'emoji-picker-js';
import WebWorker from 'web-worker:./computePowWorker.js';
-import WebWorkerImage from 'web-worker:./computePowWorkerImage.js';
+import WebWorkerFile from 'web-worker:./computePowWorkerFile.js';
import '@polymer/paper-dialog/paper-dialog.js'
+const chatLastSeen = localForage.createInstance({
+ name: "chat-last-seen",
+});
+
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
class ChatPage extends LitElement {
@@ -75,7 +80,11 @@ class ChatPage extends LitElement {
editedMessageObj: { type: Object },
iframeHeight: { type: Number },
imageFile: { type: Object },
+ attachment: { type: Object },
isUploadingImage: { type: Boolean },
+ isDeletingImage: { type: Boolean },
+ isUploadingAttachment: { type: Boolean },
+ isDeletingAttachment: { type: Boolean },
userLanguage: { type: String },
lastMessageRefVisible: { type: Boolean },
isLoadingOldMessages: { type: Boolean },
@@ -92,7 +101,7 @@ class ChatPage extends LitElement {
userFound: { type: Array },
userFoundModalOpen: { type: Boolean },
webWorker: { type: Object },
- webWorkerImage: { type: Object },
+ webWorkerFile: { type: Object },
myTrimmedMeassage: { type: String },
editor: {type: Object},
currentEditor: {type: String},
@@ -101,23 +110,407 @@ class ChatPage extends LitElement {
openUserInfo: { type: Boolean },
selectedHead: { type: Object },
userName: { type: String },
- goToRepliedMessage: { attribute: false },
openGifModal: { type: Boolean },
gifsLoading: { type: Boolean },
+ goToRepliedMessage: {attribute: false},
+ isLoadingGoToRepliedMessage: {type: Object}
}
}
static get styles() {
- return css`
- html {
- scroll-behavior: smooth;
- }
-
- .chat-head-container {
- display: flex;
- justify-content: flex-start;
- flex-direction: column;
- height: 50vh;
+ return css`
+ html {
+ scroll-behavior: smooth;
+ }
+
+ .chat-head-container {
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: column;
+ height: 50vh;
+ overflow-y: auto;
+ overflow-x: hidden;
+ width: 100%;
+ }
+
+ .repliedTo-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 10px 8px 10px;
+ }
+
+ .senderName {
+ margin: 0;
+ color: var(--mdc-theme-primary);
+ font-weight: bold;
+ user-select: none;
+ }
+
+ .original-message {
+ color: var(--chat-bubble-msg-color);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ margin: 0;
+ width: 800px;
+ }
+
+ .close-icon {
+ color: #676b71;
+ width: 18px;
+ transition: all 0.1s ease-in-out;
+ }
+
+ .close-icon:hover {
+ cursor: pointer;
+ color: #494c50;
+ }
+
+ .chat-text-area .typing-area .chatbar {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: auto;
+ padding: 5px 5px 5px 7px;
+ overflow: hidden;
+ }
+
+ .chat-text-area .typing-area .emoji-button {
+ width: 45px;
+ height: 40px;
+ padding-top: 4px;
+ border: none;
+ outline: none;
+ background: transparent;
+ cursor: pointer;
+ max-height: 40px;
+ color: var(--black);
+ }
+
+ .emoji-button-caption {
+ width: 45px;
+ height: 40px;
+ padding-top: 4px;
+ border: none;
+ outline: none;
+ background: transparent;
+ cursor: pointer;
+ max-height: 40px;
+ color: var(--black);
+ }
+
+ .caption-container {
+ width: 100%;
+ display: flex;
+ height: auto;
+ overflow: hidden;
+ justify-content: center;
+ background-color: var(--white);
+ padding: 5px;
+ border-radius: 1px;
+ }
+
+ .chatbar-caption {
+ font-family: Roboto, sans-serif;
+ width: 70%;
+ margin-right: 10px;
+ outline: none;
+ align-items: center;
+ font-size: 18px;
+ resize: none;
+ border-top: 0;
+ border-right: 0;
+ border-left: 0;
+ border-bottom: 1px solid #cac8c8;
+ padding: 3px;
+ }
+
+ .message-size-container {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+ }
+
+ .message-size {
+ font-family: Roboto, sans-serif;
+ font-size: 12px;
+ color: black;
+ }
+
+ .lds-grid {
+ width: 120px;
+ height: 120px;
+ position: absolute;
+ left: 50%;
+ top: 40%;
+ }
+
+ img {
+ border-radius: 25%;
+ }
+
+ .dialogCustom {
+ position: fixed;
+ z-index: 10000;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ top: 10px;
+ right: 20px;
+ user-select: none;
+ }
+
+ .dialogCustomInner {
+ min-width: 300px;
+ height: 40px;
+ background-color: var(--white);
+ box-shadow: rgb(119 119 119 / 32%) 0px 4px 12px;
+ padding: 10px;
+ border-radius: 4px;
+ }
+
+ .dialogCustomInner ul {
+ padding-left: 0px
+ }
+
+ .dialogCustomInner li {
+ margin-bottom: 10px;
+ }
+
+ .marginLoader {
+ margin-right: 8px;
+ }
+
+ .last-message-ref {
+ position: absolute;
+ font-size: 18px;
+ top: -40px;
+ right: 30px;
+ width: 50;
+ height: 50;
+ z-index: 5;
+ color: black;
+ background-color: white;
+ border-radius: 50%;
+ transition: all 0.1s ease-in-out;
+ }
+
+ .last-message-ref:hover {
+ cursor: pointer;
+ transform: scale(1.1);
+ }
+
+ .arrow-down-icon {
+ transform: scale(1.15);
+ }
+
+ .chat-container {
+ display: grid;
+ max-height: 100%;
+ }
+
+ .chat-text-area {
+ display: flex;
+ position: relative;
+ justify-content: center;
+ min-height: 60px;
+ max-height: 100%;
+ }
+
+ .chat-text-area .typing-area {
+ display: flex;
+ flex-direction: column;
+ width: 98%;
+ box-sizing: border-box;
+ margin-bottom: 8px;
+ border: 1px solid var(--chat-bubble-bg);
+ border-radius: 10px;
+ background: var(--chat-bubble-bg);
+ }
+
+ .chat-text-area .typing-area textarea {
+ display: none;
+ }
+
+ .chat-text-area .typing-area .chat-editor {
+ display: flex;
+ max-height: -webkit-fill-available;
+ width: 100%;
+ border-color: transparent;
+ margin: 0;
+ padding: 0;
+ border: none;
+ }
+
+ .repliedTo-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 10px 8px 10px;
+ }
+
+ .repliedTo-subcontainer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 15px;
+ width: 100%;
+ }
+
+ .repliedTo-message {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ width: 100%;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-height: 60px;
+ }
+ .repliedTo-message p {
+ margin: 0px;
+ padding: 0px;
+ }
+
+ .repliedTo-message pre {
+ white-space: pre-wrap;
+ }
+
+ .repliedTo-message p mark {
+ background-color: #ffe066;
+ border-radius: 0.25em;
+ box-decoration-break: clone;
+ padding: 0.125em 0;
+ }
+
+ .reply-icon {
+ width: 20px;
+ color: var(--mdc-theme-primary);
+ }
+
+ .close-icon {
+ color: #676b71;
+ width: 18px;
+ transition: all 0.1s ease-in-out;
+ }
+
+ .close-icon:hover {
+ cursor: pointer;
+ color: #494c50;
+ }
+
+ .chatbar-container {
+ width: 100%;
+ display: flex;
+ height: auto;
+ overflow: hidden;
+ }
+
+ .lds-grid {
+ width: 120px;
+ height: 120px;
+ position: absolute;
+ left: 50%;
+ top: 40%;
+ }
+
+ .lds-grid div {
+ position: absolute;
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ background: #03a9f4;
+ animation: lds-grid 1.2s linear infinite;
+ }
+
+ .lds-grid div:nth-child(1) {
+ top: 4px;
+ left: 4px;
+ animation-delay: 0s;
+ }
+
+ .lds-grid div:nth-child(2) {
+ top: 4px;
+ left: 48px;
+ animation-delay: -0.4s;
+ }
+
+ .lds-grid div:nth-child(3) {
+ top: 4px;
+ left: 90px;
+ animation-delay: -0.8s;
+ }
+
+ .lds-grid div:nth-child(4) {
+ top: 50px;
+ left: 4px;
+ animation-delay: -0.4s;
+ }
+
+ .lds-grid div:nth-child(5) {
+ top: 50px;
+ left: 48px;
+ animation-delay: -0.8s;
+ }
+
+ .lds-grid div:nth-child(6) {
+ top: 50px;
+ left: 90px;
+ animation-delay: -1.2s;
+ }
+
+ .lds-grid div:nth-child(7) {
+ top: 95px;
+ left: 4px;
+ animation-delay: -0.8s;
+ }
+
+ .lds-grid div:nth-child(8) {
+ top: 95px;
+ left: 48px;
+ animation-delay: -1.2s;
+ }
+
+ .lds-grid div:nth-child(9) {
+ top: 95px;
+ left: 90px;
+ animation-delay: -1.6s;
+ }
+
+ @keyframes lds-grid {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+
+ .float-left {
+ float: left;
+ }
+
+ img {
+ border-radius: 25%;
+ }
+
+ paper-dialog.warning {
+ width: 50%;
+ max-width: 50vw;
+ height: 30%;
+ max-height: 30vh;
+ text-align: center;
+ background-color: var(--white);
+ color: var(--black);
+ border: 1px solid var(--black);
+ border-radius: 15px;
+ line-height: 1.6;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
@@ -681,12 +1074,6 @@ class ChatPage extends LitElement {
padding:0px;
}
- .modal-button-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- }
.modal-button {
font-family: Roboto, sans-serif;
@@ -849,14 +1236,47 @@ class ChatPage extends LitElement {
background: transparent;
position: fixed;
}
- `
- }
+
+ .modal-button-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
+
+
+ .attachment-icon-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 120px;
+ width: 120px;
+ border-radius: 50%;
+ border: none;
+ background-color: var(--mdc-theme-primary);
+ }
+
+ .attachment-icon {
+ width: 70%;
+ }
+
+ .attachment-name {
+ font-family: Work Sans, sans-serif;
+ font-size: 20px;
+ color: var(--chat-bubble-msg-color);
+ margin: 0px;
+ letter-spacing: 1px;
+ padding: 5px 0px;
+ }
+`
+}
constructor() {
super()
this.getOldMessage = this.getOldMessage.bind(this)
this._sendMessage = this._sendMessage.bind(this)
- this.insertImage = this.insertImage.bind(this)
+ this.insertFile = this.insertFile.bind(this)
+ this.pasteImage = this.pasteImage.bind(this)
this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this)
this._downObserverhandler = this._downObserverhandler.bind(this)
this.setOpenTipUser = this.setOpenTipUser.bind(this)
@@ -887,6 +1307,7 @@ class ChatPage extends LitElement {
this.editedMessageObj = null
this.iframeHeight = 42
this.imageFile = null
+ this.attachment = null
this.uid = new ShortUniqueId()
this.userLanguage = ""
this.lastMessageRefVisible = false
@@ -914,12 +1335,18 @@ class ChatPage extends LitElement {
selected: false
}
this.webWorker = null;
- this.webWorkerImage = null;
+ this.webWorkerFile = null;
this.currentEditor = '_chatEditorDOM'
this.initialChat = this.initialChat.bind(this)
this.setOpenGifModal = this.setOpenGifModal.bind(this)
this.isEnabledChatEnter = true
this.openGifModal = false
+ this.isLoadingGoToRepliedMessage = {
+ isLoading: false,
+ top: 0,
+ left: 0,
+ offsetHeight: 0
+ }
}
@@ -1039,7 +1466,6 @@ console.log({zipFileBlob})
+ ${this.nameText}
+
+ ${this._dialogUpdateName2}
+
+ ${this.newNameText}
+
+ ${this._dialogUpdateName3}
+ `
+ }
+
+ set dialogUpdateName1(dialogUpdateName1) {
+ this._dialogUpdateName1 = dialogUpdateName1
+ }
+
+ set dialogUpdateName2(dialogUpdateName2) {
+ this._dialogUpdateName2 = dialogUpdateName2
+ }
+
+ set dialogUpdateName3(dialogUpdateName3) {
+ this._dialogUpdateName3 = dialogUpdateName3
+ }
+
+ set fee(fee) {
+ this._fee = fee * QORT_DECIMALS
+ this._feeBytes = this.constructor.utils.int64ToBytes(this._fee)
+ }
+
+ set name(name) {
+ this.nameText = name
+ this._nameBytes = this.constructor.utils.stringtoUTF8Array(name)
+ this._nameLength = this.constructor.utils.int32ToBytes(this._nameBytes.length)
+ }
+
+ set newName(newName) {
+ this.newNameText = newName
+ this._newNameBytes = this.constructor.utils.stringtoUTF8Array(newName)
+ this._newNameLength = this.constructor.utils.int32ToBytes(this._newNameBytes.length)
+ }
+
+ set newData(newData) {
+ this.newDataText = newData.length === 0 ? "Registered Name on the Qortal Chain" : newData
+ this._newDataBytes = this.constructor.utils.stringtoUTF8Array(this.newDataText)
+ this._newDataLength = this.constructor.utils.int32ToBytes(this._newDataBytes.length)
+ }
+
+ get params() {
+ const params = super.params
+ params.push(
+ this._nameLength,
+ this._nameBytes,
+ this._newNameLength,
+ this._newNameBytes,
+ this._newDataLength,
+ this._newDataBytes,
+ this._feeBytes
+ )
+ return params
+ }
+}
\ No newline at end of file
diff --git a/qortal-ui-crypto/api/transactions/transactions.js b/qortal-ui-crypto/api/transactions/transactions.js
index 16b7b09b..9fa87e99 100644
--- a/qortal-ui-crypto/api/transactions/transactions.js
+++ b/qortal-ui-crypto/api/transactions/transactions.js
@@ -1,5 +1,6 @@
import PaymentTransaction from './PaymentTransaction.js'
import RegisterNameTransaction from './names/RegisterNameTransaction.js'
+import UpdateNameTransaction from './names/UpdateNameTransaction.js'
import SellNameTransacion from './names/SellNameTransacion.js'
import CancelSellNameTransacion from './names/CancelSellNameTransacion.js'
import BuyNameTransacion from './names/BuyNameTransacion.js'
@@ -25,6 +26,7 @@ import TransferPrivsTransaction from './TransferPrivsTransaction.js'
export const transactionTypes = {
2: PaymentTransaction,
3: RegisterNameTransaction,
+ 4: UpdateNameTransaction,
5: SellNameTransacion,
6: CancelSellNameTransacion,
7: BuyNameTransacion,
diff --git a/qortal-ui-crypto/package.json b/qortal-ui-crypto/package.json
index 5d9362c0..cae726c6 100644
--- a/qortal-ui-crypto/package.json
+++ b/qortal-ui-crypto/package.json
@@ -1,6 +1,6 @@
{
"name": "qortal-ui-crypto",
- "version": "2.2.5",
+ "version": "3.1.0",
"description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet",
"keywords": [
"QORT",
@@ -23,6 +23,6 @@
"lodash": "4.17.21"
},
"engines": {
- "node": ">=16.17.1"
+ "node": ">=18.12.1"
}
-}
+}
\ No newline at end of file
diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json
index 198b0be6..6121f786 100644
--- a/qortal-ui-plugins/package.json
+++ b/qortal-ui-plugins/package.json
@@ -1,6 +1,6 @@
{
"name": "qortal-ui-plugins",
- "version": "3.0.0",
+ "version": "3.1.0",
"description": "Qortal Project - decentralize the world - Data storage, communications, web hosting, decentralized trading, complete infrastructure for the future blockchain-based Internet",
"keywords": [
"QORT",
@@ -20,27 +20,28 @@
"@lit-labs/motion": "1.0.3",
"@material/mwc-list": "0.27.0",
"@material/mwc-select": "0.27.0",
- "@tiptap/core": "2.0.0-beta.209",
- "@tiptap/extension-highlight": "2.0.0-beta.209",
- "@tiptap/extension-image": "2.0.0-beta.209",
- "@tiptap/extension-placeholder": "2.0.0-beta.209",
- "@tiptap/extension-underline": "2.0.0-beta.209",
- "@tiptap/html": "2.0.0-beta.209",
- "@tiptap/starter-kit": "2.0.0-beta.209",
+ "@tiptap/pm": "2.0.0-beta.217",
+ "@tiptap/core": "2.0.0-beta.217",
+ "@tiptap/extension-highlight": "2.0.0-beta.217",
+ "@tiptap/extension-image": "2.0.0-beta.217",
+ "@tiptap/extension-placeholder": "2.0.0-beta.217",
+ "@tiptap/extension-underline": "2.0.0-beta.217",
+ "@tiptap/html": "2.0.0-beta.217",
+ "@tiptap/starter-kit": "2.0.0-beta.217",
"asmcrypto.js": "2.3.2",
"compressorjs": "1.1.1",
"emoji-picker-js": "https://github.com/Qortal/emoji-picker-js",
"localforage": "1.10.0",
"prosemirror-commands": "1.5.0",
- "prosemirror-dropcursor": "1.6.1",
+ "prosemirror-dropcursor": "1.7.0",
"prosemirror-gapcursor": "1.3.1",
"prosemirror-history": "1.3.0",
- "prosemirror-keymap": "1.2.0",
- "prosemirror-model": "1.18.3",
+ "prosemirror-keymap": "1.2.1",
+ "prosemirror-model": "1.19.0",
"prosemirror-schema-list": "1.2.2",
"prosemirror-state": "1.4.2",
- "prosemirror-transform": "1.7.0",
- "prosemirror-view": "1.29.1",
+ "prosemirror-transform": "1.7.1",
+ "prosemirror-view": "1.30.1",
"short-unique-id": "4.4.4"
},
"devDependencies": {
@@ -48,12 +49,12 @@
"@material/mwc-button": "0.27.0",
"@material/mwc-checkbox": "0.27.0",
"@material/mwc-dialog": "0.27.0",
- "@material/mwc-fab": "0.27.0",
"@material/mwc-formfield": "0.27.0",
"@material/mwc-icon": "0.27.0",
"@material/mwc-icon-button": "0.27.0",
"@material/mwc-slider": "0.27.0",
"@material/mwc-snackbar": "0.27.0",
+ "@material/mwc-fab": "0.27.0",
"@material/mwc-tab": "0.27.0",
"@material/mwc-tab-bar": "0.27.0",
"@material/mwc-textfield": "0.27.0",
@@ -70,11 +71,12 @@
"@rollup/plugin-node-resolve": "15.0.1",
"@rollup/plugin-replace": "5.0.2",
"@rollup/plugin-terser": "0.4.0",
- "@vaadin/avatar": "23.3.6",
- "@vaadin/button": "23.3.6",
- "@vaadin/grid": "23.3.6",
- "@vaadin/icons": "23.3.6",
- "@vaadin/tooltip": "23.3.6",
+ "@vaadin/avatar": "23.3.7",
+ "@vaadin/button": "23.3.7",
+ "@vaadin/grid": "23.3.7",
+ "@vaadin/icons": "23.3.7",
+ "@vaadin/tooltip": "23.3.7",
+ "axios": "1.3.3",
"@zip.js/zip.js": "^2.6.62",
"epml": "0.3.3",
"file-saver": "2.0.5",
@@ -83,13 +85,13 @@
"lit": "2.6.1",
"lit-translate": "2.0.1",
"passive-events-support": "1.0.33",
- "rollup": "3.12.0",
+ "rollup": "3.15.0",
"rollup-plugin-node-globals": "1.4.0",
"rollup-plugin-progress": "1.1.2",
- "rollup-plugin-web-worker-loader": "1.6.1",
- "validator": "^13.7.0"
+ "rollup-plugin-web-worker-loader": "1.6.1"
+
},
"engines": {
- "node": ">=16.17.1"
+ "node": ">=18.12.1"
}
}
diff --git a/qortal-ui-plugins/plugins/core/components/ChatHead.js b/qortal-ui-plugins/plugins/core/components/ChatHead.js
index c28a583f..61a30fb2 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatHead.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatHead.js
@@ -1,11 +1,15 @@
import { LitElement, html, css } from 'lit'
import { render } from 'lit/html.js'
import { Epml } from '../../../epml.js'
+import localForage from "localforage";
+import { translate} from 'lit-translate';
import '@material/mwc-icon'
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
-
+const chatLastSeen = localForage.createInstance({
+ name: "chat-last-seen",
+});
class ChatHead extends LitElement {
static get properties() {
return {
@@ -15,7 +19,8 @@ class ChatHead extends LitElement {
iconName: { type: String },
activeChatHeadUrl: { type: String },
isImageLoaded: { type: Boolean },
- setActiveChatHeadUrl: {attribute: false}
+ setActiveChatHeadUrl: {attribute: false},
+ lastReadMessageTimestamp: {type: Number}
}
}
@@ -24,9 +29,13 @@ class ChatHead extends LitElement {
li {
width: 100%;
- padding: 7px 5px 7px 5px;
+ padding: 10px 5px 10px 5px;
cursor: pointer;
width: 100%;
+ box-sizing: border-box;
+ display: flex;
+ align-items: flex-start;
+
}
li:hover {
@@ -44,12 +53,21 @@ class ChatHead extends LitElement {
color: var(--chat-group);
}
- .about {
- margin-top: 8px;
- }
+
.about {
- padding-left: 8px;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ margin: 0px;
+ }
+ .inner-container {
+ display: flex;
+ width: calc(100% - 45px);
+ flex-direction: column;
+ justify-content: center;
}
.status {
@@ -64,6 +82,13 @@ class ChatHead extends LitElement {
clear: both;
height: 0;
}
+
+ .name {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
`
}
@@ -82,9 +107,11 @@ class ChatHead extends LitElement {
this.activeChatHeadUrl = ''
this.isImageLoaded = false
this.imageFetches = 0
+ this.lastReadMessageTimestamp = 0
+ this.loggedInAddress = window.parent.reduxStore.getState().app.selectedAddress.address
}
- createImage(imageUrl) {
+ createImage(imageUrl) {
const imageHTMLRes = new Image();
imageHTMLRes.src = imageUrl;
imageHTMLRes.style= "width:40px; height:40px; float: left; border-radius:50%";
@@ -99,7 +126,7 @@ class ChatHead extends LitElement {
setTimeout(() => {
this.imageFetches = this.imageFetches + 1;
imageHTMLRes.src = imageUrl;
- }, 500);
+ }, 750);
} else {
@@ -109,32 +136,61 @@ class ChatHead extends LitElement {
return imageHTMLRes;
}
+
+
render() {
let avatarImg = '';
let backupAvatarImg = ''
+ let isUnread = false
+
if(this.chatInfo.name){
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
avatarImg= this.createImage(avatarUrl)
-
}
+ if(this.lastReadMessageTimestamp && this.chatInfo.timestamp){
+ if(this.lastReadMessageTimestamp < this.chatInfo.timestamp){
+ isUnread = true
+ }
+ }
+
+ if(this.activeChatHeadUrl === this.chatInfo.url){
+ isUnread = false
+ }
+
+ if(this.chatInfo.sender === this.loggedInAddress){
+ isUnread = false
+ }
return html`
${this.chatInfo.name.charAt(0)}
`: ''}
- ${!this.isImageLoaded && this.chatInfo.groupName ? html`${this.chatInfo.groupName.charAt(0)}
`: ''}
+ ${!this.isImageLoaded && this.chatInfo.name ? html`${this.chatInfo.name.charAt(0)}
`: ''}
+ ${!this.isImageLoaded && this.chatInfo.groupName ? html`${this.chatInfo.groupName.charAt(0)}
`: ''}
+
-
+ ${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} ${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}
+ ${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} ${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}
+
+
+
+
+
+
+
${this.isLoadingMessages ?
html`
@@ -1068,6 +1494,9 @@ console.log({zipFileBlob})
style=${this.openGifModal ? "visibility: visible; z-index: 4" : "visibility: hidden; z-index: -100"}>
+ ${this.isLoadingGoToRepliedMessage && this.isLoadingGoToRepliedMessage.loading ? html`
+
+ ` : ''}
-
- - ${this.isDeletingImage ? - translate("chatpage.cchange31") : translate("chatpage.cchange30")} -
-+ ${this.isDeletingImage ? + translate("chatpage.cchange31") : translate("chatpage.cchange30")} +
+ + + + + `: ''} + ${(this.isUploadingAttachment || this.isDeletingAttachment) ? html` +
+
+
+ `: ''}
+
+
+
+
+ + ${this.isDeletingAttachment ? + translate("chatpage.cchange76") : translate("chatpage.cchange75")} +
+
${this.imageFile && html`
@@ -1195,7 +1644,7 @@ console.log({zipFileBlob})
placeholder=${this.chatEditorPlaceholder}
._sendMessage=${this._sendMessage}
.imageFile=${this.imageFile}
- .insertImage=${this.insertImage}
+ .insertFile=${this.insertFile}
.editedMessageObj=${this.editedMessageObj}
?isLoading=${this.isLoading}
?isLoadingMessages=${this.isLoadingMessages}
@@ -1218,7 +1667,6 @@ console.log({zipFileBlob})
const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption')
chatTextEditor.sendMessageFunc({
type: 'image',
- imageFile: this.imageFile,
})
}}
>
@@ -1228,7 +1676,58 @@ console.log({zipFileBlob})
+
+
+ ${this.attachment && html`
+
+
+ 
+
+ `}
+
+
+
+ this.updatePlaceholder(editor, value)}
+ >
+
+
+
+ ${translate("chatpage.cchange41")}
@@ -1434,7 +1933,6 @@ console.log({zipFileBlob}) name: name ? name : undefined } } catch (error) { - console.log(error) } return memberItem @@ -1443,20 +1941,21 @@ console.log({zipFileBlob}) this.groupMembers = membersWithName this.pageNumber = this.pageNumber + 1 } catch (error) { - console.error(error) } } - async connectedCallback() { + async connectedCallback() { super.connectedCallback(); + await this.initUpdate() this.webWorker = new WebWorker(); - this.webWorkerImage = new WebWorkerImage(); + this.webWorkerFile = new WebWorkerFile(); await this.getUpdateCompleteTextEditor(); - const elementChatId = this.shadowRoot.getElementById('_chatEditorDOM').shadowRoot.getElementById('_chatEditorDOM') - const elementChatImageId = this.shadowRoot.getElementById('chatTextCaption').shadowRoot.getElementById('newChat') + const elementChatId = this.shadowRoot.getElementById('_chatEditorDOM').shadowRoot.getElementById('_chatEditorDOM'); + const elementChatImageId = this.shadowRoot.getElementById('chatTextCaption').shadowRoot.getElementById('newChat'); + const elementChatAttachmentId = this.shadowRoot.getElementById('chatAttachmentId').shadowRoot.getElementById('newAttachmentChat'); this.editor = new Editor({ onUpdate: ()=> { this.shadowRoot.getElementById('_chatEditorDOM').getMessageSize(this.editor.getJSON()) @@ -1513,11 +2012,37 @@ console.log({zipFileBlob}) Extension.create({ addKeyboardShortcuts:()=> { return { - 'Enter':()=> { + 'Enter':() => { const chatTextEditor = this.shadowRoot.getElementById('chatTextCaption') chatTextEditor.sendMessageFunc({ - type: 'image', - imageFile: this.imageFile, + type: 'image' + }) + return true + } + } + }}) + ] + }) + + this.editorAttachment = new Editor({ + onUpdate: () => { + this.shadowRoot.getElementById('chatAttachmentId').getMessageSize(this.editorAttachment.getJSON()) + }, + element: elementChatAttachmentId, + extensions: [ + StarterKit, + Underline, + Highlight, + Placeholder.configure({ + placeholder: 'Write something …', + }), + Extension.create({ + addKeyboardShortcuts:()=> { + return { + 'Enter':()=> { + const chatTextEditor = this.shadowRoot.getElementById('chatAttachmentId') + chatTextEditor.sendMessageFunc({ + type: 'attachment' }) return true } @@ -1526,16 +2051,45 @@ console.log({zipFileBlob}) ] }) document.addEventListener('keydown', this.initialChat); - } + document.addEventListener('paste', this.pasteImage); + if(this.chatId){ + window.parent.reduxStore.dispatch( window.parent.reduxAction.addChatLastSeen({ + key: this.chatId, + timestamp: Date.now() + })) + } + } disconnectedCallback() { super.disconnectedCallback(); - this.webWorker.terminate(); - this.webWorkerImage.terminate(); - this.editor.destroy() - this.editorImage.destroy() + if(this.webSocket){ + this.webSocket.close(1000, 'switch chat') + this.webSocket= '' + } + if(this.webWorker){ + this.webWorker.terminate(); + } + if(this.webWorkerImage){ + this.webWorkerImage.terminate(); + } + if(this.editor){ + this.editor.destroy() + } + if(this.editorImage){ + this.editorImage.destroy() + } + document.removeEventListener('keydown', this.initialChat); - } + document.removeEventListener('paste', this.pasteImage); + if(this.chatId){ + window.parent.reduxStore.dispatch( window.parent.reduxAction.addChatLastSeen({ + key: this.chatId, + timestamp: Date.now() + })) + + } + + } initialChat(e) { if (this.editor && !this.editor.isFocused && this.currentEditor === '_chatEditorDOM' && !this.openForwardOpen && !this.openTipUser && !this.openGifModal) { @@ -1548,12 +2102,59 @@ console.log({zipFileBlob}) this.editor.commands.focus('end') } } - - } - async goToRepliedMessage(message){ + + async pasteImage (e) { + const event = e; + const handleTransferIntoURL = (dataTransfer) => { + try { + const [firstItem] = dataTransfer.items; + const blob = firstItem.getAsFile(); + return blob; + } catch (error) { + console.log(error); + } + } + if (event.clipboardData) { + const blobFound = handleTransferIntoURL(event.clipboardData) + if (blobFound) { + this.insertImage(blobFound); + return; + } else { + const item_list = await navigator.clipboard.read(); + let image_type; + const item = item_list.find(item => + item.types.some( type => { + if (type.startsWith( 'image/')) { + image_type = type; + return true; + } + }) + ); + if (item) { + try { + const blob = item && await item.getType(image_type); + let file = new File([blob], "name", { + type: image_type + }); + this.insertImage(file); + } catch (error) { + console.error(error); + let errorMsg = get("chatpage.cchange81") + parentEpml.request('showSnackBar', `${errorMsg}`) + } + } else { + return + } + } + } + + } + + async goToRepliedMessage(message, clickedOnMessage){ const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference) + if(findMessage){ findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' }) const findElement = findMessage.shadowRoot.querySelector('.message-parent') @@ -1572,11 +2173,29 @@ console.log({zipFileBlob}) return } + + + if((message.timestamp - this.messagesRendered[0].timestamp) < 86400000){ + const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.reference) + if(findOriginalMessage){ + const messageClientRect = findOriginalMessage.getBoundingClientRect() + this.isLoadingGoToRepliedMessage = { + ...this.isLoadingGoToRepliedMessage, + loading: true, + left: messageClientRect.left, + top: messageClientRect.top, + offsetHeight: findOriginalMessage.offsetHeight + } + } await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000) const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference) if(findMessage){ - findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' }) + this.isLoadingGoToRepliedMessage = { + ...this.isLoadingGoToRepliedMessage, + loading: false + } + findMessage.scrollIntoView({block: 'center' }) const findElement = findMessage.shadowRoot.querySelector('.message-parent') if(findElement){ findElement.classList.add('blink-bg') @@ -1584,10 +2203,13 @@ console.log({zipFileBlob}) findElement.classList.remove('blink-bg') }, 2000) } - + return } - + this.isLoadingGoToRepliedMessage = { + ...this.isLoadingGoToRepliedMessage, + loading: false + } let errorMsg = get("chatpage.cchange66") parentEpml.request('showSnackBar', `${errorMsg}`) @@ -1621,7 +2243,6 @@ console.log({zipFileBlob}) this.userFoundModalOpen = true; } catch (error) { this.loading = false; - console.error(error); let err4string = get("chatpage.cchange35"); parentEpml.request('showSnackBar', `${err4string}`) } @@ -1650,7 +2271,6 @@ console.log({zipFileBlob}) const stringifyMessageObject = JSON.stringify(message); this.sendMessage(stringifyMessageObject, undefined, '', true) } catch (error) { - console.log({error}); } } @@ -1659,19 +2279,29 @@ console.log({zipFileBlob}) } - insertImage(file) { + insertFile(file) { if (file.type.includes('image')) { this.imageFile = file; - this.currentEditor = 'newChat' + this.currentEditor = 'newChat'; return; - } - parentEpml.request('showSnackBar', get("chatpage.cchange28")); + } else { + this.attachment = file; + this.currentEditor = "newAttachmentChat"; + return; + } + // parentEpml.request('showSnackBar', get("chatpage.cchange28")); } removeImage() { this.imageFile = null; - this.resetChatEditor() - this.currentEditor = '_chatEditorDOM' + this.resetChatEditor(); + this.currentEditor = '_chatEditorDOM'; + } + + removeAttachment() { + this.attachment = null; + this.resetChatEditor(); + this.currentEditor = '_chatEditorDOM'; } changeMsgInput(id) { @@ -1680,10 +2310,6 @@ console.log({zipFileBlob}) } async initUpdate(){ - if(this.webSocket){ - this.webSocket.close() - this.webSocket= '' - } this.pageNumber = 1 const getAddressPublicKey = () => { @@ -1729,7 +2355,7 @@ console.log({zipFileBlob}) const isRecipient = this.chatId.includes('direct') === true ? true : false; const groupId = this.chatId.split('/')[1]; - if(!isRecipient && groupId !== 0){ + if(!isRecipient && groupId.toString() !== '0'){ try { const getMembers = await parentEpml.request("apiCall", { @@ -1753,7 +2379,6 @@ console.log({zipFileBlob}) name: name ? name : undefined } } catch (error) { - console.log(error) } return memberItem @@ -1768,7 +2393,6 @@ console.log({zipFileBlob}) name: name ? name : undefined } } catch (error) { - console.log(error) } return memberItem @@ -1778,7 +2402,6 @@ console.log({zipFileBlob}) this.groupMembers = membersWithName this.groupInfo = getGroupInfo } catch (error) { - console.error(error) } } @@ -1813,7 +2436,7 @@ console.log({zipFileBlob}) if(isEnabledChatEnter){ this.isEnabledChatEnter = isEnabledChatEnter === 'false' ? false : true } - await this.initUpdate() + } async updated(changedProperties) { @@ -1825,20 +2448,16 @@ console.log({zipFileBlob}) } } - if (changedProperties && changedProperties.has('chatId') && changedProperties.get('chatId')) { - await this.initUpdate() - } if (changedProperties && changedProperties.has('isLoading')) { - if (this.isLoading === true && this.currentEditor === '_chatEditorDOM') { + if (this.isLoading === true && this.currentEditor === '_chatEditorDOM' && this.editor && this.editor.setEditable) { this.editor.setEditable(false) } - if (this.isLoading === false && this.currentEditor === '_chatEditorDOM') { + if (this.isLoading === false && this.currentEditor === '_chatEditorDOM' && this.editor && this.editor.setEditable) { this.editor.setEditable(true) } } - } async getName (recipient) { @@ -1909,7 +2528,7 @@ console.log({zipFileBlob}) .setSelectedHead=${(val) => this.setSelectedHead(val)} ?openTipUser=${this.openTipUser} .selectedHead=${this.selectedHead} - .goToRepliedMessage=${(val)=> this.goToRepliedMessage(val)} + .goToRepliedMessage=${(val, val2)=> this.goToRepliedMessage(val, val2)} .getOldMessageAfter=${(val)=> this.getOldMessageAfter(val)} > @@ -2208,7 +2827,13 @@ console.log({zipFileBlob}) await this.renderNewMessage(msg) }) await Promise.all(renderEachMessage) - + if(this.chatId){ + window.parent.reduxStore.dispatch( window.parent.reduxAction.addChatLastSeen({ + key: this.chatId, + timestamp: Date.now() + })) + + } // this.newMessages = this.newMessages.concat(_newMessages) this.messagesRendered = [...this.messagesRendered].sort(function (a, b) { return a.timestamp @@ -2260,7 +2885,8 @@ console.log({zipFileBlob}) const findOriginalMessageIndex = this.messagesRendered.findIndex(msg=> msg.reference === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference) ) if(findOriginalMessageIndex !== -1){ const newMessagesRendered = [...this.messagesRendered] - newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, editedTimestamp: newMessage.timestamp } + newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName, + sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp } this.messagesRendered = newMessagesRendered await this.getUpdateComplete(); } @@ -2334,7 +2960,7 @@ console.log({zipFileBlob}) async fetchChatMessages(chatId) { - const initDirect = async (cid) => { + const initDirect = async (cid, noInitial) => { let initial = 0 let directSocketTimeout @@ -2354,17 +2980,15 @@ console.log({zipFileBlob}) } this.webSocket = new WebSocket(directSocketLink); - // Open Connection this.webSocket.onopen = () => { - setTimeout(pingDirectSocket, 50) } // Message Event this.webSocket.onmessage = async (e) => { if (initial === 0) { - + if(noInitial) return const cachedData = null let getInitialMessages = [] if (cachedData && cachedData.length !== 0) { @@ -2396,8 +3020,10 @@ console.log({zipFileBlob}) } // Closed Event - this.webSocket.onclose = () => { + this.webSocket.onclose = (e) => { clearTimeout(directSocketTimeout) + if(e.reason === 'switch chat') return + restartDirectWebSocket() } // Error Event @@ -2412,8 +3038,17 @@ console.log({zipFileBlob}) } }; + const restartDirectWebSocket = () => { + const noInitial = true + setTimeout(() => initDirect(chatId, noInitial), 50) + } + const restartGroupWebSocket = () => { + const noInitial = true + let groupChatId = Number(chatId) + setTimeout(() => initGroup(groupChatId, noInitial), 50) + } - const initGroup = (gId) => { + const initGroup = (gId, noInitial) => { let groupId = Number(gId) let initial = 0 @@ -2446,7 +3081,7 @@ console.log({zipFileBlob}) this.webSocket.onmessage = async (e) => { if (initial === 0) { - + if(noInitial) return const cachedData = null; let getInitialMessages = [] if (cachedData && cachedData.length !== 0) { @@ -2481,8 +3116,10 @@ console.log({zipFileBlob}) } // Closed Event - this.webSocket.onclose = () => { + this.webSocket.onclose = (e) => { clearTimeout(groupSocketTimeout) + if(e.reason === 'switch chat') return + restartGroupWebSocket() } // Error Event @@ -2522,6 +3159,9 @@ console.log({zipFileBlob}) if(this.currentEditor === 'newChat'){ this.editorImage.commands.setContent('') } + if(this.currentEditor === 'newAttachmentChat'){ + this.editorAttachment.commands.setContent('') + } } async _sendMessage(outSideMsg, msg) { @@ -2546,7 +3186,6 @@ console.log({zipFileBlob}) this._publicKey.hasPubKey = false } } catch (error) { - console.error(error); } if(!hasPublicKey || !this._publicKey.hasPubKey){ @@ -2565,6 +3204,7 @@ console.log({zipFileBlob}) // find specific object property in local let typeMessage = 'regular'; let workerImage; + let workerAttachment; this.isLoading = true; const trimmedMessage = msg @@ -2593,62 +3233,152 @@ console.log({zipFileBlob}) let compressedFile = '' var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg=="; - if (this.webWorkerImage) { - workerImage = this.webWorkerImage; + if (this.webWorkerFile) { + workerImage = this.webWorkerFile; } else { - this.webWorkerImage = new WebWorkerImage(); + this.webWorkerFile = new WebWorkerFile(); } - const b64toBlob = (b64Data, contentType='', sliceSize=512) => { - const byteCharacters = atob(b64Data); - const byteArrays = []; - - for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { - const slice = byteCharacters.slice(offset, offset + sliceSize); - - const byteNumbers = new Array(slice.length); - for (let i = 0; i < slice.length; i++) { - byteNumbers[i] = slice.charCodeAt(i); + const b64toBlob = (b64Data, contentType='', sliceSize=512) => { + const byteCharacters = atob(b64Data); + const byteArrays = []; + + for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { + const slice = byteCharacters.slice(offset, offset + sliceSize); + + const byteNumbers = new Array(slice.length); + for (let i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + const byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); + } + + const blob = new Blob(byteArrays, {type: contentType}); + return blob; + } + const blob = b64toBlob(str, 'image/png'); + await new Promise(resolve => { + new Compressor(blob, { + quality: 0.6, + maxWidth: 500, + success(result) { + const file = new File([result], "name", { + type: 'image/png' + }); + + compressedFile = file; + resolve(); + }, + error(err) { + console.log(err.message); + }, + }) + }) + try { + await publishData({ + registeredName: userName, + file : compressedFile, + service: 'QCHAT_IMAGE', + identifier: identifier, + parentEpml, + metaData: undefined, + uploadType: 'file', + selectedAddress: this.selectedAddress, + worker: workerImage + }) + this.isDeletingImage = false + } catch (error) { + this.isLoading = false; + return + } + typeMessage = 'edit'; + let chatReference = outSideMsg.editedMessageObj.reference; + + if(outSideMsg.editedMessageObj.chatReference){ + chatReference = outSideMsg.editedMessageObj.chatReference; } - const byteArray = new Uint8Array(byteNumbers); - byteArrays.push(byteArray); + let message = ""; + try { + const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage); + message = parsedMessageObj; + + } catch (error) { + message = outSideMsg.editedMessageObj.decodedMessage; } - - const blob = new Blob(byteArrays, {type: contentType}); - return blob; - } - const blob = b64toBlob(str, 'image/png'); - await new Promise(resolve => { - new Compressor(blob, { - quality: 0.6, - maxWidth: 500, - success(result) { - const file = new File([result], "name", { - type: 'image/png' - }); - - compressedFile = file; - resolve(); - }, - error(err) { - console.log(err.message); - }, + const messageObject = { + ...message, + isImageDeleted: true + } + const stringifyMessageObject = JSON.stringify(messageObject); + this.sendMessage(stringifyMessageObject, typeMessage, chatReference); + } else if (outSideMsg && outSideMsg.type === 'deleteAttachment') { + this.isDeletingAttachment = true; + let compressedFile = '' + var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg=="; + const userName = outSideMsg.name; + const identifier = outSideMsg.identifier; + + if (this.webWorkerFile) { + workerAttachment = this.webWorkerFile; + } else { + this.webWorkerFile = new WebWorkerFile(); + } + + const b64toBlob = (b64Data, contentType='', sliceSize=512) => { + const byteCharacters = atob(b64Data); + const byteArrays = []; + + for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { + const slice = byteCharacters.slice(offset, offset + sliceSize); + + const byteNumbers = new Array(slice.length); + for (let i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + const byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); + } + + const blob = new Blob(byteArrays, {type: contentType}); + return blob; + } + + const blob = b64toBlob(str, 'image/png'); + await new Promise(resolve => { + new Compressor(blob, { + quality: 0.6, + maxWidth: 500, + success(result) { + const file = new File([result], "name", { + type: 'image/png' + }); + + compressedFile = file; + resolve(); + }, + error(err) { + console.log(err.message); + }, + }) }) - }) + try { await publishData({ registeredName: userName, - file : compressedFile, - service: 'QCHAT_IMAGE', + file: compressedFile, + service: 'QCHAT_ATTACHMENT', identifier: identifier, parentEpml, metaData: undefined, uploadType: 'file', selectedAddress: this.selectedAddress, - worker: workerImage - }) - this.isDeletingImage = false + worker: workerAttachment + }) + this.isDeletingAttachment = false } catch (error) { this.isLoading = false; return @@ -2659,7 +3389,7 @@ console.log({zipFileBlob}) if(outSideMsg.editedMessageObj.chatReference){ chatReference = outSideMsg.editedMessageObj.chatReference; } - + let message = ""; try { const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage); @@ -2670,36 +3400,35 @@ console.log({zipFileBlob}) } const messageObject = { ...message, - isImageDeleted: true + isAttachmentDeleted: true } const stringifyMessageObject = JSON.stringify(messageObject); this.sendMessage(stringifyMessageObject, typeMessage, chatReference); - - - } - else if (outSideMsg && outSideMsg.type === 'image') { + } else if (outSideMsg && outSideMsg.type === 'image') { this.isUploadingImage = true; const userName = await getName(this.selectedAddress.address); if (!userName) { parentEpml.request('showSnackBar', get("chatpage.cchange27")); this.isLoading = false; + this.isUploadingImage = false; + this.imageFile = null; return; } - if (this.webWorkerImage) { - workerImage = this.webWorkerImage; + if (this.webWorkerFile) { + workerImage = this.webWorkerFile; } else { - this.webWorkerImage = new WebWorkerImage(); + this.webWorkerFile = new WebWorkerFile(); } const image = this.imageFile const id = this.uid(); - const identifier = `qchat_${id}`; + const identifier = qchat_${id}; let compressedFile = ''; await new Promise(resolve => { new Compressor( image, { quality: .6, - maxWidth: 500, + maxWidth: 1200, success(result){ const file = new File([result], "name", { type: image.type @@ -2719,40 +3448,41 @@ console.log({zipFileBlob}) this.isUploadingImage = false; return; } - try { - await publishData({ - registeredName: userName, - file : compressedFile, - service: 'QCHAT_IMAGE', - identifier : identifier, - parentEpml, - metaData: undefined, - uploadType: 'file', - selectedAddress: this.selectedAddress, - worker: workerImage - }); + try { + await publishData({ + registeredName: userName, + file : compressedFile, + service: 'QCHAT_IMAGE', + identifier : identifier, + parentEpml, + metaData: undefined, + uploadType: 'file', + selectedAddress: this.selectedAddress, + worker: workerImage + }); + this.isUploadingImage = false; + this.removeImage(); + } catch (error) { + console.error(error); + this.isLoading = false; this.isUploadingImage = false; - this.removeImage() - } catch (error) { - this.isLoading = false; - this.isUploadingImage = false; - return; - } - const messageObject = { - messageText: trimmedMessage, - images: [{ - service: "QCHAT_IMAGE", - name: userName, - identifier: identifier - }], - isImageDeleted: false, - repliedTo: '', - version: 2 - }; - const stringifyMessageObject = JSON.stringify(messageObject); - this.sendMessage(stringifyMessageObject, typeMessage); + return; + } + + const messageObject = { + messageText: trimmedMessage, + images: [{ + service: "QCHAT_IMAGE", + name: userName, + identifier: identifier + }], + isImageDeleted: false, + repliedTo: '', + version: 2 + }; + const stringifyMessageObject = JSON.stringify(messageObject); + this.sendMessage(stringifyMessageObject, typeMessage); } else if (outSideMsg && outSideMsg.type === 'gif') { - console.log(outSideMsg, "gif received here"); const userName = await getName(this.selectedAddress.address); if (!userName) { parentEpml.request('showSnackBar', get("chatpage.cchange27")); @@ -2773,7 +3503,68 @@ console.log({zipFileBlob}) }; const stringifyMessageObject = JSON.stringify(messageObject); this.sendMessage(stringifyMessageObject, typeMessage); - } else if (outSideMsg && outSideMsg.type === 'reaction') { + } else if (outSideMsg && outSideMsg.type === 'attachment') { + this.isUploadingAttachment = true; + const userName = await getName(this.selectedAddress.address); + if (!userName) { + parentEpml.request('showSnackBar', get("chatpage.cchange27")); + this.isLoading = false; + return; + } + + if (this.webWorkerFile) { + workerAttachment = this.webWorkerFile; + } else { + this.webWorkerFile = new WebWorkerFile(); + } + + const attachment = this.attachment; + const id = this.uid(); + const identifier = qchat_${id}; + const fileSize = attachment.size; + if (fileSize > 1000000) { + parentEpml.request('showSnackBar', get("chatpage.cchange77")); + this.isLoading = false; + this.isUploadingAttachment = false; + return; + } + try { + await publishData({ + registeredName: userName, + file : attachment, + service: 'QCHAT_ATTACHMENT', + identifier : identifier, + parentEpml, + metaData: undefined, + uploadType: 'file', + selectedAddress: this.selectedAddress, + worker: workerAttachment + }); + this.isUploadingAttachment = false; + this.removeAttachment(); + } catch (error) { + console.error(error); + this.isLoading = false; + this.isUploadingAttachment = false; + return; + } + const messageObject = { + messageText: trimmedMessage, + attachments: [{ + service: 'QCHAT_ATTACHMENT', + name: userName, + identifier: identifier, + attachmentName: attachment.name, + attachmentSize: attachment.size + }], + isAttachmentDeleted: false, + repliedTo: '', + version: 2 + }; + const stringifyMessageObject = JSON.stringify(messageObject); + this.sendMessage(stringifyMessageObject, typeMessage); + } else if (outSideMsg && outSideMsg.type === 'reaction') { + const userName = await getName(this.selectedAddress.address); typeMessage = 'edit'; let chatReference = outSideMsg.editedMessageObj.reference; @@ -2795,11 +3586,14 @@ console.log({zipFileBlob}) const findEmojiIndex = reactions.findIndex((reaction)=> reaction.type === outSideMsg.reaction) if(findEmojiIndex !== -1){ let users = reactions[findEmojiIndex].users || [] - const findUserIndex = users.findIndex((user)=> user === this.selectedAddress.address ) + const findUserIndex = users.findIndex((user)=> user.address === this.selectedAddress.address ) if(findUserIndex !== -1){ users.splice(findUserIndex, 1) } else { - users.push(this.selectedAddress.address) + users.push({ + address: this.selectedAddress.address, + name: userName + }) } reactions[findEmojiIndex] = { ...reactions[findEmojiIndex], @@ -2813,7 +3607,10 @@ console.log({zipFileBlob}) reactions = [...reactions, { type: outSideMsg.reaction, qty: 1, - users: [this.selectedAddress.address] + users: [{ + address: this.selectedAddress.address, + name: userName + }] }] } const messageObject = { @@ -2859,7 +3656,7 @@ console.log({zipFileBlob}) const messageObject = { ...message, messageText: trimmedMessage, - + isEdited: true } const stringifyMessageObject = JSON.stringify(messageObject) this.sendMessage(stringifyMessageObject, typeMessage, chatReference); @@ -3128,6 +3925,15 @@ console.log({zipFileBlob}) let successString = get("blockpage.bcchange15"); parentEpml.request('showSnackBar', `${successString}`); } + + this.closeEditMessageContainer() + this.closeRepliedToContainer() + this.openForwardOpen = false + this.forwardActiveChatHeadUrl = { + url: "", + name: "", + selected: false + } } else if (response.error) { parentEpml.request('showSnackBar', response.message); } else { @@ -3139,14 +3945,7 @@ console.log({zipFileBlob}) return } this.isLoading = false; - this.closeEditMessageContainer() - this.closeRepliedToContainer() - this.openForwardOpen = false - this.forwardActiveChatHeadUrl = { - url: "", - name: "", - selected: false - } + }; if (isForward) { diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index 27c4a6fe..629f2a26 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -77,17 +77,18 @@ export const chatStyles = css` } .message-data-my-name { - color: #cf21e8; - text-shadow: 0 0 3px #cf21e8; + color: #05be0e; + font-weight: bold; } .message-data-time { color: #888888; font-size: 13px; user-select: none; - float: right; - padding-left: 15px; - text-align: right; + display: flex; + justify-content: space-between; + width: 100%; + padding-top: 2px; } .message-data-time-hidden { @@ -96,10 +97,10 @@ export const chatStyles = css` color: #888888; font-size: 13px; user-select: none; - float: right; - padding-left: 15px; - padding-bottom: 3px; - text-align: right; + display: flex; + justify-content: space-between; + width: 100%; + padding-top: 2px; } .message-user-info { @@ -138,6 +139,11 @@ export const chatStyles = css` min-width: 150px; } + + .message-myBg { + background-color: var(--chat-bubble-myBg) !important; + } + .message-triangle { position: relative; } @@ -154,10 +160,30 @@ export const chatStyles = css` border-color: transparent transparent var(--chat-bubble-bg) transparent; } + .message-myTriangle { + position: relative; + } + + .message-myTriangle:after { + content: ""; + position: absolute; + bottom: 0px; + left: -9px; + width: 0; + height: 0; + border-style: solid; + border-width: 0px 0px 7px 9px; + border-color: transparent transparent var(--chat-bubble-myBg) transparent; + } + .message-reactions { - background-color: transparent; - width: calc(100% - 54px); - margin-left: 54px; + background-color: transparent; + width: calc(100% - 54px); + margin-left: 54px; + display: flex; + flex-flow: row wrap; + justify-content: left; + gap: 8px; } .original-message { @@ -186,9 +212,7 @@ export const chatStyles = css` } .original-message-sender { - margin: 0 0 5px 0; color: var(--mdc-theme-primary); - cursor: pointer; } .replied-message { @@ -199,6 +223,7 @@ export const chatStyles = css` max-width: 300px; max-height: 40px; } + .replied-message p { margin: 0px; padding: 0px; @@ -393,11 +418,11 @@ export const chatStyles = css` } .reactions-bg { + position: relative; background-color: #d5d5d5; border-radius: 10px; padding: 5px; color: black; - margin-right: 10px; transition: all 0.1s ease-in-out; border: 0.5px solid transparent; cursor: pointer; @@ -413,7 +438,7 @@ export const chatStyles = css` .message-data-level { height: 21px; - width: 21px; + width: auto; overflow: hidden; } @@ -422,6 +447,10 @@ export const chatStyles = css` height: 40vh; } + .hideImg { + visibility: hidden; + } + .image-deleted-msg { font-family: Roboto, sans-serif; font-size: 14px; @@ -617,6 +646,7 @@ export const chatStyles = css` white-space: pre-wrap; margin: 0px; } + .replied-message pre code { color: inherit; padding: 0; @@ -624,12 +654,10 @@ export const chatStyles = css` font-size: 0.8rem; } - .replied-message img { width: 1.7em; height: 1.5em; margin: 0px; - } .replied-message blockquote { @@ -643,6 +671,86 @@ export const chatStyles = css` margin: 2rem 0; } + .attachment-container { + display: flex; + align-items: center; + justify-content: space-evenly; + padding: 5px 0 10px 0; + gap: 20px; + cursor: pointer; + } + + + .attachment-icon-container { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + width: 50px; + border-radius: 50%; + border: none; + background-color: var(--mdc-theme-primary); + } + + .attachment-icon { + width: 70%; + } + + .attachment-info { + display: flex; + flex-direction: column; + gap: 5px; + } + + .attachment-name { + font-family: Work Sans, sans-serif; + font-size: 16px; + color: var(--chat-bubble-msg-color); + margin: 0; + letter-spacing: 0.4px; + padding: 5px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .attachment-size { + font-family: Roboto, sans-serif; + font-size: 16px; + color: var(--chat-bubble-msg-color); + margin: 0; + letter-spacing: 0.3px; + font-weight: 300; + } + + .download-icon { + position: relative; + color: var(--chat-bubble-msg-color); + width: 19px; + background-color: transparent; + } + + .download-icon:hover::before { + background-color: rgb(161 158 158 / 41%); + } + + + .download-icon::before { + content: ""; + position: absolute; + border-radius: 50%; + padding: 18px; + background-color: transparent; + transition: all 0.3s ease-in-out; + } + + .edited-message-style { + font-family: "Work Sans", sans-serif; + font-style: italic; + font-size: 13px; + visibility: visible; + } + .blink-bg{ border-radius: 8px; animation: blinkingBackground 3s; @@ -652,4 +760,46 @@ export const chatStyles = css` 100% { background-color:rgba(var(--menuactivergb), 0)} } + + .smallLoading, + .smallLoading:after { + border-radius: 50%; + width: 2px; + height: 2px; + } + + .smallLoading { + border-width: 0.8em; + border-style: solid; + border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) + rgba(3, 169, 244, 0.2) rgb(3, 169, 244); + font-size: 30px; + position: relative; + text-indent: -9999em; + transform: translateZ(0px); + animation: 1.1s linear 0s infinite normal none running loadingAnimation; + } + + @-webkit-keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes loadingAnimation { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + ` diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 633896dc..64a4d0ee 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -6,6 +6,7 @@ import {unsafeHTML} from 'lit/directives/unsafe-html.js'; import { chatStyles } from './ChatScroller-css.js' import { Epml } from "../../../epml"; import { cropAddress } from "../../utils/cropAddress"; +import { roundToNearestDecimal } from '../../utils/roundToNearestDecimal.js'; import './LevelFounder.js'; import './NameMenu.js'; import './ChatModals.js'; @@ -13,11 +14,14 @@ import './WrapperModal'; import "./UserInfo/UserInfo"; import '@vaadin/icons'; import '@vaadin/icon'; +import '@vaadin/tooltip'; import '@material/mwc-button'; import '@material/mwc-dialog'; import '@material/mwc-icon'; import { EmojiPicker } from 'emoji-picker-js'; -import { generateHTML } from '@tiptap/core' +import { generateHTML } from '@tiptap/core'; +import { saveAs } from 'file-saver'; +import axios from "axios"; import StarterKit from '@tiptap/starter-kit' import Underline from '@tiptap/extension-underline'; import Highlight from '@tiptap/extension-highlight' @@ -52,7 +56,8 @@ class ChatScroller extends LitElement { userName: { type: String }, selectedHead: { type: Object }, goToRepliedMessage: { attribute: false }, - getOldMessageAfter: {attribute: false} + getOldMessageAfter: {attribute: false}, + listSeenMessages: {type: Array} } } @@ -67,6 +72,11 @@ class ChatScroller extends LitElement { this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") this.openTipUser = false; this.openUserInfo = false; + this.listSeenMessages= [] + } + + addSeenMessage(val){ + this.listSeenMessages.push(val) } render() { @@ -76,7 +86,6 @@ class ChatScroller extends LitElement { let timestamp; let sender; let repliedToData; - let firstMessageInChat; if (index === 0) { @@ -139,11 +148,14 @@ class ChatScroller extends LitElement { .setUserName=${(val) => this.setUserName(val)} id=${message.reference} .goToRepliedMessage=${this.goToRepliedMessage} + .addSeenMessage=${(val)=> this.addSeenMessage(val)} + .listSeenMessages=${this.listSeenMessages} + chatId=${this.chatId} > ` ) })} - + ` } @@ -273,6 +285,7 @@ class MessageTemplate extends LitElement { openDialogImage: { type: Boolean }, openDialogGif: { type: Boolean }, openDeleteImage: { type: Boolean }, + openDeleteAttachment: { type: Boolean }, isImageLoaded: { type: Boolean }, isGifLoaded: { type: Boolean }, isFirstMessage: { type: Boolean }, @@ -287,6 +300,9 @@ class MessageTemplate extends LitElement { setUserName: { attribute: false }, openTipUser:{ type: Boolean }, goToRepliedMessage: { attribute: false }, + listSeenMessages: { type: Array }, + addSeenMessage: { attribute: false }, + chatId: { type: String }, } } @@ -306,7 +322,7 @@ class MessageTemplate extends LitElement { this.isFirstMessage = false this.isSingleMessageInGroup = false this.isLastMessageInGroup = false - this.viewImage = false + this.viewImage = false } static styles = [chatStyles] @@ -337,6 +353,36 @@ class MessageTemplate extends LitElement { } } + async downloadAttachment(attachment) { + + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; + + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; + try{ + axios.get(`${nodeUrl}/arbitrary/QCHAT_ATTACHMENT/${attachment.name}/${attachment.identifier}?apiKey=${myNode.apiKey}`, { responseType: 'blob'}) + .then(response =>{ + let filename = attachment.attachmentName; + let blob = new Blob([response.data], { type:"application/octet-stream" }); + saveAs(blob , filename); + }) + } catch (error) { + console.error(error); + } + } + firstUpdated(){ + const autoSeeChatList = window.parent.reduxStore.getState().app?.autoLoadImageChats + if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.reference)){ + this.viewImage = true + } + + const tooltips = this.shadowRoot.querySelectorAll('vaadin-tooltip'); + tooltips.forEach(tooltip => { + const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay'); + overlay.shadowRoot.getElementById("overlay").style.cssText = "background-color: transparent; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px"; + overlay.shadowRoot.getElementById('content').style.cssText = "background-color: var(--reactions-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; border-radius: 8px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;"; + }); + } + render() { const hidemsg = this.hideMessages; let message = ""; @@ -346,8 +392,11 @@ class MessageTemplate extends LitElement { let image = null; let gif = null; let isImageDeleted = false; + let isAttachmentDeleted = false; let version = 0; let isForwarded = false + let isEdited = false + let attachment = null; try { const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage); if (parsedMessageObj.version.toString() === '2' && parsedMessageObj.messageText) { @@ -365,9 +414,14 @@ class MessageTemplate extends LitElement { message = parsedMessageObj.messageText; repliedToData = this.messageObj.repliedToData; isImageDeleted = parsedMessageObj.isImageDeleted; + isAttachmentDeleted = parsedMessageObj.isAttachmentDeleted; reactions = parsedMessageObj.reactions || []; - version = parsedMessageObj.version - isForwarded = parsedMessageObj.type === 'forward' + version = parsedMessageObj.version; + isForwarded = parsedMessageObj.type === 'forward'; + isEdited = parsedMessageObj.isEdited && true; + if (parsedMessageObj.attachments && Array.isArray(parsedMessageObj.attachments) && parsedMessageObj.attachments.length > 0) { + attachment = parsedMessageObj.attachments[0]; + } if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) { image = parsedMessageObj.images[0]; } @@ -389,15 +443,16 @@ class MessageTemplate extends LitElement { let levelFounder = ''; let hideit = hidemsg.includes(this.messageObj.sender); let forwarded = '' + let edited = '' levelFounder = html`
`
+ avatarImg = html`
`
}
const createImage = (imageUrl) => {
@@ -415,15 +470,12 @@ class MessageTemplate extends LitElement {
setTimeout(() => {
this.imageFetches = this.imageFetches + 1;
imageHTMLRes.src = imageUrl;
- }, 500);
+ }, 2000);
} else {
- imageHTMLRes.src = '/img/chain.png';
- imageHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)";
- imageHTMLRes.onclick= () => {
-
- }
-
- this.isImageLoaded = true
+ setTimeout(() => {
+ this.imageFetches = this.imageFetches + 1;
+ imageHTMLRes.src = imageUrl;
+ }, 6000);
}
};
return imageHTMLRes;
@@ -460,7 +512,7 @@ class MessageTemplate extends LitElement {
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}`;
- if(this.viewImage || this.myAddress === this.messageObj.sender){
+ if (this.viewImage || this.myAddress === this.messageObj.sender) {
imageHTML = createImage(imageUrl);
imageHTMLDialog = createImage(imageUrl)
imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
@@ -489,18 +541,23 @@ class MessageTemplate extends LitElement {
`;
+ edited = html`
+
+ `;
+
if (repliedToData) {
try {
const parsedMsg = JSON.parse(repliedToData.decodedMessage);
repliedToData.decodedMessage = parsedMsg;
} catch (error) {
- console.error(error);
}
}
const escapedMessage = this.escapeHTML(message)
const replacedMessage = escapedMessage.replace(new RegExp('\r?\n','g'), ''); - + return hideit ? html`` : html`
${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
`} - ${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html` + ${image && !isImageDeleted && !this.viewImage && this.myAddress !== this.messageObj.sender ? html` {
this.viewImage = true
+ this.addSeenMessage(this.messageObj.reference)
}}
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
style=${this.isFirstMessage && "margin-top: 10px;"}>
` : html``}
+ ${!this.isImageLoaded && image && this.viewImage ? html`
+
- ${translate("chatpage.cchange40")}
+ ${translate("chatpage.cchange40")}
+
+
+
+ `: ''}
${image && !isImageDeleted && (this.viewImage || this.myAddress === this.messageObj.sender) ? html`
- ${imageHTML} {
this.openDeleteImage = true;
- this.chatE
}}
class="image-delete-icon" icon="vaadin:close" slot="icon">
+ ` : ''}
+
` : image && isImageDeleted ? html`
- This image has been deleted
+${translate("chatpage.cchange80")}
` : html``} ${gif && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
` : html``}
+ ${attachment && !isAttachmentDeleted ?
+ html`
+
@@ -705,17 +833,66 @@ class MessageTemplate extends LitElement {
@@ -782,7 +959,7 @@ class MessageTemplate extends LitElement {
this.openDeleteImage = false;
}}>
await this.downloadAttachment(attachment)} class="attachment-container">
+
+
+ ${this.myAddress === this.messageObj.sender
+ ? html`
+ {
+ e.stopPropagation();
+ this.openDeleteAttachment = true;
+ }}
+ class="image-delete-icon" icon="vaadin:close" slot="icon">
+
+ ` : html``}
+
+ `
+ : attachment && isAttachmentDeleted ?
+ html`
+
+ `
+ : html``}
+
+
+
+
+
-
+ Are you sure you want to delete this image?
+${translate("chatpage.cchange78")}
+
+
+ ${translate("chatpage.cchange79")}
+
@@ -919,7 +1122,6 @@ class ChatMenu extends LitElement {
this.setToggledMessage(this.originalMessage)
this.emojiPicker.togglePicker(e.target)
} catch (error) {
- console.log({error})
}
}}
@@ -930,6 +1132,10 @@ class ChatMenu extends LitElement {
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
data-text="${translate("blockpage.bcchange14")}"
@click="${() => {
+ if (this.version === '0') {
+ this.versionErrorSnack()
+ return
+ }
this.messageForwardFunc()
}}">
diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
index cbd14e81..9ed0fe25 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
@@ -4,6 +4,8 @@ import { get, translate } from 'lit-translate';
import { EmojiPicker } from 'emoji-picker-js';
import { Epml } from '../../../epml.js';
import '@material/mwc-icon'
+import '@material/mwc-checkbox'
+// import { addAutoLoadImageChat } from "../../../../qortal-ui-core/src/redux/app/app-actions.js";
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
class ChatTextEditor extends LitElement {
@@ -13,6 +15,8 @@ class ChatTextEditor extends LitElement {
isLoadingMessages: { type: Boolean },
_sendMessage: { attribute: false },
placeholder: { type: String },
+ attachment: { type: Object },
+ insertFile: { attribute: false },
imageFile: { type: Object },
insertImage: { attribute: false },
iframeHeight: { type: Number },
@@ -31,7 +35,8 @@ class ChatTextEditor extends LitElement {
toggleEnableChatEnter: {attribute: false},
isEnabledChatEnter: {type: Boolean},
openGifModal: { type: Boolean },
- setOpenGifModal: { attribute: false }
+ setOpenGifModal: { attribute: false },
+ chatId: {type: String}
}
}
@@ -48,6 +53,11 @@ class ChatTextEditor extends LitElement {
overflow: hidden;
}
+ * {
+
+ --mdc-checkbox-unchecked-color: var(--black);
+
+ }
.chatbar-container {
width: 100%;
display: flex;
@@ -261,6 +271,13 @@ class ChatTextEditor extends LitElement {
transition: all 0.2s;
display: none;
}
+ .removeBg {
+ background: none;
+ }
+
+ .chatbar-button-single label {
+ font-size: 13px;
+ }
.chatbar-button-single:hover {
filter: brightness(120%);
@@ -299,7 +316,7 @@ class ChatTextEditor extends LitElement {
.ProseMirror {
width: 100%;
box-sizing: border-box;
- word-break: break-all;
+ word-break: break-word;
}
.ProseMirror mark {
@@ -341,7 +358,10 @@ class ChatTextEditor extends LitElement {
.hide-styling {
display: none;
}
-
+mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::before {
+ background-color:var(--mdc-theme-primary)
+ }
+ --mdc-checkbox-unchecked-color
`
}
@@ -359,66 +379,93 @@ class ChatTextEditor extends LitElement {
}
render() {
-
return html`
@@ -495,7 +545,7 @@ class ChatTextEditor extends LitElement {
html`
${this.isLoading === false ? html`
@@ -518,8 +568,8 @@ class ChatTextEditor extends LitElement {
${this.chatMessageSize >= 750 ?
html`
+
@@ -161,6 +360,204 @@ class NameRegistration extends LitElement { ${translate("general.close")}
+
+
+
+ ${translate("general.close")}
+
+
+
+
+
+ ${translate("general.close")}
+
+
+
+
+
+ ${translate("general.close")}
+
+
+
+
+ this.closeBuyErrorNameDialog()}
+ class="red"
+ >
+ ${translate("general.close")}
+
+
+
+
+ this.closeBuyErrorPriceDialog()}
+ class="red"
+ >
+ ${translate("general.close")}
+
+
`
}
@@ -170,6 +567,9 @@ class NameRegistration extends LitElement {
this.changeTheme()
this.changeLanguage()
this.unitFee()
+ this.unitSellFee()
+ this.unitCancelSellFee()
+ this.unitBuyFee()
const fetchNames = () => {
parentEpml.request('apiCall', {
@@ -180,6 +580,16 @@ class NameRegistration extends LitElement {
setTimeout(fetchNames, this.config.user.nodeSettings.pingInterval)
}
+ const fetchMarketSellNames = async () => {
+ await parentEpml.request('apiCall', {
+ url: `/names/forsale?limit=0&reverse=true`
+ }).then(res => {
+ this.marketSellNames = res
+ })
+ this.updatePageSize()
+ setTimeout(fetchMarketSellNames, 180000)
+ }
+
window.addEventListener("contextmenu", (event) => {
event.preventDefault()
this._textMenu(event)
@@ -221,6 +631,7 @@ class NameRegistration extends LitElement {
parentEpml.subscribe('config', c => {
if (!configLoaded) {
setTimeout(fetchNames, 1)
+ setTimeout(fetchMarketSellNames, 1)
configLoaded = true
}
this.config = JSON.parse(c)
@@ -237,11 +648,11 @@ class NameRegistration extends LitElement {
changeTheme() {
const checkTheme = localStorage.getItem('qortalTheme')
if (checkTheme === 'dark') {
- this.theme = 'dark';
+ this.theme = 'dark'
} else {
- this.theme = 'light';
+ this.theme = 'light'
}
- document.querySelector('html').setAttribute('theme', this.theme);
+ document.querySelector('html').setAttribute('theme', this.theme)
}
changeLanguage() {
@@ -255,6 +666,147 @@ class NameRegistration extends LitElement {
}
}
+ async updatePageSize() {
+ this.filteredItems = []
+ this.marketSellNames.sort((a, b) => parseFloat(a.salePrice) - parseFloat(b.salePrice))
+ this.filteredItems = this.marketSellNames
+ await this.setPages()
+ await this.updateItemsFromPage(1, true)
+ }
+
+ async setPages() {
+ this.namesGrid = this.shadowRoot.querySelector(`#marketSellNames`)
+ this.pagesControl = this.shadowRoot.querySelector('#pages')
+ this.pages = undefined
+ }
+
+ async updatePageSizeSearch() {
+ this.filteredItems = []
+ this.searchSellNames.sort((a, b) => parseFloat(a.salePrice) - parseFloat(b.salePrice))
+ this.filteredItems = this.searchSellNames
+ await this.setPagesSearch()
+ await this.updateItemsFromPage(1, true)
+ }
+
+ async setPagesSearch() {
+ this.namesGrid = this.shadowRoot.querySelector(`#marketSellNames`)
+ this.pagesControl = this.shadowRoot.querySelector('#pages')
+ this.pages = undefined
+ }
+
+ async updateItemsFromPage(page, changeNames = false) {
+ if (page === undefined) {
+ return
+ }
+
+ changeNames === true ? (this.pagesControl.innerHTML = '') : null
+
+ if (!this.pages) {
+ this.pages = Array.apply(null, { length: Math.ceil(this.filteredItems.length / this.namesGrid.pageSize) }).map((item, index) => {
+ return index + 1
+ })
+
+ const prevBtn = document.createElement('button')
+ prevBtn.textContent = '<'
+ prevBtn.addEventListener('click', () => {
+ const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
+ this.updateItemsFromPage(selectedPage - 1)
+ })
+ this.pagesControl.appendChild(prevBtn)
+
+ this.pages.forEach((pageNumber) => {
+ const pageBtn = document.createElement('button')
+ pageBtn.textContent = pageNumber
+ pageBtn.addEventListener('click', (e) => {
+ this.updateItemsFromPage(parseInt(e.target.textContent))
+ })
+ if (pageNumber === page) {
+ pageBtn.setAttribute('selected', true)
+ }
+ this.pagesControl.appendChild(pageBtn)
+ })
+
+ const nextBtn = window.document.createElement('button')
+ nextBtn.textContent = '>'
+ nextBtn.addEventListener('click', () => {
+ const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
+ this.updateItemsFromPage(selectedPage + 1)
+ })
+ this.pagesControl.appendChild(nextBtn)
+ }
+
+ const buttons = Array.from(this.pagesControl.children)
+ buttons.forEach((btn, index) => {
+ if (parseInt(btn.textContent) === page) {
+ btn.setAttribute('selected', true)
+ } else {
+ btn.removeAttribute('selected')
+ }
+ if (index === 0) {
+ if (page === 1) {
+ btn.setAttribute('disabled', '')
+ } else {
+ btn.removeAttribute('disabled')
+ }
+ }
+ if (index === buttons.length - 1) {
+ if (page === this.pages.length) {
+ btn.setAttribute('disabled', '')
+ } else {
+ btn.removeAttribute('disabled')
+ }
+ }
+ })
+ let start = (page - 1) * this.namesGrid.pageSize
+ let end = page * this.namesGrid.pageSize
+
+ this.namesGrid.items = this.filteredItems.slice(start, end)
+ }
+
+ async updateQortWalletBalance() {
+ let qortAddress = window.parent.reduxStore.getState().app.selectedAddress.address
+
+ await parentEpml.request('apiCall', {
+ url: `/addresses/balance/${qortAddress}`,
+ }).then((res) => {
+ this.qortWalletBalance = res
+ })
+ }
+
+ renderClearSuccess() {
+ let strSuccessValue = this.successMessage
+ if (strSuccessValue === "") {
+ return html``
+ } else {
+ return html`
+
-
` :
@@ -607,9 +657,9 @@ class ChatTextEditor extends LitElement {
}
sendMessageFunc(props) {
- if(this.editor.isEmpty) return
+ if(this.editor.isEmpty && this.iframeId !== 'newChat') return
this.getMessageSize(this.editor.getJSON())
- if (this.chatMessageSize > 1000 ) {
+ if (this.chatMessageSize > 4000 ) {
parentEpml.request('showSnackBar', get("chatpage.cchange29"));
return;
}
@@ -657,7 +707,20 @@ class ChatTextEditor extends LitElement {
repliedTo: '',
version: 2
};
- } else {
+ } else if (this.attachment && this.iframeId === 'newAttachmentChat') {
+ messageObject = {
+ messageText: trimmedMessage,
+ attachments: [{
+ service: "QCHAT_ATTACHMENT",
+ name: '123456789123456789123456789',
+ identifier: '123456',
+ attachmentName: "123456789123456789123456789",
+ attachmentSize: "123456"
+ }],
+ repliedTo: '',
+ version: 2
+ };
+ } else {
messageObject = {
messageText: trimmedMessage,
images: [''],
@@ -678,4 +741,4 @@ class ChatTextEditor extends LitElement {
}
-window.customElements.define("chat-text-editor", ChatTextEditor)
+window.customElements.define("chat-text-editor", ChatTextEditor)
\ No newline at end of file
diff --git a/qortal-ui-plugins/plugins/core/components/LevelFounder.js b/qortal-ui-plugins/plugins/core/components/LevelFounder.js
index 98c192bf..d389e054 100644
--- a/qortal-ui-plugins/plugins/core/components/LevelFounder.js
+++ b/qortal-ui-plugins/plugins/core/components/LevelFounder.js
@@ -63,6 +63,7 @@ class LevelFounder extends LitElement {
.message-data {
display: flex;
justify-content: center;
+ align-items: center;
gap: 5px;
}
@@ -158,12 +159,12 @@ class LevelFounder extends LitElement {
renderLevel() {
let adresslevel = this.memberInfo.level;
- return html `
+ return adresslevel ? html `
${translate("mintingpage.mchange27")} ${adresslevel}
- `
+ ` : ''
}
_textMenu(event) {
diff --git a/qortal-ui-plugins/plugins/core/components/TimeAgo.js b/qortal-ui-plugins/plugins/core/components/TimeAgo.js
index ca3633b7..66164179 100644
--- a/qortal-ui-plugins/plugins/core/components/TimeAgo.js
+++ b/qortal-ui-plugins/plugins/core/components/TimeAgo.js
@@ -19,7 +19,7 @@ class TimeAgo extends LitElement {
updated(changedProps) {
changedProps.forEach((OldProp, name) => {
- if (name === 'timeIso') {
+ if (name === 'timeIso' || name === 'timestamp') {
this.renderTime(this.timestamp)
}
});
@@ -35,7 +35,6 @@ class TimeAgo extends LitElement {
}
render() {
-
return html`
`
diff --git a/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js
index ff0290cc..ea8fe4de 100644
--- a/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js
+++ b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo.js
@@ -85,7 +85,7 @@ export class UserInfo extends LitElement {
${!this.isImageLoaded && this.selectedHead && !this.selectedHead.name ?
html`
this.setActiveChatHeadUrl(val)} chatInfo=${JSON.stringify(eachChatHead)}> `
})
+
}
- renderChatPage(chatId) {
+ renderChatPage() {
// Check for the chat ID from and render chat messages
// Else render Welcome to Q-CHat
@@ -876,9 +885,10 @@ class Chat extends LitElement {
}
setChatHeads(chatObj) {
-
- let groupList = chatObj.groups.map(group => group.groupId === 0 ? { groupId: group.groupId, url: `group/${group.groupId}`, groupName: "Qortal General Chat", timestamp: group.timestamp === undefined ? 2 : group.timestamp } : { ...group, timestamp: group.timestamp === undefined ? 1 : group.timestamp, url: `group/${group.groupId}` })
- let directList = chatObj.direct.map(dc => {
+ const chatObjGroups = Array.isArray(chatObj.groups) ? chatObj.groups : [];
+ const chatObjDirect = Array.isArray(chatObj.direct) ? chatObj.direct : [];
+ let groupList = chatObjGroups.map(group => group.groupId === 0 ? { groupId: group.groupId, url: `group/${group.groupId}`, groupName: "Qortal General Chat", timestamp: group.timestamp === undefined ? 2 : group.timestamp, sender: group.sender } : { ...group, timestamp: group.timestamp === undefined ? 1 : group.timestamp, url: `group/${group.groupId}` })
+ let directList = chatObjDirect.map(dc => {
return { ...dc, url: `direct/${dc.address}` }
})
const compareNames = (a, b) => {
@@ -971,4 +981,4 @@ class Chat extends LitElement {
}
}
-window.customElements.define('q-chat', Chat)
\ No newline at end of file
+window.customElements.define('q-chat', Chat)
diff --git a/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js b/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
index 05019570..1157a73a 100644
--- a/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
+++ b/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
@@ -7,29 +7,53 @@ registerTranslateConfig({
loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
})
-import '@material/mwc-icon'
import '@material/mwc-button'
-import '@material/mwc-textfield'
import '@material/mwc-dialog'
+import '@material/mwc-formfield'
+import '@material/mwc-icon'
+import '@material/mwc-icon-button'
+import '@material/mwc-textfield'
import '@polymer/paper-spinner/paper-spinner-lite.js'
+import '@polymer/paper-progress/paper-progress.js'
+import '@vaadin/button'
+import '@vaadin/icon'
+import '@vaadin/icons'
import '@vaadin/grid'
+import '@vaadin/text-field'
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
class NameRegistration extends LitElement {
static get properties() {
return {
+ theme: { type: String, reflect: true },
+ qortWalletBalance: { type: Number },
loading: { type: Boolean },
names: { type: Array },
+ marketSellNames: { type: Array },
+ filteredItems: { type: Array },
+ searchSellNames: { type: Array },
recipientPublicKey: { type: String },
selectedAddress: { type: Object },
btnDisable: { type: Boolean },
+ isLoading: { type: Boolean },
registerNameLoading: { type: Boolean },
error: { type: Boolean },
message: { type: String },
removeError: { type: Boolean },
removeMessage: { type: String },
- theme: { type: String, reflect: true }
+ fee: { type: Number },
+ sellFee: { type: Number },
+ cancelSellFee: { type: Number },
+ buyFee: { type: Number },
+ toSellName: { type: String },
+ toSellPrice: { type: String },
+ toCancelSellName: { type: String },
+ toBuyName: { type: String },
+ toBuyPrice: { type: String },
+ toBuySeller: { type: String },
+ errorMessage: { type: String },
+ successMessage: { type: String }
}
}
@@ -37,20 +61,32 @@ class NameRegistration extends LitElement {
return css`
* {
--mdc-theme-primary: rgb(3, 169, 244);
- --mdc-theme-secondary: var(--mdc-theme-primary);
--paper-input-container-focus-color: var(--mdc-theme-primary);
--mdc-theme-surface: var(--white);
+ --mdc-text-field-outlined-idle-border-color: var(--txtfieldborder);
+ --mdc-text-field-outlined-hover-border-color: var(--txtfieldhoverborder);
+ --mdc-text-field-label-ink-color: var(--black);
+ --mdc-text-field-ink-color: var(--black);
--mdc-dialog-content-ink-color: var(--black);
+ --mdc-dialog-min-width: 400px;
+ --mdc-dialog-max-width: 1024px;
--lumo-primary-text-color: rgb(0, 167, 245);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
--lumo-primary-color: hsl(199, 100%, 48%);
--lumo-base-color: var(--white);
--lumo-body-text-color: var(--black);
+ --lumo-secondary-text-color: var(--sectxt);
+ --lumo-contrast-60pct: var(--vdicon);
--_lumo-grid-border-color: var(--border);
--_lumo-grid-secondary-border-color: var(--border2);
}
+ [hidden] {
+ display: hidden !important;
+ visibility: none !important;
+ }
+
#name-registration-page {
background: var(--white);
padding: 12px 24px;
@@ -78,21 +114,139 @@ class NameRegistration extends LitElement {
max-height: 42px;
}
+ paper-progress {
+ --paper-progress-active-color: var(--mdc-theme-primary);
+ }
+
.red {
--mdc-theme-primary: #F44336;
}
+
+ .green {
+ --mdc-theme-primary: #198754;
+ }
+
+ .buttons {
+ text-align: right;
+ }
+
+ #pages {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 10px 5px 5px 5px;
+ margin: 0px 20px 20px 20px;
+ }
+
+ #pages > button {
+ user-select: none;
+ padding: 5px;
+ margin: 0 5px;
+ border-radius: 10%;
+ border: 0;
+ background: transparent;
+ font: inherit;
+ outline: none;
+ cursor: pointer;
+ color: var(--black);
+ }
+
+ #pages > button:not([disabled]):hover,
+ #pages > button:focus {
+ color: #ccc;
+ background-color: #eee;
+ }
+
+ #pages > button[selected] {
+ font-weight: bold;
+ color: var(--white);
+ background-color: #ccc;
+ }
+
+ #pages > button[disabled] {
+ opacity: 0.5;
+ cursor: default;
+ }
+
+ .card-container {
+ background-color: var(--white);
+ border-radius: 5px;
+ color: var(--black);
+ padding-top: 30px;
+ position: relative;
+ width: 350px;
+ max-width: 100%;
+ text-align: center;
+ }
+
+ .successBox {
+ height: 34px;
+ min-width: 300px;
+ width: 100%;
+ border: 1px solid green;
+ border-radius: 5px;
+ background-color: transparent;
+ margin-top: 15px;
+ }
+
+ .errorBox {
+ height: 34px;
+ min-width: 300px;
+ width: 100%;
+ border: 1px solid red;
+ border-radius: 5px;
+ background-color: transparent;
+ margin-top: 15px;
+ }
+
+ .manage-group-dialog {
+ min-height: 300px;
+ min-width: 350px;
+ box-sizing: border-box;
+ position: relative;
+ }
+
+ .btn-clear-success {
+ --mdc-icon-button-size: 32px;
+ color: red;
+ }
+
+ .btn-clear-error {
+ --mdc-icon-button-size: 32px;
+ color: green;
+ }
+
+ .error-icon {
+ font-size: 48px;
+ color: red;
+ }
`
}
constructor() {
super()
+ this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+ this.qortWalletBalance = 0
this.selectedAddress = {}
this.names = []
+ this.marketSellNames = []
+ this.filteredItems = []
+ this.searchSellNames = []
this.recipientPublicKey = ''
this.btnDisable = false
+ this.isLoading = false
this.registerNameLoading = false
this.fee = 0.001
- this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
+ this.sellFee = 0.001
+ this.cancelSellFee = 0.001
+ this.buyFee = 0.001
+ this.toSellName = ''
+ this.toSellPrice = ''
+ this.toCancelSellName = ''
+ this.toBuyName = ''
+ this.toBuyPrice = ''
+ this.toBuySeller = ''
+ this.errorMessage = ''
+ this.successMessage = ''
}
render() {
@@ -114,13 +268,58 @@ class NameRegistration extends LitElement {
{
render(html`${this.renderAvatarButton(data.item)}`, root)
}}>
+ {
+ if (this.marketSellNames.some(e => e.owner === this.selectedAddress.address)) {
+ render(html`${this.renderCancelSellNameButton(data.item)}`, root)
+ } else {
+ render(html`${this.renderSellNameButton(data.item)}`, root)
+ }
+ }}>
${this.isEmptyArray(this.names) ? html`
${translate("registernamepage.nchange8")}
`: ''}
+ 
-
+
`
: ""}
@@ -363,6 +391,8 @@ class Chat extends LitElement {
`
}
+
+
async firstUpdated() {
this.changeLanguage();
this.changeTheme();
@@ -389,26 +419,7 @@ class Chat extends LitElement {
this.shadowRoot.getElementById('messageBox').addEventListener('keydown', stopKeyEventPropagation);
- // let typingTimer;
- // let doneTypingInterval = 3000;
-
- // //on keyup, start the countdown
- // nameInput.addEventListener('keyup', () => {
- // clearTimeout(typingTimer);
- // if (nameInput.value) {
- // console.log("typing started!");
- // typingTimer = setTimeout(this.userSearch, doneTypingInterval);
- // }
- // });
-
- const getDataFromURL = () => {
- let tempUrl = document.location.href
- let splitedUrl = decodeURI(tempUrl).split('?')
- let urlData = splitedUrl[1]
- if (urlData !== undefined) {
- this.chatId = urlData
- }
- }
+
const runFunctionsAfterPageLoad = () => {
// Functions to exec after render while waiting for page info...
@@ -497,8 +508,11 @@ class Chat extends LitElement {
})
})
parentEpml.imReady()
+
}
+
+
setOpenPrivateMessage(props) {
this.openPrivateMessage = props.open;
this.shadowRoot.getElementById("sendTo").value = props.name
@@ -526,7 +540,6 @@ class Chat extends LitElement {
}
this.userFoundModalOpen = true;
} catch (error) {
- console.error(error);
let err4string = get("chatpage.cchange35");
parentEpml.request('showSnackBar', `${err4string}`)
}
@@ -767,7 +780,6 @@ class Chat extends LitElement {
})
this.groupInvites = pendingGroupInvites;
} catch (error) {
- console.error(error);
let err4string = get("chatpage.cchange61");
parentEpml.request('showSnackBar', `${err4string}`)
}
@@ -846,17 +858,14 @@ class Chat extends LitElement {
}
renderChatHead(chatHeadArr) {
-
- let tempUrl = document.location.href
- let splitedUrl = decodeURI(tempUrl).split('?')
- // let activeChatHeadUrl = splitedUrl[1] === undefined ? '' : splitedUrl[1]
-
+
return chatHeadArr.map(eachChatHead => {
return html`
+
+
+
+
+
+ {
+ if (data.item.owner === this.selectedAddress.address) {
+ render(html`${this.renderCancelSellNameButton(data.item)}`, root)
+ } else {
+ render(html`${this.renderBuyNameButton(data.item)}`, root)
+ }
+ }}>
+
+
+ ${this.isEmptyArray(this.marketSellNames) ? html`
+ ${translate("registernamepage.nchange24")}
+ `: ''}
+
-
${translate("registernamepage.nchange22")}
++
${translate("registernamepage.nchange9")}
@@ -161,6 +360,204 @@ class NameRegistration extends LitElement { ${translate("general.close")}
+
+
+
+
+
+ ${translate("registernamepage.nchange19")}
++
+
+
+
+
+
+ ${this.renderClearSuccess()}
+ ${this.renderClearError()}
+ ${this.isLoading ? html`${translate("walletpage.wchange21")} ${this.sellFee} QORT
++
+
+
+
+
+
+ ${translate("registernamepage.nchange20")} ${translate("registernamepage.nchange5")}
++
+
+
+
+
+ ${this.renderClearSuccess()}
+ ${this.renderClearError()}
+ ${this.isLoading ? html`${translate("walletpage.wchange21")} ${this.cancelSellFee} QORT
++
+
+
+
+
+
+ ${translate("registernamepage.nchange21")}
++
+
+
+
+
+
+
+ ${this.renderClearSuccess()}
+ ${this.renderClearError()}
+ ${this.isLoading ? html`${translate("walletpage.wchange21")} ${this.buyFee} QORT
++
+ warning
+
+ ${translate("registernamepage.nchange35")}
+${translate("registernamepage.nchange36")}
+
+ warning
+
+ ${translate("registernamepage.nchange37")}
+${translate("registernamepage.nchange38")}
+
+ ${this.successMessage}
+
+
+
+ `
+ }
+ }
+
+ renderClearError() {
+ let strErrorValue = this.errorMessage
+ if (strErrorValue === "") {
+ return html``
+ } else {
+ return html`
+ ${translate("walletpage.wchange43")}
+
+ ${this.errorMessage}
+
+
+
+ `
+ }
+ }
+
renderCoreText() {
return html`${translate("registernamepage.nchange16")}`
}
@@ -263,6 +815,18 @@ class NameRegistration extends LitElement {
return html`${translate("registernamepage.nchange18")}`
}
+ renderSellSuccessText() {
+ return html`${translate("registernamepage.nchange32")}`
+ }
+
+ renderCancelSuccessText() {
+ return html`${translate("registernamepage.nchange33")}`
+ }
+
+ renderBuySuccessText() {
+ return html`${translate("registernamepage.nchange34")}`
+ }
+
renderFailText() {
return html`${translate("registernamepage.nchange17")}`
}
@@ -271,8 +835,8 @@ class NameRegistration extends LitElement {
let name = nameObj.name
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
- const url = `${nodeUrl}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}`;
- return html`${translate("walletpage.wchange44")}
+${translate("websitespage.schange1")}
@@ -703,7 +703,7 @@ class Websites extends LitElement { const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port const url = `${nodeUrl}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true&apiKey=${this.getApiKey()}` - return html`
- ${translate("tradepage.tchange36")}
+ ${translate("info.inf15")}
@@ -1037,7 +1064,7 @@ class TradeBotPortal extends LitElement {
return html`
${translate("login.loading")}
- ${translate("tradepage.tchange39")} ${this.listedCoins.get(this.selectedCoin).coinCode} ==> QORT
+ ${translate("info.inf16")} QORT ${translate("info.inf14")} ${this.listedCoins.get(this.selectedCoin).coinCode}
- ${translate("tradepage.tchange39")} ${this.listedCoins.get(this.selectedCoin).coinCode} ==> QORT
+ ${translate("info.inf16")} QORT ${translate("info.inf14")} ${this.listedCoins.get(this.selectedCoin).coinCode}
- ${translate("tradepage.tchange39")} ${this.listedCoins.get(this.selectedCoin).coinCode} ==> QORT
+ ${translate("info.inf16")} QORT ${translate("info.inf14")} ${this.listedCoins.get(this.selectedCoin).coinCode}
- ${translate("tradepage.tchange39")} ${this.listedCoins.get(this.selectedCoin).coinCode} ==> QORT
+ ${translate("info.inf16")} QORT ${translate("info.inf14")} ${this.listedCoins.get(this.selectedCoin).coinCode}
- ${translate("tradepage.tchange39")} ${this.listedCoins.get(this.selectedCoin).coinCode} ==> QORT
+ ${translate("info.inf16")} QORT ${translate("info.inf14")} ${this.listedCoins.get(this.selectedCoin).coinCode}
${translate("general.close")}
+
+
+
`
}
diff --git a/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js b/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js
index bcfd5130..c629186a 100644
--- a/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js
+++ b/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js
@@ -12,11 +12,13 @@ import '@material/mwc-textfield'
import '@material/mwc-icon'
import '@material/mwc-icon-button'
import '@material/mwc-dialog'
+import '@material/mwc-fab'
import '@material/mwc-tab-bar'
import '@material/mwc-tab'
import '@material/mwc-list/mwc-list-item'
import '@material/mwc-select'
import '@polymer/iron-icons/iron-icons.js'
+import '@polymer/paper-dialog/paper-dialog.js'
import '@polymer/paper-icon-button/paper-icon-button.js'
import '@polymer/paper-spinner/paper-spinner-lite.js'
import '@vaadin/grid'
@@ -549,6 +551,31 @@ class TradePortal extends LitElement {
opacity: 0;
}
}
+ paper-dialog.info {
+ width: 75%;
+ max-width: 75vw;
+ height: 35%;
+ max-height: 35vh;
+ background-color: var(--white);
+ color: var(--black);
+ border: 1px solid var(--black);
+ border-radius: 15px;
+ line-height: 1.6;
+ overflow-y: auto;
+ }
+ .actions {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 1em;
+ margin: 12px 0 -6px 0;
+ }
+ .close-icon {
+ font-size: 36px;
+ }
+ .close-icon:hover {
+ cursor: pointer;
+ opacity: .6;
+ }
@media (min-width: 701px) {
* {
}
@@ -887,8 +914,8 @@ class TradePortal extends LitElement {
-
- ${translate("tradepage.tchange39")} ${this.listedCoins.get(this.selectedCoin).coinCode} ==> QORT
+ ${translate("info.inf16")} QORT ${translate("info.inf14")} ${this.listedCoins.get(this.selectedCoin).coinCode}
@@ -1924,6 +1954,20 @@ class TradeBotPortal extends LitElement {
-
BTC / QORT
LTC / QORT
@@ -1444,6 +1471,9 @@ class TradeBotPortal extends LitElement {
RVN / QORT
ARRR / QORT
+
${translate("tradepage.tchange39")} -
+${translate("info.inf13")} QORT ${translate("info.inf14")} ${this.listedCoins.get(this.selectedCoin).coinCode} -
+ this.shadowRoot.getElementById('buyInfoDialog').open()}>
+
+
+ this.shadowRoot.getElementById('buyInfoDialog').close()} title="${translate("info.inf8")}">highlight_off
+
+
+
+ ${translate("info.inf7")}
+${translate("info.inf9")}
+${translate("info.inf10")}
+${translate("info.inf11")}
+${translate("info.inf12")}
+
@@ -1168,9 +1195,13 @@ class TradePortal extends LitElement {
QORT / RVN
QORT / ARRR
-
${translate("general.close")}
+
+
+
`
}
diff --git a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js
index e8c6a955..c24b550f 100644
--- a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js
+++ b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js
@@ -62,6 +62,7 @@ class MultiWallet extends LitElement {
arrrMemo: { type: String },
errorMessage: { type: String },
arrrWalletAddress: { type: String },
+ unusedWalletAddress: { type: String },
successMessage: { type: String },
sendMoneyLoading: { type: Boolean },
btnDisable: { type: Boolean },
@@ -357,8 +358,8 @@ class MultiWallet extends LitElement {
.wallet-address {
display: flex;
align-items: center;
- font-size: 18px;
- color: var(--black);
+ font-size: 18px;
+ color: var(--black);
margin: 4px 0 20px;
}
@@ -366,7 +367,7 @@ class MultiWallet extends LitElement {
display: inline-block;
font-weight: 600;
font-size: 32px;
- color: var(--black);
+ color: var(--black);
}
#transactions {
@@ -505,6 +506,13 @@ class MultiWallet extends LitElement {
position: relative;
}
+ .unused-address-dialog {
+ min-height: 150px;
+ min-width: 550px;
+ box-sizing: border-box;
+ position: relative;
+ }
+
.btn-clear-success {
--mdc-icon-button-size: 32px;
color: red;
@@ -561,6 +569,12 @@ class MultiWallet extends LitElement {
width: 185px;
}
+ .unused-pos {
+ margin-top: -44px;
+ margin-left: 410px;
+ width: 185px;
+ }
+
@media (max-width: 863px) {
.wallet {
width: 100%;
@@ -673,6 +687,7 @@ class MultiWallet extends LitElement {
this.arrrRecipient = ''
this.arrrMemo = ''
this.arrrWalletAddress = ''
+ this.unusedWalletAddress = ''
this.errorMessage = ''
this.successMessage = ''
this.myElementId = ''
@@ -799,7 +814,7 @@ class MultiWallet extends LitElement {
${translate("walletpage.wchange2")}
${!this.selectedTransaction.amount ? '' : html` @@ -1968,6 +1986,171 @@ class MultiWallet extends LitElement { +
+
+ ${translate("general.close")}
+
+
+
+
+
+ ${translate("general.close")}
+
+
+
+
+
+ ${translate("general.close")}
+
+
+
+
+
+ ${translate("general.close")}
+
+
+
+
+
+ ${translate("general.close")}
+
+
+
@@ -3843,6 +4026,23 @@ class MultiWallet extends LitElement {
}
}
+ renderCAB() {
+ return html`
+ ${this.selectedTransaction.aTAddress}
+
+
+ `
+ }
+
renderFetchText() {
return html`${translate("walletpage.wchange1")}`
}
@@ -4098,7 +4298,7 @@ class MultiWallet extends LitElement {
const getName = async (recipient)=> {
try {
-
+
const getNames = await parentEpml.request("apiCall", {
type: "api",
url: `/names/address/${recipient}`,
@@ -4484,12 +4684,12 @@ class MultiWallet extends LitElement {
this.balance = this.wallets.get(this._selectedWallet).balance
}
}
- })
+ })
const txsQort = await parentEpml.request('apiCall', {
- url: `/transactions/search?address=${this.wallets.get('qort').wallet.address}&confirmationStatus=CONFIRMED&reverse=true`,
- })
+ url: `/transactions/search?address=${this.wallets.get('qort').wallet.address}&confirmationStatus=CONFIRMED&reverse=true&txType=PAYMENT&txType=REGISTER_NAME&txType=UPDATE_NAME&txType=SELL_NAME&txType=CANCEL_SELL_NAME&txType=BUY_NAME&txType=CREATE_POLL&txType=VOTE_ON_POLL&txType=ISSUE_ASSET&txType=TRANSFER_ASSET&txType=CREATE_ASSET_ORDER&txType=CANCEL_ASSET_ORDER&txType=MULTI_PAYMENT&txType=DEPLOY_AT&txType=MESSAGE&txType=AIRDROP&txType=AT&txType=CREATE_GROUP&txType=UPDATE_GROUP&txType=ADD_GROUP_ADMIN&txType=REMOVE_GROUP_ADMIN&txType=GROUP_BAN&txType=CANCEL_GROUP_BAN&txType=GROUP_KICK&txType=GROUP_INVITE&txType=CANCEL_GROUP_INVITE&txType=JOIN_GROUP&txType=LEAVE_GROUP&txType=GROUP_APPROVAL&txType=SET_GROUP&txType=UPDATE_ASSET&txType=ACCOUNT_FLAGS&txType=ENABLE_FORGING&txType=REWARD_SHARE&txType=ACCOUNT_LEVEL&txType=TRANSFER_PRIVS&txType=PRESENCE`,
+ })
const pendingTxsQort = await parentEpml.request('apiCall', {
- url: `/transactions/unconfirmed?creator=${this.wallets.get('qort').wallet.base58PublicKey}&reverse=true&txType=PAYMENT&txType=REGISTER_NAME&txType=UPDATE_NAME&txType=SELL_NAME&txType=CANCEL_SELL_NAME&txType=BUY_NAME&txType=CREATE_POLL&txType=VOTE_ON_POLL&txType=ARBITRARY&txType=ISSUE_ASSET&txType=TRANSFER_ASSET&txType=CREATE_ASSET_ORDER&txType=CANCEL_ASSET_ORDER&txType=MULTI_PAYMENT&txType=DEPLOY_AT&txType=MESSAGE&txType=PUBLICIZE&txType=AIRDROP&txType=AT&txType=CREATE_GROUP&txType=UPDATE_GROUP&txType=ADD_GROUP_ADMIN&txType=REMOVE_GROUP_ADMIN&txType=GROUP_BAN&txType=CANCEL_GROUP_BAN&txType=GROUP_KICK&txType=GROUP_INVITE&txType=CANCEL_GROUP_INVITE&txType=JOIN_GROUP&txType=LEAVE_GROUP&txType=GROUP_APPROVAL&txType=SET_GROUP&txType=UPDATE_ASSET&txType=ACCOUNT_FLAGS&txType=ENABLE_FORGING&txType=REWARD_SHARE&txType=ACCOUNT_LEVEL&txType=TRANSFER_PRIVS&txType=PRESENCE`,
+ url: `/transactions/unconfirmed?creator=${this.wallets.get('qort').wallet.base58PublicKey}&reverse=true&txType=PAYMENT&txType=REGISTER_NAME&txType=UPDATE_NAME&txType=SELL_NAME&txType=CANCEL_SELL_NAME&txType=BUY_NAME&txType=CREATE_POLL&txType=VOTE_ON_POLL&txType=ISSUE_ASSET&txType=TRANSFER_ASSET&txType=CREATE_ASSET_ORDER&txType=CANCEL_ASSET_ORDER&txType=MULTI_PAYMENT&txType=DEPLOY_AT&txType=MESSAGE&txType=AIRDROP&txType=AT&txType=CREATE_GROUP&txType=UPDATE_GROUP&txType=ADD_GROUP_ADMIN&txType=REMOVE_GROUP_ADMIN&txType=GROUP_BAN&txType=CANCEL_GROUP_BAN&txType=GROUP_KICK&txType=GROUP_INVITE&txType=CANCEL_GROUP_INVITE&txType=JOIN_GROUP&txType=LEAVE_GROUP&txType=GROUP_APPROVAL&txType=SET_GROUP&txType=UPDATE_ASSET&txType=ACCOUNT_FLAGS&txType=ENABLE_FORGING&txType=REWARD_SHARE&txType=ACCOUNT_LEVEL&txType=TRANSFER_PRIVS&txType=PRESENCE`,
})
if (this._selectedWallet == coin) {
this.wallets.get(coin).transactions = pendingTxsQort.concat(txsQort)
@@ -4621,6 +4821,70 @@ class MultiWallet extends LitElement {
}
}
+ async getUnusedAddress(coin) {
+ this.wallets.get(this._selectedWallet).unusedWalletAddress = ''
+ let _url = ``
+ let _body = null
+
+ switch (coin) {
+ case 'qort':
+ case 'arrr':
+ _url = ``
+ _body = null
+ break
+ case 'btc':
+ case 'ltc':
+ case 'doge':
+ case 'dgb':
+ case 'rvn':
+ const walletName = `${coin}Wallet`
+ _url = `/crosschain/${coin}/unusedaddress?apiKey=${this.getApiKey()}`
+ _body = `${window.parent.reduxStore.getState().app.selectedAddress[walletName].derivedMasterPublicKey}`
+ break
+ default:
+ break
+ }
+
+ if (_body === null) {
+ this.unusedAddressString = ""
+ } else {
+ await parentEpml.request('apiCall', {
+ url: _url,
+ method: 'POST',
+ body: _body,
+ }).then((res) => {
+ this.wallets.get(this._selectedWallet).unusedWalletAddress = res
+ this.unusedAddressString = this.wallets.get(this._selectedWallet).unusedWalletAddress
+ this.openUnusedAddressDialog(coin)
+ })
+ }
+ }
+
+ openUnusedAddressDialog(coin) {
+ switch (coin) {
+ case 'qort':
+ case 'arrr':
+ break
+ case 'btc':
+ this.shadowRoot.querySelector("#btcUnusedAddressDialog").show();
+ break
+ case 'ltc':
+ this.shadowRoot.querySelector("#ltcUnusedAddressDialog").show();
+ break
+ case 'doge':
+ this.shadowRoot.querySelector("#dogeUnusedAddressDialog").show();
+ break
+ case 'dgb':
+ this.shadowRoot.querySelector("#dgbUnusedAddressDialog").show();
+ break
+ case 'rvn':
+ this.shadowRoot.querySelector("#rvnUnusedAddressDialog").show();
+ break
+ default:
+ break
+ }
+ }
+
renderSendButton() {
if ( this._selectedWallet === "qort" ) {
return html` this.openSendQort()}> `
@@ -4661,6 +4925,22 @@ class MultiWallet extends LitElement {
}
}
+ renderUnusedAddressButton() {
+ switch (this._selectedWallet) {
+ case "qort":
+ case "arrr":
+ return html` this.getUnusedAddress(this._selectedWallet)}> `
+ case "btc":
+ case "ltc":
+ case "doge":
+ case "dgb":
+ case "rvn":
+ return html` this.getUnusedAddress(this._selectedWallet)}> `
+ default:
+ return html``
+ }
+ }
+
renderExportAddressbookButton() {
if ( this._selectedWallet === "qort" ) {
return html` this.exportQortAddressbook()}> `
@@ -4897,7 +5177,12 @@ class MultiWallet extends LitElement {
path="creatorAddress"
>
- {
+ render(html`${data.item.type === 'DEPLOY_AT' ? html`${data.item.aTAddress}` : html`${data.item.recipient}`}`, root)
+ }}
+ >
+
/etc/apt/sources.list.d/qortal.list
+ curl -sS https://update.qortal.online/repo/qortal.gpg | sudo apt-key add -
+ sudo rm -rf /usr/share/keyrings/qortal.gpg
+ sudo apt-key export 7FB37C97 | sudo gpg --dearmour -o /usr/share/keyrings/qortal.gpg
+ sudo rm -rf /etc/apt/sources.list.d/qortal.list
+ echo 'deb [arch=amd64,arm64 signed-by=/usr/share/keyrings/qortal.gpg] https://update.qortal.online/repo/ ./ ' > /etc/apt/sources.list.d/qortal.list
fi
+
+ this.shadowRoot.getElementById('tradeInfoDialog').open()}>
+
+
${this.chartShowCoin()}
+
@@ -1221,6 +1252,19 @@ class TradePortal extends LitElement {
+
+ this.shadowRoot.getElementById('tradeInfoDialog').close()} title="${translate("info.inf2")}">highlight_off
+
+
+
+ ${translate("info.inf1")}
+${translate("info.inf3")} ${this.listedCoins.get(this.selectedCoin).coinCode} ${translate("info.inf4")}
+${translate("info.inf5")} ${this.listedCoins.get(this.selectedCoin).coinCode}
+${translate("info.inf6")}
+
${this.getSelectedWalletAddress()}
-
${this.renderAddressbookButton()}
+
+ ${this.renderUnusedAddressButton()}
+
- ${this.renderSQB()}
+ ${this.selectedTransaction.type === 'DEPLOY_AT' ? html`${this.renderCAB()}` : html`${this.renderSQB()}`}
${!this.selectedTransaction.amount ? '' : html` @@ -1968,6 +1986,171 @@ class MultiWallet extends LitElement { +
+
+
+ 
+
+
+
+ BTC
++
+ ${this.wallets.get(this._selectedWallet).unusedWalletAddress}
+
+ ${translate("walletpage.wchange38")}
+
+
+
+ 
+
+
+
+ LTC
++
+ ${this.wallets.get(this._selectedWallet).unusedWalletAddress}
+
+ ${translate("walletpage.wchange38")}
+
+
+
+ 
+
+
+
+ DOGE
++
+ ${this.wallets.get(this._selectedWallet).unusedWalletAddress}
+
+ ${translate("walletpage.wchange38")}
+
+
+
+ 
+
+
+
+ DGB
++
+ ${this.wallets.get(this._selectedWallet).unusedWalletAddress}
+
+ ${translate("walletpage.wchange38")}
+
+
+
+ 
+
+
+
+ RVN
++
+ ${this.wallets.get(this._selectedWallet).unusedWalletAddress}
+
+ ${translate("walletpage.wchange38")}
+
@@ -3843,6 +4026,23 @@ class MultiWallet extends LitElement {
}
}
+ renderCAB() {
+ return html`
+ ${this.selectedTransaction.aTAddress}
+