-
-
+ />
{
const { wallet } = React.useContext(WalletContext);
+ // eToken icon adds
+ const [tokenIcon, setTokenIcon] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [fileName, setFileName] = useState('');
+ const [tokenIconFileList, setTokenIconFileList] = useState();
+ const [rawImageUrl, setRawImageUrl] = useState('');
+ const [imageUrl, setImageUrl] = useState('');
+ const [showCropModal, setShowCropModal] = useState(false);
+ const [roundSelection, setRoundSelection] = useState(true);
+
+ const [crop, setCrop] = useState({ x: 0, y: 0 });
+ const [rotation, setRotation] = useState(0);
+ const [zoom, setZoom] = useState(1);
+ const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+
+ const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
+ setCroppedAreaPixels(croppedAreaPixels);
+ }, []);
+
+ const showCroppedImage = useCallback(async () => {
+ setLoading(true);
+
+ try {
+ let imageToResize;
+
+ const croppedResult = await getCroppedImg(
+ rawImageUrl,
+ croppedAreaPixels,
+ rotation,
+ fileName,
+ );
+
+ if (roundSelection) {
+ imageToResize = await getRoundImg(croppedResult.url, fileName);
+ } else {
+ imageToResize = croppedResult;
+ }
+
+ await getResizedImage(
+ imageToResize.url,
+ resizedResult => {
+ setTokenIcon(resizedResult.file);
+ setImageUrl(resizedResult.url);
+ },
+ fileName,
+ );
+ } catch (e) {
+ console.error(e);
+ } finally {
+ setLoading(false);
+ }
+ }, [croppedAreaPixels, fileName, rawImageUrl, rotation, roundSelection]);
+
+ const onClose = useCallback(() => {
+ setShowCropModal(false);
+ }, []);
+
+ const handleTokenIconImage = (imgFile, callback) =>
+ new Promise((resolve, reject) => {
+ setLoading(true);
+ try {
+ const reader = new FileReader();
+
+ const width = 128;
+ const height = 128;
+ reader.readAsDataURL(imgFile);
+
+ reader.addEventListener('load', () =>
+ setRawImageUrl(reader.result),
+ );
+
+ reader.onload = event => {
+ const img = new Image();
+ img.src = event.target.result;
+ img.onload = () => {
+ const elem = document.createElement('canvas');
+ //console.log(`Canvas created`);
+ elem.width = width;
+ elem.height = height;
+ const ctx = elem.getContext('2d');
+ // img.width and img.height will contain the original dimensions
+ ctx.drawImage(img, 0, 0, width, height);
+ if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(
+ HTMLCanvasElement.prototype,
+ 'toBlob',
+ {
+ value: function (callback, type, quality) {
+ var dataURL = this.toDataURL(
+ type,
+ quality,
+ ).split(',')[1];
+ setTimeout(function () {
+ var binStr = atob(dataURL),
+ len = binStr.length,
+ arr = new Uint8Array(len);
+ for (var i = 0; i < len; i++) {
+ arr[i] = binStr.charCodeAt(i);
+ }
+ callback(
+ new Blob([arr], {
+ type: type || 'image/png',
+ }),
+ );
+ });
+ },
+ },
+ );
+ }
+
+ ctx.canvas.toBlob(
+ blob => {
+ console.log(imgFile.name);
+
+ let fileNameParts = imgFile.name.split('.');
+ fileNameParts.pop();
+ let fileNamePng =
+ fileNameParts.join('.') + '.png';
+
+ const file = new File([blob], fileNamePng, {
+ type: 'image/png',
+ });
+ setFileName(fileNamePng);
+ const resultReader = new FileReader();
+
+ resultReader.readAsDataURL(file);
+ setTokenIcon(file);
+ resultReader.addEventListener('load', () =>
+ callback(resultReader.result),
+ );
+ setLoading(false);
+ setShowCropModal(true);
+ resolve();
+ },
+ 'image/png',
+ 1,
+ );
+ };
+ };
+ } catch (err) {
+ console.log(`Error in handleTokenIconImage()`);
+ console.log(err);
+ reject(err);
+ }
+ });
+
+ const transformTokenIconFile = file => {
+ return new Promise((resolve, reject) => {
+ reject();
+ // setLoading(false);
+ });
+ };
+
+ const beforeTokenIconUpload = file => {
+ const approvedFileTypes = ['image/png', 'image/jpg'];
+ try {
+ if (!approvedFileTypes.includes(file.type)) {
+ throw new Error('Only jpg or png image files are accepted');
+ } else {
+ setLoading(true);
+ handleTokenIconImage(file, imageUrl => setImageUrl(imageUrl));
+ }
+ } catch (e) {
+ console.error('error', e);
+
+ Modal.error({
+ title: 'Icon Upload Error',
+ content: e.message || e.error || JSON.stringify(e),
+ });
+ setTokenIconFileList(undefined);
+ setTokenIcon(undefined);
+ setImageUrl('');
+ return false;
+ }
+ };
+
+ const handleChangeTokenIconUpload = info => {
+ let list = [...info.fileList];
+
+ if (info.file.type.split('/')[0] !== 'image') {
+ setTokenIconFileList(undefined);
+ setImageUrl('');
+ } else {
+ setTokenIconFileList(list.slice(-1));
+ }
+ };
+
+ //end eToken icon adds
+
// New Token Name
const [newTokenName, setNewTokenName] = useState('');
const [newTokenNameIsValid, setNewTokenNameIsValid] = useState(null);
@@ -110,6 +326,66 @@
// Modal settings
const [showConfirmCreateToken, setShowConfirmCreateToken] = useState(false);
+ const submitTokenIcon = async link => {
+ // Get the tokenId from link
+ const newlyMintedTokenId = link.substr(link.length - 64);
+
+ let formData = new FormData();
+
+ const data = {
+ newTokenName,
+ newTokenTicker,
+ newTokenDecimals,
+ newTokenDocumentUrl,
+ newTokenInitialQty,
+ tokenIcon,
+ };
+ for (let key in data) {
+ formData.append(key, data[key]);
+ }
+ // Would get tokenId here
+ //formData.append('tokenId', link.substr(link.length - 64));
+ // for now, hard code it
+ formData.append('tokenId', newlyMintedTokenId);
+
+ console.log(formData);
+
+ try {
+ const tokenIconApprovalResponse = await fetch(
+ currency.tokenIconSubmitApi,
+ {
+ method: 'POST',
+ //Note: fetch automatically assigns correct header for multipart form based on formData obj
+ headers: {
+ Accept: 'application/json',
+ },
+ body: formData,
+ },
+ );
+
+ const tokenIconApprovalResponseJson =
+ await tokenIconApprovalResponse.json();
+
+ if (!tokenIconApprovalResponseJson.approvalRequested) {
+ // If the backend returns a specific error msg along with "approvalRequested = false", throw that error
+ // You may want to customize how the app reacts to different cases
+ if (tokenIconApprovalResponseJson.msg) {
+ throw new Error(tokenIconApprovalResponseJson.msg);
+ } else {
+ throw new Error('Error in uploading token icon');
+ }
+ }
+
+ tokenIconSubmitSuccess();
+ } catch (err) {
+ console.error(err.message);
+ errorNotification(
+ err,
+ err.message,
+ 'Submitting icon for approval while creating a new eToken',
+ );
+ }
+ };
const createPreviewedToken = async () => {
passLoadingStatus(true);
// If data is for some reason not valid here, bail out
@@ -139,6 +415,11 @@
configObj,
);
createTokenNotification(link);
+
+ // If this eToken has an icon, upload to server
+ if (tokenIcon !== '') {
+ submitTokenIcon(link);
+ }
} catch (e) {
// Set loading to false here as well, as balance may not change depending on where error occured in try loop
passLoadingStatus(false);
@@ -329,6 +610,160 @@
}
/>
+ + Click, or drag file to this + area to upload +
++ Only jpg or png accepted +
+ + )} +You need at least @@ -83,14 +83,14 @@ exports[`Wallet with BCH balances and tokens 1`] = ` Array [
You need at least @@ -163,14 +163,14 @@ exports[`Wallet with BCH balances and tokens and state field 1`] = ` Array [
- You need at least @@ -341,14 +329,14 @@ exports[`Without wallet defined 1`] = ` Array [
You need at least diff --git a/web/cashtab/src/utils/icons/cropImage.js b/web/cashtab/src/utils/icons/cropImage.js new file mode 100644 --- /dev/null +++ b/web/cashtab/src/utils/icons/cropImage.js @@ -0,0 +1,85 @@ +const createImage = url => + new Promise((resolve, reject) => { + const image = new Image(); + image.addEventListener('load', () => resolve(image)); + image.addEventListener('error', error => reject(error)); + image.setAttribute('crossOrigin', 'anonymous'); + image.src = url; + }); + +function getRadianAngle(degreeValue) { + return (degreeValue * Math.PI) / 180; +} + +export default async function getCroppedImg( + imageSrc, + pixelCrop, + rotation = 0, + fileName, +) { + const image = await createImage(imageSrc); + console.log('image :', image); + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + const maxSize = Math.max(image.width, image.height); + const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2)); + + canvas.width = safeArea; + canvas.height = safeArea; + + ctx.translate(safeArea / 2, safeArea / 2); + ctx.rotate(getRadianAngle(rotation)); + ctx.translate(-safeArea / 2, -safeArea / 2); + + ctx.drawImage( + image, + safeArea / 2 - image.width * 0.5, + safeArea / 2 - image.height * 0.5, + ); + const data = ctx.getImageData(0, 0, safeArea, safeArea); + + canvas.width = pixelCrop.width; + canvas.height = pixelCrop.height; + + ctx.putImageData( + data, + 0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x, + 0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y, + ); + + if (!HTMLCanvasElement.prototype.toBlob) { + Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { + value: function (callback, type, quality) { + var dataURL = this.toDataURL(type, quality).split(',')[1]; + setTimeout(function () { + var binStr = atob(dataURL), + len = binStr.length, + arr = new Uint8Array(len); + for (var i = 0; i < len; i++) { + arr[i] = binStr.charCodeAt(i); + } + callback(new Blob([arr], { type: type || 'image/png' })); + }); + }, + }); + } + return new Promise(resolve => { + ctx.canvas.toBlob( + blob => { + const file = new File([blob], fileName, { + type: 'image/png', + }); + const resultReader = new FileReader(); + + resultReader.readAsDataURL(file); + + resultReader.addEventListener('load', () => + resolve({ file, url: resultReader.result }), + ); + }, + 'image/png', + 1, + ); + }); +} diff --git a/web/cashtab/src/utils/icons/resizeImage.js b/web/cashtab/src/utils/icons/resizeImage.js new file mode 100644 --- /dev/null +++ b/web/cashtab/src/utils/icons/resizeImage.js @@ -0,0 +1,57 @@ +const createImage = url => + new Promise((resolve, reject) => { + const image = new Image(); + image.addEventListener('load', () => resolve(image)); + image.addEventListener('error', error => reject(error)); + image.setAttribute('crossOrigin', 'anonymous'); + image.src = url; + }); + +export default async function getResizedImg(imageSrc, callback, fileName) { + const image = await createImage(imageSrc); + + const width = 512; + const height = 512; + const canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + const ctx = canvas.getContext('2d'); + + ctx.drawImage(image, 0, 0, width, height); + if (!HTMLCanvasElement.prototype.toBlob) { + Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { + value: function (callback, type, quality) { + var dataURL = this.toDataURL(type, quality).split(',')[1]; + setTimeout(function () { + var binStr = atob(dataURL), + len = binStr.length, + arr = new Uint8Array(len); + for (var i = 0; i < len; i++) { + arr[i] = binStr.charCodeAt(i); + } + callback(new Blob([arr], { type: type || 'image/png' })); + }); + }, + }); + } + + return new Promise(resolve => { + ctx.canvas.toBlob( + blob => { + const file = new File([blob], fileName, { + type: 'image/png', + }); + const resultReader = new FileReader(); + + resultReader.readAsDataURL(file); + + resultReader.addEventListener('load', () => + callback({ file, url: resultReader.result }), + ); + resolve(); + }, + 'image/png', + 1, + ); + }); +} diff --git a/web/cashtab/src/utils/icons/roundImage.js b/web/cashtab/src/utils/icons/roundImage.js new file mode 100644 --- /dev/null +++ b/web/cashtab/src/utils/icons/roundImage.js @@ -0,0 +1,64 @@ +const createImage = url => + new Promise((resolve, reject) => { + const image = new Image(); + image.addEventListener('load', () => resolve(image)); + image.addEventListener('error', error => reject(error)); + image.setAttribute('crossOrigin', 'anonymous'); + image.src = url; + }); + +export default async function getRoundImg(imageSrc, fileName) { + const image = await createImage(imageSrc); + console.log('image :', image); + const canvas = document.createElement('canvas'); + canvas.width = image.width; + canvas.height = image.height; + const ctx = canvas.getContext('2d'); + + ctx.drawImage(image, 0, 0); + ctx.globalCompositeOperation = 'destination-in'; + ctx.beginPath(); + ctx.arc( + image.width / 2, + image.height / 2, + image.height / 2, + 0, + Math.PI * 2, + ); + ctx.closePath(); + ctx.fill(); + if (!HTMLCanvasElement.prototype.toBlob) { + Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { + value: function (callback, type, quality) { + var dataURL = this.toDataURL(type, quality).split(',')[1]; + setTimeout(function () { + var binStr = atob(dataURL), + len = binStr.length, + arr = new Uint8Array(len); + for (var i = 0; i < len; i++) { + arr[i] = binStr.charCodeAt(i); + } + callback(new Blob([arr], { type: type || 'image/png' })); + }); + }, + }); + } + return new Promise(resolve => { + ctx.canvas.toBlob( + blob => { + const file = new File([blob], fileName, { + type: 'image/png', + }); + const resultReader = new FileReader(); + + resultReader.readAsDataURL(file); + + resultReader.addEventListener('load', () => + resolve({ file, url: resultReader.result }), + ); + }, + 'image/png', + 1, + ); + }); +}