From b024452867e517bce1c943422eb365bba21b7413 Mon Sep 17 00:00:00 2001 From: svarcoder Date: Fri, 18 Oct 2024 19:53:53 +0530 Subject: [PATCH 1/5] Feat: Implement Dasboard Wallet Branding Changes --- public/index.html | 1 + public/svg-inject.min.js | 322 +++++++++++++ src/App.vue | 59 ++- src/assets/images/dark/refresh.svg | 2 +- src/components/ActivityView.vue | 430 +++++++++++++++--- src/components/AddNetwork.vue | 88 +++- src/components/AppFooter.vue | 106 ++++- src/components/AppLoader.vue | 15 +- src/components/AssetsView.vue | 49 +- src/components/BaseModal.vue | 20 +- src/components/BuyTokens.vue | 62 ++- src/components/ChainListModal.vue | 43 +- src/components/ChangeChain.vue | 62 ++- .../Evm/ArcanaSwitchAccountType.vue | 11 +- .../Evm/EthSignTypedDataV4.vue | 75 ++- .../Evm/WalletAddEthereumChain.vue | 109 ++++- .../Evm/WalletSwitchEthereumChain.vue | 82 +++- .../Evm/WalletWatchAssetErc20.vue | 68 ++- .../Evm/WalletWatchAssetNFT.vue | 112 ++++- .../Mnemonic/PhraseSuccess.vue | 43 +- .../Mnemonic/SeedPhrase.vue | 88 +++- .../Mnemonic/SeedPhraseHome.vue | 55 ++- .../Mnemonic/VerifyPhrase.vue | 49 +- .../Mvx/MVXSignTransaction.vue | 53 ++- .../Mvx/MVXSignTransactions.vue | 76 +++- .../Near/NearSignAndSendTransaction.vue | 215 ++++++++- .../Solana/SignAllTransactions.vue | 14 +- .../Solana/SignTransaction.vue | 11 +- .../Solana/TransactionDetails.vue | 92 +++- src/components/EditNetwork.vue | 91 +++- src/components/ExportKeyModal.vue | 80 +++- src/components/GasPrice.vue | 95 +++- src/components/GasPriceMVX.vue | 47 +- src/components/MFAProceedModal.vue | 20 +- src/components/NFTView.vue | 81 +++- .../PermissionRequest/SendTransaction.vue | 119 ++++- src/components/PinBasedRecoveryModal.vue | 47 +- src/components/PrivateKeyCautionModal.vue | 22 +- src/components/ReceiveTokens.vue | 29 +- src/components/RequestCountBadge.vue | 13 +- src/components/SearchQuestion.vue | 19 +- src/components/SearchToken.vue | 31 +- .../SecurityQuestionRecoveryModal.vue | 63 ++- src/components/SelectQuestion.vue | 25 +- src/components/SellTokens.vue | 63 ++- src/components/SendNftPreview.vue | 81 +++- src/components/SendTokensPreview.vue | 109 ++++- src/components/SendTransaction.vue | 238 ++++++++-- src/components/SendTransactionCompact.vue | 101 +++- src/components/SignMessage.vue | 67 ++- src/components/SignMessageCompact.vue | 67 ++- src/components/SwipeToAction.vue | 24 +- src/components/UseWalletBalanceGasless.vue | 43 +- src/components/UserWallet.vue | 222 ++++++++- src/components/WalletButton.vue | 20 +- src/components/WalletHeader.vue | 88 +++- src/models/StyleConfig.ts | 9 + src/pages/ActivitiesScreen.vue | 30 +- src/pages/AddOrEditNFTScreen.vue | 53 ++- src/pages/AddTokenScreen.vue | 94 +++- src/pages/MFARequiredScreen.vue | 39 +- src/pages/MFARestoreScreen.vue | 31 +- src/pages/MFASetup.vue | 114 ++++- src/pages/ManageNFTScreen.vue | 66 ++- src/pages/NftDetailsScreen.vue | 127 +++++- src/pages/PermissionRequest.vue | 52 ++- src/pages/RequestsScreen.vue | 21 +- src/pages/SeedPhraseMVX.vue | 68 ++- src/pages/SelectNftScreen.vue | 60 ++- src/pages/SendNft.vue | 100 +++- src/pages/SendTokens.vue | 118 ++++- src/pages/StarterTips/index-page.vue | 69 ++- src/pages/TransakSell.vue | 242 ++++++++-- src/pages/homeScreen.vue | 11 +- src/pages/loggedInView.vue | 10 +- src/pages/profileScreen.vue | 212 +++++++-- src/services/gateway.service.ts | 2 + src/store/app.ts | 6 + src/store/config.ts | 4 + src/utils/useSvgInjector.ts.ts | 140 ++++++ src/utils/utilsFunction.ts | 40 ++ 81 files changed, 5445 insertions(+), 590 deletions(-) create mode 100644 public/svg-inject.min.js create mode 100644 src/models/StyleConfig.ts create mode 100644 src/utils/useSvgInjector.ts.ts create mode 100644 src/utils/utilsFunction.ts diff --git a/public/index.html b/public/index.html index fdd2ce36..da3034d1 100644 --- a/public/index.html +++ b/public/index.html @@ -25,5 +25,6 @@ >
+ diff --git a/public/svg-inject.min.js b/public/svg-inject.min.js new file mode 100644 index 00000000..c2947ca8 --- /dev/null +++ b/public/svg-inject.min.js @@ -0,0 +1,322 @@ +!(function (o, l) { + var r, + a, + s = 'createElement', + g = 'getElementsByTagName', + b = 'length', + E = 'style', + d = 'title', + y = 'undefined', + k = 'setAttribute', + w = 'getAttribute', + x = null, + A = '__svgInject', + C = '--inject-', + S = new RegExp(C + '\\d+', 'g'), + I = 'LOAD_FAIL', + t = 'SVG_NOT_SUPPORTED', + L = 'SVG_INVALID', + v = ['src', 'alt', 'onload', 'onerror'], + j = l[s]('a'), + G = typeof SVGRect != y, + f = { useCache: !0, copyAttributes: !0, makeIdsUnique: !0 }, + N = { + clipPath: ['clip-path'], + 'color-profile': x, + cursor: x, + filter: x, + linearGradient: ['fill', 'stroke'], + marker: ['marker', 'marker-end', 'marker-mid', 'marker-start'], + mask: x, + pattern: ['fill', 'stroke'], + radialGradient: ['fill', 'stroke'], + }, + u = 1, + c = 2, + O = 1 + function T(e) { + return (r = r || new XMLSerializer()).serializeToString(e) + } + function P(e, r) { + var t, + n, + i, + o, + a = C + O++, + f = /url\("?#([a-zA-Z][\w:.-]*)"?\)/g, + u = e.querySelectorAll('[id]'), + c = r ? [] : x, + l = {}, + s = [], + d = !1 + if (u[b]) { + for (i = 0; i < u[b]; i++) (n = u[i].localName) in N && (l[n] = 1) + for (n in l) + (N[n] || [n]).forEach(function (e) { + s.indexOf(e) < 0 && s.push(e) + }) + s[b] && s.push(E) + var v, + p, + m, + h = e[g]('*'), + y = e + for (i = -1; y != x; ) { + if (y.localName == E) + (m = + (p = y.textContent) && + p.replace(f, function (e, r) { + return c && (c[r] = 1), 'url(#' + r + a + ')' + })) !== p && (y.textContent = m) + else if (y.hasAttributes()) { + for (o = 0; o < s[b]; o++) + (v = s[o]), + (m = + (p = y[w](v)) && + p.replace(f, function (e, r) { + return c && (c[r] = 1), 'url(#' + r + a + ')' + })) !== p && y[k](v, m) + ;['xlink:href', 'href'].forEach(function (e) { + var r = y[w](e) + ;/^\s*#/.test(r) && + ((r = r.trim()), y[k](e, r + a), c && (c[r.substring(1)] = 1)) + }) + } + y = h[++i] + } + for (i = 0; i < u[b]; i++) + (t = u[i]), (c && !c[t.id]) || ((t.id += a), (d = !0)) + } + return d + } + function V(e, r, t, n) { + if (r) { + r[k]('data-inject-url', t) + var i = e.parentNode + if (i) { + n.copyAttributes && + (function c(e, r) { + for (var t, n, i, o = e.attributes, a = 0; a < o[b]; a++) + if (((n = (t = o[a]).name), -1 == v.indexOf(n))) + if (((i = t.value), n == d)) { + var f, + u = r.firstElementChild + u && u.localName.toLowerCase() == d + ? (f = u) + : ((f = l[s + 'NS']('http://www.w3.org/2000/svg', d)), + r.insertBefore(f, u)), + (f.textContent = i) + } else r[k](n, i) + })(e, r) + var o = n.beforeInject, + a = (o && o(e, r)) || r + i.replaceChild(a, e), (e[A] = u), m(e) + var f = n.afterInject + f && f(e, a) + } + } else D(e, n) + } + function p() { + for (var e = {}, r = arguments, t = 0; t < r[b]; t++) { + var n = r[t] + for (var i in n) n.hasOwnProperty(i) && (e[i] = n[i]) + } + return e + } + function _(e, r) { + if (r) { + var t + try { + t = (function i(e) { + return (a = a || new DOMParser()).parseFromString(e, 'text/xml') + })(e) + } catch (o) { + return x + } + return t[g]('parsererror')[b] ? x : t.documentElement + } + var n = l.createElement('div') + return (n.innerHTML = e), n.firstElementChild + } + function m(e) { + e.removeAttribute('onload') + } + function n(e) { + console.error('SVGInject: ' + e) + } + function i(e, r, t) { + ;(e[A] = c), t.onFail ? t.onFail(e, r) : n(r) + } + function D(e, r) { + m(e), i(e, L, r) + } + function F(e, r) { + m(e), i(e, t, r) + } + function M(e, r) { + i(e, I, r) + } + function q(e) { + ;(e.onload = x), (e.onerror = x) + } + function R(e) { + n('no img element') + } + var e = (function z(e, r) { + var t = p(f, r), + h = {} + function n(a, f) { + f = p(t, f) + var e = function (r) { + var e = function () { + var e = f.onAllFinish + e && e(), r && r() + } + if (a && typeof a[b] != y) { + var t = 0, + n = a[b] + if (0 == n) e() + else + for ( + var i = function () { + ++t == n && e() + }, + o = 0; + o < n; + o++ + ) + u(a[o], f, i) + } else u(a, f, e) + } + return typeof Promise == y ? e() : new Promise(e) + } + function u(u, c, e) { + if (u) { + var r = u[A] + if (r) Array.isArray(r) ? r.push(e) : e() + else { + if ((q(u), !G)) return F(u, c), void e() + var t = c.beforeLoad, + n = (t && t(u)) || u[w]('src') + if (!n) return '' === n && M(u, c), void e() + var i = [] + u[A] = i + var l = function () { + e(), + i.forEach(function (e) { + e() + }) + }, + s = (function f(e) { + return (j.href = e), j.href + })(n), + d = c.useCache, + v = c.makeIdsUnique, + p = function (r) { + d && + (h[s].forEach(function (e) { + e(r) + }), + (h[s] = r)) + } + if (d) { + var o, + a = function (e) { + if (e === I) M(u, c) + else if (e === L) D(u, c) + else { + var r, + t = e[0], + n = e[1], + i = e[2] + v && + (t === x + ? ((t = P((r = _(n, !1)), !1)), + (e[0] = t), + (e[2] = t && T(r))) + : t && + (n = (function o(e) { + return e.replace(S, C + O++) + })(i))), + (r = r || _(n, !1)), + V(u, r, s, c) + } + l() + } + if (typeof (o = h[s]) != y) + return void (o.isCallbackQueue ? o.push(a) : a(o)) + ;((o = []).isCallbackQueue = !0), (h[s] = o) + } + !(function m(e, r, t) { + if (e) { + var n = new XMLHttpRequest() + ;(n.onreadystatechange = function () { + if (4 == n.readyState) { + var e = n.status + 200 == e + ? r(n.responseXML, n.responseText.trim()) + : 400 <= e + ? t() + : 0 == e && t() + } + }), + n.open('GET', e, !0), + n.send() + } + })( + s, + function (e, r) { + var t = e instanceof Document ? e.documentElement : _(r, !0), + n = c.afterLoad + if (n) { + var i = n(t, r) || t + if (i) { + var o = 'string' == typeof i + ;(r = o ? i : T(t)), (t = o ? _(i, !0) : i) + } + } + if (t instanceof SVGElement) { + var a = x + if ((v && (a = P(t, !1)), d)) { + var f = a && T(t) + p([a, r, f]) + } + V(u, t, s, c) + } else D(u, c), p(L) + l() + }, + function () { + M(u, c), p(I), l() + } + ) + } + } else R() + } + return ( + G && + (function i(e) { + var r = l[g]('head')[0] + if (r) { + var t = l[s](E) + ;(t.type = 'text/css'), + t.appendChild(l.createTextNode(e)), + r.appendChild(t) + } + })('img[onload^="' + e + '("]{visibility:hidden;}'), + (n.setOptions = function (e) { + t = p(t, e) + }), + (n.create = z), + (n.err = function (e, r) { + e + ? e[A] != c && + (q(e), G ? (m(e), M(e, t)) : F(e, t), r && (m(e), (e.src = r))) + : R() + }), + (o[e] = n) + ) + })('SVGInject') + 'object' == typeof module && + 'object' == typeof module.exports && + (module.exports = e) +})(window, document) diff --git a/src/App.vue b/src/App.vue index cc149842..4691de1e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,9 +1,25 @@ diff --git a/src/components/AddNetwork.vue b/src/components/AddNetwork.vue index e3e5e567..6158677d 100644 --- a/src/components/AddNetwork.vue +++ b/src/components/AddNetwork.vue @@ -2,16 +2,19 @@ import { ref } from 'vue' import { useToast } from 'vue-toastification' +import { useAppStore } from '@/store/app' import { useRpcStore } from '@/store/rpc' import { content, errors } from '@/utils/content' import { produceProviderFromURLString } from '@/utils/evm/rpcURLToProvider' import { getImage } from '@/utils/getImage' +import { useSVGInjector } from '@/utils/useSvgInjector.ts' +import { getFontFaimly, getFontSizeStyle } from '@/utils/utilsFunction' const emit = defineEmits(['close']) const rpcStore = useRpcStore() const toast = useToast() - +const appStore = useAppStore() const rpcConfig = ref({ networkName: '', rpcUrl: '', @@ -78,6 +81,12 @@ async function handleSubmit() { toast.error(errors.RPC.INVALID) } } + +const backContainer = ref(null) + +const svgRefs = [backContainer] + +const { fetchAndInjectSVG } = useSVGInjector(svgRefs)