@@ -18,7 +18,12 @@ import LoginModal from "./LoginModal.vue";
export default {
name: "DarkLayout",
- components: {LoginModal, Header}
+ components: {LoginModal, Header},
+ methods: {
+ login() {
+ this.$refs.loginModal.openModal();
+ }
+ }
}
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 382bd2f..a0ce62f 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -11,9 +11,14 @@
-
@@ -22,7 +27,19 @@
@@ -51,6 +68,14 @@ nav {
text-align: center;
}
+.address {
+ color: white;
+ background-color: #4e5a88;
+ border-radius: 0.5rem;
+ padding: 0.5rem 1rem;
+ font-family: 'Inconsolata', monospace;
+}
+
@media (min-width: 1024px) {
header {
display: flex;
diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue
index 647243c..f9e3e97 100644
--- a/src/components/LoginModal.vue
+++ b/src/components/LoginModal.vue
@@ -1,27 +1,25 @@
+
;
+
+ constructor() {
+ this.connector = new TonConnect({manifestUrl: 'https://front.agorata.io/tonconnect-manifest.json'});
+ this.initialization = this.initialize();
+ }
+
+ async initialize() {
+ await this.connector.restoreConnection();
+ this.walletList = await this.connector.getWallets();
+ }
+}
+
+const store = createStore({
+ state() {
+ return new State()
+ },
+ mutations: {
+ set_connector(state, connector) {
+ state.connector = connector
+ }
+ },
+ getters: {
+ is_connected(state) {
+ return state.connector.connected;
+ },
+ address(state) {
+ if (state.connector.account !== null && state.connector.account.address !== undefined) {
+ return state.connector.account.address;
+ } else {
+ return '';
+ }
+ }
+ },
+ actions: {
+ async connect_embedded({state}) {
+ const walletsList = await TonConnect.getWallets();
+ let connector = state.connector;
+ const embeddedWallet = walletsList.find(
+ wallet => isWalletInfoInjected(wallet) && wallet.embedded
+ ) as WalletInfoInjected;
+
+ if (embeddedWallet) {
+ connector.connect({jsBridgeKey: embeddedWallet.jsBridgeKey});
+ }
+ },
+ /* Connect embedded wallet if it exists, otherwise get connection url for a QR code unless we're already connected */
+ async get_connection_url({state}): Promise {
+ await state.initialization;
+ await this.dispatch('connect_embedded');
+ if (state.connector.connected) {
+ return null;
+ }
+ let walletList = this.state.walletList as WalletInfo[];
+ if (walletList.length === 0) {
+ return null;
+ }
+ /* iterate through wallets and do try-catch */
+ for (let wallet of walletList) {
+ try {
+ let wallet_r = wallet as WalletInfoRemote;
+ let wallet_desc = {
+ bridgeUrl: wallet_r.bridgeUrl,
+ universalLink: wallet_r.universalLink
+ }
+ let res = await state.connector.connect(wallet_desc);
+ if (typeof res === 'string') {
+ return res;
+ }
+ } catch (e) {
+ console.log(wallet, e)
+ }
+ }
+ return null;
+ }
+ }
+})
+
app.use(router)
+app.use(store)
app.mount('#app')
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..1f3400e
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,36 @@
+export function qr_options(url: string, imageSize: number = 0.4, imageMargin: number = 3, margin: number = 10): any {
+ return {
+ width: 300,
+ height: 300,
+ type: 'svg',
+ data: url,
+ image: '/logo_mono.png',
+ margin: margin,
+ qrOptions: {
+ typeNumber: 0,
+ mode: 'Byte',
+ errorCorrectionLevel: 'Q'
+ },
+ imageOptions: {
+ hideBackgroundDots: true,
+ imageSize: imageSize,
+ margin: imageMargin,
+ crossOrigin: 'anonymous',
+ },
+ dotsOptions: {
+ color: '#282e46',
+ type: 'rounded'
+ },
+ backgroundOptions: {
+ color: '#ffffff',
+ },
+ cornersSquareOptions: {
+ color: '#282e46',
+ type: 'extra-rounded',
+ },
+ cornersDotOptions: {
+ color: '#282e46',
+ type: 'dot',
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/Checkout.vue b/src/views/Checkout.vue
index 313f1d7..74ddafb 100644
--- a/src/views/Checkout.vue
+++ b/src/views/Checkout.vue
@@ -27,6 +27,7 @@ import DomainBar from "../components/DomainBar.vue";
import {get_domain_result, get_ton_link} from "../result";
import QRCodeStyling from 'qr-code-styling';
import RotateSquare2 from "../components/RotateSquare2.vue";
+import {qr_options} from "../utils";
export default {
name: "Checkout",
@@ -68,40 +69,7 @@ export default {
if (!this.loaded) {
return null;
}
- return {
- width: 300,
- height: 300,
- type: 'svg',
- data: this.ton_link.getLink(),
- image: '/logo_mono.png',
- margin: 10,
- qrOptions: {
- typeNumber: 0,
- mode: 'Byte',
- errorCorrectionLevel: 'Q'
- },
- imageOptions: {
- hideBackgroundDots: true,
- imageSize: 0.4,
- margin: 3,
- crossOrigin: 'anonymous',
- },
- dotsOptions: {
- color: '#282e46',
- type: 'rounded'
- },
- backgroundOptions: {
- color: '#ffffff',
- },
- cornersSquareOptions: {
- color: '#282e46',
- type: 'extra-rounded',
- },
- cornersDotOptions: {
- color: '#282e46',
- type: 'dot',
- }
- };
+ return qr_options(this.ton_link.getLink());
}
}
}
diff --git a/src/views/Find.vue b/src/views/Find.vue
index 7ce8219..08e8dcf 100644
--- a/src/views/Find.vue
+++ b/src/views/Find.vue
@@ -3,7 +3,7 @@
-
-
-