diff --git a/package-lock.json b/package-lock.json
index 266455b3..de93ab05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,6 @@
         "@ramp-network/ramp-instant-sdk": "^4.0.1",
         "@sentry/tracing": "^7.5.1",
         "@sentry/vue": "^7.5.1",
-        "@transak/transak-sdk": "^1.2.3",
         "assert": "^2.0.0",
         "axios": "^0.27.2",
         "bignumber.js": "^9.1.0",
@@ -3362,16 +3361,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@transak/transak-sdk": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@transak/transak-sdk/-/transak-sdk-1.2.3.tgz",
-      "integrity": "sha512-nmpMB6zUwVO/2VlTQIrlDawUbMVTGoio4IiwHxCbNRiFGzxxXwymXNqlspxCszWtznUHFHWtEMomRAdW05MAkw==",
-      "dependencies": {
-        "events": "^3.1.0",
-        "query-string": "^6.12.1",
-        "request": "^2.88.2"
-      }
-    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -4937,6 +4926,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -5191,6 +5181,7 @@
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
       "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "dev": true,
       "dependencies": {
         "safer-buffer": "~2.1.0"
       }
@@ -5226,6 +5217,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "dev": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -5319,6 +5311,7 @@
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
       "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -5326,7 +5319,8 @@
     "node_modules/aws4": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
-      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
+      "dev": true
     },
     "node_modules/axios": {
       "version": "0.27.2",
@@ -5474,6 +5468,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "dev": true,
       "dependencies": {
         "tweetnacl": "^0.14.3"
       }
@@ -5481,7 +5476,8 @@
     "node_modules/bcrypt-pbkdf/node_modules/tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "dev": true
     },
     "node_modules/bech32": {
       "version": "1.1.4",
@@ -6048,7 +6044,8 @@
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "dev": true
     },
     "node_modules/chalk": {
       "version": "2.4.2",
@@ -6690,7 +6687,8 @@
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "dev": true
     },
     "node_modules/cosmiconfig": {
       "version": "6.0.0",
@@ -7139,6 +7137,7 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "dev": true,
       "dependencies": {
         "assert-plus": "^1.0.0"
       },
@@ -7203,14 +7202,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/decode-uri-component": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
-      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -7643,6 +7634,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "dev": true,
       "dependencies": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -8901,6 +8893,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -9109,12 +9102,14 @@
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
     },
     "node_modules/extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
       "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "dev": true,
       "engines": [
         "node >=0.6.0"
       ]
@@ -9161,7 +9156,8 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -9246,14 +9242,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/filter-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
-      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -9367,6 +9355,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
       "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -9517,6 +9506,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -9752,6 +9742,7 @@
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "dev": true,
       "dependencies": {
         "assert-plus": "^1.0.0"
       }
@@ -9958,6 +9949,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
       "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -9967,6 +9959,7 @@
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "deprecated": "this library is no longer supported",
+      "dev": true,
       "dependencies": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -10392,6 +10385,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
+      "dev": true,
       "dependencies": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -10955,7 +10949,8 @@
     "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true
     },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
@@ -11016,7 +11011,8 @@
     "node_modules/isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "dev": true
     },
     "node_modules/javascript-stringify": {
       "version": "2.1.0",
@@ -11117,7 +11113,8 @@
     "node_modules/jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "dev": true
     },
     "node_modules/jsesc": {
       "version": "2.5.2",
@@ -11163,12 +11160,14 @@
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
     },
     "node_modules/json-stable-stringify": {
       "version": "1.0.1",
@@ -11187,7 +11186,8 @@
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -11231,6 +11231,7 @@
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
       "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+      "dev": true,
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -13132,6 +13133,7 @@
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
       "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -13663,7 +13665,8 @@
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "dev": true
     },
     "node_modules/picocolors": {
       "version": "1.0.0",
@@ -14776,7 +14779,8 @@
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "dev": true
     },
     "node_modules/public-encrypt": {
       "version": "4.0.3",
@@ -14810,6 +14814,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -14818,27 +14823,11 @@
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
       "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "dev": true,
       "engines": {
         "node": ">=0.6"
       }
     },
-    "node_modules/query-string": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
-      "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
-      "dependencies": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -15256,6 +15245,7 @@
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
       "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
+      "dev": true,
       "dependencies": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -15287,6 +15277,7 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
+      "dev": true,
       "bin": {
         "uuid": "bin/uuid"
       }
@@ -16096,14 +16087,6 @@
         "wbuf": "^1.7.3"
       }
     },
-    "node_modules/split-on-first": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -16114,6 +16097,7 @@
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
       "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
+      "dev": true,
       "dependencies": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -16137,7 +16121,8 @@
     "node_modules/sshpk/node_modules/tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "dev": true
     },
     "node_modules/ssri": {
       "version": "8.0.1",
@@ -16215,14 +16200,6 @@
         "readable-stream": "^3.5.0"
       }
     },
-    "node_modules/strict-uri-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -17221,6 +17198,7 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
       "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "dev": true,
       "dependencies": {
         "psl": "^1.1.28",
         "punycode": "^2.1.1"
@@ -17404,6 +17382,7 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       },
@@ -17597,6 +17576,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -17676,6 +17656,7 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
       "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "dev": true,
       "engines": [
         "node >=0.6.0"
       ],
@@ -21144,16 +21125,6 @@
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true
     },
-    "@transak/transak-sdk": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@transak/transak-sdk/-/transak-sdk-1.2.3.tgz",
-      "integrity": "sha512-nmpMB6zUwVO/2VlTQIrlDawUbMVTGoio4IiwHxCbNRiFGzxxXwymXNqlspxCszWtznUHFHWtEMomRAdW05MAkw==",
-      "requires": {
-        "events": "^3.1.0",
-        "query-string": "^6.12.1",
-        "request": "^2.88.2"
-      }
-    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -22408,6 +22379,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -22587,6 +22559,7 @@
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
       "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "dev": true,
       "requires": {
         "safer-buffer": "~2.1.0"
       }
@@ -22623,7 +22596,8 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "dev": true
     },
     "astral-regex": {
       "version": "2.0.0",
@@ -22679,12 +22653,14 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA=="
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "dev": true
     },
     "aws4": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
-      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
+      "dev": true
     },
     "axios": {
       "version": "0.27.2",
@@ -22800,6 +22776,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "dev": true,
       "requires": {
         "tweetnacl": "^0.14.3"
       },
@@ -22807,7 +22784,8 @@
         "tweetnacl": {
           "version": "0.14.5",
           "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-          "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
+          "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+          "dev": true
         }
       }
     },
@@ -23248,7 +23226,8 @@
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "dev": true
     },
     "chalk": {
       "version": "2.4.2",
@@ -23731,7 +23710,8 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "dev": true
     },
     "cosmiconfig": {
       "version": "6.0.0",
@@ -24057,6 +24037,7 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -24103,11 +24084,6 @@
         }
       }
     },
-    "decode-uri-component": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
-      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
-    },
     "deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -24450,6 +24426,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "dev": true,
       "requires": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -25448,7 +25425,8 @@
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true
     },
     "evp_bytestokey": {
       "version": "1.0.3",
@@ -25611,12 +25589,14 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
     },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g=="
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "dev": true
     },
     "fast-deep-equal": {
       "version": "3.1.3",
@@ -25656,7 +25636,8 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -25726,11 +25707,6 @@
         "to-regex-range": "^5.0.1"
       }
     },
-    "filter-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
-      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
-    },
     "finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -25816,7 +25792,8 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw=="
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "dev": true
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
@@ -25914,6 +25891,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -26081,6 +26059,7 @@
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -26245,12 +26224,14 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true
     },
     "har-validator": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "dev": true,
       "requires": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -26565,6 +26546,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
+      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -26933,7 +26915,8 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true
     },
     "is-unicode-supported": {
       "version": "0.1.0",
@@ -26979,7 +26962,8 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "dev": true
     },
     "javascript-stringify": {
       "version": "2.1.0",
@@ -27064,7 +27048,8 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "dev": true
     },
     "jsesc": {
       "version": "2.5.2",
@@ -27101,12 +27086,14 @@
     "json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true
     },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
     },
     "json-stable-stringify": {
       "version": "1.0.1",
@@ -27125,7 +27112,8 @@
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true
     },
     "json5": {
       "version": "2.2.3",
@@ -27158,6 +27146,7 @@
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
       "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+      "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -28614,7 +28603,8 @@
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "dev": true
     },
     "object-assign": {
       "version": "4.1.1",
@@ -29018,7 +29008,8 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "dev": true
     },
     "picocolors": {
       "version": "1.0.0",
@@ -29737,7 +29728,8 @@
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "dev": true
     },
     "public-encrypt": {
       "version": "4.0.3",
@@ -29772,23 +29764,14 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
     },
     "qs": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
-    },
-    "query-string": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
-      "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
-      "requires": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      }
+      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+      "dev": true
     },
     "queue-microtask": {
       "version": "1.2.3",
@@ -30113,6 +30096,7 @@
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -30139,7 +30123,8 @@
         "uuid": {
           "version": "3.4.0",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
         }
       }
     },
@@ -30781,11 +30766,6 @@
         "wbuf": "^1.7.3"
       }
     },
-    "split-on-first": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
-    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -30796,6 +30776,7 @@
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
       "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
+      "dev": true,
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -30811,7 +30792,8 @@
         "tweetnacl": {
           "version": "0.14.5",
           "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-          "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
+          "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+          "dev": true
         }
       }
     },
@@ -30886,11 +30868,6 @@
         "readable-stream": "^3.5.0"
       }
     },
