search

RabbyHub / rabbykit

https://rabbykit.rabby.io
20 stars 8 forks source link

instalation issue #22

Open grish2018 opened 6 months ago

grish2018 commented 6 months ago

after installing packages` npm i @rabby-wallet/rabbykit @wagmi/core@1 viem@1

and importing` import { configureChains, createConfig } from "@wagmi/core"; import { mainnet, arbitrum, bsc, optimism, polygon } from "@wagmi/core/chains"; import { publicProvider } from "@wagmi/core/providers/public"; import { alchemyProvider } from "@wagmi/core/providers/alchemy"; import { infuraProvider } from "@wagmi/core/providers/infura"; import { createModal } from "@rabby-wallet/rabbykit";

I have got error` svelte/internal in ./node_modules/@rabby-wallet/rabbykit/dist/index.js

project on vue2

dmy147 commented 6 months ago

Can you provide a link to a Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)? or complete error message?

grish2018 commented 6 months ago

I can give the list of my dependencies "dependencies": { "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/preset-env": "^7.18.10", "@chenfengyuan/vue-countdown": "^1.1.5", "@coreui/coreui-pro": "^3.4.0", "@coreui/icons": "^2.0.0-rc.0", "@coreui/utils": "^1.3.1", "@coreui/vue-pro": "~3.2.3", "@joeattardi/emoji-button": "^4.6.2", "@marcius-capital/binance-api": "^0.2.16", "@rabby-wallet/rabbykit": "^0.0.5", "@wagmi/core": "^1.4.13", "axios": "^0.21.1", "chart.js": "^3.7.1", "ethereumjs-util": "^7.1.5", "file-saver": "^2.0.5", "git-describe": "^4.1.0", "lodash": "^4.17.21", "moment": "^2.29.1", "portal-vue": "^2.1.7", "quasar": "^1.19.5", "quill": "~1.3.7", "randomcolor": "^0.6.2", "regenerator-runtime": "^0.13.7", "seamless-scroll-polyfill": "^2.2.0", "spinkit": "~2.0.1", "swiper": "^6.8.4", "tippy.js": "^6.3.7", "toastr": "^2.1.4", "treemap-chart": "1.5.2", "tui-color-picker": "^2.2.7", "v-calendar": "2.1.5", "v-show-slide": "^1.8.3", "v-tooltip": "^2.1.3", "videojs-hotkeys": "^0.2.28", "viem": "^1.21.4", "vue": "^2.6.12", "vue-codemirror": "~4.0.6", "vue-grid-layout": "^2.3.9", "vue-i18n": "8.18.2", "vue-multiselect": "~2.1.6", "vue-quill-editor": "~3.0.6", "vue-recaptcha": "^2.0.3", "vue-router": "~3.3.4", "vue-select": "~3.10.7", "vue-simple-calendar": "~4.4.0", "vue-speedometer": "^1.8.0", "vue-text-mask": "~6.1.2", "vue-the-mask": "^0.11.1", "vue-video-player-videojs-7": "^7.1.1", "vue-virtual-scroll-list": "^2.3.2", "vue2-google-maps": "~0.10.7", "vuelidate": "~0.7.5", "vuex": "~3.5.1", "xlsx": "^0.18.2" }, "devDependencies": { "@babel/core": "~7.12.9", "@vue/cli-plugin-babel": "~4.5.9", "@vue/cli-plugin-e2e-nightwatch": "~4.5.9", "@vue/cli-plugin-eslint": "~4.5.9", "@vue/cli-plugin-unit-jest": "~4.5.9", "@vue/cli-service": "~4.5.9", "@vue/test-utils": "^1.1.1", "auto-changelog": "~2.2.1", "babel-eslint": "~10.1.0", "babel-jest": "~26.6.3", "chromedriver": "latest", "core-js": "^3.10.0", "eslint": "6.8.0", "eslint-plugin-vue": "~6.2.2", "node-sass": "~4.14.1", "npm-run-all": "~4.1.5", "sass-loader": "~9.0.3", "style-resources-loader": "^1.4.1", "vue-cli-plugin-style-resources-loader": "~0.1.5", "vue-template-compiler": "~2.6.12", "webpack": "4.46.0" },

grish2018 commented 6 months ago

rabby.js

import { configureChains, createConfig } from "@wagmi/core"; import { mainnet, arbitrum, bsc, optimism, polygon } from "@wagmi/core/chains"; import { publicProvider } from "@wagmi/core/providers/public"; import { alchemyProvider } from "@wagmi/core/providers/alchemy"; import { infuraProvider } from "@wagmi/core/providers/infura"; import { createModal } from "@rabby-wallet/rabbykit";

const { chains, publicClient, webSocketPublicClient } = configureChains( [mainnet, arbitrum, bsc, optimism, polygon], [ alchemyProvider({ apiKey: "yourAlchemyApiKey" }), infuraProvider({ apiKey: "yourInfuraApiKey" }), publicProvider(), ] );

const config = createConfig({ autoConnect: true, publicClient, webSocketPublicClient, });

export const rabbyKit = createModal({ chains, wagmi: config, projectId: "yourProjectId", appName: "RabbyKit", });

rabbykit.open();

console.log("current rabbykit modal open status:", rabbyKit.getOpenState());

rabbykit.close(); (using my own keys)

main.js

import {rabbyKit} from '@/assets/js/rabby.js' console.log('test',rabbyKit); ....

dmy147 commented 6 months ago

maybe you can give it a try in the webpack config

alias: {
  svelte: path.resolve('node_modules', 'svelte/src/runtime'),
}
grish2018 commented 6 months ago

vue.config.js const path = require('path')

process.env.VUE_APP_BUILD_YEAR = new Date().getFullYear()

if (process.env.NODE_ENV !== 'production') { const {gitDescribeSync} = require('git-describe'); process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash }

module.exports = { // chainWebpack: config => { // const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] // types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type))) // }, lintOnSave: false, runtimeCompiler: true, configureWebpack: { //Necessary to run npm link https://webpack.js.org/configuration/resolve/#resolve-symlinks resolve: { symlinks: false, alias: { svelte: path.resolve('node_modules', 'svelte/src/runtime'), } }, }, // use this option for production linking // publicPath: process.env.NODE_ENV === 'production' ? '/vue/demo/3.1.0' : '/' // devServer: { // proxy: { // '/api': { // target: '' // }, // '/oauth': { // target: '' // } // } // } transpileDependencies: [ '@coreui/utils' ],

pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [ path.resolve(__dirname, './src/assets/scss/functions.scss') ] } }, productionSourceMap: false }

if(process.env.VUE_APP_BUILD_REL_OUTPUT_DIR) { module.exports.outputDir = path.resolve(__dirname, process.env.VUE_APP_BUILD_REL_OUTPUT_DIR) }

if(process.env.VUE_APP_BUILD_PUBLIC_PATH) { module.exports.publicPath = process.env.VUE_APP_BUILD_PUBLIC_PATH }

ERROR

in ./node_modules/@wagmi/connectors/dist/walletConnect.js

Module parse failed: Unexpected token (71:35) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | let targetChainId = chainId; | if (!targetChainId) {

    const store = this.storage?.getItem(STORE_KEY);

| const lastUsedChainId = store?.state?.data?.chain?.id; | if (lastUsedChainId && !this.isChainUnsupported(lastUsedChainId))

@ ./node_modules/@wagmi/core/dist/connectors/walletConnect.js 4:0-73 5:0-7:2 @ ./node_modules/@rabby-wallet/rabbykit/dist/index.js @ ./src/assets/js/rabby.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.114:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./node_modules/svelte/src/runtime/internal/each.js

Module parse failed: Unexpected token (7:31) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | export function ensure_array_like(array_like_or_iterator) {

  return array_like_or_iterator?.length !== undefined

| ? array_like_or_iterator | : Array.from(array_like_or_iterator);

@ ./node_modules/svelte/src/runtime/internal/index.js 6:0-26 6:0-26 @ ./node_modules/@rabby-wallet/rabbykit/dist/index.js @ ./src/assets/js/rabby.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.1.114:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

dmy147 commented 6 months ago

This seems to be a configuration issue with your project. Maybe you can try adding optional chaining.

Saraeutsza commented 3 months ago

alias: { svelte: path.resolve('node_modules', 'svelte/src/runtime'), }