Skip to content

Commit

Permalink
fix: web version, ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@JenkJS
JenkJS committed Apr 3, 2024
1 parent f9b4e47 commit ccc4c8b
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 169 deletions.
6 changes: 3 additions & 3 deletions html/index.js
View file

Large diffs are not rendered by default.

323 changes: 159 additions & 164 deletions src/app/core/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,24 +202,24 @@ export default class Utils {
// TODO: add some delay before showing connecting message
// if extension is installed and app is allowed it would filck
window.addEventListener('message', listener, false);
Utils.showLoading({
headless: true,
connecting: true,
onCancel: (res) => {
Utils.hideLoading();
window.removeEventListener('message', listener);
// TODO: add cancel handling in wallet
window.postMessage({
type: 'cancel_beam_api', apiver, apivermin, appname,
}, window.origin);
resolve(res);
},
onReconnect: () => {
window.postMessage({
type: 'retry_beam_api', apiver, apivermin, appname,
}, window.origin);
},
});
// Utils.showLoading({
// headless: true,
// connecting: true,
// onCancel: (res) => {
// Utils.hideLoading();
// window.removeEventListener('message', listener);
// // TODO: add cancel handling in wallet
// window.postMessage({
// type: 'cancel_beam_api', apiver, apivermin, appname,
// }, window.origin);
// resolve(res);
// },
// onReconnect: () => {
// window.postMessage({
// type: 'retry_beam_api', apiver, apivermin, appname,
// }, window.origin);
// },
// });
window.postMessage({
type: 'create_beam_api', apiver, apivermin, appname,
}, window.origin);
Expand Down Expand Up @@ -417,25 +417,20 @@ export default class Utils {
const apivermin = params.min_api_version || '';
const { appname } = params;

if (!Utils.isChrome()) {
Utils.showChromeDownload();
return false;
}

if (headless) {
Utils.showLoading({
headless: true,
connecting: false,
});
// Utils.showLoading({
// headless: true,
// connecting: false,
// });
BEAM = await Utils.createHeadlessAPI(
apiver, apivermin, appname,
(...args) => Utils.handleApiResult(...args),
);
} else {
Utils.showLoading({
headless: false,
connecting: true,
});
// Utils.showLoading({
// headless: false,
// connecting: true,
// });
BEAM = await Utils.createWebAPI(
apiver, apivermin, appname,
(...args) => Utils.handleApiResult(...args),
Expand Down Expand Up @@ -587,139 +582,139 @@ export default class Utils {
return result;
}

static showLoading({
headless, connecting, onCancel, onReconnect,
}) {
const styles = Utils.getStyles();
Utils.applyStyles(styles);

const topColor = [styles.appsGradientOffset, 'px,'].join('');
const mainColor = [styles.appsGradientTop, 'px,'].join('');

const bg = document.createElement('div');
bg.style.width = '100%';
bg.style.height = '100%';
bg.style.color = '#fff';
bg.id = 'dapp-loader';
bg.style.position = 'absolute';
if (headless && connecting) {
bg.style.top = '0';
bg.style.left = '0';
bg.style.position = 'fixed';
bg.addEventListener('click', (ev) => {
ev.stopPropagation();
if (ev.target.id === 'dapp-loader') {
onCancel();
}
});
} else {
bg.style.backgroundImage = [
'linear-gradient(to bottom,',
styles.background_main_top, topColor,
styles.background_main, mainColor,
styles.background_main,
].join(' ');
}
const loadContainer = document.createElement('div');
loadContainer.id = 'dapp-loading';

loadContainer.style.textAlign = 'center';
loadContainer.style.margin = '50px auto 0 auto';
loadContainer.style.width = '585px';
loadContainer.style.padding = '5%';
loadContainer.style.borderRadius = '10px';

let titleElem = null;
let subtitle = null;

if (connecting) {
titleElem = document.createElement('h3');
titleElem.innerText = 'Connecting to BEAM Web Wallet.';
subtitle = document.createElement('p');
subtitle.innerText = ['To use ', InitParams.appname, ' you should have BEAM Web Wallet installed and allow connection.'].join('');

if (headless) {
loadContainer.style.backgroundColor = 'rgba(3, 91, 133, 0.95)';
const container = document.getElementById('container');
if (container) {
container.style.filter = 'blur(3px)';
}
} else {
loadContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
}
} else {
loadContainer.style.backgroundColor = 'transparent';

titleElem = document.createElement('div');
titleElem.style.fontSize = '25px';
titleElem.style.fontWeight = '400';
titleElem.innerText = [InitParams.appname, 'is loading'].join(' ');
subtitle = document.createElement('p');
subtitle.innerText = 'Please wait...';
}

loadContainer.appendChild(titleElem);
loadContainer.appendChild(subtitle);

if (connecting) {
const reconnectButton = document.createElement('button');
reconnectButton.innerText = 'Try to connect again';
reconnectButton.style.height = '44px';
reconnectButton.style.padding = '13px 30px';
reconnectButton.style.borderRadius = '50px';
reconnectButton.style.border = 'none';
reconnectButton.style.color = '#fff';
reconnectButton.style.cursor = 'pointer';
reconnectButton.style.fontWeight = 'bold';
reconnectButton.style.fontSize = '14px';
reconnectButton.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';

reconnectButton.addEventListener('mouseover', () => {
reconnectButton.style.boxShadow = '0 0 8px white';
}, false);

reconnectButton.addEventListener('mouseout', () => {
reconnectButton.style.boxShadow = 'none';
}, false);

reconnectButton.addEventListener('click', onReconnect);

const installButton = document.createElement('button');
installButton.innerText = 'Install BEAM Web Wallet';
installButton.style.height = '44px';
installButton.style.padding = '13px 30px';
installButton.style.borderRadius = '50px';
installButton.style.border = 'none';
installButton.style.color = '#042548';
installButton.style.cursor = 'pointer';
installButton.style.fontWeight = 'bold';
installButton.style.fontSize = '14px';
installButton.style.backgroundColor = '#00f6d2';
installButton.addEventListener('click', () => {
window.open('https://chrome.google.com/webstore/detail/beam-web-wallet/ilhaljfiglknggcoegeknjghdgampffk',
'_blank');
});

installButton.addEventListener('mouseover', () => {
installButton.style.boxShadow = '0 0 8px white';
}, false);
installButton.addEventListener('mouseout', () => {
installButton.style.boxShadow = 'none';
}, false);
installButton.style.marginLeft = '30px';

const controlsArea = document.createElement('div');
controlsArea.style.marginTop = '50px';

loadContainer.appendChild(controlsArea);
controlsArea.appendChild(reconnectButton);
controlsArea.appendChild(installButton);
}

bg.appendChild(loadContainer);

document.body.appendChild(bg);
}
// static showLoading({
// headless, connecting, onCancel, onReconnect,
// }) {
// const styles = Utils.getStyles();
// Utils.applyStyles(styles);
//
// const topColor = [styles.appsGradientOffset, 'px,'].join('');
// const mainColor = [styles.appsGradientTop, 'px,'].join('');
//
// const bg = document.createElement('div');
// bg.style.width = '100%';
// bg.style.height = '100%';
// bg.style.color = '#fff';
// bg.id = 'dapp-loader';
// bg.style.position = 'absolute';
// if (headless && connecting) {
// bg.style.top = '0';
// bg.style.left = '0';
// bg.style.position = 'fixed';
// bg.addEventListener('click', (ev) => {
// ev.stopPropagation();
// if (ev.target.id === 'dapp-loader') {
// onCancel();
// }
// });
// } else {
// bg.style.backgroundImage = [
// 'linear-gradient(to bottom,',
// styles.background_main_top, topColor,
// styles.background_main, mainColor,
// styles.background_main,
// ].join(' ');
// }
// const loadContainer = document.createElement('div');
// loadContainer.id = 'dapp-loading';
//
// loadContainer.style.textAlign = 'center';
// loadContainer.style.margin = '50px auto 0 auto';
// loadContainer.style.width = '585px';
// loadContainer.style.padding = '5%';
// loadContainer.style.borderRadius = '10px';
//
// let titleElem = null;
// let subtitle = null;
//
// // if (connecting) {
// // titleElem = document.createElement('h3');
// // titleElem.innerText = 'Connecting to BEAM Web Wallet.';
// // subtitle = document.createElement('p');
// // subtitle.innerText = ['To use ', InitParams.appname, ' you should have BEAM Web Wallet installed and allow connection.'].join('');
// //
// // // if (headless) {
// // // loadContainer.style.backgroundColor = 'rgba(3, 91, 133, 0.95)';
// // // const container = document.getElementById('container');
// // // if (container) {
// // // container.style.filter = 'blur(3px)';
// // // }
// // // } else {else
// // // loadContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
// // // }
// // } else {
// // loadContainer.style.backgroundColor = 'transparent';
// //
// // titleElem = document.createElement('div');
// // titleElem.style.fontSize = '25px';
// // titleElem.style.fontWeight = '400';
// // titleElem.innerText = [InitParams.appname, 'is loading'].join(' ');
// // subtitle = document.createElement('p');
// // subtitle.innerText = 'Please wait...';
// // }
//
//
// // loadContainer.appendChild(titleElem);
// // loadContainer.appendChild(subtitle);
// if (connecting) {
// const reconnectButton = document.createElement('button');
// reconnectButton.innerText = 'Try to connect again';
// reconnectButton.style.height = '44px';
// reconnectButton.style.padding = '13px 30px';
// reconnectButton.style.borderRadius = '50px';
// reconnectButton.style.border = 'none';
// reconnectButton.style.color = '#fff';
// reconnectButton.style.cursor = 'pointer';
// reconnectButton.style.fontWeight = 'bold';
// reconnectButton.style.fontSize = '14px';
// reconnectButton.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
//
// reconnectButton.addEventListener('mouseover', () => {
// reconnectButton.style.boxShadow = '0 0 8px white';
// }, false);
//
// reconnectButton.addEventListener('mouseout', () => {
// reconnectButton.style.boxShadow = 'none';
// }, false);
//
// reconnectButton.addEventListener('click', onReconnect);
//
// const installButton = document.createElement('button');
// installButton.innerText = 'Install BEAM Web Wallet';
// installButton.style.height = '44px';
// installButton.style.padding = '13px 30px';
// installButton.style.borderRadius = '50px';
// installButton.style.border = 'none';
// installButton.style.color = '#042548';
// installButton.style.cursor = 'pointer';
// installButton.style.fontWeight = 'bold';
// installButton.style.fontSize = '14px';
// installButton.style.backgroundColor = '#00f6d2';
// installButton.addEventListener('click', () => {
// window.open('https://chrome.google.com/webstore/detail/beam-web-wallet/ilhaljfiglknggcoegeknjghdgampffk',
// '_blank');
// });
//
// installButton.addEventListener('mouseover', () => {
// installButton.style.boxShadow = '0 0 8px white';
// }, false);
// installButton.addEventListener('mouseout', () => {
// installButton.style.boxShadow = 'none';
// }, false);
// installButton.style.marginLeft = '30px';
//
// const controlsArea = document.createElement('div');
// controlsArea.style.marginTop = '50px';
//
// loadContainer.appendChild(controlsArea);
// controlsArea.appendChild(reconnectButton);
// controlsArea.appendChild(installButton);
// }
//
// bg.appendChild(loadContainer);
//
// document.body.appendChild(bg);
// }

static showChromeDownload() {
const styles = Utils.getStyles();
Expand Down
2 changes: 1 addition & 1 deletion src/app/shared/components/Loader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Description = styled.div<ILoader>`

const Loader = ({ isSearchable }: ILoader) => (
<Window>
<Container variant="center" jystify="center">
<Container variant="center" jystify="center" main>
{isSearchable ? (
<>
<IconSearchResult />
Expand Down
2 changes: 1 addition & 1 deletion src/app/shared/store/saga.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function remoteEventChannel() {
Utils.initialize(
{
appname: 'DEX',
min_api_version: '6.2',
min_api_version: '7.2',
headless: !iFrameDetection || !!Utils.isHeadless(),
apiResultHandler: (error, result, full) => {
console.log('api result data: ', result, full);
Expand Down

0 comments on commit ccc4c8b

Please sign in to comment.