From de1c70ca106a9abb84586b1aa17c1ae6b4fa6de2 Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Wed, 22 Nov 2023 20:01:59 +0400 Subject: [PATCH 01/45] Update environment and metadata --- apps/d.d0rich.me/.env.example | 1 + apps/d.d0rich.me/env.d.ts | 10 +++++++++- apps/d.d0rich.me/index.html | 20 ++++++++++++++++++-- apps/d.d0rich.me/package.json | 5 +++++ apps/d.d0rich.me/postcss.config.js | 6 ++++++ apps/d.d0rich.me/src/assets/tailwind.css | 3 +++ apps/d.d0rich.me/src/main.ts | 1 + apps/d.d0rich.me/tailwind.config.js | 6 ++++++ package-lock.json | 10 ++++++++++ package.json | 1 + turbo.json | 3 +++ 11 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 apps/d.d0rich.me/.env.example create mode 100644 apps/d.d0rich.me/postcss.config.js create mode 100644 apps/d.d0rich.me/src/assets/tailwind.css create mode 100644 apps/d.d0rich.me/tailwind.config.js diff --git a/apps/d.d0rich.me/.env.example b/apps/d.d0rich.me/.env.example new file mode 100644 index 00000000..45e3d24c --- /dev/null +++ b/apps/d.d0rich.me/.env.example @@ -0,0 +1 @@ +VITE_TON_NETWORK=TESTNET diff --git a/apps/d.d0rich.me/env.d.ts b/apps/d.d0rich.me/env.d.ts index 11f02fe2..2c616017 100644 --- a/apps/d.d0rich.me/env.d.ts +++ b/apps/d.d0rich.me/env.d.ts @@ -1 +1,9 @@ -/// +/// interface ImportMetaEnv { + +interface ImportMetaEnv { + readonly VITE_APP_TITLE: 'TESTNET' | 'MAINNET' +} + +interface ImportMeta { + readonly env: ImportMetaEnv +} diff --git a/apps/d.d0rich.me/index.html b/apps/d.d0rich.me/index.html index 62a22ed0..1e43e4c8 100644 --- a/apps/d.d0rich.me/index.html +++ b/apps/d.d0rich.me/index.html @@ -2,10 +2,26 @@ + + + + + + - - Vite App + + + + + + D - Blogs on TON Blockchain
diff --git a/apps/d.d0rich.me/package.json b/apps/d.d0rich.me/package.json index b8b898cc..3f276d35 100644 --- a/apps/d.d0rich.me/package.json +++ b/apps/d.d0rich.me/package.json @@ -12,19 +12,24 @@ }, "dependencies": { "@d0rich/contracts": "*", + "@d0rich/esprit-design": "*", "pinia": "^2.1.7", "vue": "^3.3.4", "vue-router": "^4.2.5" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.10", "@tsconfig/node18": "^18.2.2", "@types/jsdom": "^21.1.3", "@types/node": "^18.18.5", "@vitejs/plugin-vue": "^4.4.0", "@vue/test-utils": "^2.4.1", "@vue/tsconfig": "^0.4.0", + "autoprefixer": "^10.4.16", "jsdom": "^22.1.0", "npm-run-all2": "^6.1.1", + "postcss": "^8.4.31", + "tailwindcss": "^3.3.5", "typescript": "~5.2.0", "vite": "^4.4.11", "vitest": "^0.34.6", diff --git a/apps/d.d0rich.me/postcss.config.js b/apps/d.d0rich.me/postcss.config.js new file mode 100644 index 00000000..85f717cc --- /dev/null +++ b/apps/d.d0rich.me/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +} diff --git a/apps/d.d0rich.me/src/assets/tailwind.css b/apps/d.d0rich.me/src/assets/tailwind.css new file mode 100644 index 00000000..b5c61c95 --- /dev/null +++ b/apps/d.d0rich.me/src/assets/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/apps/d.d0rich.me/src/main.ts b/apps/d.d0rich.me/src/main.ts index 5dcad83c..692a9599 100644 --- a/apps/d.d0rich.me/src/main.ts +++ b/apps/d.d0rich.me/src/main.ts @@ -1,3 +1,4 @@ +import './assets/tailwind.css' import './assets/main.css' import { createApp } from 'vue' diff --git a/apps/d.d0rich.me/tailwind.config.js b/apps/d.d0rich.me/tailwind.config.js new file mode 100644 index 00000000..f541c388 --- /dev/null +++ b/apps/d.d0rich.me/tailwind.config.js @@ -0,0 +1,6 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + presets: [require('@d0rich/esprit-design/tailwind.config')], + content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], + plugins: [require('@tailwindcss/typography')] +} diff --git a/package-lock.json b/package-lock.json index 3bba52a9..f069fc97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,19 +37,24 @@ "version": "0.0.0", "dependencies": { "@d0rich/contracts": "*", + "@d0rich/esprit-design": "*", "pinia": "^2.1.7", "vue": "^3.3.4", "vue-router": "^4.2.5" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.10", "@tsconfig/node18": "^18.2.2", "@types/jsdom": "^21.1.3", "@types/node": "^18.18.5", "@vitejs/plugin-vue": "^4.4.0", "@vue/test-utils": "^2.4.1", "@vue/tsconfig": "^0.4.0", + "autoprefixer": "^10.4.16", "jsdom": "^22.1.0", "npm-run-all2": "^6.1.1", + "postcss": "^8.4.31", + "tailwindcss": "^3.3.5", "typescript": "~5.2.0", "vite": "^4.4.11", "vitest": "^0.34.6", @@ -35123,15 +35128,20 @@ "version": "file:apps/d.d0rich.me", "requires": { "@d0rich/contracts": "*", + "@d0rich/esprit-design": "*", + "@tailwindcss/typography": "*", "@tsconfig/node18": "^18.2.2", "@types/jsdom": "^21.1.3", "@types/node": "^18.18.5", "@vitejs/plugin-vue": "^4.4.0", "@vue/test-utils": "^2.4.1", "@vue/tsconfig": "^0.4.0", + "autoprefixer": "^10.4.16", "jsdom": "^22.1.0", "npm-run-all2": "^6.1.1", "pinia": "^2.1.7", + "postcss": "^8.4.31", + "tailwindcss": "^3.3.5", "typescript": "~5.2.0", "vite": "^4.4.11", "vitest": "^0.34.6", diff --git a/package.json b/package.json index b97f5aec..904a2607 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "generate": "turbo run generate", "build": "turbo run build", "dev:d0rich.me": "turbo run d0rich.me#dev", + "dev:d.d0rich.me": "turbo run d.d0rich.me#dev", "dev:design.d0rich.me": "turbo run design.d0rich.me#dev", "dev:d0xigen.d0rich.me": "turbo run d0xigen.d0rich.me#dev", "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .", diff --git a/turbo.json b/turbo.json index 5cc9cdbf..3a6263a6 100644 --- a/turbo.json +++ b/turbo.json @@ -33,6 +33,9 @@ "persistent": true }, "d0rich.me#dev": {}, + "d.d0rich.me#dev": { + "dependsOn": ["@d0rich/contracts#build", "@d0rich/esprit-design#build"] + }, "d0xigen.d0rich.me#dev": {}, "design.d0rich.me#dev": {}, "nuxt-content-mermaid-playground#dev": {} From 49043af70076090993f9be8f47c158c72aeef370 Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Wed, 22 Nov 2023 20:12:10 +0400 Subject: [PATCH 02/45] Delete template files --- apps/d.d0rich.me/src/App.vue | 86 +------------ apps/d.d0rich.me/src/assets/base.css | 74 ----------- apps/d.d0rich.me/src/assets/logo.svg | 1 - apps/d.d0rich.me/src/assets/main.css | 35 ----- .../d.d0rich.me/src/components/HelloWorld.vue | 42 ------ .../d.d0rich.me/src/components/TheWelcome.vue | 121 ------------------ .../src/components/WelcomeItem.vue | 87 ------------- .../components/__tests__/HelloWorld.spec.ts | 11 -- .../src/components/icons/IconCommunity.vue | 12 -- .../components/icons/IconDocumentation.vue | 12 -- .../src/components/icons/IconEcosystem.vue | 12 -- .../src/components/icons/IconSupport.vue | 12 -- .../src/components/icons/IconTooling.vue | 19 --- apps/d.d0rich.me/src/main.ts | 1 - apps/d.d0rich.me/src/pages/Home.vue | 3 + apps/d.d0rich.me/src/router/index.ts | 11 +- apps/d.d0rich.me/src/views/AboutView.vue | 15 --- apps/d.d0rich.me/src/views/HomeView.vue | 9 -- 18 files changed, 6 insertions(+), 557 deletions(-) delete mode 100644 apps/d.d0rich.me/src/assets/base.css delete mode 100644 apps/d.d0rich.me/src/assets/logo.svg delete mode 100644 apps/d.d0rich.me/src/assets/main.css delete mode 100644 apps/d.d0rich.me/src/components/HelloWorld.vue delete mode 100644 apps/d.d0rich.me/src/components/TheWelcome.vue delete mode 100644 apps/d.d0rich.me/src/components/WelcomeItem.vue delete mode 100644 apps/d.d0rich.me/src/components/__tests__/HelloWorld.spec.ts delete mode 100644 apps/d.d0rich.me/src/components/icons/IconCommunity.vue delete mode 100644 apps/d.d0rich.me/src/components/icons/IconDocumentation.vue delete mode 100644 apps/d.d0rich.me/src/components/icons/IconEcosystem.vue delete mode 100644 apps/d.d0rich.me/src/components/icons/IconSupport.vue delete mode 100644 apps/d.d0rich.me/src/components/icons/IconTooling.vue create mode 100644 apps/d.d0rich.me/src/pages/Home.vue delete mode 100644 apps/d.d0rich.me/src/views/AboutView.vue delete mode 100644 apps/d.d0rich.me/src/views/HomeView.vue diff --git a/apps/d.d0rich.me/src/App.vue b/apps/d.d0rich.me/src/App.vue index ffc5b607..41ccda8b 100644 --- a/apps/d.d0rich.me/src/App.vue +++ b/apps/d.d0rich.me/src/App.vue @@ -1,91 +1,9 @@ - - diff --git a/apps/d.d0rich.me/src/assets/base.css b/apps/d.d0rich.me/src/assets/base.css deleted file mode 100644 index fc15cc49..00000000 --- a/apps/d.d0rich.me/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/apps/d.d0rich.me/src/assets/logo.svg b/apps/d.d0rich.me/src/assets/logo.svg deleted file mode 100644 index 75656603..00000000 --- a/apps/d.d0rich.me/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/apps/d.d0rich.me/src/assets/main.css b/apps/d.d0rich.me/src/assets/main.css deleted file mode 100644 index e8667cd4..00000000 --- a/apps/d.d0rich.me/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/apps/d.d0rich.me/src/components/HelloWorld.vue b/apps/d.d0rich.me/src/components/HelloWorld.vue deleted file mode 100644 index a1dfe161..00000000 --- a/apps/d.d0rich.me/src/components/HelloWorld.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - - - diff --git a/apps/d.d0rich.me/src/components/TheWelcome.vue b/apps/d.d0rich.me/src/components/TheWelcome.vue deleted file mode 100644 index 235d35b8..00000000 --- a/apps/d.d0rich.me/src/components/TheWelcome.vue +++ /dev/null @@ -1,121 +0,0 @@ - - - diff --git a/apps/d.d0rich.me/src/components/WelcomeItem.vue b/apps/d.d0rich.me/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086ae..00000000 --- a/apps/d.d0rich.me/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/apps/d.d0rich.me/src/components/__tests__/HelloWorld.spec.ts b/apps/d.d0rich.me/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index 25332020..00000000 --- a/apps/d.d0rich.me/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { describe, it, expect } from 'vitest' - -import { mount } from '@vue/test-utils' -import HelloWorld from '../HelloWorld.vue' - -describe('HelloWorld', () => { - it('renders properly', () => { - const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) - expect(wrapper.text()).toContain('Hello Vitest') - }) -}) diff --git a/apps/d.d0rich.me/src/components/icons/IconCommunity.vue b/apps/d.d0rich.me/src/components/icons/IconCommunity.vue deleted file mode 100644 index ea8ddefb..00000000 --- a/apps/d.d0rich.me/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/apps/d.d0rich.me/src/components/icons/IconDocumentation.vue b/apps/d.d0rich.me/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 63a85340..00000000 --- a/apps/d.d0rich.me/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/apps/d.d0rich.me/src/components/icons/IconEcosystem.vue b/apps/d.d0rich.me/src/components/icons/IconEcosystem.vue deleted file mode 100644 index 385a2029..00000000 --- a/apps/d.d0rich.me/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/apps/d.d0rich.me/src/components/icons/IconSupport.vue b/apps/d.d0rich.me/src/components/icons/IconSupport.vue deleted file mode 100644 index 7db961e4..00000000 --- a/apps/d.d0rich.me/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/apps/d.d0rich.me/src/components/icons/IconTooling.vue b/apps/d.d0rich.me/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7..00000000 --- a/apps/d.d0rich.me/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/apps/d.d0rich.me/src/main.ts b/apps/d.d0rich.me/src/main.ts index 692a9599..308cd066 100644 --- a/apps/d.d0rich.me/src/main.ts +++ b/apps/d.d0rich.me/src/main.ts @@ -1,5 +1,4 @@ import './assets/tailwind.css' -import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' diff --git a/apps/d.d0rich.me/src/pages/Home.vue b/apps/d.d0rich.me/src/pages/Home.vue new file mode 100644 index 00000000..34fdfe62 --- /dev/null +++ b/apps/d.d0rich.me/src/pages/Home.vue @@ -0,0 +1,3 @@ + diff --git a/apps/d.d0rich.me/src/router/index.ts b/apps/d.d0rich.me/src/router/index.ts index a49ae507..84a00dfd 100644 --- a/apps/d.d0rich.me/src/router/index.ts +++ b/apps/d.d0rich.me/src/router/index.ts @@ -1,5 +1,4 @@ import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -7,15 +6,7 @@ const router = createRouter({ { path: '/', name: 'home', - component: HomeView - }, - { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') + component: () => import('../pages/Home.vue') } ] }) diff --git a/apps/d.d0rich.me/src/views/AboutView.vue b/apps/d.d0rich.me/src/views/AboutView.vue deleted file mode 100644 index 756ad2a1..00000000 --- a/apps/d.d0rich.me/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/apps/d.d0rich.me/src/views/HomeView.vue b/apps/d.d0rich.me/src/views/HomeView.vue deleted file mode 100644 index d5c0217e..00000000 --- a/apps/d.d0rich.me/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - From ba3b766063eacda4fcff65bcfd11cddc4addcf81 Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Wed, 22 Nov 2023 20:32:30 +0400 Subject: [PATCH 03/45] Update package.json scripts --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 904a2607..d4d55343 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "contracts" ], "scripts": { - "prepare": "turbo run prepare", - "generate": "turbo run generate", - "build": "turbo run build", + "all:prepare": "turbo run prepare", + "all:generate": "turbo run generate", + "all:build": "turbo run build", "dev:d0rich.me": "turbo run d0rich.me#dev", "dev:d.d0rich.me": "turbo run d.d0rich.me#dev", "dev:design.d0rich.me": "turbo run design.d0rich.me#dev", From d444fa11f087664187ad7a28ec2bc67273b32e83 Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Wed, 22 Nov 2023 20:37:00 +0400 Subject: [PATCH 04/45] Update build and prepare scripts --- .github/workflows/test.yaml | 5 ++++- package.json | 6 +++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 7f9bd8af..5a64deca 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -22,8 +22,11 @@ jobs: - name: Installing packages run: npm ci + - name: Prepare + run: npm run prepare:all + - name: Build - run: npm run build + run: npm run build:all - name: Lint run: npm run lint diff --git a/package.json b/package.json index d4d55343..32063a9c 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "contracts" ], "scripts": { - "all:prepare": "turbo run prepare", - "all:generate": "turbo run generate", - "all:build": "turbo run build", + "prepare:all": "turbo run prepare", + "generate:all": "turbo run generate", + "build:all": "turbo run build", "dev:d0rich.me": "turbo run d0rich.me#dev", "dev:d.d0rich.me": "turbo run d.d0rich.me#dev", "dev:design.d0rich.me": "turbo run design.d0rich.me#dev", From b0dd33fac188274ac15dc0cc5b105173e919e663 Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Thu, 23 Nov 2023 12:34:16 +0400 Subject: [PATCH 05/45] Add TonConnect component to Home page --- apps/d.d0rich.me/env.d.ts | 4 +- apps/d.d0rich.me/package.json | 1 + .../public/tonconnect-manifest.json | 5 + .../public/tonconnect-testnet-manifest.json | 5 + .../tonconnect/composables/useTonConnect.ts | 39 +++++ .../src/features/tonconnect/ui/TonConnect.vue | 18 +++ apps/d.d0rich.me/src/pages/Home.vue | 5 + .../src/shared/composables/useAppConfig.ts | 9 ++ package-lock.json | 135 ++++++++++++++++-- 9 files changed, 205 insertions(+), 16 deletions(-) create mode 100644 apps/d.d0rich.me/public/tonconnect-manifest.json create mode 100644 apps/d.d0rich.me/public/tonconnect-testnet-manifest.json create mode 100644 apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts create mode 100644 apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue create mode 100644 apps/d.d0rich.me/src/shared/composables/useAppConfig.ts diff --git a/apps/d.d0rich.me/env.d.ts b/apps/d.d0rich.me/env.d.ts index 2c616017..0e2e911b 100644 --- a/apps/d.d0rich.me/env.d.ts +++ b/apps/d.d0rich.me/env.d.ts @@ -1,7 +1,7 @@ -/// interface ImportMetaEnv { +/// interface ImportMetaEnv { - readonly VITE_APP_TITLE: 'TESTNET' | 'MAINNET' + readonly VITE_TON_NETWORK: 'TESTNET' | 'MAINNET' } interface ImportMeta { diff --git a/apps/d.d0rich.me/package.json b/apps/d.d0rich.me/package.json index 3f276d35..7e56b32b 100644 --- a/apps/d.d0rich.me/package.json +++ b/apps/d.d0rich.me/package.json @@ -13,6 +13,7 @@ "dependencies": { "@d0rich/contracts": "*", "@d0rich/esprit-design": "*", + "@tonconnect/ui": "^2.0.0-beta.6", "pinia": "^2.1.7", "vue": "^3.3.4", "vue-router": "^4.2.5" diff --git a/apps/d.d0rich.me/public/tonconnect-manifest.json b/apps/d.d0rich.me/public/tonconnect-manifest.json new file mode 100644 index 00000000..a1606ed0 --- /dev/null +++ b/apps/d.d0rich.me/public/tonconnect-manifest.json @@ -0,0 +1,5 @@ +{ + "url": "https://d.d0rich.me", + "name": "D", + "iconUrl": "https://d.d0rich.me/android-chrome-192x192.png" +} diff --git a/apps/d.d0rich.me/public/tonconnect-testnet-manifest.json b/apps/d.d0rich.me/public/tonconnect-testnet-manifest.json new file mode 100644 index 00000000..1cd33e4f --- /dev/null +++ b/apps/d.d0rich.me/public/tonconnect-testnet-manifest.json @@ -0,0 +1,5 @@ +{ + "url": "https://testnet.d.d0rich.me", + "name": "D", + "iconUrl": "https://testnet.d.d0rich.me/android-chrome-192x192.png" +} diff --git a/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts b/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts new file mode 100644 index 00000000..30c58324 --- /dev/null +++ b/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts @@ -0,0 +1,39 @@ +import { ref } from 'vue' +import { TonConnectUI } from '@tonconnect/ui' +import { useAppConfig } from '@/shared/composables/useAppConfig' + +const config = useAppConfig() + +const tonconnect = ref( + new TonConnectUI({ + manifestUrl: + window.location.origin + + '/tonconnect' + + (config.network === 'TESTNET' ? '-testnet' : '') + + '-manifest.json' + }) +) + +function setOptions( + options: Omit['uiOptions'], 'buttonRootId'> +) { + tonconnect.value.uiOptions = { + ...options, + buttonRootId: tonconnect.value.uiOptions.buttonRootId + } +} + +function setRenderRoot(rootId: string | null) { + tonconnect.value.uiOptions = { + ...tonconnect.value.uiOptions, + buttonRootId: rootId + } +} + +/** + * Initialize TonConnect UI only in component, which is always rendered. + * + */ +export function useTonConnect() { + return { tonconnect: tonconnect.value, setOptions, setRenderRoot } +} diff --git a/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue b/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue new file mode 100644 index 00000000..9cad37e1 --- /dev/null +++ b/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue @@ -0,0 +1,18 @@ + + + diff --git a/apps/d.d0rich.me/src/pages/Home.vue b/apps/d.d0rich.me/src/pages/Home.vue index 34fdfe62..5ef223f1 100644 --- a/apps/d.d0rich.me/src/pages/Home.vue +++ b/apps/d.d0rich.me/src/pages/Home.vue @@ -1,3 +1,8 @@ + + diff --git a/apps/d.d0rich.me/src/shared/composables/useAppConfig.ts b/apps/d.d0rich.me/src/shared/composables/useAppConfig.ts new file mode 100644 index 00000000..656fef4e --- /dev/null +++ b/apps/d.d0rich.me/src/shared/composables/useAppConfig.ts @@ -0,0 +1,9 @@ +const staticConfig = { + network: import.meta.env.VITE_TON_NETWORK ?? 'TESTNET' +} + +Object.freeze(staticConfig) + +export const useAppConfig = () => { + return staticConfig +} diff --git a/package-lock.json b/package-lock.json index f069fc97..79de6a11 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "dependencies": { "@d0rich/contracts": "*", "@d0rich/esprit-design": "*", + "@tonconnect/ui": "^2.0.0-beta.6", "pinia": "^2.1.7", "vue": "^3.3.4", "vue-router": "^4.2.5" @@ -6048,7 +6049,6 @@ "version": "2.2.6", "resolved": "https://registry.npmjs.org/@tonconnect/protocol/-/protocol-2.2.6.tgz", "integrity": "sha512-kyoDz5EqgsycYP+A+JbVsAUYHNT059BCrK+m0pqxykMODwpziuSAXfwAZmHcg8v7NB9VKYbdFY55xKeXOuEd0w==", - "dev": true, "dependencies": { "tweetnacl": "^1.0.3", "tweetnacl-util": "^0.15.1" @@ -6065,6 +6065,43 @@ "@tonconnect/protocol": "^2.2.5" } }, + "node_modules/@tonconnect/ui": { + "version": "2.0.0-beta.6", + "resolved": "https://registry.npmjs.org/@tonconnect/ui/-/ui-2.0.0-beta.6.tgz", + "integrity": "sha512-qgQXCjP0qR9vPuqohZ2wHnpK4LBGqtizFqCx7AO/Xu3XWMmJI9bXSI5rZ7EpKVpW8AvrSD/5X1yC7FIcanj0Kg==", + "dependencies": { + "@tonconnect/sdk": "^3.0.0-beta.3", + "classnames": "^2.3.2", + "deepmerge": "^4.2.2", + "ua-parser-js": "^1.0.35" + } + }, + "node_modules/@tonconnect/ui/node_modules/@tonconnect/isomorphic-eventsource": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@tonconnect/isomorphic-eventsource/-/isomorphic-eventsource-0.0.2.tgz", + "integrity": "sha512-B4UoIjPi0QkvIzZH5fV3BQLWrqSYABdrzZQSI9sJA9aA+iC0ohOzFwVVGXanlxeDAy1bcvPbb29f6sVUk0UnnQ==", + "dependencies": { + "eventsource": "^2.0.2" + } + }, + "node_modules/@tonconnect/ui/node_modules/@tonconnect/isomorphic-fetch": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@tonconnect/isomorphic-fetch/-/isomorphic-fetch-0.0.3.tgz", + "integrity": "sha512-jIg5nTrDwnite4fXao3dD83eCpTvInTjZon/rZZrIftIegh4XxyVb5G2mpMqXrVGk1e8SVXm3Kj5OtfMplQs0w==", + "dependencies": { + "node-fetch": "^2.6.9" + } + }, + "node_modules/@tonconnect/ui/node_modules/@tonconnect/sdk": { + "version": "3.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@tonconnect/sdk/-/sdk-3.0.0-beta.3.tgz", + "integrity": "sha512-W2g75EZnD+HtG5r5VH4t3OYoFNQEgS03k6QeRU7n/jvR1maMvxHAdWIw1gOwwDP966Gh6plTxPSNOCDjS6onMg==", + "dependencies": { + "@tonconnect/isomorphic-eventsource": "^0.0.2", + "@tonconnect/isomorphic-fetch": "^0.0.3", + "@tonconnect/protocol": "^2.2.6" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -8803,6 +8840,11 @@ "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==", "dev": true }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-regexp": { "version": "1.0.0", "dev": true, @@ -11799,7 +11841,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz", "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==", - "dev": true, "engines": { "node": ">=12.0.0" } @@ -25687,14 +25728,12 @@ "node_modules/tweetnacl": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz", - "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==", - "dev": true + "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==" }, "node_modules/tweetnacl-util": { "version": "0.15.1", "resolved": "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz", - "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw==", - "dev": true + "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw==" }, "node_modules/type-check": { "version": "0.4.0", @@ -25818,6 +25857,28 @@ "node": ">=14.17" } }, + "node_modules/ua-parser-js": { + "version": "1.0.37", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz", + "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "engines": { + "node": "*" + } + }, "node_modules/ufo": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.1.tgz", @@ -32473,7 +32534,6 @@ "version": "2.2.6", "resolved": "https://registry.npmjs.org/@tonconnect/protocol/-/protocol-2.2.6.tgz", "integrity": "sha512-kyoDz5EqgsycYP+A+JbVsAUYHNT059BCrK+m0pqxykMODwpziuSAXfwAZmHcg8v7NB9VKYbdFY55xKeXOuEd0w==", - "dev": true, "requires": { "tweetnacl": "^1.0.3", "tweetnacl-util": "^0.15.1" @@ -32490,6 +32550,45 @@ "@tonconnect/protocol": "^2.2.5" } }, + "@tonconnect/ui": { + "version": "2.0.0-beta.6", + "resolved": "https://registry.npmjs.org/@tonconnect/ui/-/ui-2.0.0-beta.6.tgz", + "integrity": "sha512-qgQXCjP0qR9vPuqohZ2wHnpK4LBGqtizFqCx7AO/Xu3XWMmJI9bXSI5rZ7EpKVpW8AvrSD/5X1yC7FIcanj0Kg==", + "requires": { + "@tonconnect/sdk": "^3.0.0-beta.3", + "classnames": "^2.3.2", + "deepmerge": "^4.2.2", + "ua-parser-js": "^1.0.35" + }, + "dependencies": { + "@tonconnect/isomorphic-eventsource": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@tonconnect/isomorphic-eventsource/-/isomorphic-eventsource-0.0.2.tgz", + "integrity": "sha512-B4UoIjPi0QkvIzZH5fV3BQLWrqSYABdrzZQSI9sJA9aA+iC0ohOzFwVVGXanlxeDAy1bcvPbb29f6sVUk0UnnQ==", + "requires": { + "eventsource": "^2.0.2" + } + }, + "@tonconnect/isomorphic-fetch": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@tonconnect/isomorphic-fetch/-/isomorphic-fetch-0.0.3.tgz", + "integrity": "sha512-jIg5nTrDwnite4fXao3dD83eCpTvInTjZon/rZZrIftIegh4XxyVb5G2mpMqXrVGk1e8SVXm3Kj5OtfMplQs0w==", + "requires": { + "node-fetch": "^2.6.9" + } + }, + "@tonconnect/sdk": { + "version": "3.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@tonconnect/sdk/-/sdk-3.0.0-beta.3.tgz", + "integrity": "sha512-W2g75EZnD+HtG5r5VH4t3OYoFNQEgS03k6QeRU7n/jvR1maMvxHAdWIw1gOwwDP966Gh6plTxPSNOCDjS6onMg==", + "requires": { + "@tonconnect/isomorphic-eventsource": "^0.0.2", + "@tonconnect/isomorphic-fetch": "^0.0.3", + "@tonconnect/protocol": "^2.2.6" + } + } + } + }, "@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -34560,6 +34659,11 @@ "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==", "dev": true }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-regexp": { "version": "1.0.0", "dev": true, @@ -35129,7 +35233,8 @@ "requires": { "@d0rich/contracts": "*", "@d0rich/esprit-design": "*", - "@tailwindcss/typography": "*", + "@tailwindcss/typography": "^0.5.10", + "@tonconnect/ui": "*", "@tsconfig/node18": "^18.2.2", "@types/jsdom": "^21.1.3", "@types/node": "^18.18.5", @@ -37017,8 +37122,7 @@ "eventsource": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz", - "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==", - "dev": true + "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==" }, "execa": { "version": "5.1.1", @@ -46521,14 +46625,12 @@ "tweetnacl": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz", - "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==", - "dev": true + "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==" }, "tweetnacl-util": { "version": "0.15.1", "resolved": "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz", - "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw==", - "dev": true + "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw==" }, "type-check": { "version": "0.4.0", @@ -46606,6 +46708,11 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==" }, + "ua-parser-js": { + "version": "1.0.37", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz", + "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==" + }, "ufo": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.1.tgz", From dcbe5992f73da29420dacd850da8da5131625013 Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Thu, 23 Nov 2023 13:04:24 +0400 Subject: [PATCH 06/45] Add wallet functionality to useTonConnect --- .../tonconnect/composables/useTonConnect.ts | 71 ++++++++++++++++--- 1 file changed, 62 insertions(+), 9 deletions(-) diff --git a/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts b/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts index 30c58324..dfeea220 100644 --- a/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts +++ b/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts @@ -1,4 +1,7 @@ -import { ref } from 'vue' +import { ref, computed } from 'vue' +import type { SenderArguments } from 'ton-core' +import { Address } from 'ton-core/dist/address/Address' +import { CHAIN } from '@tonconnect/protocol' import { TonConnectUI } from '@tonconnect/ui' import { useAppConfig } from '@/shared/composables/useAppConfig' @@ -14,6 +17,60 @@ const tonconnect = ref( }) ) +const wallet = ref(tonconnect.value.wallet) +const cancelWalletSubscription = tonconnect.value.onStatusChange( + (status) => (wallet.value = status) +) + +export function useTonConnect() { + return { + tonconnect: tonconnect.value, + isConnected: computed(() => !!wallet.value?.account.address), + wallet: computed(() => wallet.value?.account.address ?? null), + network: computed(() => { + const chain = wallet.value?.account.chain + if (chain === CHAIN.MAINNET) return 'MAINNET' + if (chain === CHAIN.TESTNET) return 'TESTNET' + return null + }), + sender: { + send: sendTransaction, + address: computed(() => { + const addressString = wallet.value?.account.address + if (!addressString) return null + return Address.parse(addressString) + }) + }, + setOptions, + setRenderRoot, + cleanupSubscriptions: cleanup + } +} + +function sendTransaction(args: SenderArguments) { + return tonconnect.value.sendTransaction({ + messages: [ + { + address: args.to.toString(), + amount: args.value.toString(), + payload: args.body?.toBoc().toString('base64') + } + ], + validUntil: Date.now() + 5 * 60 * 1000 // 5 minutes for user to approve + }) +} + +/** + * Cancel all subscriptions for TonConnectUI + */ +function cleanup() { + cancelWalletSubscription() +} + +/** + * Define styles for the TonConnectUI button + * @param options UI options of TonConnectUI + */ function setOptions( options: Omit['uiOptions'], 'buttonRootId'> ) { @@ -23,17 +80,13 @@ function setOptions( } } +/** + * Set buttonRootId element and makes button render in it + * @param rootId id of the element where the button will be rendered + */ function setRenderRoot(rootId: string | null) { tonconnect.value.uiOptions = { ...tonconnect.value.uiOptions, buttonRootId: rootId } } - -/** - * Initialize TonConnect UI only in component, which is always rendered. - * - */ -export function useTonConnect() { - return { tonconnect: tonconnect.value, setOptions, setRenderRoot } -} From 4804b6fa51adf2aef75579e517e480fddefcdffc Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Thu, 23 Nov 2023 13:51:36 +0400 Subject: [PATCH 07/45] Move ton connections to Pinia store --- apps/d.d0rich.me/package.json | 1 + .../tonconnect/composables/useTonConnect.ts | 92 -------------- .../tonconnect/stores/tonConnectStore.ts | 114 ++++++++++++++++++ .../src/features/tonconnect/ui/TonConnect.vue | 4 +- package-lock.json | 14 +-- 5 files changed, 122 insertions(+), 103 deletions(-) delete mode 100644 apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts create mode 100644 apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts diff --git a/apps/d.d0rich.me/package.json b/apps/d.d0rich.me/package.json index 7e56b32b..914308b8 100644 --- a/apps/d.d0rich.me/package.json +++ b/apps/d.d0rich.me/package.json @@ -13,6 +13,7 @@ "dependencies": { "@d0rich/contracts": "*", "@d0rich/esprit-design": "*", + "@orbs-network/ton-access": "^2.3.3", "@tonconnect/ui": "^2.0.0-beta.6", "pinia": "^2.1.7", "vue": "^3.3.4", diff --git a/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts b/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts deleted file mode 100644 index dfeea220..00000000 --- a/apps/d.d0rich.me/src/features/tonconnect/composables/useTonConnect.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { ref, computed } from 'vue' -import type { SenderArguments } from 'ton-core' -import { Address } from 'ton-core/dist/address/Address' -import { CHAIN } from '@tonconnect/protocol' -import { TonConnectUI } from '@tonconnect/ui' -import { useAppConfig } from '@/shared/composables/useAppConfig' - -const config = useAppConfig() - -const tonconnect = ref( - new TonConnectUI({ - manifestUrl: - window.location.origin + - '/tonconnect' + - (config.network === 'TESTNET' ? '-testnet' : '') + - '-manifest.json' - }) -) - -const wallet = ref(tonconnect.value.wallet) -const cancelWalletSubscription = tonconnect.value.onStatusChange( - (status) => (wallet.value = status) -) - -export function useTonConnect() { - return { - tonconnect: tonconnect.value, - isConnected: computed(() => !!wallet.value?.account.address), - wallet: computed(() => wallet.value?.account.address ?? null), - network: computed(() => { - const chain = wallet.value?.account.chain - if (chain === CHAIN.MAINNET) return 'MAINNET' - if (chain === CHAIN.TESTNET) return 'TESTNET' - return null - }), - sender: { - send: sendTransaction, - address: computed(() => { - const addressString = wallet.value?.account.address - if (!addressString) return null - return Address.parse(addressString) - }) - }, - setOptions, - setRenderRoot, - cleanupSubscriptions: cleanup - } -} - -function sendTransaction(args: SenderArguments) { - return tonconnect.value.sendTransaction({ - messages: [ - { - address: args.to.toString(), - amount: args.value.toString(), - payload: args.body?.toBoc().toString('base64') - } - ], - validUntil: Date.now() + 5 * 60 * 1000 // 5 minutes for user to approve - }) -} - -/** - * Cancel all subscriptions for TonConnectUI - */ -function cleanup() { - cancelWalletSubscription() -} - -/** - * Define styles for the TonConnectUI button - * @param options UI options of TonConnectUI - */ -function setOptions( - options: Omit['uiOptions'], 'buttonRootId'> -) { - tonconnect.value.uiOptions = { - ...options, - buttonRootId: tonconnect.value.uiOptions.buttonRootId - } -} - -/** - * Set buttonRootId element and makes button render in it - * @param rootId id of the element where the button will be rendered - */ -function setRenderRoot(rootId: string | null) { - tonconnect.value.uiOptions = { - ...tonconnect.value.uiOptions, - buttonRootId: rootId - } -} diff --git a/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts b/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts new file mode 100644 index 00000000..717b32e1 --- /dev/null +++ b/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts @@ -0,0 +1,114 @@ +import { defineStore } from 'pinia' +import { ref, computed, watch } from 'vue' +import type { SenderArguments } from 'ton-core' +import { Address } from 'ton-core/dist/address/Address' +import { CHAIN } from '@tonconnect/protocol' +import { TonConnectUI } from '@tonconnect/ui' +import { getHttpEndpoint, type Network } from '@orbs-network/ton-access' +import { TonClient } from 'ton/dist/client/TonClient' +import { useAppConfig } from '@/shared/composables/useAppConfig' + +export const useTonConnectStore = defineStore('tonconnect', () => { + const config = useAppConfig() + + // State + const tonConnect = new TonConnectUI({ + manifestUrl: + window.location.origin + + '/tonconnect' + + (config.network === 'TESTNET' ? '-testnet' : '') + + '-manifest.json' + }) + + const wallet = ref(tonConnect.wallet) + const cancelWalletSubscription = tonConnect.onStatusChange( + (status) => (wallet.value = status) + ) + + const walletAddress = computed(() => wallet.value?.account.address ?? null) + const currentNetwork = computed(() => { + const chain = wallet.value?.account.chain + if (chain === CHAIN.MAINNET) return 'mainnet' + if (chain === CHAIN.TESTNET) return 'testnet' + return undefined + }) + + const tonClient = ref(null) + + const stopRefreshingTonClient = watch(currentNetwork, async (network) => { + tonClient.value = new TonClient({ + endpoint: await getHttpEndpoint({ + network + }) + }) + }) + + return { + tonConnect, + tonClient, + isConnected: computed(() => !!wallet.value?.account.address), + wallet: walletAddress, + network: currentNetwork, + sender: { + send: sendTransaction, + address: computed(() => { + const addressString = walletAddress.value + if (!addressString) return null + return Address.parse(addressString) + }) + }, + setOptions, + setRenderRoot, + cleanupSubscriptions: cleanup + } + + // Actions + + function sendTransaction(args: SenderArguments) { + return tonConnect.sendTransaction({ + messages: [ + { + address: args.to.toString(), + amount: args.value.toString(), + payload: args.body?.toBoc().toString('base64') + } + ], + validUntil: Date.now() + 5 * 60 * 1000 // 5 minutes for user to approve + }) + } + + /** + * Cancel all subscriptions for TonConnectUI + */ + function cleanup() { + cancelWalletSubscription() + stopRefreshingTonClient() + } + + /** + * Define styles for the TonConnectUI button + * @param options UI options of TonConnectUI + */ + function setOptions( + options: Omit< + InstanceType['uiOptions'], + 'buttonRootId' + > + ) { + tonConnect.uiOptions = { + ...options, + buttonRootId: tonConnect.uiOptions.buttonRootId + } + } + + /** + * Set buttonRootId element and makes button render in it + * @param rootId id of the element where the button will be rendered + */ + function setRenderRoot(rootId: string | null) { + tonConnect.uiOptions = { + ...tonConnect.uiOptions, + buttonRootId: rootId + } + } +}) diff --git a/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue b/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue index 9cad37e1..0e5ff701 100644 --- a/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue +++ b/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue @@ -1,10 +1,10 @@ + + diff --git a/apps/d.d0rich.me/src/features/theme/stores/useThemeStore.ts b/apps/d.d0rich.me/src/features/theme/stores/useThemeStore.ts new file mode 100644 index 00000000..89439f1c --- /dev/null +++ b/apps/d.d0rich.me/src/features/theme/stores/useThemeStore.ts @@ -0,0 +1,51 @@ +import { defineStore } from 'pinia' +import { ref, watch } from 'vue' + +export type ColorMode = 'light' | 'dark' | 'system' + +export const useThemeStore = defineStore('theme', () => { + const theme = ref('system') + const systemTheme = ref(getSystemTheme()) + + if (window.matchMedia) { + window + .matchMedia('(prefers-color-scheme: dark)') + .addEventListener('change', (event) => { + systemTheme.value = event.matches ? 'dark' : 'light' + }) + } + + setThemeInHtml(theme.value) + + watch(theme, (newTheme) => { + setThemeInHtml(newTheme) + }) + + function getSystemTheme(): ColorMode { + if (!window.matchMedia) { + return 'light' + } + return window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light' + } + + function setThemeInHtml(newTheme: ColorMode) { + const newThemeExplicit = + newTheme === 'system' ? systemTheme.value : newTheme + const classToRemove = newThemeExplicit === 'light' ? 'dark' : 'light' + const classToAdd = newThemeExplicit === 'light' ? 'light' : 'dark' + document.documentElement.classList.add(classToAdd) + document.documentElement.classList.remove(classToRemove) + } + + function setTheme(newTheme: ColorMode) { + theme.value = newTheme + } + + return { + theme, + systemTheme, + setTheme + } +}) diff --git a/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue b/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue new file mode 100644 index 00000000..b1207301 --- /dev/null +++ b/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue @@ -0,0 +1,35 @@ + + + diff --git a/apps/d.d0rich.me/src/layout/Layout.vue b/apps/d.d0rich.me/src/layout/Layout.vue new file mode 100644 index 00000000..3480b4b7 --- /dev/null +++ b/apps/d.d0rich.me/src/layout/Layout.vue @@ -0,0 +1,10 @@ + + + diff --git a/apps/d.d0rich.me/src/layout/components/DHeader.vue b/apps/d.d0rich.me/src/layout/components/DHeader.vue new file mode 100644 index 00000000..b7f7f37d --- /dev/null +++ b/apps/d.d0rich.me/src/layout/components/DHeader.vue @@ -0,0 +1,39 @@ + + + diff --git a/apps/d.d0rich.me/src/main.ts b/apps/d.d0rich.me/src/main.ts index 308cd066..dd6750a7 100644 --- a/apps/d.d0rich.me/src/main.ts +++ b/apps/d.d0rich.me/src/main.ts @@ -1,4 +1,5 @@ import './assets/tailwind.css' +import '@d0rich/esprit-design/style.css' import { createApp } from 'vue' import { createPinia } from 'pinia' diff --git a/package-lock.json b/package-lock.json index fba580f5..d6da0690 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "@d0rich/esprit-design": "*", "@orbs-network/ton-access": "^2.3.3", "@tonconnect/ui": "^2.0.0-beta.6", + "@vueuse/core": "^10.6.1", "pinia": "^2.1.7", "vue": "^3.3.4", "vue-router": "^4.2.5" @@ -6524,9 +6525,9 @@ "integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==" }, "node_modules/@types/web-bluetooth": { - "version": "0.0.18", - "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz", - "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==" + "version": "0.0.20", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", + "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==" }, "node_modules/@types/yargs": { "version": "17.0.31", @@ -7299,13 +7300,13 @@ "dev": true }, "node_modules/@vueuse/core": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz", - "integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==", + "version": "10.6.1", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.6.1.tgz", + "integrity": "sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==", "dependencies": { - "@types/web-bluetooth": "^0.0.18", - "@vueuse/metadata": "10.5.0", - "@vueuse/shared": "10.5.0", + "@types/web-bluetooth": "^0.0.20", + "@vueuse/metadata": "10.6.1", + "@vueuse/shared": "10.6.1", "vue-demi": ">=0.14.6" }, "funding": { @@ -7352,17 +7353,17 @@ } }, "node_modules/@vueuse/metadata": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz", - "integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==", + "version": "10.6.1", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.6.1.tgz", + "integrity": "sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==", "funding": { "url": "https://github.com/sponsors/antfu" } }, "node_modules/@vueuse/shared": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz", - "integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==", + "version": "10.6.1", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.6.1.tgz", + "integrity": "sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==", "dependencies": { "vue-demi": ">=0.14.6" }, @@ -32990,9 +32991,9 @@ "integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==" }, "@types/web-bluetooth": { - "version": "0.0.18", - "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz", - "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==" + "version": "0.0.20", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", + "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==" }, "@types/yargs": { "version": "17.0.31", @@ -33577,13 +33578,13 @@ "dev": true }, "@vueuse/core": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz", - "integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==", + "version": "10.6.1", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.6.1.tgz", + "integrity": "sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==", "requires": { - "@types/web-bluetooth": "^0.0.18", - "@vueuse/metadata": "10.5.0", - "@vueuse/shared": "10.5.0", + "@types/web-bluetooth": "^0.0.20", + "@vueuse/metadata": "10.6.1", + "@vueuse/shared": "10.6.1", "vue-demi": ">=0.14.6" }, "dependencies": { @@ -33607,14 +33608,14 @@ } }, "@vueuse/metadata": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz", - "integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==" + "version": "10.6.1", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.6.1.tgz", + "integrity": "sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==" }, "@vueuse/shared": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz", - "integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==", + "version": "10.6.1", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.6.1.tgz", + "integrity": "sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==", "requires": { "vue-demi": ">=0.14.6" }, @@ -35247,7 +35248,7 @@ "requires": { "@d0rich/contracts": "*", "@d0rich/esprit-design": "*", - "@esbuild-plugins/node-globals-polyfill": "*", + "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@orbs-network/ton-access": "^2.3.3", "@tailwindcss/typography": "^0.5.10", "@tonconnect/ui": "^2.0.0-beta.6", @@ -35257,6 +35258,7 @@ "@vitejs/plugin-vue": "^4.4.0", "@vue/test-utils": "^2.4.1", "@vue/tsconfig": "^0.4.0", + "@vueuse/core": "*", "autoprefixer": "^10.4.16", "jsdom": "^22.1.0", "npm-run-all2": "^6.1.1", diff --git a/packages/esprit-design/package.json b/packages/esprit-design/package.json index 262d9f4e..157b21c1 100644 --- a/packages/esprit-design/package.json +++ b/packages/esprit-design/package.json @@ -12,7 +12,8 @@ "exports": { ".": { "import": "./dist/esprit-design.js", - "require": "./dist/esprit-design.umd.cjs" + "require": "./dist/esprit-design.umd.cjs", + "types": "./dist/index.d.ts" }, "./style.css": "./dist/style.css", "./tailwind.config": "./tailwind.config.js", From 16e2491ac7424d8a5893a3c0cc911fd61eace254 Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Thu, 23 Nov 2023 16:31:01 +0400 Subject: [PATCH 11/45] Fix theme switch and ton connect UI --- .../src/features/theme/ui/ThemeSwitch.vue | 6 +++--- .../features/tonconnect/composables/useSender.ts | 15 +++++++++++++++ .../features/tonconnect/stores/tonConnectStore.ts | 12 ++---------- .../src/features/tonconnect/ui/TonConnect.vue | 6 +++--- 4 files changed, 23 insertions(+), 16 deletions(-) create mode 100644 apps/d.d0rich.me/src/features/tonconnect/composables/useSender.ts diff --git a/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue b/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue index b1207301..da0bc62a 100644 --- a/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue +++ b/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue @@ -5,7 +5,7 @@ import { DBtn } from '@d0rich/esprit-design' import { useThemeStore, type ColorMode } from '../stores/useThemeStore' -const themeStore = useThemeStore() +const theme = useThemeStore() const modes = ref< { name: ColorMode @@ -18,13 +18,13 @@ const modes = ref< ]) const currentMode = computed(() => { - return modes.value.find((m) => m.name === themeStore.theme) + return modes.value.find((m) => m.name === theme.theme) }) function switchMode() { const currentModeIndex = modes.value.findIndex((m) => m === currentMode.value) const nextModeIndex = (currentModeIndex + 1) % modes.value.length - themeStore.setTheme(modes.value[nextModeIndex].name) + theme.setTheme(modes.value[nextModeIndex].name) } diff --git a/apps/d.d0rich.me/src/features/tonconnect/composables/useSender.ts b/apps/d.d0rich.me/src/features/tonconnect/composables/useSender.ts new file mode 100644 index 00000000..f6f2184f --- /dev/null +++ b/apps/d.d0rich.me/src/features/tonconnect/composables/useSender.ts @@ -0,0 +1,15 @@ +import { computed } from 'vue' +import { Address } from 'ton-core/dist/address/Address' +import { useTonConnectStore } from '../stores/tonConnectStore' + +export function useSender() { + const tonConnect = useTonConnectStore() + return { + send: tonConnect.sendTransaction, + address: computed(() => { + const addressString = tonConnect.wallet + if (!addressString) return null + return Address.parse(addressString) + }) + } +} diff --git a/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts b/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts index 8428d346..7454a15a 100644 --- a/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts +++ b/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts @@ -1,14 +1,13 @@ import { defineStore } from 'pinia' import { ref, computed, watch } from 'vue' import type { SenderArguments } from 'ton-core' -import { Address } from 'ton-core/dist/address/Address' import { CHAIN } from '@tonconnect/protocol' import { TonConnectUI } from '@tonconnect/ui' import { getHttpEndpoint, type Network } from '@orbs-network/ton-access' import { TonClient } from 'ton/dist/client/TonClient' import { useAppConfig } from '@/shared/composables/useAppConfig' -export const useTonConnectStore = defineStore('tonconnect', () => { +export const useTonConnectStore = defineStore('ton-connect', () => { const config = useAppConfig() // State @@ -53,14 +52,7 @@ export const useTonConnectStore = defineStore('tonconnect', () => { isConnected: computed(() => !!wallet.value?.account.address), wallet: walletAddress, network: currentNetwork, - sender: { - send: sendTransaction, - address: computed(() => { - const addressString = walletAddress.value - if (!addressString) return null - return Address.parse(addressString) - }) - }, + sendTransaction, setOptions, setRenderRoot, cleanupSubscriptions: cleanup diff --git a/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue b/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue index 0e5ff701..5105907c 100644 --- a/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue +++ b/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue @@ -4,12 +4,12 @@ import { useTonConnectStore } from '../stores/tonConnectStore' const buttonRootId = 'ton-connect-button-root' -const { setRenderRoot } = useTonConnectStore() +const tonConnect = useTonConnectStore() onMounted(() => { - setRenderRoot(buttonRootId) + tonConnect.setRenderRoot(buttonRootId) }) onBeforeUnmount(() => { - setRenderRoot(null) + tonConnect.setRenderRoot(null) }) From dcc78f7c9e8e30efaa3e4fb0ad8bd83f9c3ed998 Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Thu, 23 Nov 2023 16:51:51 +0400 Subject: [PATCH 12/45] Syncronyze tonConnect theme with website theme --- .../{useThemeStore.ts => themeStore.ts} | 18 +++++++++---- .../src/features/theme/ui/ThemeSwitch.vue | 3 ++- .../tonconnect/stores/tonConnectStore.ts | 4 ++- .../src/features/tonconnect/ui/TonConnect.vue | 26 ++++++++++++++++--- 4 files changed, 41 insertions(+), 10 deletions(-) rename apps/d.d0rich.me/src/features/theme/stores/{useThemeStore.ts => themeStore.ts} (68%) diff --git a/apps/d.d0rich.me/src/features/theme/stores/useThemeStore.ts b/apps/d.d0rich.me/src/features/theme/stores/themeStore.ts similarity index 68% rename from apps/d.d0rich.me/src/features/theme/stores/useThemeStore.ts rename to apps/d.d0rich.me/src/features/theme/stores/themeStore.ts index 89439f1c..81a3d8ed 100644 --- a/apps/d.d0rich.me/src/features/theme/stores/useThemeStore.ts +++ b/apps/d.d0rich.me/src/features/theme/stores/themeStore.ts @@ -1,11 +1,15 @@ import { defineStore } from 'pinia' -import { ref, watch } from 'vue' +import { ref, watch, computed } from 'vue' export type ColorMode = 'light' | 'dark' | 'system' +export type ExplicitColorMode = 'light' | 'dark' export const useThemeStore = defineStore('theme', () => { const theme = ref('system') - const systemTheme = ref(getSystemTheme()) + const systemTheme = ref(getSystemTheme()) + const explicitTheme = computed(() => + getExplicitTheme(theme.value) + ) if (window.matchMedia) { window @@ -21,7 +25,11 @@ export const useThemeStore = defineStore('theme', () => { setThemeInHtml(newTheme) }) - function getSystemTheme(): ColorMode { + function getExplicitTheme(theme: ColorMode): ExplicitColorMode { + return theme === 'system' ? systemTheme.value : theme + } + + function getSystemTheme(): ExplicitColorMode { if (!window.matchMedia) { return 'light' } @@ -31,8 +39,7 @@ export const useThemeStore = defineStore('theme', () => { } function setThemeInHtml(newTheme: ColorMode) { - const newThemeExplicit = - newTheme === 'system' ? systemTheme.value : newTheme + const newThemeExplicit = getExplicitTheme(newTheme) const classToRemove = newThemeExplicit === 'light' ? 'dark' : 'light' const classToAdd = newThemeExplicit === 'light' ? 'light' : 'dark' document.documentElement.classList.add(classToAdd) @@ -45,6 +52,7 @@ export const useThemeStore = defineStore('theme', () => { return { theme, + explicitTheme, systemTheme, setTheme } diff --git a/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue b/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue index da0bc62a..43847c94 100644 --- a/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue +++ b/apps/d.d0rich.me/src/features/theme/ui/ThemeSwitch.vue @@ -3,7 +3,7 @@ import { ref, computed } from 'vue' import { Icon } from '@iconify/vue' import { DBtn } from '@d0rich/esprit-design' -import { useThemeStore, type ColorMode } from '../stores/useThemeStore' +import { useThemeStore, type ColorMode } from '../stores/themeStore' const theme = useThemeStore() const modes = ref< @@ -33,3 +33,4 @@ function switchMode() { +../stores/themeStore diff --git a/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts b/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts index 7454a15a..c4502e51 100644 --- a/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts +++ b/apps/d.d0rich.me/src/features/tonconnect/stores/tonConnectStore.ts @@ -20,6 +20,7 @@ export const useTonConnectStore = defineStore('ton-connect', () => { '-manifest.json' }) ) + const buttonRootId = ref(null) const wallet = ref(tonConnect.value.wallet) const cancelWalletSubscription = tonConnect.value.onStatusChange( @@ -93,7 +94,7 @@ export const useTonConnectStore = defineStore('ton-connect', () => { ) { tonConnect.value.uiOptions = { ...options, - buttonRootId: tonConnect.value.uiOptions.buttonRootId + buttonRootId: buttonRootId.value } } @@ -102,6 +103,7 @@ export const useTonConnectStore = defineStore('ton-connect', () => { * @param rootId id of the element where the button will be rendered */ function setRenderRoot(rootId: string | null) { + buttonRootId.value = rootId tonConnect.value.uiOptions = { ...tonConnect.value.uiOptions, buttonRootId: rootId diff --git a/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue b/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue index 5105907c..8a58372e 100644 --- a/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue +++ b/apps/d.d0rich.me/src/features/tonconnect/ui/TonConnect.vue @@ -1,15 +1,35 @@ From d3eef0b524244108357d633e9f1507e9e777fcae Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Thu, 23 Nov 2023 16:56:58 +0400 Subject: [PATCH 13/45] Update colors in App.vue --- apps/d.d0rich.me/src/App.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/d.d0rich.me/src/App.vue b/apps/d.d0rich.me/src/App.vue index 06354625..0deab6e9 100644 --- a/apps/d.d0rich.me/src/App.vue +++ b/apps/d.d0rich.me/src/App.vue @@ -10,7 +10,9 @@ import Layout from './layout/Layout.vue' From 01375cd7bbfb7ef821ca2a07d2ef907a8375109e Mon Sep 17 00:00:00 2001 From: Nikolay Dorofeev Date: Thu, 23 Nov 2023 20:33:33 +0400 Subject: [PATCH 14/45] Layout draft --- apps/d.d0rich.me/index.html | 1 + apps/d.d0rich.me/src/layout/Layout.vue | 28 ++++++++++-- .../src/layout/components/DFooter.vue | 38 ++++++++++++++++ .../src/layout/components/DHeader.vue | 43 ++++++++++++------- .../src/layout/components/DSidebar.vue | 39 +++++++++++++++++ 5 files changed, 129 insertions(+), 20 deletions(-) create mode 100644 apps/d.d0rich.me/src/layout/components/DFooter.vue create mode 100644 apps/d.d0rich.me/src/layout/components/DSidebar.vue diff --git a/apps/d.d0rich.me/index.html b/apps/d.d0rich.me/index.html index 1e43e4c8..2ccf1642 100644 --- a/apps/d.d0rich.me/index.html +++ b/apps/d.d0rich.me/index.html @@ -2,6 +2,7 @@ + diff --git a/apps/d.d0rich.me/src/layout/Layout.vue b/apps/d.d0rich.me/src/layout/Layout.vue index 3480b4b7..3dcbccb1 100644 --- a/apps/d.d0rich.me/src/layout/Layout.vue +++ b/apps/d.d0rich.me/src/layout/Layout.vue @@ -1,10 +1,30 @@ diff --git a/apps/d.d0rich.me/src/layout/components/DFooter.vue b/apps/d.d0rich.me/src/layout/components/DFooter.vue new file mode 100644 index 00000000..14cc3b7e --- /dev/null +++ b/apps/d.d0rich.me/src/layout/components/DFooter.vue @@ -0,0 +1,38 @@ + + + diff --git a/apps/d.d0rich.me/src/layout/components/DHeader.vue b/apps/d.d0rich.me/src/layout/components/DHeader.vue index b7f7f37d..e7f94868 100644 --- a/apps/d.d0rich.me/src/layout/components/DHeader.vue +++ b/apps/d.d0rich.me/src/layout/components/DHeader.vue @@ -1,13 +1,18 @@