-    "strict-uri-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
-    },
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -31608,6 +31585,7 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
       "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "dev": true,
       "requires": {
         "psl": "^1.1.28",
         "punycode": "^2.1.1"
@@ -31746,6 +31724,7 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -31880,6 +31859,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -31950,6 +31930,7 @@
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
       "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
diff --git a/package.json b/package.json
index ef740b6a..62e78f8f 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@arcana/auth": "^0.1.3",
-    "@arcana/auth-core": "^1.0.0-beta.6",
+    "@arcana/auth-core": "^1.0.0-beta.7",
     "@arcana/key-helper": "^1.0.0-beta.7",
     "@ethereumjs/tx": "^3.4.0",
     "@fontsource/montserrat": "^4.5.14",
@@ -27,7 +27,6 @@
     "@ramp-network/ramp-instant-sdk": "^4.0.1",
     "@sentry/tracing": "^7.5.1",
     "@sentry/vue": "^7.5.1",
-    "@transak/transak-sdk": "^1.2.3",
     "assert": "^2.0.0",
     "axios": "^0.27.2",
     "bignumber.js": "^9.1.0",
diff --git a/src/App.vue b/src/App.vue
index 492966e8..099dad81 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { toRefs, ref, watch, computed, onBeforeMount } from 'vue'
+import { AppMode } from '@arcana/auth'
+import { toRefs, watch, computed, onBeforeMount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import WalletFooter from '@/components/AppFooter.vue'
 import BaseModal from '@/components/BaseModal.vue'
+import WalletButton from '@/components/WalletButton.vue'
+import WalletHeader from '@/components/WalletHeader.vue'
 import type { Theme } from '@/models/Theme'
 import { useAppStore } from '@/store/app'
 import { useModalStore } from '@/store/modal'
+import { useParentConnectionStore } from '@/store/parentConnection'
 import { useRequestStore } from '@/store/request'
+import { initializeOnRampMoney } from '@/utils/onrampmoney.ramp'
 import { fetchTransakNetworks } from '@/utils/transak'
 
 import '@/index.css'
@@ -15,9 +20,9 @@ import '@/index.css'
 const app = useAppStore()
 const modal = useModalStore()
 const requestStore = useRequestStore()
+const parentConnectionStore = useParentConnectionStore()
 const router = useRouter()
-const { theme } = toRefs(app)
-const isLoading = ref(false)
+const { theme, expandWallet, showWallet, compactMode, sdkVersion } = toRefs(app)
 const route = useRoute()
 
 const url = new URL(window.location.href)
@@ -29,12 +34,35 @@ const showRequestPage = computed(() => {
   return requestStore.areRequestsPendingForApproval
 })
 
+const showWalletButton = computed(() => {
+  return !app.expandWallet && app.validAppMode !== AppMode.Widget
+})
+
 onBeforeMount(async () => {
-  await fetchTransakNetworks()
+  try {
+    await Promise.all([fetchTransakNetworks(), initializeOnRampMoney()])
+  } catch (e) {
+    console.error('Failed to initialize one or more on-ramps:', e)
+  }
+})
+
+async function setIframeStyle() {
+  const parentConnectionInstance = await parentConnectionStore.parentConnection
+    ?.promise
+  await parentConnectionInstance?.setIframeStyle(app.iframeStyle)
+}
+
+watch(showWallet, async (newValue) => {
+  if (newValue) app.expandWallet = false
+  setIframeStyle()
 })
 
-watch(showRequestPage, () => {
-  if (showRequestPage.value) {
+watch(expandWallet, setIframeStyle)
+
+watch(compactMode, setIframeStyle)
+
+watch(showRequestPage, (newValue) => {
+  if (newValue) {
     modal.show = false
     router.push({ name: 'requests', params: { appId: app.id } })
   }
@@ -42,22 +70,54 @@ watch(showRequestPage, () => {
 
 const showFooter = computed(() => {
   return (
-    !['requests', 'MFARequired', 'MFARestore'].includes(route.name as string) ||
-    (route.name === 'requests' && !requestStore.pendingRequest)
+    (!['requests', 'MFARequired', 'MFARestore'].includes(
+      route.name as string
+    ) ||
+      (route.name === 'requests' && !requestStore.pendingRequest)) &&
+    !app.compactMode
   )
 })
+
+function onClickOfHeader() {
+  if (app.compactMode) app.compactMode = false
+  else app.expandWallet = false
+}
 </script>
 
 <template>
-  <div v-if="isLoading" class="flex col justify-center items-center h-full">
-    <div>Loading...</div>
+  <div v-if="sdkVersion === 'v3'" class="flex flex-col h-full">
+    <div
+      v-show="expandWallet"
+      class="flex flex-col h-full"
+      :class="[theme === 'dark' ? 'dark-mode' : 'light-mode']"
+    >
+      <WalletHeader @click="onClickOfHeader" />
+      <div
+        class="flex-grow wallet__container p-4"
+        :class="{ 'rounded-b-xl p-0': compactMode }"
+      >
+        <RouterView class="min-h-full" />
+        <BaseModal v-if="modal.show" />
+      </div>
+      <WalletFooter v-if="showFooter" />
+    </div>
+    <div
+      v-show="showWalletButton"
+      class="h-full"
+      :class="[theme === 'dark' ? 'dark-mode' : 'light-mode']"
+    >
+      <WalletButton />
+    </div>
   </div>
   <div
     v-else
     class="flex flex-col h-full"
     :class="[theme === 'dark' ? 'dark-mode' : 'light-mode']"
   >
-    <div class="flex-grow wallet__container">
+    <div
+      class="flex-grow wallet__container p-4"
+      :class="{ 'rounded-b-xl p-0': compactMode }"
+    >
       <RouterView class="min-h-full" />
       <BaseModal v-if="modal.show" />
     </div>
@@ -230,7 +290,6 @@ button {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  padding: var(--p-400);
   overflow-x: hidden;
   color: var(--fg-color);
   background: var(--container-bg-color);
diff --git a/src/assets/images/fallback-logo-dark-mode.png b/src/assets/images/fallback-logo-dark-mode.png
new file mode 100644
index 00000000..a677d41f
Binary files /dev/null and b/src/assets/images/fallback-logo-dark-mode.png differ
diff --git a/src/assets/images/fallback-logo-light-mode.png b/src/assets/images/fallback-logo-light-mode.png
new file mode 100644
index 00000000..a677d41f
Binary files /dev/null and b/src/assets/images/fallback-logo-light-mode.png differ
diff --git a/src/components/AddNetwork.vue b/src/components/AddNetwork.vue
index b876dd13..4d522e38 100644
--- a/src/components/AddNetwork.vue
+++ b/src/components/AddNetwork.vue
@@ -37,44 +37,48 @@ function isExistingChain(chainId) {
 }
 
 async function handleSubmit() {
-  const rpcUrl = rpcConfig.value.rpcUrl
-  const chainId = rpcConfig.value.chainId
-  const existingChain = isExistingChain(chainId)
-  if (isExistingRpcUrl(rpcUrl)) {
-    return toast.error(
-      `RPC URL - ${rpcUrl} already exists, please use different one`
-    )
-  } else {
-    const provider = new ethers.providers.JsonRpcProvider(
-      rpcConfig.value.rpcUrl
-    )
-    const chainId = await provider.getNetwork()
-    if (Number(chainId.chainId) !== Number(rpcConfig.value.chainId)) {
-      return toast(`Incorrect combination of chainId and rpcUrl`)
-    }
-    if (existingChain) {
-      rpcStore.setRpcConfig({
-        ...existingChain,
-        rpcUrls: [rpcConfig.value.rpcUrl],
-      })
-      rpcStore.setSelectedChainId(existingChain.chainId)
+  try {
+    const rpcUrl = rpcConfig.value.rpcUrl
+    const chainId = rpcConfig.value.chainId
+    const existingChain = isExistingChain(chainId)
+    if (isExistingRpcUrl(rpcUrl)) {
+      return toast.error(
+        `RPC URL - ${rpcUrl} already exists, please use different one`
+      )
     } else {
-      const payload = {
-        chainName: rpcConfig.value.networkName,
-        chainId: rpcConfig.value.chainId,
-        blockExplorerUrls: [rpcConfig.value.explorerUrl],
-        rpcUrls: [rpcConfig.value.rpcUrl],
-        favicon: 'blockchain-icon',
-        nativeCurrency: {
-          symbol: rpcConfig.value.currencySymbol,
-          decimals: 18,
-        },
-        isCustom: true,
+      const provider = new ethers.providers.StaticJsonRpcProvider(
+        rpcConfig.value.rpcUrl
+      )
+      const chainId = await provider.getNetwork()
+      if (Number(chainId.chainId) !== Number(rpcConfig.value.chainId)) {
+        return toast(`Incorrect combination of chain Id and RPC URL`)
+      }
+      if (existingChain) {
+        rpcStore.setRpcConfig({
+          ...existingChain,
+          rpcUrls: [rpcConfig.value.rpcUrl],
+        })
+        rpcStore.setSelectedChainId(existingChain.chainId)
+      } else {
+        const payload = {
+          chainName: rpcConfig.value.networkName,
+          chainId: rpcConfig.value.chainId,
+          blockExplorerUrls: [rpcConfig.value.explorerUrl],
+          rpcUrls: [rpcConfig.value.rpcUrl],
+          favicon: 'blockchain-icon',
+          nativeCurrency: {
+            symbol: rpcConfig.value.currencySymbol,
+            decimals: 18,
+          },
+          isCustom: true,
+        }
+        rpcStore.addNetwork(payload)
+        rpcStore.setSelectedChainId(payload.chainId)
       }
-      rpcStore.addNetwork(payload)
-      rpcStore.setSelectedChainId(payload.chainId)
+      emit('close')
     }
-    emit('close')
+  } catch (e) {
+    toast.error('Invalid RPC URL')
   }
 }
 </script>
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 4cee2750..06625581 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -29,7 +29,7 @@ function getAppropriateIcon(iconName, pathName) {
 
 <template>
   <footer
-    class="flex items-center justify-end py-4"
+    class="flex items-center justify-end py-4 rounded-b-xl"
     :class="{ 'justify-between': userStore.isLoggedIn }"
   >
     <div v-if="userStore.isLoggedIn" class="flex space-x-4">
diff --git a/src/components/AssetsView.vue b/src/components/AssetsView.vue
index c52f7811..6be110d8 100644
--- a/src/components/AssetsView.vue
+++ b/src/components/AssetsView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ethers } from 'ethers'
 import { onMounted, reactive, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -33,10 +34,7 @@ function fetchNativeAsset() {
   return {
     address: 'native',
     name: rpcStore.nativeCurrency.name,
-    balance: formatTokenDecimals(
-      rpcStore.walletBalance,
-      rpcStore.nativeCurrency.decimals
-    ),
+    balance: Number(ethers.utils.formatEther(rpcStore.walletBalance)),
     decimals: rpcStore.nativeCurrency.decimals,
     symbol: rpcStore.nativeCurrency.symbol,
     logo:
@@ -92,6 +90,10 @@ function handleAddToken() {
   router.push({ name: 'AddToken' })
 }
 
+function isNative(asset: Asset) {
+  return asset.address === 'native'
+}
+
 onMounted(async () => {
   await getAssetsBalance()
   assetsPolling = setInterval(updateAssetsBalance, 4000)
@@ -127,7 +129,11 @@ rpcStore.$subscribe(getAssetsBalance)
         </div>
         <div
           class="assets-view__asset-balance flex flex-wrap leading-none text-right overflow-hidden whitespace-nowrap text-ellipsis"
-          :title="`${asset.balance.toFixed(asset.decimals)} ${asset.symbol}`"
+          :title="`${
+            isNative(asset)
+              ? ethers.utils.formatEther(rpcStore.walletBalance)
+              : asset.balance.toFixed(asset.decimals)
+          } ${asset.symbol}`"
         >
           {{ beautifyBalance(asset.balance) }}
           {{ asset.symbol }}
diff --git a/src/components/BuyTokens.vue b/src/components/BuyTokens.vue
index db96eff3..e6ad5f4e 100644
--- a/src/components/BuyTokens.vue
+++ b/src/components/BuyTokens.vue
@@ -2,6 +2,7 @@
 import { ref, type Ref } from 'vue'
 
 import AppLoader from '@/components/AppLoader.vue'
+import { openOnRampMoneyHostedUI } from '@/utils/onrampmoney.ramp'
 import { openRampSdk } from '@/utils/rampsdk'
 import { openTransak } from '@/utils/transak'
 import { useImage } from '@/utils/useImage'
@@ -9,13 +10,14 @@ import { useImage } from '@/utils/useImage'
 type BuyTokenProps = {
   transakNetwork?: string
   rampNetwork?: string
+  onRampMoney: number | false | undefined
 }
 
 const props = defineProps<BuyTokenProps>()
 
 const emit = defineEmits(['close'])
 const getImage = useImage()
-const selectedProvider: Ref<'transak' | 'ramp' | ''> = ref('')
+const selectedProvider: Ref<'transak' | 'ramp' | 'onramp.money' | ''> = ref('')
 const isLoading = ref(false)
 const showStatusModal: Ref<'success' | 'failed' | 'cancelled' | ''> = ref('')
 const statusText = ref({
@@ -29,7 +31,7 @@ function handleTransak() {
   handleStatusModalText('Transak')
 }
 
-function handleStatusModalText(provider: 'Transak' | 'Ramp') {
+function handleStatusModalText(provider: 'Transak' | 'Ramp' | 'onramp.money') {
   setTimeout(() => {
     isLoading.value = false
   }, 1500)
@@ -47,11 +49,22 @@ function handleRamp() {
   handleStatusModalText('Ramp')
 }
 
+function handleOnRampMoney() {
+  if (props.onRampMoney === undefined || props.onRampMoney === false) {
+    throw new Error('!!!')
+  }
+  isLoading.value = true
+  openOnRampMoneyHostedUI(props.onRampMoney)
+  handleStatusModalText('onramp.money')
+}
+
 function handleBuy() {
   if (selectedProvider.value === 'transak') {
     handleTransak()
   } else if (selectedProvider.value === 'ramp') {
     handleRamp()
+  } else if (selectedProvider.value === 'onramp.money') {
+    handleOnRampMoney()
   }
 }
 
@@ -142,6 +155,25 @@ function handleDone() {
             <span class="text-base">Ramp</span>
           </label>
         </div>
+        <div class="flex gap-3 items-center">
+          <input
+            id="OnRampMoney"
+            v-model="selectedProvider"
+            type="radio"
+            value="onramp.money"
+            name="provider"
+            :disabled="props.onRampMoney === false"
+            :class="{ 'opacity-80': !props.onRampMoney }"
+          />
+          <label
+            for="OnRampMoney"
+            class="flex gap-2 items-center cursor-pointer"
+            :class="{ 'opacity-50': props.onRampMoney === false }"
+          >
+            <img src="@/assets/images/ramp.png" class="h-7 w-7" />
+            <span class="text-base">onramp.money</span>
+          </label>
+        </div>
         <div class="flex">
           <button
             class="flex-1 text-sm sm:text-xs rounded-xl text-white dark:bg-white bg-black dark:text-black h-9 sm:h-8 uppercase disabled:opacity-50 transition-opacity duration-300"
diff --git a/src/components/ChangeChain.vue b/src/components/ChangeChain.vue
index 41d5bf15..bbcc9dfa 100644
--- a/src/components/ChangeChain.vue
+++ b/src/components/ChangeChain.vue
@@ -41,11 +41,11 @@ watch(selectedChain, async () => {
       }"
     >
       <div v-if="selectedChain" class="flex space-x-1 items-center">
-        <img
+        <!-- <img
           :src="getImage(selectedChain.favicon)"
           :alt="selectedChain.chainName"
           class="w-6 h-6"
-        />
+        /> -->
         <p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[16ch]">
           {{ selectedChain.chainName }}
         </p>
@@ -74,11 +74,11 @@ watch(selectedChain, async () => {
         >
           <div class="flex justify-between">
             <div class="flex space-x-1 items-center">
-              <img
+              <!-- <img
                 :src="getImage(chain.favicon)"
                 :alt="chain.chainName"
                 class="w-6 h-6"
-              />
+              /> -->
               <p
                 class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[20ch]"
               >
diff --git a/src/components/EditNetwork.vue b/src/components/EditNetwork.vue
index e3975e6a..48632f43 100644
--- a/src/components/EditNetwork.vue
+++ b/src/components/EditNetwork.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ethers } from 'ethers'
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
@@ -44,39 +45,57 @@ function isExistingChainId(chainId: number) {
   )
 }
 
-function handleSubmit() {
-  const rpcUrl = rpcConfig.value.rpcUrl
-  const chainId = rpcConfig.value.chainId
-  if (isExistingRpcUrl(rpcUrl as string)) {
-    toast.error(`RPC URL - ${rpcUrl} already exists, please use different one`)
-  } else if (isExistingChainId(Number(rpcConfig.value.chainId))) {
-    toast.error(
-      `Chain ID - ${chainId} already exists, please use different one`
-    )
-  } else {
-    const payload = {
-      chainName: rpcConfig.value.chainName,
-      chainId: rpcConfig.value.chainId as string,
-      blockExplorerUrls: [rpcConfig.value.explorerUrl as string],
-      rpcUrls: [rpcConfig.value.rpcUrl as string],
-      favicon: rpcConfigForEdit?.favicon as string,
-      isCustom: true,
-      nativeCurrency: {
-        symbol: rpcConfig.value.currencySymbol as string,
-        decimals: 18,
-      },
-    }
-    rpcStore.editNetwork(Number(props.chainId), payload)
-    if (Number(props.chainId) === Number(rpcStore.selectedRPCConfig.chainId)) {
-      rpcStore.setSelectedRPCConfig(payload)
-    }
-    if (Number(props.chainId) === Number(rpcStore.selectedRPCConfig.chainId)) {
-      getRequestHandler().setRpcConfig({
-        ...payload,
-        chainId: Number(payload.chainId),
-      })
+async function validateRPCandChainID(rpcUrl, chainId) {
+  const provider = new ethers.providers.StaticJsonRpcProvider(rpcUrl)
+  const { chainId: fetchedChainId } = await provider.getNetwork()
+  return Number(fetchedChainId) === Number(chainId)
+}
+
+async function handleSubmit() {
+  try {
+    const rpcUrl = rpcConfig.value.rpcUrl
+    const chainId = rpcConfig.value.chainId
+    if (isExistingRpcUrl(rpcUrl as string)) {
+      toast.error(
+        `RPC URL - ${rpcUrl} already exists, please use different one`
+      )
+    } else if (isExistingChainId(Number(rpcConfig.value.chainId))) {
+      toast.error(
+        `Chain ID - ${chainId} already exists, please use different one`
+      )
+    } else if (!(await validateRPCandChainID(rpcUrl, chainId))) {
+      toast(`Incorrect combination of chain Id and RPC URL`)
+    } else {
+      const payload = {
+        chainName: rpcConfig.value.chainName,
+        chainId: rpcConfig.value.chainId as string,
+        blockExplorerUrls: [rpcConfig.value.explorerUrl as string],
+        rpcUrls: [rpcConfig.value.rpcUrl as string],
+        favicon: rpcConfigForEdit?.favicon as string,
+        isCustom: true,
+        nativeCurrency: {
+          symbol: rpcConfig.value.currencySymbol as string,
+          decimals: 18,
+        },
+      }
+      rpcStore.editNetwork(Number(props.chainId), payload)
+      if (
+        Number(props.chainId) === Number(rpcStore.selectedRPCConfig.chainId)
+      ) {
+        rpcStore.setSelectedRPCConfig(payload)
+      }
+      if (
+        Number(props.chainId) === Number(rpcStore.selectedRPCConfig.chainId)
+      ) {
+        await getRequestHandler().setRpcConfig({
+          ...payload,
+          chainId: Number(payload.chainId),
+        })
+      }
+      emit('close')
     }
-    emit('close')
+  } catch (e) {
+    toast.error('Invalid RPC URL')
   }
 }
 
diff --git a/src/components/GasPrice.vue b/src/components/GasPrice.vue
index 29793d50..be0c15bd 100644
--- a/src/components/GasPrice.vue
+++ b/src/components/GasPrice.vue
@@ -6,14 +6,16 @@ import type { CurrencySymbol } from '@/services/exchangeRate.service'
 import { getExchangeRate } from '@/services/exchangeRate.service'
 import { GAS_AVAILABLE_CHAIN_IDS } from '@/services/gasPrice.service'
 import { useRpcStore } from '@/store/rpc'
+import {
+  EXCHANGE_RATE_CURRENCY,
+  GAS_FEE_UNIT,
+  GAS_PRICE_SPEED_MAP,
+} from '@/utils/constants'
 import debounce from '@/utils/debounce'
 import { formatValueToUSD } from '@/utils/formatUSD'
 import { convertGweiToEth } from '@/utils/gweiToEth'
 import { useImage } from '@/utils/useImage'
 
-const EXCHANGE_RATE_CURRENCY: CurrencySymbol = 'USD'
-const GAS_FEE_UNIT = 'GWEI'
-
 const emits = defineEmits(['gasPriceInput'])
 
 const props = defineProps({
@@ -51,11 +53,6 @@ watch(gasFee, () => {
 
 const getImage = useImage()
 const showCustomGasFeeInput = ref(false)
-const gasPriceLabelPropsMap = {
-  slow: { wait: 'safeLowWait', price: 'safeLow' },
-  standard: { wait: 'avgWait', price: 'average' },
-  fast: { wait: 'fastWait', price: 'fast' },
-}
 
 const showSlider = GAS_AVAILABLE_CHAIN_IDS.includes(
   Number(rpcStore.selectedChainId)
@@ -85,7 +82,7 @@ async function getConversionRate(gasFee) {
 function handleGasPriceSelect(value = '') {
   disableSlider.value = false
   const type = value.toLowerCase()
-  const { wait, price } = gasPriceLabelPropsMap[type]
+  const { wait, price } = GAS_PRICE_SPEED_MAP[type]
   gasFee.value = Number((props.gasPrices[price] / 10).toFixed(9))
   transactionTime.value = props.gasPrices[wait]
   emits('gasPriceInput', gasFee.value)
@@ -93,20 +90,18 @@ function handleGasPriceSelect(value = '') {
 
 function handleCustomGasPriceInput(value) {
   disableSlider.value = true
-  if (value) {
-    const amountInputEl = document.querySelector(
-      '#custom-gas-fee-amount'
-    ) as HTMLInputElement
-    if (value < Number(props.baseFee)) {
-      return amountInputEl.setCustomValidity(
-        'Amount must not be less than base fee.'
-      )
-    } else {
-      amountInputEl.setCustomValidity('')
-      gasFee.value = value
-      emits('gasPriceInput', gasFee.value)
-    }
+  const amountInputEl = document.querySelector(
+    '#custom-gas-fee-amount'
+  ) as HTMLInputElement
+  if (!value && value !== 0) {
+    amountInputEl.setCustomValidity('Enter the gas fees to continue.')
+  } else if (value < Number(props.baseFee)) {
+    amountInputEl.setCustomValidity('Gas fees must not be less than base fees.')
+  } else {
+    amountInputEl.setCustomValidity('')
   }
+  gasFee.value = value
+  emits('gasPriceInput', gasFee.value)
 }
 </script>
 
diff --git a/src/components/NFTView.vue b/src/components/NFTView.vue
index 6833eeb3..c39b9eec 100644
--- a/src/components/NFTView.vue
+++ b/src/components/NFTView.vue
@@ -3,14 +3,16 @@ import { onMounted, ref, type Ref, reactive, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 import type { NFT } from '@/models/NFT'
+import { NFTDB } from '@/services/nft.service'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
-import { checkOwnership } from '@/utils/nftUtils'
+import { getDetailedNFTs } from '@/utils/nftUtils'
 import { getStorage } from '@/utils/storageWrapper'
 
 const userStore = useUserStore()
 const rpcStore = useRpcStore()
 const storage = getStorage()
+let nftDB: NFTDB
 
 type NFTViewProps = {
   refreshState?: boolean
@@ -26,73 +28,14 @@ const loader = reactive({
   message: 'Loading saved NFTs...',
 })
 
-function fetchStoredNfts(): NFT[] {
-  const storedNftsString = storage.local.getItem(
-    `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`
-  )
-  if (storedNftsString) {
-    return (JSON.parse(storedNftsString) as NFT[]).filter(
-      (contract) => contract.type === 'erc721' || contract.type === 'erc1155'
-    )
-  } else {
-    return []
-  }
-}
-
 async function getNFTAssets() {
   loader.show = true
-  nfts.value = []
-  const storedNfts = fetchStoredNfts()
-  storedNfts.forEach((nft) => {
-    nfts.value.push({
-      type: nft.type,
-      name: nft.name,
-      balance: nft.balance,
-      imageUrl: nft.imageUrl,
-      animationUrl: nft.animationUrl,
-      description: nft.description,
-      collectionName: nft.collectionName,
-      tokenId: nft.tokenId,
-      address: nft.address,
-      attributes: nft.attributes,
-    })
-  })
-  const nftsToRemoveIndex: number[] = []
-  const nftCheckOwnerPromises: Promise<any>[] = []
-  nfts.value.forEach((nft, index) => {
-    nftCheckOwnerPromises.push(checkNftOwnership(nft, index, nftsToRemoveIndex))
-  })
-
-  await Promise.all(nftCheckOwnerPromises)
-
-  nfts.value = nfts.value.filter(
-    (nft, index) => !nftsToRemoveIndex.includes(index)
-  )
-
-  storage.local.setItem(
-    `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`,
-    JSON.stringify(nfts.value)
-  )
+  nftDB = await NFTDB.create(storage.local, userStore.walletAddress)
+  nfts.value = await getDetailedNFTs(nftDB, Number(rpcStore.selectedChainId))
 
   loader.show = false
 }
 
-async function checkNftOwnership(
-  nft: NFT,
-  index: number,
-  nftsToRemoveIndex: number[]
-) {
-  const hasOwnership = await checkOwnership(nft.type, {
-    tokenId: nft.tokenId,
-    contractAddress: nft.address,
-  })
-  if (hasOwnership.owner) {
-    nft.balance = hasOwnership.balance
-  } else {
-    nftsToRemoveIndex.push(index)
-  }
-}
-
 function handleManageNFT() {
   router.push({ name: 'ManageNft' })
 }
@@ -101,8 +44,10 @@ function getNftDetailValues(nft: NFT) {
   const attributes = nft.attributes?.length
     ? JSON.stringify(nft.attributes)
     : ''
+  const autodetected = JSON.stringify(nft.autodetected)
   return {
     ...nft,
+    autodetected,
     attributes,
   }
 }
diff --git a/src/components/RequestCountBadge.vue b/src/components/RequestCountBadge.vue
new file mode 100644
index 00000000..374b1566
--- /dev/null
+++ b/src/components/RequestCountBadge.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const showComponent = ref(false)
+
+defineProps({
+  requestCount: {
+    type: Number,
+    required: true,
+  },
+})
+
+onMounted(() => {
+  // this is to fix issue when css transition is applied on Iframe window
+  setTimeout(() => {
+    showComponent.value = true
+  }, 500)
+})
+</script>
+
+<template>
+  <span v-if="showComponent" class="w-5 h-5 flex">
+    <span
+      class="animate-ping absolute h-full w-full rounded-full bg-[#b43030] opacity-75"
+    ></span>
+    <span
+      class="flex items-center justify-center rounded-full w-5 h-5 bg-[#b43030] text-xs font-medium"
+      >{{ requestCount }}</span
+    >
+  </span>
+</template>
diff --git a/src/components/SendTokens.vue b/src/components/SendTokens.vue
index be6982e0..447099df 100644
--- a/src/components/SendTokens.vue
+++ b/src/components/SendTokens.vue
@@ -301,10 +301,10 @@ function handleTokenChange(e) {
       <div class="space-y-1">
         <p class="text-xs text-zinc-400 font-semibold">Network</p>
         <p class="text-base sm:text-sm flex gap-2">
-          <img
+          <!-- <img
             :src="getImage(rpcStore.selectedRpcConfig.favicon)"
             class="w-6 h-6"
-          />
+          /> -->
           {{ rpcStore.selectedRpcConfig?.chainName }}
         </p>
       </div>
diff --git a/src/components/SendTransaction.vue b/src/components/SendTransaction.vue
index 81074a88..905646a2 100644
--- a/src/components/SendTransaction.vue
+++ b/src/components/SendTransaction.vue
@@ -5,6 +5,7 @@ import type { Ref } from 'vue'
 
 import AppLoader from '@/components/AppLoader.vue'
 import GasPrice from '@/components/GasPrice.vue'
+import SendTransactionCompact from '@/components/SendTransactionCompact.vue'
 import SignMessageAdvancedInfo from '@/components/signMessageAdvancedInfo.vue'
 import {
   getGasPrice,
@@ -18,12 +19,12 @@ import { useImage } from '@/utils/useImage'
 
 const props = defineProps({
   request: {
-    type: Request,
+    type: Object,
     required: true,
   },
 })
 
-const emits = defineEmits(['gasPriceInput'])
+const emits = defineEmits(['gasPriceInput', 'reject', 'approve'])
 const customGasPrice = ref('')
 
 const rpcStore = useRpcStore()
@@ -70,6 +71,7 @@ onMounted(async () => {
 })
 
 function handleSetGasPrice(value) {
+  console.log('handleSetGasPrice', { value })
   const requestId = props.request.request.id
   customGasPrice.value = value
   emits('gasPriceInput', {
@@ -83,6 +85,14 @@ function handleSetGasPrice(value) {
   <div v-if="loader.show" class="flex justify-center items-center flex-1">
     <AppLoader :message="loader.message" />
   </div>
+  <SendTransactionCompact
+    v-else-if="appStore.compactMode"
+    :gas-price="customGasPrice"
+    :gas-prices="gasPrices"
+    :request="request"
+    @approve="emits('approve')"
+    @reject="emits('reject')"
+  />
   <div v-else class="flex flex-1 flex-col space-y-4 sm:space-y-3">
     <div class="flex flex-col space-y-2">
       <div class="flex justify-between">
@@ -97,10 +107,10 @@ function handleSetGasPrice(value) {
     <div class="space-y-1">
       <p class="text-xs text-zinc-400">Network</p>
       <p class="text-base sm:text-sm flex gap-2">
-        <img
+        <!-- <img
           :src="getImage(rpcStore.selectedRpcConfig.favicon)"
           class="w-6 h-6"
-        />
+        /> -->
         {{ rpcStore.selectedRpcConfig?.chainName }}
       </p>
     </div>
diff --git a/src/components/SendTransactionCompact.vue b/src/components/SendTransactionCompact.vue
new file mode 100644
index 00000000..1b03d59f
--- /dev/null
+++ b/src/components/SendTransactionCompact.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import DateTime from '@/components/DateTime.vue'
+import { useAppStore } from '@/store/app'
+import { useParentConnectionStore } from '@/store/parentConnection'
+import { useRpcStore } from '@/store/rpc'
+import { GAS_FEE_UNIT, GAS_PRICE_SPEED_MAP } from '@/utils/constants'
+
+const emits = defineEmits(['reject', 'approve'])
+
+const rpcStore = useRpcStore()
+const appStore = useAppStore()
+const parentConnectionStore = useParentConnectionStore()
+const gasFee = ref(0)
+const transactionTime = ref(null)
+
+const props = defineProps({
+  request: {
+    type: Object,
+    required: true,
+  },
+  gasPrices: {
+    type: Object,
+    required: false,
+    default: () => ({}),
+  },
+})
+
+onMounted(async () => {
+  setHeight()
+  getGasPriceInfo()
+})
+
+async function setHeight() {
+  const parentConnectionInstance = await parentConnectionStore.parentConnection
+    ?.promise
+  await parentConnectionInstance?.setIframeStyle({
+    ...appStore.iframeStyle,
+    height: '275px',
+  })
+}
+
+function getGasPriceInfo() {
+  const { wait, price } = GAS_PRICE_SPEED_MAP['slow']
+  gasFee.value = Number((props.gasPrices[price] / 10).toFixed(9))
+  transactionTime.value = props.gasPrices[wait]
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-1 flex-col h-full space-y-2 rounded-b-xl justify-between"
+  >
+    <div class="flex items-baseline">
+      <h1 class="flex-1 m-0 font-semibold text-base sm:text-sm capitalize">
+        Send Transaction
+      </h1>
+      <DateTime :datetime="request.receivedTime" />
+    </div>
+    <p class="text-xs text-zinc-400">
+      {{ appStore.name }} requests your permission to send this transaction to
+      the {{ rpcStore.selectedRpcConfig?.chainName }}. Please specify gas while
+      submitting the transaction.
+    </p>
+    <div class="flex-1">
+      <div class="flex flex-col justify-between">
+        <div class="space-x-1 flex items-baseline">
+          <span class="text-xs text-zinc-400">Gas Fees</span>
+          <div class="space-x-1">
+            <span class="sm:text-xs">{{ gasFee }}</span>
+            <span class="text-xs">{{ GAS_FEE_UNIT }}</span>
+          </div>
+        </div>
+        <div class="space-x-1">
+          <span class="text-xs text-zinc-400">Transaction Time:</span>
+          <span class="text-xs"> ~{{ transactionTime }} mins </span>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-end space-x-2 text-sm">
+      <button class="uppercase" @click="emits('reject')">Reject</button>
+      <button class="uppercase" @click="emits('approve')">Approve</button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/SignMessage.vue b/src/components/SignMessage.vue
index 8cff8cf3..428f8c8e 100644
--- a/src/components/SignMessage.vue
+++ b/src/components/SignMessage.vue
@@ -3,16 +3,17 @@ import { storeToRefs } from 'pinia'
 
 import DateTime from '@/components/DateTime.vue'
 import SignMessageAdvancedInfo from '@/components/signMessageAdvancedInfo.vue'
+import SignMessageCompact from '@/components/SignMessageCompact.vue'
 import type { Request } from '@/models/Connection'
 import { useAppStore } from '@/store/app'
 import { useRpcStore } from '@/store/rpc'
 import { advancedInfo } from '@/utils/advancedInfo'
 import { methodAndAction } from '@/utils/method'
-import { useImage } from '@/utils/useImage'
+// import { useImage } from '@/utils/useImage'
 
 const appStore = useAppStore()
 const rpcStore = useRpcStore()
-const getImage = useImage()
+// const getImage = useImage()
 
 const { selectedRpcConfig } = storeToRefs(rpcStore)
 
@@ -23,6 +24,8 @@ defineProps({
   },
 })
 
+const emits = defineEmits(['reject', 'approve'])
+
 const stateChangeRequests = [
   methodAndAction.wallet_addEthereumChain,
   methodAndAction.wallet_switchEthereumChain,
@@ -38,7 +41,13 @@ function getTitle(requestMethod: string) {
 </script>
 
 <template>
-  <div class="flex flex-1 flex-col space-y-4 sm:space-y-3">
+  <SignMessageCompact
+    v-if="appStore.compactMode"
+    :request="request"
+    @approve="emits('approve')"
+    @reject="emits('reject')"
+  />
+  <div v-else class="flex flex-1 flex-col space-y-4 sm:space-y-3">
     <div class="flex items-baseline">
       <h1 class="flex-1 m-0 font-semibold text-xl sm:text-sm capitalize">
         {{ getTitle(methodAndAction[request.request.method]) }}
@@ -52,10 +61,10 @@ function getTitle(requestMethod: string) {
     <div>
       <p class="text-sm sm:text-xs text-zinc-400 font-semibold">Network</p>
       <p class="text-base sm:text-sm flex gap-2">
-        <img
+        <!-- <img
           :src="getImage(rpcStore.selectedRpcConfig.favicon)"
           class="w-6 h-6"
-        />
+        /> -->
         {{ selectedRpcConfig.chainName }}
       </p>
     </div>
diff --git a/src/components/SignMessageCompact.vue b/src/components/SignMessageCompact.vue
new file mode 100644
index 00000000..2844d962
--- /dev/null
+++ b/src/components/SignMessageCompact.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import DateTime from '@/components/DateTime.vue'
+import type { Request } from '@/models/Connection'
+import { useAppStore } from '@/store/app'
+import { methodAndAction } from '@/utils/method'
+
+defineProps({
+  request: {
+    type: Request,
+    required: true,
+  },
+})
+
+const emits = defineEmits(['reject', 'approve'])
+
+const appStore = useAppStore()
+
+const stateChangeRequests = [
+  methodAndAction.wallet_addEthereumChain,
+  methodAndAction.wallet_switchEthereumChain,
+  methodAndAction.wallet_watchAsset,
+]
+
+function getTitle(requestMethod: string) {
+  if (stateChangeRequests.includes(requestMethod)) {
+    return requestMethod
+  }
+  return 'Sign Message'
+}
+
+function getPermissionText(method, request) {
+  const { params } = request
+  const { chainName } = params[0]
+  if (method === 'wallet_addEthereumChain') {
+    return `Adding Chain - ${chainName}`
+  } else if (method === 'wallet_switchEthereumChain') {
+    return `Switch Chain - ${chainName}`
+  } else {
+    return methodAndAction[method]
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-1 flex-col space-y-2 rounded-b-xl">
+    <div class="flex items-baseline">
+      <h1 class="flex-1 m-0 font-semibold text-base sm:text-sm capitalize">
+        {{ getTitle(methodAndAction[request.request.method]) }}
+      </h1>
+      <DateTime :datetime="request.receivedTime" />
+    </div>
+    <p class="font-normal text-sm sm:text-xs">
+      {{ appStore.name }} requests your permission for
+      {{ getPermissionText(request.request.method, request.request) }}
+    </p>
+    <div class="flex justify-end space-x-2 text-sm">
+      <button class="uppercase" @click="emits('reject')">Reject</button>
+      <button class="uppercase" @click="emits('approve')">Approve</button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/UserWallet.vue b/src/components/UserWallet.vue
index 50d5bf02..62de84e7 100644
--- a/src/components/UserWallet.vue
+++ b/src/components/UserWallet.vue
@@ -18,6 +18,7 @@ import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
 import { HIDE_ON_RAMP } from '@/utils/constants'
+import { isSupportedByOnRampMoney } from '@/utils/onrampmoney.ramp'
 import { getRampSupportedNetworks } from '@/utils/rampsdk'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { getTransakSupportedNetworks } from '@/utils/transak'
@@ -52,6 +53,8 @@ const { currency } = storeToRefs(rpcStore)
 const totalAmountInUSD: Ref<string | null> = ref(null)
 const chainSelectedForEdit: Ref<number | null> = ref(null)
 
+// TODO: move these to something else scoped to onramps
+
 const transakNetwork = computed(() => {
   const selectedChainId = Number(rpcStore.selectedChainId)
   return getTransakSupportedNetworks().find(
@@ -66,6 +69,17 @@ const rampNetwork = computed(() => {
   )
 })
 
+const onRampMoney = computed(() => {
+  const selectedChainId = Number(rpcStore.selectedChainId)
+  if (isSupportedByOnRampMoney(selectedChainId)) {
+    return selectedChainId
+  } else {
+    return false
+  }
+})
+
+// See above
+
 const explorerUrl = computed(() => {
   if (
     rpcStore.selectedRpcConfig &&
@@ -105,9 +119,15 @@ function openAddNetwork(open) {
 }
 
 function openEditNetwork(open, chainId: number | null = null) {
-  chainSelectedForEdit.value = chainId
-  modalStore.setShowModal(open)
-  showModal.value = open ? 'edit-network' : false
+  if (Number(rpcStore.selectedRpcConfig.chainId) === Number(chainId)) {
+    toast.error(
+      'This network is current selected, please chose a different one and try again'
+    )
+  } else {
+    chainSelectedForEdit.value = chainId
+    modalStore.setShowModal(open)
+    showModal.value = open ? 'edit-network' : false
+  }
 }
 
 function openSendTokens(open) {
@@ -277,7 +297,7 @@ watch(
           </button>
           <button
             v-if="walletBalance && !HIDE_ON_RAMP"
-            :disabled="!transakNetwork && !rampNetwork"
+            :disabled="!transakNetwork && !rampNetwork && onRampMoney === false"
             class="text-sm sm:text-xs font-semibold rounded-xl border-2 border-solid border-black dark:border-white flex-1 uppercase disabled:opacity-50"
             @click="handleBuy(true)"
           >
@@ -311,6 +331,7 @@ watch(
         v-if="showModal === 'buy'"
         :transak-network="transakNetwork?.value"
         :ramp-network="rampNetwork?.value"
+        :on-ramp-money="onRampMoney"
         @close="handleBuy(false)"
       />
     </Teleport>
diff --git a/src/components/WalletButton.vue b/src/components/WalletButton.vue
new file mode 100644
index 00000000..67016add
--- /dev/null
+++ b/src/components/WalletButton.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+
+import RequestCountBadge from '@/components/RequestCountBadge.vue'
+import { useAppStore } from '@/store/app'
+import { useRequestStore } from '@/store/request'
+import { useImage } from '@/utils/useImage'
+
+const appStore = useAppStore()
+const requestStore = useRequestStore()
+const getImage = useImage()
+const { walletPosition } = toRefs(appStore)
+
+function onClickOfButton() {
+  appStore.expandWallet = true
+}
+
+const requestCount = computed(() => {
+  return requestStore.pendingRequestsForApproval.length
+})
+
+const showRequestCountBadge = computed(() => {
+  return requestStore.areRequestsPendingForApproval
+})
+</script>
+
+<template>
+  <div class="h-full relative">
+    <div
+      v-if="showRequestCountBadge"
+      class="z-[999] absolute top-4"
+      :class="[walletPosition === 'right' ? 'left-2' : 'right-2']"
+    >
+      <RequestCountBadge :request-count="requestCount" />
+    </div>
+    <button
+      class="container | absolute bottom-0 w-14 h-11 flex justify-center items-center cursor-pointer"
+      :class="[
+        walletPosition === 'right' ? 'rounded-l-[10px]' : 'rounded-r-[10px]',
+        walletPosition === 'right' ? 'right-0' : 'left-0',
+      ]"
+      @click="onClickOfButton"
+    >
+      <img
+        :src="getImage('arrow-icon')"
+        alt="arrow icon"
+        :class="[walletPosition === 'right' ? 'rotate-90' : 'rotate-[270deg]']"
+      />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  background: var(--container-bg-color);
+}
+</style>
diff --git a/src/components/WalletHeader.vue b/src/components/WalletHeader.vue
new file mode 100644
index 00000000..e9ead287
--- /dev/null
+++ b/src/components/WalletHeader.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store/app'
+import { useImage } from '@/utils/useImage'
+
+const appStore = useAppStore()
+const getImage = useImage()
+
+const emits = defineEmits(['click'])
+
+function onLogoLoadingError(e) {
+  e.target.src = getImage('fallback-logo')
+}
+</script>
+
+<template>
+  <header class="flex justify-between rounded-t-xl">
+    <div class="flex space-x-3 items-center">
+      <img
+        :src="appStore.appLogo?.horizontal"
+        alt="app logo"
+        class="h-8"
+        @error="onLogoLoadingError"
+      />
+      <p>{{ appStore.name }}</p>
+    </div>
+    <button
+      class="h-auto"
+      :class="[appStore.compactMode ? 'rotate-180' : 'rotate-0']"
+      @click="emits('click')"
+    >
+      <img :src="getImage('arrow-icon')" alt="arrow" />
+    </button>
+  </header>
+</template>
+
+<style scoped>
+header {
+  padding: var(--p-300);
+  color: var(--fg-color);
+  background: var(--container-bg-color);
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 1de9a594..a6a7bf28 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,13 +10,14 @@ import Toast from 'vue-toastification'
 import App from '@/App.vue'
 import { router } from '@/routes/index'
 import { store } from '@/store'
+import { TOAST_TIME_OUT } from '@/utils/constants'
 
 import '@fontsource/montserrat/variable.css'
 import '@fontsource/sora/variable.css'
 import 'vue-toastification/dist/index.css'
 
 const toastOptions = {
-  timeout: 2500,
+  timeout: TOAST_TIME_OUT,
   closeOnClick: false,
   pauseOnFocusLoss: false,
   pauseOnHover: true,
diff --git a/src/models/Connection.ts b/src/models/Connection.ts
index 5485db1a..f0b5399f 100644
--- a/src/models/Connection.ts
+++ b/src/models/Connection.ts
@@ -1,7 +1,9 @@
-import { AppConfig, AppMode, RpcConfig } from '@arcana/auth'
+import { AppConfig, AppMode, Position, RpcConfig } from '@arcana/auth'
 import type { SocialLoginType } from '@arcana/auth-core'
 import { JsonRpcRequest, PendingJsonRpcResponse } from 'json-rpc-engine'
 
+type SDKVersion = 'v2' | 'v3'
+
 type RequestMethod =
   | 'eth_sign'
   | 'personal_sign'
@@ -66,12 +68,16 @@ type ParentConnectionApi = {
   getAppMode(): Promise<AppMode>
   triggerSocialLogin(type: SocialLoginType): void
   triggerPasswordlessLogin(email: string): void
+  setIframeStyle(styles: CSSStyleDeclaration): void
+  getWalletPosition(): Position
+  getSDKVersion(): SDKVersion
 }
 type InitParentConnectionApi = {
   getParentUrl(): string
   getLoginSource(): string
   getPasswordlessParams(): { sessionId: string; setToken: string }
   error(e: string): void
+  setIframeStyle(styles: CSSStyleDeclaration): void
 }
 
 export { requirePermission, PERMISSIONS }
@@ -82,4 +88,5 @@ export type {
   InitParentConnectionApi,
   RequestMethod,
   ProviderEvent,
+  SDKVersion,
 }
diff --git a/src/models/NFT.ts b/src/models/NFT.ts
index 992a3be4..1c1dfe1c 100644
--- a/src/models/NFT.ts
+++ b/src/models/NFT.ts
@@ -13,6 +13,8 @@ type NFTContract = {
     trait: string
     value: string
   }[]
+  tokenUrl: string
+  autodetected?: boolean
 }
 
 type NFT = NFTContract & { balance?: number }
diff --git a/src/pages/AddOrEditNFTScreen.vue b/src/pages/AddOrEditNFTScreen.vue
index 2b42444d..bf64fa1c 100644
--- a/src/pages/AddOrEditNFTScreen.vue
+++ b/src/pages/AddOrEditNFTScreen.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
+import { onBeforeMount, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 
@@ -9,6 +9,7 @@ import contractMap from '@/contract-map.json'
 import type { EthAssetContract } from '@/models/Asset'
 import { NFT } from '@/models/NFT'
 import { getNFTDetails, modifyIpfsUrl } from '@/services/getNFTDetails.service'
+import { NFTDB } from '@/services/nft.service'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
 import {
@@ -25,6 +26,8 @@ const router = useRouter()
 const toast = useToast()
 const getImage = useImage()
 const storage = getStorage()
+const rpcStore = useRpcStore()
+const userStore = useUserStore()
 
 type EditNFTProps = {
   collectionName?: string
@@ -34,7 +37,14 @@ type EditNFTProps = {
 
 const props = defineProps<EditNFTProps>()
 
-const canEdit = route.name === 'EditNft'
+let nftDB: NFTDB
+
+onBeforeMount(async () => {
+  nftDB = await NFTDB.create(storage.local, userStore.walletAddress)
+})
+
+const canEdit = false
+const canDelete = route.name === 'EditNft'
 const showAddressOutline = ref(false)
 
 const ethMainnetNftContracts: EthAssetContract[] = Object.keys(contractMap)
@@ -43,8 +53,6 @@ const ethMainnetNftContracts: EthAssetContract[] = Object.keys(contractMap)
     address,
   }))
   .filter((contract) => contract.erc721 === true || contract.erc1155 === true)
-const rpcStore = useRpcStore()
-const userStore = useUserStore()
 
 const loader = reactive({
   show: false,
@@ -92,12 +100,7 @@ async function handleSubmit() {
     return toast.error('Token belongs to Ethereum Mainnet')
   }
 
-  const storedNftStrings = storage.local.getItem(
-    `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`
-  )
-  let storedNfts: NFT[] = storedNftStrings?.length
-    ? JSON.parse(storedNftStrings)
-    : []
+  const storedNfts = nftDB.getNFTs(Number(rpcStore.selectedChainId))
 
   const existingStoredNft = storedNfts.find(
     (nft) =>
@@ -166,43 +169,16 @@ async function handleSubmit() {
         animationUrl: sanitizedAnimationUrl,
         attributes,
         balance: hasOwnership.balance,
+        tokenUrl: tokenUri,
       }
 
-      if (canEdit) {
-        storedNfts = storedNfts.filter(
-          (nft) =>
-            nft.address !== props.address || nft.tokenId !== props.tokenId
-        )
-      }
-      toast.success('NFT saved')
-      storedNfts.push(nftDetails)
-      storedNfts.sort((nft1, nft2) => {
-        if (nft1.tokenId > nft2.tokenId) {
-          return 1
-        }
-        if (nft2.tokenId > nft1.tokenId) {
-          return -1
-        }
-        return 0
-      })
-      storedNfts.sort((nft1, nft2) => {
-        if (nft1.collectionName > nft2.collectionName) {
-          return 1
-        }
-        if (nft2.collectionName > nft1.collectionName) {
-          return -1
-        }
-        return 0
-      })
+      nftDB.addNFT(nftDetails, Number(rpcStore.selectedChainId))
+      toast.success('NFT added')
 
-      storage.local.setItem(
-        `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`,
-        JSON.stringify(storedNfts)
-      )
       router.back()
     } catch (e) {
       console.error(e)
-      toast.error("Couldn't fetch NFT details")
+      toast.error(e)
     }
   } else {
     toast.error('Invalid token ID')
@@ -213,40 +189,15 @@ async function handleSubmit() {
 function handleDeleteNft() {
   loader.show = true
   loader.message = 'Deleting NFT...'
-  const storedNftStrings = storage.local.getItem(
-    `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`
-  )
-  let storedNfts: NFT[] = storedNftStrings?.length
-    ? JSON.parse(storedNftStrings)
-    : []
-
-  storedNfts = storedNfts.filter(
-    (nft) => nft.address !== props.address || nft.tokenId !== props.tokenId
-  )
-
-  storedNfts.sort((nft1, nft2) => {
-    if (nft1.tokenId > nft2.tokenId) {
-      return 1
-    }
-    if (nft2.tokenId > nft1.tokenId) {
-      return -1
-    }
-    return 0
-  })
-  storedNfts.sort((nft1, nft2) => {
-    if (nft1.collectionName > nft2.collectionName) {
-      return 1
-    }
-    if (nft2.collectionName > nft1.collectionName) {
-      return -1
-    }
-    return 0
-  })
-
-  storage.local.setItem(
-    `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`,
-    JSON.stringify(storedNfts)
+  const storedNfts = nftDB.getNFTs(Number(rpcStore.selectedChainId))
+  const existingNft = storedNfts.find(
+    (nft) =>
+      nft.address.toLowerCase() === nftContract.address.toLowerCase() &&
+      nft.tokenId.toLowerCase() === nftContract.tokenId.toLowerCase()
   )
+  if (existingNft)
+    nftDB.removeNFT(existingNft, Number(rpcStore.selectedChainId))
+  toast.success('NFT deleted')
   router.back()
   loader.show = false
 }
@@ -278,7 +229,7 @@ watch(
       <AppLoader :message="loader.message" />
     </div>
     <div class="p-4 sm:p-2 h-full flex flex-col overflow-auto">
-      <div v-if="canEdit" class="flex justify-between items-start">
+      <div v-if="canDelete" class="flex justify-between items-start">
         <h2 class="font-semibold mb-5 add-token__title">Edit NFT</h2>
         <img
           :src="getImage('trash-icon')"
diff --git a/src/pages/MFARestoreScreen.vue b/src/pages/MFARestoreScreen.vue
index 195e08c6..f8467bcf 100644
--- a/src/pages/MFARestoreScreen.vue
+++ b/src/pages/MFARestoreScreen.vue
@@ -155,7 +155,7 @@ async function returnToParent(key: string) {
       }
     )
   } else {
-    if (loginSrc === 'rn') {
+    if (loginSrc === 'rn' || loginSrc === 'flutter' || loginSrc === 'unity') {
       await connectionToParent.goToWallet()
       return
     }
diff --git a/src/pages/ManageNFTScreen.vue b/src/pages/ManageNFTScreen.vue
index e5837faf..7354ffc7 100644
--- a/src/pages/ManageNFTScreen.vue
+++ b/src/pages/ManageNFTScreen.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { onBeforeMount, reactive, ref, type Ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import AppLoader from '@/components/AppLoader.vue'
 import { NFT } from '@/models/NFT'
+import { NFTDB } from '@/services/nft.service'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
 import { getStorage } from '@/utils/storageWrapper'
@@ -18,12 +19,15 @@ const loader = reactive({
   show: false,
   message: '',
 })
+const storage = getStorage()
 
-const storedNftsString = getStorage().local.getItem(
-  `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`
-)
+let nftDB: NFTDB
+const nfts: Ref<NFT[]> = ref([])
 
-const nfts: NFT[] = storedNftsString?.length ? JSON.parse(storedNftsString) : []
+onBeforeMount(async () => {
+  nftDB = await NFTDB.create(storage.local, userStore.walletAddress)
+  nfts.value = nftDB.getNFTs(Number(rpcStore.selectedChainId))
+})
 
 function handleClose() {
   router.back()
@@ -32,6 +36,19 @@ function handleClose() {
 function handleAddToken() {
   router.push({ name: 'AddNft' })
 }
+
+function handleEditToken(nft: NFT) {
+  if (!nft.autodetected) {
+    router.push({
+      name: 'EditNft',
+      params: {
+        address: nft.address,
+        collectionName: nft.collectionName,
+        tokenId: nft.tokenId,
+      },
+    })
+  }
+}
 </script>
 
 <template>
@@ -55,22 +72,20 @@ function handleAddToken() {
               v-for="nft in nfts"
               :key="`nft-${nft.address}-${nft.tokenId}`"
               :title="`${nft.collectionName} (${nft.tokenId}) - ${nft.name}`"
-              class="cursor-pointer select-none p-3 rounded-[10px] flex justify-between gap-1 hover:bg-zinc-200 dark:hover:bg-zinc-800 text-black dark:text-white nft-container"
-              @click.stop="
-                router.push({
-                  name: 'EditNft',
-                  params: {
-                    address: nft.address,
-                    collectionName: nft.collectionName,
-                    tokenId: nft.tokenId,
-                  },
-                })
-              "
+              class="select-none p-3 rounded-[10px] flex justify-between gap-1 hover:bg-zinc-200 dark:hover:bg-zinc-800 text-black dark:text-white nft-container"
+              :class="{
+                'cursor-pointer': !nft.autodetected,
+              }"
+              @click.stop="handleEditToken(nft)"
             >
               <span class="overflow-hidden whitespace-nowrap text-ellipsis">
                 {{ nft.collectionName }} ({{ nft.tokenId }})
               </span>
-              <img :src="getImage('edit-icon')" class="opacity-0" />
+              <img
+                v-if="!nft.autodetected"
+                :src="getImage('edit-icon')"
+                class="opacity-0"
+              />
             </div>
           </div>
           <div v-else class="flex flex-col flex-grow">
diff --git a/src/pages/RequestsScreen.vue b/src/pages/RequestsScreen.vue
index 4c0b54c9..245d47e7 100644
--- a/src/pages/RequestsScreen.vue
+++ b/src/pages/RequestsScreen.vue
@@ -7,6 +7,7 @@ import ChargeInfo from '@/components/ChargeInfo.vue'
 import SendTransaction from '@/components/SendTransaction.vue'
 import SignMessage from '@/components/SignMessage.vue'
 import SignMessageNoRequests from '@/components/signMessageNoRequests.vue'
+import { useAppStore } from '@/store/app'
 import { useRequestStore } from '@/store/request'
 import { useRpcStore } from '@/store/rpc'
 import { useImage } from '@/utils/useImage'
@@ -15,6 +16,7 @@ const getImage = useImage()
 const requestStore = useRequestStore()
 const toast = useToast()
 const rpcStore = useRpcStore()
+const appStore = useAppStore()
 
 const { pendingRequest, areRequestsPendingForApproval } = toRefs(requestStore)
 
@@ -51,39 +53,48 @@ function handleGasPriceInput({ value, requestId }) {
 
 <template>
   <div v-if="areRequestsPendingForApproval" class="flex flex-col h-full gap-2">
-    <div class="wallet__card rounded-[10px] flex flex-1 flex-col h-[80%]">
-      <div v-if="pendingRequest" class="sign__messages-container">
-        <div
-          :key="Number(pendingRequest.request.id)"
-          class="sign__message-container"
-        >
-          <SendTransaction
-            v-if="isSendTransactionRequest(pendingRequest.request.id)"
-            :request="pendingRequest"
-            @gas-price-input="handleGasPriceInput"
-          />
-          <SignMessage v-else :request="pendingRequest" />
-          <div v-if="rpcStore.isArcanaNetwork" class="sign__message-footer">
-            <p class="sign__message-info-text">
-              You are not going to be charged!
-              <Popper arrow hover>
-                <button>
-                  <img
-                    class="sign__message-info-icon"
-                    :src="getImage('info-icon')"
-                  />
-                </button>
-                <template #content>
-                  <ChargeInfo />
-                </template>
-              </Popper>
-            </p>
-          </div>
+    <div
+      v-if="pendingRequest"
+      class="sign__messages-container rounded-[10px] flex flex-1 flex-col h-[80%]"
+      :class="{ wallet__card: !appStore.compactMode }"
+    >
+      <div
+        :key="Number(pendingRequest.request.id)"
+        class="sign__message-container"
+      >
+        <SendTransaction
+          v-if="isSendTransactionRequest(pendingRequest.request.id)"
+          :request="pendingRequest"
+          @gas-price-input="handleGasPriceInput"
+          @reject="() => onRejectClick(pendingRequest.request.id)"
+          @approve="() => onApproveClick(pendingRequest.request.id)"
+        />
+        <SignMessage
+          v-else
+          :request="pendingRequest"
+          @reject="() => onRejectClick(pendingRequest.request.id)"
+          @approve="() => onApproveClick(pendingRequest.request.id)"
+        />
+        <div v-if="rpcStore.isArcanaNetwork" class="sign__message-footer">
+          <p class="sign__message-info-text">
+            You are not going to be charged!
+            <Popper arrow hover>
+              <button>
+                <img
+                  class="sign__message-info-icon"
+                  :src="getImage('info-icon')"
+                />
+              </button>
+              <template #content>
+                <ChargeInfo />
+              </template>
+            </Popper>
+          </p>
         </div>
       </div>
     </div>
     <div
-      v-if="pendingRequest"
+      v-if="pendingRequest && !appStore.compactMode"
       class="sign__message-button-container flex justify-around -m-4 mt-0 p-4"
     >
       <button
diff --git a/src/pages/SelectNftScreen.vue b/src/pages/SelectNftScreen.vue
index 831991d4..c03d42f0 100644
--- a/src/pages/SelectNftScreen.vue
+++ b/src/pages/SelectNftScreen.vue
@@ -4,9 +4,11 @@ import { useRouter } from 'vue-router'
 
 import SendNft from '@/components/SendNft.vue'
 import type { NFT } from '@/models/NFT'
+import { NFTDB } from '@/services/nft.service'
 import { useModalStore } from '@/store/modal'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
+import { getDetailedNFTs } from '@/utils/nftUtils'
 import { getStorage } from '@/utils/storageWrapper'
 
 type ModalState = 'send-nft' | false
@@ -20,37 +22,11 @@ const showModal: Ref<ModalState> = ref(false)
 const modalStore = useModalStore()
 const searchQuery = ref('')
 const filteredNfts: Ref<NFT[]> = ref([])
-
-function fetchStoredNfts(): NFT[] {
-  const storedNftsString = getStorage().local.getItem(
-    `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`
-  )
-  if (storedNftsString) {
-    return (JSON.parse(storedNftsString) as NFT[]).filter(
-      (contract) => contract.type === 'erc721' || contract.type === 'erc1155'
-    )
-  } else {
-    return []
-  }
-}
+const storage = getStorage()
+let nftDB: NFTDB
 
 async function getNFTAssets() {
-  nfts.value = []
-  const storedNfts = fetchStoredNfts()
-  storedNfts.forEach((nft) => {
-    nfts.value.push({
-      type: nft.type,
-      name: nft.name,
-      balance: nft.balance,
-      imageUrl: nft.imageUrl,
-      animationUrl: nft.animationUrl,
-      description: nft.description,
-      collectionName: nft.collectionName,
-      tokenId: nft.tokenId,
-      address: nft.address,
-      attributes: nft.attributes,
-    })
-  })
+  nfts.value = await getDetailedNFTs(nftDB, Number(rpcStore.selectedChainId))
   filteredNfts.value = [...nfts.value]
 }
 
@@ -82,7 +58,10 @@ watch(
   }
 )
 
-onMounted(getNFTAssets)
+onMounted(async () => {
+  nftDB = await NFTDB.create(storage.local, userStore.walletAddress)
+  await getNFTAssets()
+})
 
 rpcStore.$subscribe(getNFTAssets)
 </script>
diff --git a/src/pages/backCompat/initPage.vue b/src/pages/backCompat/initPage.vue
index 20214df5..2dffe077 100644
--- a/src/pages/backCompat/initPage.vue
+++ b/src/pages/backCompat/initPage.vue
@@ -9,7 +9,7 @@ import type { InitParentConnectionApi } from '@/models/Connection'
 import { useAppStore } from '@/store/app'
 import { useUserStore } from '@/store/user'
 import { createInitParentConnection } from '@/utils/createParentConnection'
-import emailScheme from '@/utils/emailSheme'
+import emailScheme from '@/utils/emailScheme'
 import { getAuthProvider } from '@/utils/getAuthProvider'
 import { getStorage, initStorage } from '@/utils/storageWrapper'
 
diff --git a/src/pages/backCompat/signIn.vue b/src/pages/backCompat/signIn.vue
index c73c9c44..6e65ac98 100644
--- a/src/pages/backCompat/signIn.vue
+++ b/src/pages/backCompat/signIn.vue
@@ -14,7 +14,7 @@ import type { ParentConnectionApi } from '@/models/Connection'
 import { useAppStore } from '@/store/app'
 import { useUserStore } from '@/store/user'
 import { createParentConnection } from '@/utils/createParentConnection'
-import emailScheme from '@/utils/emailSheme'
+import emailScheme from '@/utils/emailScheme'
 import { getAuthProvider } from '@/utils/getAuthProvider'
 import { getStorage, initStorage } from '@/utils/storageWrapper'
 
diff --git a/src/pages/homeScreen.vue b/src/pages/homeScreen.vue
index 118385e8..85d2d8c4 100644
--- a/src/pages/homeScreen.vue
+++ b/src/pages/homeScreen.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { ethers } from 'ethers'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 
 import AppLoader from '@/components/AppLoader.vue'
 import AssetsView from '@/components/AssetsView.vue'
 import UserWallet from '@/components/UserWallet.vue'
 import { useRpcStore } from '@/store/rpc'
-import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 
 const rpcStore = useRpcStore()
 const walletBalance = ref('')
@@ -17,7 +16,6 @@ const loader = ref({
   show: false,
   message: '',
 })
-let balancePolling
 
 function showLoader(message) {
   loader.value.show = true
@@ -34,24 +32,20 @@ onMounted(() => {
     if (rpcStore.walletBalanceChainId !== rpcStore.selectedChainId) {
       handleChainChange()
     } else {
-      getWalletBalance()
+      rpcStore.getWalletBalance()
     }
-    balancePolling = setInterval(getWalletBalance, 4000)
+    rpcStore.setUpBalancePolling()
   } catch (err) {
     console.log({ err })
   }
 })
 
-onBeforeUnmount(() => {
-  if (balancePolling) {
-    clearInterval(balancePolling)
-  }
-})
+onBeforeUnmount(rpcStore.cleanUpBalancePolling)
 
 async function handleChainChange() {
   showLoader('Fetching Wallet Balance...')
   try {
-    await getWalletBalance()
+    await rpcStore.getWalletBalance()
   } catch (err) {
     console.log({ err })
   } finally {
@@ -59,19 +53,10 @@ async function handleChainChange() {
   }
 }
 
-async function getWalletBalance() {
-  const accountHandler = getRequestHandler().getAccountHandler()
-  if (accountHandler) {
-    const balance = (await accountHandler.getBalance()) || '0'
-    rpcStore.setWalletBalance(balance.toString())
-    walletBalance.value = ethers.utils.formatEther(balance.toString())
-  }
-}
-
 async function handleRefresh() {
   showLoader('Refreshing wallet balance...')
   try {
-    await getWalletBalance()
+    await rpcStore.getWalletBalance()
   } catch (err) {
     console.log({ err })
   } finally {
@@ -84,6 +69,15 @@ rpcStore.$subscribe(() => {
     handleChainChange()
   }
 })
+
+watch(
+  () => rpcStore.walletBalance,
+  () => {
+    if (rpcStore.walletBalance) {
+      walletBalance.value = ethers.utils.formatEther(rpcStore.walletBalance)
+    }
+  }
+)
 </script>
 
 <template>
@@ -104,9 +98,3 @@ rpcStore.$subscribe(() => {
     </div>
   </div>
 </template>
-
-<style scoped>
-.section-title {
-  font-size: var(--fs-400);
-}
-</style>
diff --git a/src/pages/initPageV2.vue b/src/pages/initPageV2.vue
index a744f8f8..2a91b37b 100644
--- a/src/pages/initPageV2.vue
+++ b/src/pages/initPageV2.vue
@@ -9,7 +9,7 @@ import type { InitParentConnectionApi } from '@/models/Connection'
 import { useAppStore } from '@/store/app'
 import { useUserStore } from '@/store/user'
 import { createInitParentConnection } from '@/utils/createParentConnection'
-import emailScheme from '@/utils/emailSheme'
+import emailScheme from '@/utils/emailScheme'
 import { getAuthProvider } from '@/utils/getAuthProvider'
 import { getStorage, initStorage } from '@/utils/storageWrapper'
 
diff --git a/src/pages/loggedInView.vue b/src/pages/loggedInView.vue
index f805701d..6d730176 100644
--- a/src/pages/loggedInView.vue
+++ b/src/pages/loggedInView.vue
@@ -8,7 +8,7 @@ import { useRouter, onBeforeRouteLeave } from 'vue-router'
 
 import AppLoader from '@/components/AppLoader.vue'
 import type { ParentConnectionApi } from '@/models/Connection'
-import { CHAIN_LIST } from '@/models/RpcConfigList'
+import { getEnabledChainList } from '@/services/chainlist.service'
 import { useAppStore } from '@/store/app'
 import { useParentConnectionStore } from '@/store/parentConnection'
 import { useRequestStore } from '@/store/request'
@@ -44,6 +44,7 @@ const loader = ref({
 })
 let parentConnection: Connection<ParentConnectionApi>
 const storage = getStorage()
+const enabledChainList = ref([])
 
 onBeforeMount(() => {
   userStore.hasMfa =
@@ -51,30 +52,36 @@ onBeforeMount(() => {
 })
 
 onMounted(async () => {
-  setRpcConfigs()
-  initKeeper()
-  connectToParent()
-  await setTheme()
-  await getRpcConfig()
-  await getAccountDetails()
-  await setMFABannerState()
-  router.push({ name: 'home' })
-  const requestHandler = getRequestHandler()
-  if (requestHandler) {
-    requestHandler.setConnection(parentConnection)
-    const { chainId, ...rpcConfig } = rpcStore.selectedRpcConfig
-    const selectedChainId = Number(chainId)
-    await requestHandler.setRpcConfig({
-      chainId: selectedChainId,
-      ...rpcConfig,
-    })
-    const parentConnectionInstance = await parentConnection.promise
-    parentConnectionInstance.onEvent('connect', {
-      chainId: selectedChainId,
-    })
-    watchRequestQueue(requestHandler)
+  try {
+    await setRpcConfigs()
+    await getRpcConfig()
+    initKeeper()
+    connectToParent()
+    await getRpcConfigFromParent()
+    await setTheme()
+    await getAccountDetails()
+    appStore.showWallet = true
+    await setMFABannerState()
+    const requestHandler = getRequestHandler()
+    if (requestHandler) {
+      requestHandler.setConnection(parentConnection)
+      const { chainId, ...rpcConfig } = rpcStore.selectedRpcConfig
+      const selectedChainId = Number(chainId)
+      await requestHandler.setRpcConfig({
+        chainId: selectedChainId,
+        ...rpcConfig,
+      })
+      const parentConnectionInstance = await parentConnection.promise
+      parentConnectionInstance.onEvent('connect', {
+        chainId: selectedChainId,
+      })
+      watchRequestQueue(requestHandler)
+    }
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loader.value.show = false
   }
-  loader.value.show = false
 })
 
 async function setMFABannerState() {
@@ -100,7 +107,12 @@ async function setMFABannerState() {
   const hasMfaDnd = mfaDnd && mfaDnd === '1'
   const hasMfaSkip =
     mfaSkipUntil && loginCount && Number(loginCount) < Number(mfaSkipUntil)
-  if (!userStore.hasMfa && !hasMfaDnd && !hasMfaSkip) {
+  if (requestStore.areRequestsPendingForApproval) {
+    router.push({ name: 'requests', params: { appId: appStore.id } })
+  } else {
+    router.push({ name: 'home' })
+  }
+  if (!userStore.hasMfa && !hasMfaDnd && !hasMfaSkip && !appStore.compactMode) {
     showMfaBanner.value = true
   }
 }
@@ -150,6 +162,7 @@ function connectToParent() {
     getPublicKey: handleGetPublicKey,
     triggerLogout: handleLogout,
     getUserInfo,
+    expandWallet: () => (appStore.expandWallet = true),
   })
   parentConnectionStore.setParentConnection(parentConnection)
 }
@@ -158,11 +171,24 @@ async function setTheme() {
   if (parentConnection) {
     const parentConnectionInstance = await parentConnection.promise
     const {
-      themeConfig: { theme },
+      themeConfig: {
+        theme,
+        assets: { logo },
+      },
       name: appName,
     } = await parentConnectionInstance.getAppConfig()
 
+    if (parentConnectionInstance.getSDKVersion) {
+      appStore.sdkVersion = await parentConnectionInstance.getSDKVersion()
+    }
+
+    if (appStore.sdkVersion === 'v3') {
+      const walletPosition = await parentConnectionInstance.getWalletPosition()
+      appStore.setWalletPosition(walletPosition)
+    }
+
     appStore.setTheme(theme)
+    appStore.setAppLogo(logo)
     appStore.setName(appName)
     const htmlEl = document.getElementsByTagName('html')[0]
     if (theme === 'dark') htmlEl.classList.add(theme)
@@ -183,45 +209,60 @@ async function setAppMode(walletType, parentConnectionInstance) {
   appStore.setAppMode(validAppMode as AppMode)
 }
 
-async function handleLogout(isV2 = false) {
+async function handleLogout() {
+  appStore.sdkVersion = 'v2'
   if (parentConnection) {
     const parentConnectionInstance = await parentConnection.promise
     const authProvider = await getAuthProvider(appStore.id as string)
     await userStore.handleLogout(authProvider)
     parentConnectionInstance?.onEvent('disconnect')
-    setTimeout(() => {
-      const route = isV2 ? `/${appStore.id}/v2/login` : `/${appStore.id}/login`
-      router.push(route)
-    })
+    appStore.showWallet = false
   }
 }
 
-function setRpcConfigs() {
-  if (!rpcStore.rpcConfigs) rpcStore.setRpcConfigs(CHAIN_LIST)
+async function setRpcConfigs() {
+  const { chains } = await getEnabledChainList(appStore.id)
+  enabledChainList.value = chains.map((chain) => ({
+    chainId: chain.chain_id,
+    rpcUrls: [chain.rpc_url],
+    chainName: chain.name,
+    chainType: chain.chain_type,
+    blockExplorerUrls: [chain.exp_url],
+    isCustom: false,
+    nativeCurrency: {
+      symbol: chain.currency,
+      decimals: 18,
+    },
+    defaultChain: chain.default_chain,
+  }))
+  if (!rpcStore.rpcConfigs) rpcStore.setRpcConfigs(enabledChainList.value)
 }
 
 async function getRpcConfig() {
   try {
-    if (parentConnection) {
-      const parentConnectionInstance = await parentConnection.promise
-      let rpcConfig = await parentConnectionInstance.getRpcConfig()
-      if ([40404, 40405].includes(Number(rpcConfig.chainId))) {
-        rpcConfig = CHAIN_LIST[0]
-      }
-      if (rpcConfig) {
-        const selectedChain = CHAIN_LIST.find(
-          (chain) => Number(chain.chainId) === Number(rpcConfig.chainId)
-        )
-        rpcStore.setSelectedRPCConfig({
-          ...rpcConfig,
-          favicon: selectedChain ? selectedChain.favicon : 'blockchain-icon',
-          isCustom: false,
-        })
-        rpcStore.setRpcConfig({
-          ...rpcConfig,
-          favicon: selectedChain ? selectedChain.favicon : 'blockchain-icon',
-          isCustom: false,
-        })
+    let rpcConfig =
+      enabledChainList.value.find((chain) => chain.defaultChain) ||
+      enabledChainList.value[0] // some time, chain list don't have default chain
+    rpcStore.setSelectedRPCConfig(rpcConfig)
+    rpcStore.setRpcConfig(rpcConfig)
+    await getRequestHandler().setRpcConfig(rpcConfig)
+  } catch (err) {
+    console.log({ err })
+  }
+}
+
+async function getRpcConfigFromParent() {
+  try {
+    const parentConnectionInstance = await parentConnection.promise
+    const rpcConfig = await parentConnectionInstance.getRpcConfig()
+    if (rpcConfig) {
+      const chainId = Number(rpcConfig.chainId)
+      const chainToBeSet = enabledChainList.value.find(
+        (chain) => chain.chainId === chainId
+      )
+      if (chainToBeSet) {
+        rpcStore.setSelectedRPCConfig(chainToBeSet)
+        rpcStore.setRpcConfig(chainToBeSet)
       }
     }
   } catch (err) {
diff --git a/src/pages/loginRedirect.vue b/src/pages/loginRedirect.vue
index c0b1dffb..11326bdd 100644
--- a/src/pages/loginRedirect.vue
+++ b/src/pages/loginRedirect.vue
@@ -87,7 +87,11 @@ async function init() {
           }
         )
       } else {
-        if (loginSrc === 'rn' || loginSrc === 'flutter') {
+        if (
+          loginSrc === 'rn' ||
+          loginSrc === 'flutter' ||
+          loginSrc === 'unity'
+        ) {
           await connectionToParent.goToWallet()
           return
         }
diff --git a/src/pages/profileScreen.vue b/src/pages/profileScreen.vue
index d07a6310..1715173e 100644
--- a/src/pages/profileScreen.vue
+++ b/src/pages/profileScreen.vue
@@ -60,6 +60,7 @@ async function handleLogout() {
   const parentConnectionInstance = await parentConnection?.promise
   const authProvider = await getAuthProvider(appId)
   await user.handleLogout(authProvider)
+  appStore.showWallet = false
   parentConnectionInstance?.onEvent('disconnect')
 }
 
diff --git a/src/pages/signInV2.vue b/src/pages/signInV2.vue
index d773e544..83e83dc1 100644
--- a/src/pages/signInV2.vue
+++ b/src/pages/signInV2.vue
@@ -13,7 +13,7 @@ import { useAppStore } from '@/store/app'
 import { useUserStore } from '@/store/user'
 import { GATEWAY_URL, AUTH_NETWORK } from '@/utils/constants'
 import { createParentConnection } from '@/utils/createParentConnection'
-import emailScheme from '@/utils/emailSheme'
+import emailScheme from '@/utils/emailScheme'
 import { getAuthProvider } from '@/utils/getAuthProvider'
 import { PasswordlessLoginHandler } from '@/utils/PasswordlessLoginHandler'
 import { getStorage, initStorage } from '@/utils/storageWrapper'
diff --git a/src/services/chainlist.service.ts b/src/services/chainlist.service.ts
new file mode 100644
index 00000000..2f0eecbe
--- /dev/null
+++ b/src/services/chainlist.service.ts
@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+const gatewayUrl = process.env.VUE_APP_WALLET_GATEWAY
+
+const chainListAPI = '/api/v1/chains'
+
+async function getEnabledChainList(appId) {
+  const url = new URL(`${chainListAPI}/${appId}/`, gatewayUrl)
+  return (await axios.get(url.toString())).data
+}
+
+export { getEnabledChainList }
diff --git a/src/services/getNFTDetails.service.ts b/src/services/getNFTDetails.service.ts
index f00e868c..7f779fd4 100644
--- a/src/services/getNFTDetails.service.ts
+++ b/src/services/getNFTDetails.service.ts
@@ -16,7 +16,13 @@ async function getNFTDetails(tokenUri: string, tokenId: string) {
   } else {
     url = tokenUri
   }
-  return (await axios.get(url)).data
+
+  try {
+    return (await axios.get(url)).data
+  } catch (e) {
+    console.error(e)
+    return null
+  }
 }
 
 function modifyIpfsUrl(url: string) {
diff --git a/src/services/nft.service.ts b/src/services/nft.service.ts
new file mode 100644
index 00000000..1a0bf7a1
--- /dev/null
+++ b/src/services/nft.service.ts
@@ -0,0 +1,210 @@
+import axios from 'axios'
+
+import type { NFT } from '@/models/NFT'
+import type { StorageWrapper } from '@/utils/storageWrapper'
+
+const NFT_DB_KEY = 'nft_list'
+const NFT_PAGE_SIZE = 50
+
+type NFTItem = NFT & {
+  autodetected: boolean
+  chainId: number
+}
+
+type AnkrTrait = {
+  trait_type: string
+  value: string
+}
+
+type AnkrNFT = {
+  blockchain: string
+  collectionName: string
+  contractAddress: string
+  contractType: string
+  imageUrl: string
+  name: string
+  quantity: string
+  symbol: string
+  tokenId: string
+  tokenUrl: string
+  animationUrl?: string
+  traits?: AnkrTrait[]
+  nextPageToken: string
+}
+
+const ANKR_BLOCKCHAIN_TO_CHAIN_ID = new Map([
+  ['arbitrum', 42161],
+  ['avalanche', 43114],
+  ['avalanche_fuji', 43113],
+  ['bsc', 56],
+  ['eth', 1],
+  ['eth_goerli', 5],
+  ['fantom', 250],
+  ['optimism', 10],
+  ['polygon', 137],
+  ['polygon_mumbai', 80001],
+  ['syscoin', 57],
+])
+
+class NFTDB {
+  private readonly storage: StorageWrapper
+  private readonly walletAddress: string
+  public list: NFTItem[]
+
+  static async create(storage: StorageWrapper, walletAddress: string) {
+    let existingNfts: NFTItem[]
+    const realKey = `${walletAddress}-${NFT_DB_KEY}`
+
+    const nftsInStorage = storage.getItem(realKey)
+    existingNfts = nftsInStorage ? JSON.parse(nftsInStorage) : []
+    existingNfts = existingNfts.filter((nft) => !nft.autodetected)
+
+    try {
+      let npToken: null | boolean | string = null
+      while (npToken !== false) {
+        const resp = await axios({
+          method: 'POST',
+          baseURL: process.env.VUE_APP_ANKR_PREMIUM_API_URL,
+          url: '',
+          params: {
+            ankr_getNFTsByOwner: '',
+          },
+          data: {
+            id: 1,
+            jsonrpc: '2.0',
+            method: 'ankr_getNFTsByOwner',
+            params: {
+              blockchain: Array.from(ANKR_BLOCKCHAIN_TO_CHAIN_ID.keys()),
+              walletAddress,
+              pageSize: NFT_PAGE_SIZE,
+              pageToken:
+                npToken != null || npToken != false ? npToken : undefined,
+            },
+          },
+        })
+
+        const result = resp.data.result?.assets as AnkrNFT[]
+        for (const r of result) {
+          let contractType
+
+          switch (r.contractType) {
+            case 'ERC721':
+              contractType = 'erc721'
+              break
+            case 'ERC1155':
+              contractType = 'erc1155'
+              break
+            default:
+              continue
+          }
+          const chainId = ANKR_BLOCKCHAIN_TO_CHAIN_ID.get(r.blockchain)
+          if (chainId == null) {
+            continue
+          }
+
+          existingNfts.push({
+            type: contractType,
+            address: r.contractAddress,
+            tokenId: r.tokenId,
+            collectionName: r.collectionName,
+            name: r.name,
+            imageUrl: r.imageUrl,
+            attributes: r.traits?.map((k) => ({
+              trait: k.trait_type,
+              value: k.value,
+            })),
+            autodetected: true,
+            chainId,
+            tokenUrl: r.tokenUrl,
+            balance: r.quantity ? Number(r.quantity) : undefined,
+          })
+        }
+        npToken =
+          resp.data.result?.nextPageToken == ''
+            ? false
+            : resp.data.result.nextPageToken
+      }
+    } catch (e) {
+      console.error('Caught error while trying to get NFTs:', e)
+    }
+
+    storage.setItem(realKey, JSON.stringify(existingNfts))
+
+    return new NFTDB(storage, walletAddress, existingNfts)
+  }
+
+  constructor(
+    storage: StorageWrapper,
+    walletAddress: string,
+    initialList: NFTItem[]
+  ) {
+    this.storage = storage
+    this.list = initialList
+    this.walletAddress = walletAddress
+  }
+
+  private get storageKey() {
+    return `${this.walletAddress}-${NFT_DB_KEY}`
+  }
+
+  private synchronizeToStorage() {
+    this.storage.setItem(this.storageKey, JSON.stringify(this.list))
+  }
+
+  public getNFTs(chainId: number): NFTItem[] {
+    return this.list.filter((x) => x.chainId == chainId)
+  }
+
+  public addNFT(item: NFT, chainId: number) {
+    const index = this.list.findIndex((x) => {
+      return (
+        x.chainId === chainId &&
+        x.address.toLowerCase() === item.address.toLowerCase() &&
+        x.tokenId === item.tokenId
+      )
+    })
+    if (index !== -1) {
+      throw new Error('NFT already exists')
+    }
+    this.list.push({
+      ...item,
+      autodetected: false,
+      chainId,
+    })
+    this.synchronizeToStorage()
+  }
+
+  public updateNFT(item: NFT, chainId) {
+    const act = this.list.find((x) => {
+      return (
+        x.chainId === chainId &&
+        x.address.toLowerCase() === item.address.toLowerCase() &&
+        x.tokenId === item.tokenId
+      )
+    })
+    if (act == null) {
+      throw new Error('Could not find the relevant NFT')
+    }
+    for (const k of Object.keys(item)) {
+      act[k] = item[k]
+    }
+    this.synchronizeToStorage()
+  }
+
+  public removeNFT(item: NFT, chainId: number) {
+    const index = this.list.findIndex((x) => {
+      return (
+        x.chainId === chainId &&
+        x.address.toLowerCase() === item.address.toLowerCase() &&
+        x.tokenId === item.tokenId
+      )
+    })
+    if (index === -1) {
+      throw new Error('Could not find the relevant NFT')
+    }
+    this.list.splice(index, 1)
+    this.synchronizeToStorage()
+  }
+}
+
+export { NFTDB }
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 84659414..7b4a2653 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -24,6 +24,8 @@ declare namespace NodeJS {
     VUE_APP_RAMP_API_KEY: string
     VUE_APP_RAMP_ENV: 'STAGING' | 'PRODUCTION'
     VUE_APP_HIDE_ON_RAMP: 'true' | undefined
+    VUE_APP_ANKR_PREMIUM_API_URL: string
+    VUE_APP_ON_RAMP_MONEY_URL: string
   }
 }
 
diff --git a/src/store/activities.ts b/src/store/activities.ts
index c382730b..b93d6f34 100644
--- a/src/store/activities.ts
+++ b/src/store/activities.ts
@@ -96,7 +96,7 @@ type CustomTokenActivity = {
 
 type TransactionFetchParams = {
   txHash: string
-  chainId: ChainId
+  chainId: ChainId | undefined
   customToken?: CustomTokenActivity
   recipientAddress?: string
 }
@@ -160,11 +160,13 @@ export const useActivitiesStore = defineStore('activitiesStore', {
     },
   },
   actions: {
-    saveActivity(chainId: ChainId, activity: Activity) {
-      if (this.activitiesByChainId[chainId]) {
-        this.activitiesByChainId[chainId].unshift(activity)
-      } else {
-        this.activitiesByChainId[chainId] = [activity]
+    saveActivity(chainId: ChainId | undefined, activity: Activity) {
+      if (chainId) {
+        if (this.activitiesByChainId[chainId]) {
+          this.activitiesByChainId[chainId].unshift(activity)
+        } else {
+          this.activitiesByChainId[chainId] = [activity]
+        }
       }
     },
     updateActivityStatusByTxHash(
@@ -213,7 +215,7 @@ export const useActivitiesStore = defineStore('activitiesStore', {
         const txInterval = setInterval(async () => {
           const remoteTransaction =
             await accountHandler.provider.getTransaction(txHash)
-          if (remoteTransaction.blockNumber) {
+          if (remoteTransaction.blockNumber && chainId) {
             this.updateActivityStatusByTxHash(chainId, txHash, 'Success')
             clearInterval(txInterval)
           }
@@ -270,7 +272,7 @@ export const useActivitiesStore = defineStore('activitiesStore', {
       }
     },
     async saveFileActivity(
-      chainId: ChainId,
+      chainId: ChainId | undefined,
       fileTransaction: ContractFileActivityMessage,
       forwarderAddress: string
     ) {
@@ -297,7 +299,10 @@ export const useActivitiesStore = defineStore('activitiesStore', {
         file,
       }
       this.saveActivity(chainId, activity)
-      const currentActivity = this.activitiesByChainId[chainId][0]
+      let currentActivity
+      if (chainId) {
+        currentActivity = this.activitiesByChainId[chainId][0]
+      }
 
       const filter: EventFilter = {
         address: forwarderAddress,
diff --git a/src/store/app.ts b/src/store/app.ts
index f46cea6c..92c9ef05 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -1,14 +1,28 @@
 import { AppMode } from '@arcana/auth'
 import { defineStore } from 'pinia'
 
+import type { SDKVersion } from '@/models/Connection'
 import type { Theme } from '@/models/Theme'
 
+type WalletPosition = 'right' | 'left'
+
+type AppLogo = {
+  horizontal: string
+  vertical: string
+}
+
 type AppState = {
   id: string
   name: string
   theme: Theme
   parentAppUrl: string | null
   validAppMode: AppMode
+  showWallet: boolean
+  expandWallet: boolean
+  walletPosition: WalletPosition
+  appLogo: AppLogo
+  compactMode: boolean
+  sdkVersion: SDKVersion | null
 }
 
 export const useAppStore = defineStore('app', {
@@ -17,7 +31,37 @@ export const useAppStore = defineStore('app', {
       id: '',
       theme: 'light',
       parentAppUrl: null,
+      showWallet: false,
+      expandWallet: true,
+      walletPosition: 'right',
+      compactMode: false,
+      sdkVersion: null,
     } as AppState),
+  getters: {
+    iframeStyle: ({
+      showWallet,
+      expandWallet,
+      walletPosition,
+      compactMode,
+    }) => {
+      const style: Partial<CSSStyleDeclaration> = {}
+      style.height = showWallet
+        ? expandWallet
+          ? compactMode
+            ? '200px'
+            : '80vh'
+          : '66px'
+        : '0'
+      style.width = showWallet ? (expandWallet ? '360px' : '68px') : '0'
+      style.right =
+        walletPosition === 'right' ? (expandWallet ? '18px' : '2px') : ''
+      style.left =
+        walletPosition === 'left' ? (expandWallet ? '18px' : '2px') : ''
+      style.bottom = '4px'
+      style.transition = 'all 300ms ease-in-out'
+      return style
+    },
+  },
   actions: {
     setAppId(id: string): void {
       this.id = id
@@ -34,5 +78,11 @@ export const useAppStore = defineStore('app', {
     setAppMode(validAppMode: AppMode): void {
       this.validAppMode = validAppMode
     },
+    setWalletPosition(position: WalletPosition): void {
+      this.walletPosition = position
+    },
+    setAppLogo(logo: AppLogo): void {
+      this.appLogo = logo
+    },
   },
 })
diff --git a/src/store/parentConnection.ts b/src/store/parentConnection.ts
index 8873394c..4cfb4cc7 100644
--- a/src/store/parentConnection.ts
+++ b/src/store/parentConnection.ts
@@ -1,10 +1,15 @@
 import type { Connection } from 'penpal'
 import { defineStore } from 'pinia'
 
-import type { ParentConnectionApi } from '@/models/Connection'
+import type {
+  ParentConnectionApi,
+  InitParentConnectionApi,
+} from '@/models/Connection'
 
 type ParentConnectionState = {
-  parentConnection: Connection<ParentConnectionApi> | null
+  parentConnection: Connection<
+    ParentConnectionApi | InitParentConnectionApi
+  > | null
 }
 
 export const useParentConnectionStore = defineStore('parentConnection', {
@@ -13,7 +18,9 @@ export const useParentConnectionStore = defineStore('parentConnection', {
       parentConnection: null,
     } as ParentConnectionState),
   actions: {
-    setParentConnection(connection: Connection<ParentConnectionApi>): void {
+    setParentConnection(
+      connection: Connection<ParentConnectionApi | InitParentConnectionApi>
+    ): void {
       this.parentConnection = connection
     },
   },
diff --git a/src/store/rpc.ts b/src/store/rpc.ts
index 48d25089..99653537 100644
--- a/src/store/rpc.ts
+++ b/src/store/rpc.ts
@@ -1,16 +1,24 @@
 import { defineStore } from 'pinia'
 
-import { RpcConfigWallet, CHAIN_LIST } from '@/models/RpcConfigList'
+import { RpcConfigWallet } from '@/models/RpcConfigList'
+import { getRequestHandler } from '@/utils/requestHandlerSingleton'
+
+const BALANCE_POLLING_INTERVAL = 10 * 1000
+const BALANCE_POLLING_DURATION = 10 * 60 * 1000
 
 type RpcConfigs = {
   [chainId: number]: RpcConfigWallet
 }
 
 type RpcConfigState = {
-  selectedRPCConfig: RpcConfigWallet
-  selectedChainId: string | number
+  selectedRPCConfig: RpcConfigWallet | null
+  selectedChainId: string | number | null
+
   walletBalance: string
-  walletBalanceChainId: string
+  walletBalanceChainId: string | undefined
+  walletBalancePollingIntervalID: NodeJS.Timer | null
+  walletBalancePollingCleanupID: NodeJS.Timer | null
+
   rpcConfigs: RpcConfigs | null
   editChainId: number | null
 }
@@ -18,9 +26,14 @@ type RpcConfigState = {
 export const useRpcStore = defineStore('rpcStore', {
   state: () =>
     ({
-      selectedRPCConfig: CHAIN_LIST[0],
-      selectedChainId: CHAIN_LIST[0].chainId,
+      selectedRPCConfig: null,
+      selectedChainId: null,
+
       walletBalance: '',
+      walletBalanceChainId: '',
+      walletBalancePollingCleanupID: null,
+      walletBalancePollingIntervalID: null,
+
       rpcConfigs: null,
       editChainId: null,
     } as RpcConfigState),
@@ -38,7 +51,8 @@ export const useRpcStore = defineStore('rpcStore', {
       return chainName.includes('arcana')
     },
     nativeCurrency() {
-      const rpcConfig: RpcConfigWallet = this.selectedRpcConfig
+      if (!this.selectedRPCConfig) return null
+      const rpcConfig: RpcConfigWallet | null = this.selectedRpcConfig
       if (this.isArcanaNetwork) {
         return {
           name: 'Arcana',
@@ -58,7 +72,7 @@ export const useRpcStore = defineStore('rpcStore', {
         decimals: 0,
       }
     },
-    selectedRpcConfig(state: RpcConfigState): RpcConfigWallet {
+    selectedRpcConfig(state: RpcConfigState): RpcConfigWallet | null {
       return state.selectedRPCConfig
     },
     rpcConfigList(state: RpcConfigState): Array<RpcConfigWallet> {
@@ -70,8 +84,8 @@ export const useRpcStore = defineStore('rpcStore', {
       return null
     },
     isEthereumMainnet() {
-      const selectedRpcConfig: RpcConfigWallet = this.selectedRpcConfig
-      return selectedRpcConfig.chainId === `1`
+      const selectedRpcConfig: RpcConfigWallet | null = this.selectedRpcConfig
+      return selectedRpcConfig?.chainId === `1`
     },
   },
   actions: {
@@ -84,14 +98,18 @@ export const useRpcStore = defineStore('rpcStore', {
       else this.rpcConfigs = { [rpcConfig.chainId]: rpcConfig }
     },
     editNetwork(chainId: number, rpcConfig: RpcConfigWallet): void {
-      if (this.rpcConfigs) this.rpcConfigs[chainId] = rpcConfig
+      if (this.rpcConfigs) {
+        if (Number(rpcConfig.chainId) !== Number(chainId))
+          delete this.rpcConfigs[rpcConfig.chainId]
+        else this.rpcConfigs[rpcConfig.chainId] = rpcConfig
+      }
     },
     deleteNetwork(chainId: number): void {
       if (this.rpcConfigs) delete this.rpcConfigs[chainId]
     },
     setWalletBalance(balance): void {
       this.walletBalance = balance
-      this.walletBalanceChainId = this.selectedRPCConfig.chainId
+      this.walletBalanceChainId = this.selectedRPCConfig?.chainId
     },
     setSelectedChainId(chainId: string): void {
       this.selectedRPCConfig = this.rpcConfigs
@@ -115,5 +133,39 @@ export const useRpcStore = defineStore('rpcStore', {
       })
       this.rpcConfigs = configs
     },
+
+    async getWalletBalance() {
+      const accountHandler = getRequestHandler().getAccountHandler()
+      if (accountHandler) {
+        const balance = (await accountHandler.getBalance()) || '0'
+        this.setWalletBalance(balance.toString())
+      }
+    },
+
+    cleanUpBalancePolling() {
+      if (this.walletBalancePollingIntervalID != null) {
+        clearInterval(this.walletBalancePollingIntervalID)
+        this.walletBalancePollingIntervalID = null
+      }
+      if (this.walletBalancePollingCleanupID != null) {
+        clearTimeout(this.walletBalancePollingCleanupID)
+        this.walletBalancePollingCleanupID = null
+      }
+    },
+
+    async setUpBalancePolling() {
+      this.cleanUpBalancePolling()
+      await this.getWalletBalance()
+      // Poll every 10 seconds
+      this.walletBalancePollingIntervalID = setInterval(
+        this.getWalletBalance.bind(this),
+        BALANCE_POLLING_INTERVAL
+      )
+      this.walletBalancePollingCleanupID = setTimeout(() => {
+        if (this.walletBalancePollingIntervalID != null) {
+          clearInterval(this.walletBalancePollingIntervalID)
+        }
+      }, BALANCE_POLLING_DURATION)
+    },
   },
 })
diff --git a/src/utils/accountHandler.ts b/src/utils/accountHandler.ts
index 3b5bbc76..c8167484 100644
--- a/src/utils/accountHandler.ts
+++ b/src/utils/accountHandler.ts
@@ -32,14 +32,14 @@ class AccountHandler {
     rpcUrl: string = process.env.VUE_APP_WALLET_RPC_URL
   ) {
     this.wallet = new ethers.Wallet(privateKey)
-    this.provider = new ethers.providers.JsonRpcProvider(rpcUrl)
+    this.provider = new ethers.providers.StaticJsonRpcProvider(rpcUrl)
   }
 
   getBalance() {
     return this.provider.getBalance(this.wallet.address)
   }
   setProvider(url: string) {
-    this.provider = new ethers.providers.JsonRpcProvider(url)
+    this.provider = new ethers.providers.StaticJsonRpcProvider(url)
   }
 
   asMiddleware() {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 225b7a1c..899c422a 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,10 +1,30 @@
 import type { InitParams } from '@arcana/auth-core/types/types'
 
+import type { CurrencySymbol } from '@/services/exchangeRate.service'
+
 const DOCS_URL = process.env.VUE_APP_ARCANA_DOCS_URL
 const HIDE_ON_RAMP = process.env.VUE_APP_HIDE_ON_RAMP
 const AUTH_URL = process.env.VUE_APP_WALLET_AUTH_URL
 const GATEWAY_URL = process.env.VUE_APP_WALLET_GATEWAY
 const AUTH_NETWORK = process.env
   .VUE_APP_ARCANA_AUTH_NETWORK as InitParams['network']
+const EXCHANGE_RATE_CURRENCY: CurrencySymbol = 'USD'
+const GAS_FEE_UNIT = 'Gwei'
+const GAS_PRICE_SPEED_MAP = {
+  slow: { wait: 'safeLowWait', price: 'safeLow' },
+  standard: { wait: 'avgWait', price: 'average' },
+  fast: { wait: 'fastWait', price: 'fast' },
+}
+const TOAST_TIME_OUT = 2500
 
-export { DOCS_URL, HIDE_ON_RAMP, AUTH_URL, GATEWAY_URL, AUTH_NETWORK }
+export {
+  DOCS_URL,
+  HIDE_ON_RAMP,
+  AUTH_URL,
+  GATEWAY_URL,
+  AUTH_NETWORK,
+  EXCHANGE_RATE_CURRENCY,
+  GAS_FEE_UNIT,
+  GAS_PRICE_SPEED_MAP,
+  TOAST_TIME_OUT,
+}
diff --git a/src/utils/emailSheme.js b/src/utils/emailScheme.ts
similarity index 100%
rename from src/utils/emailSheme.js
rename to src/utils/emailScheme.ts
diff --git a/src/utils/getwalletType.ts b/src/utils/getwalletType.ts
index 4d22621b..4a2efcfe 100644
--- a/src/utils/getwalletType.ts
+++ b/src/utils/getwalletType.ts
@@ -1,7 +1,7 @@
 import { ethers } from 'ethers'
 
 const getContract = (rpcUrl, appAddress) => {
-  const provider = new ethers.providers.JsonRpcProvider(rpcUrl)
+  const provider = new ethers.providers.StaticJsonRpcProvider(rpcUrl)
   return new ethers.Contract(
     appAddress,
     ['function walletType() view returns (uint)'],
diff --git a/src/utils/nftUtils.ts b/src/utils/nftUtils.ts
index 6ff65124..fcd7b724 100644
--- a/src/utils/nftUtils.ts
+++ b/src/utils/nftUtils.ts
@@ -2,7 +2,9 @@ import { ethers } from 'ethers'
 
 import erc1155abi from '@/abis/erc1155.abi.json'
 import erc721abi from '@/abis/erc721.abi.json'
-import type { NFTContractType } from '@/models/NFT'
+import type { NFT, NFTContractType } from '@/models/NFT'
+import { getNFTDetails, modifyIpfsUrl } from '@/services/getNFTDetails.service'
+import { NFTDB } from '@/services/nft.service'
 import { useUserStore } from '@/store/user'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 
@@ -140,4 +142,52 @@ async function checkOwnership(
   }
 }
 
-export { getTokenUri, getERCStandard, getCollectionName, checkOwnership }
+function sanitizeUrl(url?: string) {
+  if (url && url.startsWith('ipfs://')) {
+    return modifyIpfsUrl(url)
+  }
+  return url
+}
+
+async function getDetailedNFTs(nftDB: NFTDB, chainId: number) {
+  const potentialNFTList = nftDB.getNFTs(chainId)
+  const nfts: NFT[] = []
+
+  await Promise.all(
+    potentialNFTList.map(async (nft) => {
+      const [ownership, details] = await Promise.all([
+        nft.autodetected
+          ? undefined
+          : checkOwnership(nft.type, {
+              tokenId: nft.tokenId,
+              contractAddress: nft.address,
+            }),
+        getNFTDetails(nft.tokenUrl, nft.tokenId),
+      ])
+
+      // Check for undefined because we don't want to remove the NFT if it's autodetected
+      // Ownership is undefined if autodetected
+      if ((ownership !== undefined && !ownership.owner) || !details) {
+        nftDB.removeNFT(nft, chainId)
+        return
+      }
+
+      details.name = details.name || `#${nft.tokenId}`
+      details.imageUrl = sanitizeUrl(details.image_url || details.image)
+      details.animationUrl = sanitizeUrl(
+        details.animation_url || details.animations
+      )
+      nfts.push({ ...nft, ...details })
+    })
+  )
+
+  return nfts
+}
+
+export {
+  getTokenUri,
+  getERCStandard,
+  getCollectionName,
+  checkOwnership,
+  getDetailedNFTs,
+}
diff --git a/src/utils/onrampmoney.ramp.ts b/src/utils/onrampmoney.ramp.ts
new file mode 100644
index 00000000..253aaba8
--- /dev/null
+++ b/src/utils/onrampmoney.ramp.ts
@@ -0,0 +1,118 @@
+import axios from 'axios'
+
+import { useUserStore } from '@/store/user'
+
+class OnRampMoneyException extends Error {}
+
+type OnRampMoneyCoinObject = {
+  // defined manually
+  actualID: string
+
+  coinId: number
+  coinName: string
+  coinIcon: string
+  balanceFloatPlaces: number
+  tradeFloatPlaces: number
+  markets: {
+    decimals: {
+      usdt: number
+      inr: number
+    }
+  }
+  networks: number[]
+  networkIDs: string[]
+}
+
+type OnRampMoneyNetworkObject = {
+  chainSymbol: string
+  chainName: string
+  networkId: number
+  nativeToken: number
+}
+
+const COIN_CONFIG = new Map<number, OnRampMoneyCoinObject>()
+const CHAIN_ID_CONFIG = new Map<number, OnRampMoneyNetworkObject>()
+// Chains that onramp.money advertises support for, but doesn’t actually accept
+const CHAIN_ID_BLACKLIST = new Set([80001])
+
+const API_URL = new URL(
+  '/api/v1/onramp-coin-config/',
+  process.env.VUE_APP_WALLET_GATEWAY
+).href
+
+async function initializeOnRampMoney() {
+  const resp = await axios({
+    method: 'GET',
+    url: API_URL,
+  })
+
+  const netConfigs = resp.data.data.networkConfig as Record<
+    string,
+    OnRampMoneyNetworkObject
+  >
+  for (const netConfig of Object.values(netConfigs)) {
+    if (CHAIN_ID_BLACKLIST.has(netConfig.networkId)) {
+      continue
+    }
+
+    CHAIN_ID_CONFIG.set(netConfig.networkId, netConfig)
+  }
+
+  const allCoinConfig = resp.data.data.allCoinConfig as Record<
+    string,
+    OnRampMoneyCoinObject
+  >
+  for (const [actualID, coin] of Object.entries(allCoinConfig)) {
+    coin.actualID = actualID
+    coin.networkIDs = []
+
+    for (const net of coin.networks) {
+      if (CHAIN_ID_CONFIG.has(net)) {
+        const v = CHAIN_ID_CONFIG.get(net)
+        if (v == null) {
+          continue
+        }
+        coin.networkIDs.push(v.chainSymbol)
+      }
+    }
+    COIN_CONFIG.set(coin.coinId, coin)
+  }
+}
+
+function isSupportedByOnRampMoney(chainId: number): boolean {
+  if (CHAIN_ID_BLACKLIST.has(chainId)) {
+    return false
+  }
+
+  const cfg = CHAIN_ID_CONFIG.get(chainId)
+  if (cfg == null || cfg.nativeToken === -1) {
+    return false
+  }
+  const tok = COIN_CONFIG.get(cfg.nativeToken)
+  return tok != null
+}
+
+async function openOnRampMoneyHostedUI(chainId: number) {
+  const netConfig = CHAIN_ID_CONFIG.get(chainId)
+  if (netConfig == null) {
+    throw new OnRampMoneyException('Unsupported chain')
+  }
+  const nativeToken = COIN_CONFIG.get(netConfig.nativeToken)
+  if (nativeToken == null) {
+    throw new OnRampMoneyException('Could not find native token')
+  }
+
+  const uStore = useUserStore()
+
+  const baseURL = new URL(process.env.VUE_APP_ON_RAMP_MONEY_URL)
+  baseURL.searchParams.set('network', netConfig.chainSymbol)
+  baseURL.searchParams.set('coinCode', nativeToken.actualID)
+  baseURL.searchParams.set('walletAddress', uStore.walletAddress)
+  window.open(baseURL.href, '_blank')
+}
+
+export {
+  initializeOnRampMoney,
+  openOnRampMoneyHostedUI,
+  isSupportedByOnRampMoney,
+}
diff --git a/src/utils/requestHandler.ts b/src/utils/requestHandler.ts
index c5c44a52..2aa6de80 100644
--- a/src/utils/requestHandler.ts
+++ b/src/utils/requestHandler.ts
@@ -37,13 +37,15 @@ class RequestHandler {
   constructor(private accountHandler: AccountHandler) {}
 
   public async setRpcConfig(c: RpcConfig) {
-    this.handler = this.initRpcEngine(c)
-    this.accountHandler.setProvider(c.rpcUrls[0])
-    // Emit `accountsChanged` event
-    this.emitEvent('accountsChanged', this.accountHandler.getAccount().address)
-    // Emit `chainChanged` event
-    const chainId = await this.accountHandler.getChainId()
-    this.emitEvent('chainChanged', { chainId })
+    try {
+      this.handler = this.initRpcEngine(c)
+      this.accountHandler.setProvider(c.rpcUrls[0])
+      // Emit `chainChanged` event
+      const chainId = await this.accountHandler.getChainId()
+      this.emitEvent('chainChanged', { chainId })
+    } catch (e) {
+      console.log({ e })
+    }
   }
 
   public async emitEvent(e: string, params?: ProviderEvent) {
diff --git a/src/utils/requestManagement.ts b/src/utils/requestManagement.ts
index 8b4b8a50..63525565 100644
--- a/src/utils/requestManagement.ts
+++ b/src/utils/requestManagement.ts
@@ -6,14 +6,16 @@ import { watch } from 'vue'
 import { useToast } from 'vue-toastification'
 
 import type { AssetContract } from '@/models/Asset'
-import { requirePermission } from '@/models/Connection'
-import { NFT } from '@/models/NFT'
+import { PERMISSIONS, requirePermission } from '@/models/Connection'
 import { router } from '@/routes'
+import { NFTDB } from '@/services/nft.service'
 import { store } from '@/store'
 import { useActivitiesStore } from '@/store/activities'
+import { useAppStore } from '@/store/app'
 import { useRequestStore } from '@/store/request'
 import { useRpcStore } from '@/store/rpc'
 import { useUserStore } from '@/store/user'
+import { TOAST_TIME_OUT } from '@/utils/constants'
 import { getRequestHandler } from '@/utils/requestHandlerSingleton'
 import { getStorage } from '@/utils/storageWrapper'
 import validatePopulateContractForNft from '@/utils/validateAndPopulateContractForNft'
@@ -24,6 +26,15 @@ const rpcStore = useRpcStore(store)
 const userStore = useUserStore(store)
 const toast = useToast()
 const reqStore = useRequestStore()
+const appStore = useAppStore()
+
+async function showToast(type, message) {
+  return new Promise((res) => {
+    if (type === 'error') toast.error(message)
+    if (type === 'success') toast.success(message)
+    setTimeout(() => res(true), TOAST_TIME_OUT)
+  })
+}
 
 function getSendRequestFn(handleRequest, requestStore, appStore, keeper) {
   return function sendRequest(request) {
@@ -45,21 +56,19 @@ async function watchRequestQueue(keeper) {
       const pendingRequestCount = Object.values(pendingRequests).length
       const connectionInstance = await keeper.connection.promise
       const appMode = await connectionInstance.getAppMode()
-      try {
-        connectionInstance.sendPendingRequestCount(pendingRequestCount)
-      } catch (err) {
-        console.error({ err })
-      }
       if (processQueue.length > 0) {
         const request = processQueue.shift()
-        if (request) processRequest(request, keeper)
-        if (appMode === AppMode.Widget && pendingRequestCount === 0) {
+        if (request) await processRequest(request, keeper)
+        const method = request?.request.method
+        if (
+          appMode === AppMode.Widget &&
+          pendingRequestCount === 0 &&
+          appStore.sdkVersion !== 'v3'
+        ) {
           connectionInstance.closePopup()
-        }
-        try {
-          connectionInstance.sendPendingRequestCount(pendingRequestCount)
-        } catch (err) {
-          console.error({ err })
+        } else if (pendingRequestCount === 0 && method && PERMISSIONS[method]) {
+          appStore.expandWallet = false
+          appStore.compactMode = false
         }
       }
     },
@@ -74,16 +83,15 @@ function getEtherInvalidParamsError(msg) {
 async function switchChain(request, keeper) {
   const { chainId: id } = request.params[0]
   rpcStore.setSelectedChainId(`${parseInt(id)}`)
-  const { chainId, ...rpcConfig } = rpcStore.selectedRpcConfig
 
-  const selectedChainId = Number(chainId)
+  const selectedChainId = Number(rpcStore.selectedRpcConfig?.chainId)
   await keeper.setRpcConfig({
-    ...rpcConfig,
+    ...rpcStore.selectedRpcConfig,
     chainId: selectedChainId,
   })
 
   keeper.reply(request.method, {
-    result: `Chain changed to ${rpcStore.selectedRpcConfig.chainName}`,
+    result: `Chain changed to ${rpcStore.selectedRpcConfig?.chainName}`,
     id: request.id,
   })
   router.push({ name: 'home' })
@@ -127,11 +135,31 @@ function validateSwitchChainParams({ chainId }) {
   return result
 }
 
-async function validateAddNetworkParams(networkInfo) {
+async function validateRPCandChainID(rpcURL, chainId) {
   const result: { isValid: boolean; error: unknown } = {
     isValid: false,
     error: null,
   }
+  try {
+    const provider = new ethers.providers.StaticJsonRpcProvider(rpcURL)
+    const { chainId: fetchedChainId } = await provider.getNetwork()
+    const isValidChainId = Number(fetchedChainId) === Number(chainId)
+    result.isValid = isValidChainId
+    result.error = isValidChainId
+      ? ''
+      : 'Incorrect combination of chain Id and RPC URL'
+  } catch (e) {
+    result.isValid = false
+    result.error = 'Invalid RPC URL'
+  }
+  return result
+}
+
+async function validateAddNetworkParams(networkInfo) {
+  let result: { isValid: boolean; error: unknown } = {
+    isValid: false,
+    error: null,
+  }
 
   if (
     !networkInfo.chainName?.length ||
@@ -150,8 +178,10 @@ async function validateAddNetworkParams(networkInfo) {
       `RPC URL - ${networkInfo.rpcUrls[0]} already exists, please use different one`
     )
   } else {
-    result.error = ''
-    result.isValid = true
+    result = await validateRPCandChainID(
+      networkInfo.rpcUrls[0],
+      networkInfo.chainId
+    )
   }
   return result
 }
@@ -159,7 +189,7 @@ async function validateAddNetworkParams(networkInfo) {
 async function validateAddTokensParams(params) {
   return await validatePopulateContractForToken({
     walletAddress: userStore.walletAddress,
-    chainId: rpcStore.selectedRpcConfig.chainId,
+    chainId: rpcStore.selectedRpcConfig?.chainId,
     tokenContract: params,
     isEthereumMainnet: rpcStore.isEthereumMainnet,
   })
@@ -168,7 +198,7 @@ async function validateAddTokensParams(params) {
 async function validateAddNftParams(tokenType, params) {
   return await validatePopulateContractForNft({
     walletAddress: userStore.walletAddress,
-    chainId: rpcStore.selectedRpcConfig.chainId,
+    chainId: rpcStore.selectedRpcConfig?.chainId,
     nftContract: { type: tokenType, ...params },
     isEthereumMainnet: rpcStore.isEthereumMainnet,
   })
@@ -179,7 +209,7 @@ async function addNetwork(request, keeper) {
   const networkInfo = params[0]
   const name: string = networkInfo.chainName || ''
   const rpcUrls: string[] = networkInfo.rpcUrls || []
-  const chainId = networkInfo.chainId
+  const chainId = `${Number(networkInfo.chainId)}`
   const symbol: string = networkInfo.nativeCurrency.symbol || ''
   const existingChain = isExistingChain(chainId)
   if (existingChain) {
@@ -246,36 +276,11 @@ async function addToken(request, keeper) {
     })
   } else if (ercType === 'erc721' || ercType === 'erc1155') {
     const { nft } = await validateAddNftParams(ercType, params)
-    const nftsString = storage.local.getItem(
-      `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`
-    )
-    let nfts: NFT[] = []
-    if (nftsString) {
-      nfts = JSON.parse(nftsString) as NFT[]
-    }
-    nfts.push({ ...nft })
-    nfts.sort((nft1, nft2) => {
-      if (nft1.tokenId > nft2.tokenId) {
-        return 1
-      }
-      if (nft2.tokenId > nft1.tokenId) {
-        return -1
-      }
-      return 0
-    })
-    nfts.sort((nft1, nft2) => {
-      if (nft1.collectionName > nft2.collectionName) {
-        return 1
-      }
-      if (nft2.collectionName > nft1.collectionName) {
-        return -1
-      }
-      return 0
-    })
-    storage.local.setItem(
-      `${userStore.walletAddress}/${rpcStore.selectedRpcConfig?.chainId}/nfts`,
-      JSON.stringify(nfts)
+    const nftDB = await NFTDB.create(
+      getStorage().local,
+      userStore.walletAddress
     )
+    nftDB.addNFT(nft, Number(rpcStore.selectedChainId))
     keeper.reply(request.method, {
       result: 'Token Added successfully',
       id: request.id,
@@ -302,12 +307,12 @@ async function processRequest({ request, isPermissionGranted }, keeper) {
       }
       try {
         const response = await keeper.request(request)
-        keeper.reply(request.method, response)
+        await keeper.reply(request.method, response)
         if (response.error) {
           if (response.error.data?.originalError?.code) {
-            toast.error(response.error.data.originalError.code)
+            await showToast('error', response.error.data.originalError.code)
           } else {
-            toast.error(response.error)
+            await showToast('error', response.error)
           }
           return
         } else {
@@ -318,13 +323,14 @@ async function processRequest({ request, isPermissionGranted }, keeper) {
             'wallet_addEthereumChain',
           ]
           if (asyncMethods.includes(request.method)) {
-            toast.success(`${request.method} execution completed`)
+            const message = `${request.method} execution completed`
+            await showToast('success', message)
           }
         }
         if (request.method === 'eth_signTypedData_v4' && request.params[1]) {
           const params = JSON.parse(request.params[1])
           if (params.domain.name === 'Arcana Forwarder') {
-            activitiesStore.saveFileActivity(
+            await activitiesStore.saveFileActivity(
               rpcStore.selectedRpcConfig?.chainId,
               params.message,
               params.domain.verifyingContract
@@ -332,7 +338,7 @@ async function processRequest({ request, isPermissionGranted }, keeper) {
           }
         }
         if (request.method === 'eth_sendTransaction' && response.result) {
-          activitiesStore.fetchAndSaveActivityFromHash({
+          await activitiesStore.fetchAndSaveActivityFromHash({
             txHash: response.result,
             chainId: rpcStore.selectedRpcConfig?.chainId,
           })
@@ -387,10 +393,11 @@ async function handleRequest(request, requestStore, appStore, keeper) {
     ) {
       error = getEtherInvalidParamsError('required params missing')
     } else if (
+      rpcStore.selectedRPCConfig?.chainId &&
       parseInt(params.domain.chainId) !==
-      parseInt(rpcStore.selectedRPCConfig.chainId)
+        parseInt(rpcStore.selectedRPCConfig.chainId)
     ) {
-      error = `domain chain ID ${params.domain.chainId} does not match network chain id ${rpcStore.selectedRPCConfig.chainId}`
+      error = `domain chain ID ${params.domain.chainId} does not match network chain id ${rpcStore.selectedRPCConfig?.chainId}`
     }
     if (error) {
       await keeper.reply(request.method, {
@@ -438,9 +445,15 @@ async function handleRequest(request, requestStore, appStore, keeper) {
   }
   const isPermissionRequired = requirePermission(request, appStore.validAppMode)
   if (isPermissionRequired) {
-    const connectionInstance = await keeper.connection.promise
-    connectionInstance.openPopup()
+    if (appStore.sdkVersion === 'v3') {
+      appStore.expandWallet = true
+      appStore.compactMode = isPermissionRequired
+    } else {
+      const connectionInstance = await keeper.connection.promise
+      connectionInstance.openPopup()
+    }
   }
+
   requestStore.addRequests(request, isPermissionRequired, new Date())
 }
 
diff --git a/src/utils/storageWrapper.ts b/src/utils/storageWrapper.ts
index 65b22929..2c5b3520 100644
--- a/src/utils/storageWrapper.ts
+++ b/src/utils/storageWrapper.ts
@@ -44,3 +44,4 @@ function initStorage(appId?: string) {
 }
 
 export { getStorage, initStorage }
+export type { StorageWrapper }
diff --git a/src/utils/validateAndPopulateContractForNft.ts b/src/utils/validateAndPopulateContractForNft.ts
index fc4de6ea..124b5d13 100644
--- a/src/utils/validateAndPopulateContractForNft.ts
+++ b/src/utils/validateAndPopulateContractForNft.ts
@@ -2,6 +2,7 @@ import contractMap from '@/contract-map.json'
 import { EthAssetContract } from '@/models/Asset'
 import type { NFT } from '@/models/NFT'
 import { getNFTDetails, modifyIpfsUrl } from '@/services/getNFTDetails.service'
+import { NFTDB } from '@/services/nft.service'
 import {
   checkOwnership,
   getCollectionName,
@@ -16,15 +17,7 @@ const ethMainnetTokens: EthAssetContract[] = Object.keys(contractMap).map(
   })
 )
 
-function isNftInLocalStorage(walletAddress, chainId, tokenContract) {
-  const nftString = getStorage().local.getItem(
-    `${walletAddress}/${chainId}/nfts`
-  )
-  if (nftString === null) return false
-
-  const nfts = JSON.parse(nftString) as NFT[]
-  if (!Array.isArray(nfts)) return false
-
+function isNftInDB(nfts, tokenContract) {
   const tokenId = tokenContract.tokenId || tokenContract.token_id
 
   return nfts.find(
@@ -62,7 +55,10 @@ async function validateAndPopulateContractForNft({
     result.error = 'Required params missing'
     return result
   }
-  if (isNftInLocalStorage(walletAddress, chainId, nftContract)) {
+  const nftDB = await NFTDB.create(getStorage().local, walletAddress)
+  const nfts = nftDB.getNFTs(Number(chainId))
+
+  if (isNftInDB(nfts, nftContract)) {
     result.error = 'Token already added'
     result.isValid = false
     return result
diff --git a/src/utils/walletMiddleware.ts b/src/utils/walletMiddleware.ts
index d30a364a..f15b3984 100644
--- a/src/utils/walletMiddleware.ts
+++ b/src/utils/walletMiddleware.ts
@@ -8,6 +8,8 @@ import {
   PendingJsonRpcResponse,
 } from 'json-rpc-engine'
 
+import { useRpcStore } from '@/store/rpc'
+
 interface TransactionParams {
   from: string
 }
@@ -141,6 +143,7 @@ function createWalletMiddleware({
       req
     )
     res.result = await processTransaction(txParams)
+    await useRpcStore().setUpBalancePolling()
   }
 
   async function signTransaction(
@@ -158,6 +161,7 @@ function createWalletMiddleware({
       req
     )
     res.result = await processSignTransaction(txParams, req)
+    await useRpcStore().setUpBalancePolling()
   }
 
   //