├── .gitignore ├── .babelrc ├── example ├── .browserslistrc ├── src │ ├── config │ │ ├── endpoints.js │ │ ├── mixins.js │ │ └── abi │ │ │ └── oracle.json │ ├── style │ │ ├── vue_splide.scss │ │ ├── variable.scss │ │ ├── components.scss │ │ ├── base.scss │ │ ├── theme.scss │ │ └── main.scss │ ├── assets │ │ ├── images │ │ │ ├── avatar.png │ │ │ ├── all_atc_bg.png │ │ │ ├── all_pic_bg.png │ │ │ ├── all_cube_bg.png │ │ │ ├── all_tool_bg.png │ │ │ ├── down_area.svg │ │ │ ├── up_area.svg │ │ │ ├── cake.svg │ │ │ ├── bnb.svg │ │ │ ├── prediction.svg │ │ │ ├── stall.svg │ │ │ └── clock.svg │ │ └── font │ │ │ ├── Roboto-Black.ttf │ │ │ ├── Roboto-Bold.ttf │ │ │ ├── Roboto-Light.ttf │ │ │ ├── Roboto-Thin.ttf │ │ │ ├── Roboto-Italic.ttf │ │ │ ├── Roboto-Medium.ttf │ │ │ ├── Roboto-Regular.ttf │ │ │ ├── Roboto-BoldItalic.ttf │ │ │ ├── Roboto-ThinItalic.ttf │ │ │ ├── Roboto-BlackItalic.ttf │ │ │ ├── Roboto-LightItalic.ttf │ │ │ ├── Roboto-MediumItalic.ttf │ │ │ ├── RobotoMono-Regular.ttf │ │ │ └── AveriaSansLibre-Bold.ttf │ ├── components │ │ └── Header.vue │ ├── plugins │ │ └── vuetify.js │ ├── utils │ │ ├── bigNumber.js │ │ ├── web3.js │ │ ├── contract.js │ │ ├── formatBalance.js │ │ └── helpers.js │ ├── main.js │ ├── views │ │ ├── Home.vue │ │ └── Predictions │ │ │ ├── SetPosition.vue │ │ │ ├── Components │ │ │ ├── CollectWinningsOverlay.vue │ │ │ ├── SetPosition.vue │ │ │ ├── SoonRoundCard.vue │ │ │ ├── LiveRoundCard.vue │ │ │ ├── ExpiredRoundCard.vue │ │ │ └── OpenRoundCard.vue │ │ │ └── Prediction.vue │ ├── router │ │ └── index.js │ ├── store │ │ ├── modules │ │ │ ├── user.js │ │ │ └── web3Modal.js │ │ └── index.js │ └── App.vue ├── babel.config.js ├── public │ ├── favicon.ico │ └── index.html ├── .gitignore ├── .env ├── README.md ├── vue.config.js ├── .eslintrc.js └── package.json ├── src ├── helpers │ ├── index.js │ └── local.js ├── controllers │ ├── index.js │ └── events.js ├── providers │ ├── logos │ │ ├── dapper.png │ │ ├── metamask.png │ │ ├── tokenary.png │ │ ├── dcentwallet.png │ │ ├── liquality.png │ │ ├── mewwallet.png │ │ ├── niftyWallet.png │ │ ├── burnerwallet.png │ │ ├── squarelink.svg │ │ ├── safe.svg │ │ ├── fortmatic.svg │ │ ├── torus.svg │ │ ├── status.svg │ │ ├── imtoken.svg │ │ ├── arkane.svg │ │ ├── frame.svg │ │ ├── trust.svg │ │ ├── coinbase.svg │ │ ├── walletconnect.svg │ │ ├── niftyWallet.svg │ │ ├── cipher.svg │ │ ├── walletconnect-circle.svg │ │ ├── web3-default.svg │ │ ├── authereum.svg │ │ ├── portis.svg │ │ ├── metamask.svg │ │ └── bitski.svg │ ├── index.js │ ├── connectors │ │ ├── dcentwallet.js │ │ ├── bitski.js │ │ ├── frame.js │ │ ├── burnerconnect.js │ │ ├── injected.js │ │ ├── authereum.js │ │ ├── index.js │ │ ├── portis.js │ │ ├── fortmatic.js │ │ ├── arkane.js │ │ ├── mewconnect.js │ │ ├── walletconnect.js │ │ └── torus.js │ ├── providers │ │ └── index.js │ └── injected │ │ └── index.js ├── constants │ ├── events.js │ ├── index.js │ ├── keys.js │ ├── classNames.js │ └── chains.js ├── index.js ├── themes │ ├── index.js │ ├── dark.js │ └── light.js ├── components │ ├── Provider.vue │ └── Modal.vue └── Web3ModalVue.vue ├── docs ├── favicon.ico ├── img │ ├── dapper.ad6930cd.png │ ├── tokenary.844e5f8f.png │ ├── liquality.5af57aa8.png │ ├── mewwallet.ca61ddb5.png │ ├── burnerwallet.f636a291.png │ ├── dcentwallet.f0bdbaec.png │ ├── niftyWallet.9f535c97.png │ ├── safe.702da8e7.svg │ ├── fortmatic.6b8870de.svg │ ├── torus.af7fa576.svg │ ├── status.d88bf06b.svg │ ├── imtoken.df6517ce.svg │ ├── arkane.046401e9.svg │ ├── frame.8c515581.svg │ ├── trust.467b80c4.svg │ ├── coinbase.0538cb6b.svg │ ├── cipher.95365c37.svg │ ├── walletconnect-circle.8ec0ff12.svg │ ├── web3-default.f5aa05d2.svg │ ├── authereum.0922ef4e.svg │ ├── portis.7eb1b5b6.svg │ ├── metamask.925c6160.svg │ └── bitski.90dd0e3d.svg ├── css │ └── chunk-vendors.572d91f0.css ├── index.html └── js │ └── app.1d33e1f8.js ├── package.json ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | .idea -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "es2015", "stage-3"] 3 | } -------------------------------------------------------------------------------- /example/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /src/helpers/index.js: -------------------------------------------------------------------------------- 1 | export * from "./local"; 2 | export * from "./utils"; 3 | -------------------------------------------------------------------------------- /src/controllers/index.js: -------------------------------------------------------------------------------- 1 | export * from "./events"; 2 | export * from "./providers"; -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /example/src/config/endpoints.js: -------------------------------------------------------------------------------- 1 | export const GRAPH_API_PREDICTION = process.env.VUE_APP_THEGRAPH_URL -------------------------------------------------------------------------------- /example/src/style/vue_splide.scss: -------------------------------------------------------------------------------- 1 | @import "~@splidejs/splide/dist/css/themes/splide-default.min.css"; -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/public/favicon.ico -------------------------------------------------------------------------------- /docs/img/dapper.ad6930cd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/docs/img/dapper.ad6930cd.png -------------------------------------------------------------------------------- /docs/img/tokenary.844e5f8f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/docs/img/tokenary.844e5f8f.png -------------------------------------------------------------------------------- /src/providers/logos/dapper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/src/providers/logos/dapper.png -------------------------------------------------------------------------------- /docs/img/liquality.5af57aa8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/docs/img/liquality.5af57aa8.png -------------------------------------------------------------------------------- /docs/img/mewwallet.ca61ddb5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/docs/img/mewwallet.ca61ddb5.png -------------------------------------------------------------------------------- /src/providers/logos/metamask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/src/providers/logos/metamask.png -------------------------------------------------------------------------------- /src/providers/logos/tokenary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/src/providers/logos/tokenary.png -------------------------------------------------------------------------------- /docs/img/burnerwallet.f636a291.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/docs/img/burnerwallet.f636a291.png -------------------------------------------------------------------------------- /docs/img/dcentwallet.f0bdbaec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/docs/img/dcentwallet.f0bdbaec.png -------------------------------------------------------------------------------- /docs/img/niftyWallet.9f535c97.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/docs/img/niftyWallet.9f535c97.png -------------------------------------------------------------------------------- /src/providers/logos/dcentwallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/src/providers/logos/dcentwallet.png -------------------------------------------------------------------------------- /src/providers/logos/liquality.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/src/providers/logos/liquality.png -------------------------------------------------------------------------------- /src/providers/logos/mewwallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/src/providers/logos/mewwallet.png -------------------------------------------------------------------------------- /src/providers/logos/niftyWallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/src/providers/logos/niftyWallet.png -------------------------------------------------------------------------------- /example/src/assets/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/images/avatar.png -------------------------------------------------------------------------------- /src/providers/logos/burnerwallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/src/providers/logos/burnerwallet.png -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-Black.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-Bold.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-Light.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-Thin.ttf -------------------------------------------------------------------------------- /example/src/assets/images/all_atc_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/images/all_atc_bg.png -------------------------------------------------------------------------------- /example/src/assets/images/all_pic_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/images/all_pic_bg.png -------------------------------------------------------------------------------- /src/constants/events.js: -------------------------------------------------------------------------------- 1 | export const CONNECT_EVENT = "connect"; 2 | export const ERROR_EVENT = "error"; 3 | export const CLOSE_EVENT = "close"; -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | export * from "./chains"; 2 | export * from "./classNames"; 3 | export * from "./events"; 4 | export * from "./keys"; -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-Italic.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-Medium.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-Regular.ttf -------------------------------------------------------------------------------- /example/src/assets/images/all_cube_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/images/all_cube_bg.png -------------------------------------------------------------------------------- /example/src/assets/images/all_tool_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/images/all_tool_bg.png -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-BoldItalic.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-ThinItalic.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-BlackItalic.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-LightItalic.ttf -------------------------------------------------------------------------------- /example/src/assets/font/Roboto-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/Roboto-MediumItalic.ttf -------------------------------------------------------------------------------- /example/src/assets/font/RobotoMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/RobotoMono-Regular.ttf -------------------------------------------------------------------------------- /example/src/assets/font/AveriaSansLibre-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallRuralDog/web3modal-vue/HEAD/example/src/assets/font/AveriaSansLibre-Bold.ttf -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Web3ModalVue from './Web3ModalVue.vue' 2 | 3 | export default { 4 | install(Vue) { 5 | Vue.component("web3-modal-vue", Web3ModalVue) 6 | } 7 | } -------------------------------------------------------------------------------- /docs/css/chunk-vendors.572d91f0.css: -------------------------------------------------------------------------------- 1 | .fade-enter-active[data-v-12c769cd],.fade-leave-active[data-v-12c769cd]{transition:opacity .25s}.fade-enter[data-v-12c769cd],.fade-leave-to[data-v-12c769cd]{opacity:0} -------------------------------------------------------------------------------- /example/src/style/variable.scss: -------------------------------------------------------------------------------- 1 | // 间距 2 | $space4: 24px; 3 | $space3: 16px; 4 | $space2: 8px; 5 | $space1: 4px; 6 | 7 | // 字体 8 | $fs_base: 15px; 9 | $fs_title: 20px; 10 | $fs_sub_title: 18px; 11 | -------------------------------------------------------------------------------- /src/constants/keys.js: -------------------------------------------------------------------------------- 1 | export const WEB3_CONNECT_MODAL_ID = "WEB3_CONNECT_MODAL_ID"; 2 | export const INJECTED_PROVIDER_ID = "injected"; 3 | export const CACHED_PROVIDER_KEY = "WEB3_CONNECT_CACHED_PROVIDER"; -------------------------------------------------------------------------------- /src/providers/index.js: -------------------------------------------------------------------------------- 1 | import * as connectors from "./connectors"; 2 | import * as injected from "./injected"; 3 | import * as providers from "./providers"; 4 | 5 | export { connectors, injected, providers }; -------------------------------------------------------------------------------- /example/src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /example/src/style/components.scss: -------------------------------------------------------------------------------- 1 | .y-card { 2 | flex-grow: 1; 3 | width: 20%; 4 | max-width: calc(100% - #{$space2 * 2}); 5 | border-radius: $space2; 6 | min-width: 275px; 7 | overflow: hidden; 8 | } 9 | -------------------------------------------------------------------------------- /example/src/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuetify from 'vuetify/lib/framework'; 3 | import 'vuetify/dist/vuetify.min.css' 4 | 5 | Vue.use(Vuetify); 6 | 7 | export default new Vuetify({ 8 | }); 9 | -------------------------------------------------------------------------------- /src/themes/index.js: -------------------------------------------------------------------------------- 1 | import lightTheme from "./light"; 2 | import darkTheme from "./dark"; 3 | 4 | export const themesList = { 5 | default: lightTheme, 6 | [lightTheme.name]: lightTheme, 7 | [darkTheme.name]: darkTheme 8 | }; 9 | -------------------------------------------------------------------------------- /example/src/utils/bigNumber.js: -------------------------------------------------------------------------------- 1 | import BigNumber from 'bignumber.js' 2 | 3 | export const BIG_ZERO = new BigNumber(0) 4 | export const BIG_ONE = new BigNumber(1) 5 | export const BIG_NINE = new BigNumber(9) 6 | export const BIG_TEN = new BigNumber(10) -------------------------------------------------------------------------------- /src/providers/connectors/dcentwallet.js: -------------------------------------------------------------------------------- 1 | const ConnectToDcentWallet = async (DcentProvider, opts) => { 2 | const provider = new DcentProvider(opts); 3 | await provider.enable(); 4 | return provider; 5 | }; 6 | export default ConnectToDcentWallet; -------------------------------------------------------------------------------- /src/providers/connectors/bitski.js: -------------------------------------------------------------------------------- 1 | const ConnectToBitski = async ( 2 | Bitski, 3 | opts 4 | ) => { 5 | const bitski = new Bitski(opts.clientId, opts.callbackUrl, opts.extraBitskiOptions); 6 | await bitski.signIn(); 7 | return bitski.getProvider(opts.extraProviderOptions); 8 | }; 9 | export default ConnectToBitski; -------------------------------------------------------------------------------- /src/providers/connectors/frame.js: -------------------------------------------------------------------------------- 1 | const ConnectToFrame = async (ethProvider) => { 2 | try { 3 | const provider = ethProvider('frame'); 4 | provider.isFrameNative = true; 5 | return provider; 6 | } catch (err) { 7 | console.error(err); 8 | } 9 | }; 10 | 11 | export default ConnectToFrame; -------------------------------------------------------------------------------- /src/providers/connectors/burnerconnect.js: -------------------------------------------------------------------------------- 1 | const ConnectToBurnerConnect = async (BurnerConnectProvider, opts) => { 2 | opts.defaultNetwork = opts.defaultNetwork || opts.network; 3 | const provider = new BurnerConnectProvider(opts); 4 | await provider.enable(); 5 | return provider; 6 | }; 7 | export default ConnectToBurnerConnect; -------------------------------------------------------------------------------- /example/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | import vuetify from './plugins/vuetify' 6 | 7 | Vue.config.productionTip = false 8 | 9 | new Vue({ 10 | router, 11 | store, 12 | vuetify, 13 | render: h => h(App) 14 | }).$mount('#app') 15 | -------------------------------------------------------------------------------- /src/themes/dark.js: -------------------------------------------------------------------------------- 1 | const darkTheme = { 2 | name: "dark", 3 | colors: { 4 | background: "rgb(39, 49, 56)", 5 | main: "rgb(199, 199, 199)", 6 | secondary: "rgb(136, 136, 136)", 7 | border: "rgba(195, 195, 195, 0.14)", 8 | hover: "rgb(16, 26, 32)" 9 | } 10 | }; 11 | 12 | export default darkTheme; -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /src/providers/logos/squarelink.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 21 | -------------------------------------------------------------------------------- /src/themes/light.js: -------------------------------------------------------------------------------- 1 | const lightTheme = { 2 | name: "light", 3 | colors: { 4 | background: "rgb(255, 255, 255)", 5 | main: "rgb(12, 12, 13)", 6 | secondary: "rgb(169, 169, 188)", 7 | border: "rgba(195, 195, 195, 0.14)", 8 | hover: "rgba(195, 195, 195, 0.14)" 9 | } 10 | }; 11 | 12 | export default lightTheme; -------------------------------------------------------------------------------- /example/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | } 13 | ] 14 | 15 | const router = new VueRouter({ 16 | routes 17 | }) 18 | 19 | export default router 20 | -------------------------------------------------------------------------------- /example/.env: -------------------------------------------------------------------------------- 1 | #VUE_APP_RPC_URL=https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161 2 | VUE_APP_RPC_URL=http://192.168.6.8:8545 3 | 4 | VUE_APP_THEGRAPH_URL=http://192.168.6.8:8000/subgraphs/name/smallruraldog/prediction 5 | 6 | 7 | VUE_APP_PREDICTION_CONTRACT_ADDRESS=0xc0e46F5a4E49EF268881631894d5B23bA0c170e7 8 | 9 | VUE_APP_PREDICTION_ORACLE_ADDRESS=0xE5ad3831b4a88bA9D1f69BB74Fa505ca9D44a99b -------------------------------------------------------------------------------- /docs/img/safe.702da8e7.svg: -------------------------------------------------------------------------------- 1 | sans_white copy -------------------------------------------------------------------------------- /src/providers/logos/safe.svg: -------------------------------------------------------------------------------- 1 | sans_white copy -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # example 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /docs/img/fortmatic.6b8870de.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/fortmatic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/torus.af7fa576.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/providers/logos/torus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /example/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | productionSourceMap: false, 4 | publicPath: process.env.NODE_ENV === 'production' 5 | ? '/web3modal-vue/' 6 | : '/', 7 | outputDir: "../docs", 8 | css: { 9 | loaderOptions: { 10 | scss: { 11 | additionalData: '@import "@/style/main.scss";' 12 | } 13 | } 14 | }, 15 | transpileDependencies: [ 16 | 'vuetify' 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /example/src/store/modules/user.js: -------------------------------------------------------------------------------- 1 | const userStore = { 2 | state: { 3 | balance: 0, 4 | }, 5 | getters: {}, 6 | mutations: { 7 | setBalance(state, payload) { 8 | state.balance = payload; 9 | } 10 | }, 11 | actions: { 12 | async getBalance({state, commit}) { 13 | const balance = await state.web3.eth.getBalance(state.account) 14 | commit('setBalance', balance) 15 | } 16 | }, 17 | } 18 | export default userStore -------------------------------------------------------------------------------- /docs/img/status.d88bf06b.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/status.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/style/base.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;400;500;700&display=swap'); 2 | 3 | // base settings 4 | html, body { 5 | font-family: "Kanit", apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; 6 | line-height: 1.5; 7 | letter-spacing: 1px; 8 | min-height: 100vh; 9 | background: #F5F5F6; 10 | } 11 | 12 | *, ::before, ::after { 13 | box-sizing: border-box; 14 | } -------------------------------------------------------------------------------- /example/src/utils/web3.js: -------------------------------------------------------------------------------- 1 | import {ethers} from 'ethers' 2 | import web3 from 'web3' 3 | 4 | const POLLING_INTERVAL = 12000 5 | const RPC_URL = process.env.VUE_APP_RPC_URL 6 | export const getLibrary = () => { 7 | const httpProvider = new web3.providers.HttpProvider(RPC_URL) 8 | const web3NoAccount = new ethers.providers.Web3Provider(httpProvider) 9 | web3NoAccount.pollingInterval = POLLING_INTERVAL; 10 | return web3NoAccount 11 | } 12 | 13 | 14 | export const simpleRpcProvider = new ethers.providers.JsonRpcProvider(RPC_URL) -------------------------------------------------------------------------------- /example/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import web3ModalStore from "@/store/modules/web3Modal"; 4 | import predictionStore from "@/store/modules/prediction"; 5 | import userStore from "@/store/modules/user"; 6 | 7 | Vue.use(Vuex) 8 | 9 | export default new Vuex.Store({ 10 | state: {}, 11 | getters: {}, 12 | mutations: {}, 13 | actions: {}, 14 | modules: { 15 | web3Modal: web3ModalStore, 16 | prediction: predictionStore, 17 | user: userStore 18 | } 19 | }) 20 | -------------------------------------------------------------------------------- /example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'no-unused-vars': 'off', 17 | 'no-empty': 'off', 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/providers/connectors/injected.js: -------------------------------------------------------------------------------- 1 | const ConnectToInjected = async () => { 2 | let provider = null; 3 | if (typeof window.ethereum !== 'undefined') { 4 | provider = window.ethereum; 5 | try { 6 | await provider.request({method: 'eth_requestAccounts'}) 7 | } catch (error) { 8 | throw new Error("User Rejected"); 9 | } 10 | } else if (window.web3) { 11 | provider = window.web3.currentProvider; 12 | } else { 13 | throw new Error("No Web3 Provider found"); 14 | } 15 | return provider; 16 | }; 17 | 18 | export default ConnectToInjected; 19 | -------------------------------------------------------------------------------- /src/providers/connectors/authereum.js: -------------------------------------------------------------------------------- 1 | const ConnectToAuthereum = (Authereum, opts = {}) => { 2 | return new Promise(async (resolve, reject) => { 3 | try { 4 | const authereum = new Authereum({ 5 | ...opts, 6 | networkName: opts.networkName || opts.network 7 | }); 8 | const provider = authereum.getProvider(); 9 | provider.authereum = authereum; 10 | await provider.enable(); 11 | resolve(provider); 12 | } catch (error) { 13 | return reject(error); 14 | } 15 | }); 16 | }; 17 | 18 | export default ConnectToAuthereum; -------------------------------------------------------------------------------- /src/constants/classNames.js: -------------------------------------------------------------------------------- 1 | export const MODAL_LIGHTBOX_CLASSNAME = "web3modal-modal-lightbox"; 2 | export const MODAL_CONTAINER_CLASSNAME = "web3modal-modal-container"; 3 | export const MODAL_HITBOX_CLASSNAME = "web3modal-modal-hitbox"; 4 | export const MODAL_CARD_CLASSNAME = "web3modal-modal-card"; 5 | 6 | export const PROVIDER_WRAPPER_CLASSNAME = "web3modal-provider-wrapper"; 7 | export const PROVIDER_CONTAINER_CLASSNAME = "web3modal-provider-container"; 8 | export const PROVIDER_ICON_CLASSNAME = "web3modal-provider-icon"; 9 | export const PROVIDER_NAME_CLASSNAME = "web3modal-provider-name"; 10 | export const PROVIDER_DESCRIPTION_CLASSNAME = "web3modal-provider-description"; 11 | 12 | export const CONNECT_BUTTON_CLASSNAME = "web3modal-connect-button"; 13 | -------------------------------------------------------------------------------- /src/providers/connectors/index.js: -------------------------------------------------------------------------------- 1 | import injected from "./injected"; 2 | import walletconnect from "./walletconnect"; 3 | import portis from "./portis"; 4 | import fortmatic from "./fortmatic"; 5 | import torus from "./torus"; 6 | import arkane from "./arkane"; 7 | import authereum from "./authereum"; 8 | import burnerconnect from "./burnerconnect"; 9 | import mewconnect from "./mewconnect"; 10 | import dcentwallet from "./dcentwallet"; 11 | import bitski from "./bitski"; 12 | import frame from "./frame"; 13 | 14 | export { 15 | injected, 16 | walletconnect, 17 | portis, 18 | torus, 19 | fortmatic, 20 | arkane, 21 | authereum, 22 | burnerconnect, 23 | mewconnect, 24 | dcentwallet, 25 | bitski, 26 | frame 27 | }; 28 | -------------------------------------------------------------------------------- /src/providers/connectors/portis.js: -------------------------------------------------------------------------------- 1 | const ConnectToPortis = (Portis, opts) => { 2 | return new Promise(async (resolve, reject) => { 3 | if (opts && opts.id) { 4 | try { 5 | const id = opts.id; 6 | const network = opts.network || "mainnet"; 7 | const config = opts.config; 8 | const pt = new Portis(id, network, config); 9 | await pt.provider.enable(); 10 | pt.provider._portis = pt; 11 | resolve(pt.provider); 12 | } catch (error) { 13 | return reject(error); 14 | } 15 | } else { 16 | return reject(new Error("Missing Portis Id")); 17 | } 18 | }); 19 | }; 20 | export default ConnectToPortis; -------------------------------------------------------------------------------- /docs/img/imtoken.df6517ce.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/imtoken.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/connectors/fortmatic.js: -------------------------------------------------------------------------------- 1 | const ConnectToFortmatic = async (Fortmatic, opts) => { 2 | if (opts && opts.key) { 3 | try { 4 | const key = opts.key; 5 | const fm = new Fortmatic(key, opts.network); 6 | const provider = await fm.getProvider(); 7 | provider.fm = fm; 8 | await fm.user.login(); 9 | const isLoggedIn = await fm.user.isLoggedIn(); 10 | if (isLoggedIn) { 11 | return provider; 12 | } else { 13 | throw new Error("Failed to login to Fortmatic"); 14 | } 15 | } catch (error) { 16 | console.error(error) 17 | } 18 | } else { 19 | throw new Error("Missing Fortmatic key"); 20 | } 21 | }; 22 | 23 | export default ConnectToFortmatic; -------------------------------------------------------------------------------- /example/src/style/theme.scss: -------------------------------------------------------------------------------- 1 | $primary: var(--colorPrimary, #1DA1F2); 2 | $primary_hover: var(--colorPrimaryHover, rgba(29, 161, 242, 0.1)); 3 | 4 | $themes: ( 5 | light: ( 6 | bg: #F5F5F6, 7 | card_bg: #F7F9FA, 8 | card_hover_bg: rgba(0,0,0,0.03), 9 | base: #122B3E, 10 | secondary: #5B7083, 11 | divide: #EBEEF0, 12 | primary: $primary, 13 | primary_hover: $primary_hover, 14 | scroll_bar: #67A8D2, 15 | shadow: 3px 3px 10px rgba(0,0,0,0.26), 16 | ), 17 | dark: ( 18 | bg: #122B3E, 19 | card_bg: #192734, 20 | card_hover_bg: rgba(255,255,255,0.03), 21 | base: #F5F5F6, 22 | secondary: #8899A6, 23 | divide: #38444D, 24 | primary: $primary, 25 | primary_hover: $primary_hover, 26 | scroll_bar: #5f708a, 27 | shadow: 3px 3px 10px rgba(255,255,255,0.2), 28 | ) 29 | ) -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | example
-------------------------------------------------------------------------------- /docs/img/arkane.046401e9.svg: -------------------------------------------------------------------------------- 1 | Business - 160x160 - colored with light background -------------------------------------------------------------------------------- /src/providers/logos/arkane.svg: -------------------------------------------------------------------------------- 1 | Business - 160x160 - colored with light background -------------------------------------------------------------------------------- /docs/img/frame.8c515581.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /example/src/utils/contract.js: -------------------------------------------------------------------------------- 1 | import predictionsAbi from '../config/abi/predictions.json' 2 | import chainLinkOracleAbi from '../config/abi/oracle.json' 3 | import {ethers} from "ethers"; 4 | import {simpleRpcProvider} from "@/utils/web3"; 5 | import store from '@/store' 6 | 7 | export const getPredictionsContract = () => { 8 | 9 | const {library} = store.state.web3Modal 10 | const signer = library.getSigner() 11 | return getContract(predictionsAbi, process.env.VUE_APP_PREDICTION_CONTRACT_ADDRESS, signer) 12 | } 13 | 14 | export const getOracleContract = () => { 15 | return getContract(chainLinkOracleAbi, process.env.VUE_APP_PREDICTION_ORACLE_ADDRESS) 16 | } 17 | 18 | const getContract = (abi, address, signer = null) => { 19 | 20 | const signerOrProvider = signer ?? simpleRpcProvider 21 | return new ethers.Contract(address, abi, signerOrProvider) 22 | } -------------------------------------------------------------------------------- /src/providers/logos/frame.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/providers/connectors/arkane.js: -------------------------------------------------------------------------------- 1 | const ConnectToArkane = (Arkane, opts) => { 2 | return new Promise(async (resolve, reject) => { 3 | if (opts && opts.clientId) { 4 | try { 5 | const options = { 6 | clientId: opts.clientId, 7 | rpcUrl: opts.nodeUrl, 8 | environment: opts.environment, 9 | signMethod: "POPUP" 10 | }; 11 | const provider = await window.Arkane.createArkaneProviderEngine( 12 | options 13 | ); 14 | return resolve(provider); 15 | } catch (error) { 16 | console.error(error); 17 | return reject(new Error("Failed to login to Arkane 2")); 18 | } 19 | } else { 20 | return reject(new Error("Please provide an Arkane client id")); 21 | } 22 | }); 23 | }; 24 | 25 | export default ConnectToArkane; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web3modal-vue", 3 | "version": "1.0.5", 4 | "description": "A single Web3 / Ethereum provider solution for all Wallets", 5 | "main": "./src/Web3ModalVue.vue", 6 | "keywords": [ 7 | "web3", 8 | "web3vue", 9 | "crypto", 10 | "ethereum", 11 | "web3modal", 12 | "web3modalvue", 13 | "vueweb3", 14 | "metamask", 15 | "walletconnect", 16 | "portis", 17 | "fortmatic", 18 | "arkane", 19 | "torus", 20 | "authereum", 21 | "frame" 22 | ], 23 | "files": [ 24 | "src" 25 | ], 26 | "author": "SmallRuralDog", 27 | "license": "MIT", 28 | "homepage": "https://github.com/SmallRuralDog/web3modal-vue", 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/SmallRuralDog/web3modal-vue.git" 32 | }, 33 | "bugs": { 34 | "url": "https://github.com/SmallRuralDog/web3modal-vue/issues" 35 | }, 36 | "dependencies": { 37 | "detect-browser": "^5.2.0", 38 | "vue-styled-components": "^1.6.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/helpers/local.js: -------------------------------------------------------------------------------- 1 | export let local; 2 | 3 | if ( 4 | typeof window !== "undefined" && 5 | typeof window.localStorage !== "undefined" 6 | ) { 7 | local = window.localStorage; 8 | } 9 | 10 | export const setLocal = (key, data) => { 11 | const jsonData = JSON.stringify(data); 12 | if (local) { 13 | local.setItem(key, jsonData); 14 | } 15 | }; 16 | 17 | export const getLocal = (key) => { 18 | let data = null; 19 | let raw = null; 20 | if (local) { 21 | raw = local.getItem(key); 22 | } 23 | if (raw && typeof raw === "string") { 24 | try { 25 | data = JSON.parse(raw); 26 | } catch (error) { 27 | return null; 28 | } 29 | } 30 | return data; 31 | }; 32 | 33 | export const removeLocal = (key) => { 34 | if (local) { 35 | local.removeItem(key); 36 | } 37 | }; 38 | 39 | export const updateLocal = (key, data) => { 40 | const localData = getLocal(key) || {}; 41 | const mergedData = { 42 | ...localData, 43 | ...data 44 | }; 45 | setLocal(key, mergedData); 46 | }; 47 | -------------------------------------------------------------------------------- /docs/img/trust.467b80c4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/trust.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Web3ModalVue 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/src/assets/images/down_area.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/assets/images/up_area.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/utils/formatBalance.js: -------------------------------------------------------------------------------- 1 | import BigNumber from 'bignumber.js' 2 | import {BIG_TEN} from './bigNumber' 3 | 4 | /** 5 | * Take a formatted amount, e.g. 15 BNB and convert it to full decimal value, e.g. 15000000000000000 6 | */ 7 | export const getDecimalAmount = (amount, decimals = 18) => { 8 | return new BigNumber(amount).times(BIG_TEN.pow(decimals)) 9 | } 10 | 11 | export const getBalanceAmount = (amount, decimals = 18) => { 12 | return new BigNumber(amount).dividedBy(BIG_TEN.pow(decimals)) 13 | } 14 | 15 | /** 16 | * This function is not really necessary but is used throughout the site. 17 | */ 18 | export const getBalanceNumber = (balance, decimals = 18) => { 19 | return getBalanceAmount(balance, decimals).toNumber() 20 | } 21 | 22 | export const getFullDisplayBalance = (balance, decimals = 18, decimalsToAppear) => { 23 | return getBalanceAmount(balance, decimals).toFixed(decimalsToAppear) 24 | } 25 | 26 | export const formatNumber = (number, minPrecision = 2, maxPrecision = 2) => { 27 | const options = { 28 | minimumFractionDigits: minPrecision, 29 | maximumFractionDigits: maxPrecision, 30 | } 31 | return number.toLocaleString(undefined, options) 32 | } 33 | -------------------------------------------------------------------------------- /docs/img/coinbase.0538cb6b.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/coinbase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/connectors/mewconnect.js: -------------------------------------------------------------------------------- 1 | import {getChainId} from "../../helpers"; 2 | const ConnectToMewConnect = ( 3 | MewConnectProvider, 4 | opts 5 | ) => { 6 | return new Promise(async (resolve, reject) => { 7 | let infuraId = ""; 8 | let rpc = undefined; 9 | let chainId = 1; 10 | if (opts) { 11 | infuraId = opts.infuraId || ""; 12 | rpc = opts.rpc || undefined; 13 | if (opts.infuraId && !rpc) { 14 | rpc = `wss://mainnet.infura.io/ws/v3/${infuraId}` 15 | } 16 | chainId = 17 | opts.network && getChainId(opts.network) ? getChainId(opts.network) : 1; 18 | } 19 | if (!MewConnectProvider.Provider.isConnected) { 20 | const mewConnect = new MewConnectProvider.Provider(); 21 | const provider = mewConnect.makeWeb3Provider(chainId, rpc, true) 22 | 23 | mewConnect.on('disconnected', () => { 24 | }) 25 | try { 26 | const address = await mewConnect.enable(); 27 | console.log(address); // todo remove dev item 28 | resolve(provider); 29 | } catch (e) { 30 | reject(e); 31 | } 32 | } 33 | 34 | }); 35 | }; 36 | 37 | export default ConnectToMewConnect; -------------------------------------------------------------------------------- /example/src/utils/helpers.js: -------------------------------------------------------------------------------- 1 | import BigNumber from "bignumber.js"; 2 | import store from '@/store' 3 | 4 | export const numberOrNull = (value) => { 5 | if (value === null) { 6 | return null 7 | } 8 | const valueNum = Number(value) 9 | return Number.isNaN(valueNum) ? null : valueNum 10 | } 11 | 12 | export const getMultiplier = (total, amount) => { 13 | if (total === 0 || amount === 0) { 14 | return 0 15 | } 16 | return total / amount 17 | } 18 | 19 | 20 | export const getPayout = (bet, rewardRate = 1) => { 21 | if (!bet || !bet.round) { 22 | return 0 23 | } 24 | const {bullAmount, bearAmount, totalAmount} = bet.round 25 | const multiplier = getMultiplier(totalAmount, bet.position === "Bull" ? bullAmount : bearAmount) 26 | return bet.amount * multiplier * rewardRate 27 | } 28 | export const getNetPayout = (bet, rewardRate = 1) => { 29 | if (!bet || !bet.round) { 30 | return 0 31 | } 32 | 33 | const payout = getPayout(bet, rewardRate) 34 | return payout - bet.amount 35 | } 36 | 37 | export const formatBnb = (bnb) => { 38 | return bnb ? bnb.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) : '0' 39 | } 40 | 41 | export const usePriceBnbBusd = () => { 42 | 43 | const price = store.state.prediction.price 44 | return new BigNumber(price) 45 | } -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@splidejs/vue-splide": "^0.3.5", 12 | "@walletconnect/web3-provider": "^1.4.1", 13 | "bignumber.js": "^9.0.1", 14 | "core-js": "^3.6.5", 15 | "ethers": "^5.4.0", 16 | "graphql": "^15.5.1", 17 | "graphql-request": "^3.4.0", 18 | "lodash": "^4.17.21", 19 | "react": "^17.0.2", 20 | "swiper": "^6.7.1", 21 | "vue": "^2.6.11", 22 | "vue-awesome-swiper": "^4.1.1", 23 | "vue-router": "^3.2.0", 24 | "vuetify": "^2.4.0", 25 | "vuex": "^3.4.0", 26 | "web3": "^1.3.6", 27 | "web3modal-vue": "^1.0.3" 28 | }, 29 | "devDependencies": { 30 | "@vue/cli-plugin-babel": "~4.5.0", 31 | "@vue/cli-plugin-eslint": "~4.5.0", 32 | "@vue/cli-plugin-router": "~4.5.0", 33 | "@vue/cli-plugin-vuex": "~4.5.0", 34 | "@vue/cli-service": "~4.5.0", 35 | "babel-eslint": "^10.1.0", 36 | "eslint": "^6.7.2", 37 | "eslint-plugin-vue": "^6.2.2", 38 | "node-sass": "^4.12.0", 39 | "sass": "~1.32.0", 40 | "sass-loader": "^10.0.0", 41 | "vue-cli-plugin-vuetify": "~2.4.1", 42 | "vue-template-compiler": "^2.6.11", 43 | "vuetify-loader": "^1.7.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/providers/connectors/walletconnect.js: -------------------------------------------------------------------------------- 1 | import {getChainId} from "../../helpers"; 2 | 3 | 4 | const ConnectToWalletConnect = (WalletConnectProvider, opts) => { 5 | return new Promise(async (resolve, reject) => { 6 | let bridge = "https://bridge.walletconnect.org"; 7 | let qrcode = true; 8 | let infuraId = ""; 9 | let rpc = undefined; 10 | let chainId = 1; 11 | let qrcodeModalOptions = undefined; 12 | console.log("wallet connect"); // todo remove dev item 13 | if (opts) { 14 | bridge = opts.bridge || bridge; 15 | qrcode = typeof opts.qrcode !== "undefined" ? opts.qrcode : qrcode; 16 | infuraId = opts.infuraId || ""; 17 | rpc = opts.rpc || undefined; 18 | chainId = 19 | opts.network && getChainId(opts.network) ? getChainId(opts.network) : 1; 20 | qrcodeModalOptions = opts.qrcodeModalOptions || undefined; 21 | } 22 | 23 | const provider = new WalletConnectProvider({ 24 | bridge, 25 | qrcode, 26 | infuraId, 27 | rpc, 28 | chainId, 29 | qrcodeModalOptions 30 | }); 31 | try { 32 | await provider.enable() 33 | resolve(provider); 34 | } catch (e) { 35 | reject(e); 36 | } 37 | }); 38 | }; 39 | 40 | export default ConnectToWalletConnect; 41 | -------------------------------------------------------------------------------- /src/controllers/events.js: -------------------------------------------------------------------------------- 1 | export class EventController { 2 | 3 | constructor() { 4 | this._eventCallbacks = []; 5 | } 6 | 7 | on(eventCallback) { 8 | this._eventCallbacks.push(eventCallback); 9 | } 10 | 11 | off(eventObj) { 12 | // remove specific event callback 13 | if (eventObj) { 14 | if (eventObj.callback) { 15 | this._eventCallbacks = this._eventCallbacks.filter( 16 | (eventCallback) => 17 | eventCallback.event !== eventObj.event || 18 | eventCallback.callback !== eventObj.callback 19 | ); 20 | } // No callback to remove, remove entire event 21 | else { 22 | this._eventCallbacks = this._eventCallbacks.filter( 23 | (eventCallback) => 24 | eventCallback.event !== eventObj.event 25 | ); 26 | } 27 | } else { 28 | this._eventCallbacks = []; 29 | } 30 | } 31 | 32 | 33 | trigger(event, result) { 34 | let eventCallbacks = this._eventCallbacks.filter( 35 | (eventCallback) => eventCallback.event === event 36 | ); 37 | 38 | if (eventCallbacks && eventCallbacks.length) { 39 | eventCallbacks.forEach((eventCallback) => { 40 | eventCallback.callback(result); 41 | }); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/providers/logos/walletconnect.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/connectors/torus.js: -------------------------------------------------------------------------------- 1 | // Supports Torus package versions 0.2.* 2 | const ConnectToTorus = async (Torus, opts) => { 3 | return new Promise(async (resolve, reject) => { 4 | try { 5 | // defaults 6 | let buttonPosition = "bottom-left"; 7 | let apiKey = "torus-default"; 8 | let modalZIndex = 99999; 9 | let network = {host: "mainnet"}; 10 | let defaultVerifier = undefined; 11 | 12 | // parsing to Torus interfaces 13 | network = 14 | opts.networkParams || opts.network 15 | ? {host: opts.network, ...opts.networkParams} 16 | : network; 17 | 18 | const torus = new Torus({ 19 | buttonPosition: opts.config?.buttonPosition || buttonPosition, 20 | apiKey: opts.config?.apiKey || apiKey, 21 | modalZIndex: opts.config?.modalZIndex || modalZIndex 22 | }); 23 | await torus.init({ 24 | showTorusButton: false, 25 | ...opts.config, 26 | network 27 | }); 28 | 29 | if (opts.loginParams) { 30 | defaultVerifier = opts.loginParams.verifier; 31 | } 32 | await torus.login({verifier: defaultVerifier}); 33 | const provider = torus.provider; 34 | provider.torus = torus; 35 | resolve(provider); 36 | } catch (err) { 37 | reject(err); 38 | } 39 | }); 40 | }; 41 | 42 | export default ConnectToTorus; -------------------------------------------------------------------------------- /example/src/config/mixins.js: -------------------------------------------------------------------------------- 1 | import {mapGetters, mapState} from "vuex"; 2 | import {getMultiplier} from "@/utils/helpers"; 3 | 4 | const web3Modal = { 5 | computed: { 6 | ...mapState(['web3Modal']), 7 | ...mapGetters(['predictionsContract']) 8 | }, 9 | active() { 10 | return this.web3Modal.active 11 | } 12 | } 13 | 14 | const predictionMixin = { 15 | computed: { 16 | ...mapState(['prediction']), 17 | currentEpoch() { 18 | return this.prediction.market.epoch 19 | }, 20 | bullMultiplier() { 21 | return getMultiplier(this.round.totalAmount, this.round.bullAmount) 22 | }, 23 | bearMultiplier() { 24 | return getMultiplier(this.round.totalAmount, this.round.bearAmount) 25 | }, 26 | bet() { 27 | const {account} = this.$store.state.web3Modal 28 | const {bets} = this.prediction 29 | const roundId = this.round.id 30 | 31 | if (!bets[account]) { 32 | return null 33 | } 34 | if (!bets[account][roundId]) { 35 | return null 36 | } 37 | return this.prediction.bets[account][roundId] 38 | }, 39 | hasEntered() { 40 | return this.bet !== null 41 | }, 42 | hasEnteredUp() { 43 | return this.hasEntered && this.bet.position === "Bull" 44 | }, 45 | hasEnteredDown() { 46 | return this.hasEntered && this.bet.position === "Bear" 47 | } 48 | } 49 | } 50 | 51 | export { 52 | web3Modal, 53 | predictionMixin 54 | } -------------------------------------------------------------------------------- /example/src/style/main.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "theme"; 3 | @import "variable"; 4 | @import "components"; 5 | @import "vue_splide"; 6 | 7 | // 主题变量map 8 | $theme-map: null; 9 | 10 | // 遍历主题map 11 | @mixin themed { 12 | @each $theme-name, $theme-map in $themes { 13 | $theme-map: $theme-map !global; 14 | 15 | //判断html的data-theme的属性值 16 | //& sass嵌套里的父容器标识 17 | [data-theme="#{$theme-name}"] & { 18 | @content; 19 | } 20 | } 21 | } 22 | 23 | // 根据Key获取颜色 24 | @function get_color($key) { 25 | @return map-get($theme-map, $key); 26 | } 27 | 28 | // 获取字体色 29 | @mixin color($name, $important:'') { 30 | @include themed { 31 | color: if($important=='',get_color($name), get_color($name) !important); 32 | } 33 | } 34 | 35 | // 获取背景色 36 | @mixin background($name, $important:'') { 37 | @include themed { 38 | background: if($important=='',get_color($name), get_color($name) !important); 39 | } 40 | } 41 | 42 | // 获取边框 43 | @mixin border($name) { 44 | @include themed { 45 | border-color: get_color($name); 46 | } 47 | } 48 | 49 | // 获取阴影 50 | @mixin shadow($name:'shadow') { 51 | @include themed { 52 | box-shadow: get_color($name); 53 | } 54 | } 55 | 56 | body { 57 | //@include background('bg'); 58 | @include color("base"); 59 | overflow-y: scroll; 60 | margin: 0 auto; 61 | 62 | &::-webkit-scrollbar { 63 | width: 10px; 64 | height: 10px; 65 | } 66 | 67 | &::-webkit-scrollbar-track { 68 | @include background(card_hover_bg); 69 | } 70 | 71 | &::-webkit-scrollbar-thumb { 72 | @include background(scroll_bar); 73 | border-radius: 5px; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /example/src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 64 | 70 | -------------------------------------------------------------------------------- /src/providers/logos/niftyWallet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/views/Predictions/SetPosition.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 59 | 60 | -------------------------------------------------------------------------------- /docs/img/cipher.95365c37.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/cipher.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/walletconnect-circle.8ec0ff12.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/walletconnect-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/assets/images/cake.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/assets/images/bnb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/web3-default.f5aa05d2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/web3-default.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/authereum.0922ef4e.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | authereum 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/providers/logos/authereum.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | authereum 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/src/views/Predictions/Components/CollectWinningsOverlay.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 76 | -------------------------------------------------------------------------------- /example/src/store/modules/web3Modal.js: -------------------------------------------------------------------------------- 1 | import {getLibrary} from "@/utils/web3"; 2 | import {ethers} from "ethers"; 3 | import {parseInt} from 'lodash' 4 | 5 | const web3ModalStore = { 6 | state: { 7 | web3Modal: null, 8 | 9 | library: getLibrary(), 10 | active: false, 11 | account: null, 12 | chainId: 0, 13 | }, 14 | mutations: { 15 | setWeb3Modal(state, web3Modal) { 16 | state.web3Modal = web3Modal 17 | }, 18 | setLibrary(state, library) { 19 | state.library = library 20 | }, 21 | setActive(state, active) { 22 | state.active = active 23 | }, 24 | setAccount(state, account) { 25 | state.account = account.toLowerCase() 26 | }, 27 | setChainId(state, chainId) { 28 | state.chainId = chainId 29 | } 30 | }, 31 | actions: { 32 | async connect({state, commit, dispatch}) { 33 | const provider = await state.web3Modal.connect(); 34 | 35 | const library = new ethers.providers.Web3Provider(provider) 36 | 37 | library.pollingInterval = 12000 38 | commit('setLibrary', library) 39 | 40 | const accounts = await library.listAccounts() 41 | if (accounts.length > 0) { 42 | commit('setAccount', accounts[0]) 43 | } 44 | const network = await library.getNetwork() 45 | commit('setChainId', network.chainId) 46 | commit('setActive', true) 47 | 48 | provider.on("connect", async (info) => { 49 | let chainId = parseInt(info.chainId) 50 | commit('setChainId', chainId) 51 | console.log("connect", info) 52 | }); 53 | 54 | provider.on("accountsChanged", async (accounts) => { 55 | if (accounts.length > 0) { 56 | commit('setAccount', accounts[0]) 57 | } else { 58 | await dispatch('resetApp') 59 | } 60 | console.log("accountsChanged") 61 | }); 62 | provider.on("chainChanged", async (chainId) => { 63 | chainId = parseInt(chainId) 64 | commit('setChainId', chainId) 65 | console.log("chainChanged", chainId) 66 | }); 67 | 68 | }, 69 | async resetApp({state, commit}) { 70 | try { 71 | await state.web3Modal.clearCachedProvider(); 72 | } catch (error) { 73 | console.error(error) 74 | } 75 | commit('setAccount', null) 76 | commit('setActive', false) 77 | commit('setLibrary', getLibrary()) 78 | }, 79 | } 80 | } 81 | 82 | export default web3ModalStore; -------------------------------------------------------------------------------- /src/providers/providers/index.js: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import WalletConnectLogo from "../logos/walletconnect-circle.svg"; 3 | // @ts-ignore 4 | import PortisLogo from "../logos/portis.svg"; 5 | // @ts-ignore 6 | import FortmaticLogo from "../logos/fortmatic.svg"; 7 | // @ts-ignore 8 | import ArkaneLogo from "../logos/arkane.svg"; 9 | // @ts-ignore 10 | import TorusLogo from "../logos/torus.svg"; 11 | // @ts-ignore 12 | import AuthereumLogo from "../logos/authereum.svg"; 13 | // @ts-ignore 14 | import BurnerWalletLogo from "../logos/burnerwallet.png"; 15 | // @ts-ignore 16 | import MEWwallet from "../logos/mewwallet.png"; 17 | // @ts-ignore 18 | import DcentWalletLogo from "../logos/dcentwallet.png"; 19 | // @ts-ignore 20 | import BitskiLogo from "../logos/bitski.svg"; 21 | // @ts-ignore 22 | import FrameLogo from "../logos/frame.svg"; 23 | 24 | 25 | export * from "../injected"; 26 | 27 | export const WALLETCONNECT = { 28 | id: "walletconnect", 29 | name: "WalletConnect", 30 | logo: WalletConnectLogo, 31 | type: "qrcode", 32 | check: "isWalletConnect", 33 | package: { 34 | required: [["infuraId", "rpc"]] 35 | } 36 | }; 37 | 38 | export const PORTIS = { 39 | id: "portis", 40 | name: "Portis", 41 | logo: PortisLogo, 42 | type: "web", 43 | check: "isPortis", 44 | package: { 45 | required: ["id"] 46 | } 47 | }; 48 | 49 | export const FORTMATIC = { 50 | id: "fortmatic", 51 | name: "Fortmatic", 52 | logo: FortmaticLogo, 53 | type: "web", 54 | check: "isFortmatic", 55 | package: { 56 | required: ["key"] 57 | } 58 | }; 59 | 60 | export const TORUS = { 61 | id: "torus", 62 | name: "Torus", 63 | logo: TorusLogo, 64 | type: "web", 65 | check: "isTorus" 66 | }; 67 | 68 | export const ARKANE = { 69 | id: "arkane", 70 | name: "Arkane", 71 | logo: ArkaneLogo, 72 | type: "web", 73 | check: "isArkane", 74 | package: { 75 | required: ["clientId"] 76 | } 77 | }; 78 | 79 | export const AUTHEREUM = { 80 | id: "authereum", 81 | name: "Authereum", 82 | logo: AuthereumLogo, 83 | type: "web", 84 | check: "isAuthereum" 85 | }; 86 | 87 | export const BURNERCONNECT = { 88 | id: "burnerconnect", 89 | name: "Burner Connect", 90 | logo: BurnerWalletLogo, 91 | type: "web", 92 | check: "isBurnerProvider" 93 | }; 94 | 95 | export const MEWCONNECT = { 96 | id: "mewconnect", 97 | name: "MEW wallet", 98 | logo: MEWwallet, 99 | type: "qrcode", 100 | check: "isMEWconnect", 101 | package: { 102 | required: [["infuraId", "rpc"]] 103 | } 104 | }; 105 | 106 | export const DCENT = { 107 | id: "dcentwallet", 108 | name: "D'CENT", 109 | logo: DcentWalletLogo, 110 | type: "hardware", 111 | check: "isDcentWallet", 112 | package: { 113 | required: ["rpcUrl"] 114 | } 115 | }; 116 | 117 | export const BITSKI = { 118 | id: "bitski", 119 | name: "Bitski", 120 | logo: BitskiLogo, 121 | type: "web", 122 | check: "isBitski", 123 | package: { 124 | required: ["clientId", "callbackUrl"] 125 | } 126 | }; 127 | 128 | export const FRAME = { 129 | id: "frame", 130 | name: "Frame", 131 | logo: FrameLogo, 132 | type: "web", 133 | check: "isFrameNative" 134 | }; 135 | -------------------------------------------------------------------------------- /example/src/views/Predictions/Components/SetPosition.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 104 | -------------------------------------------------------------------------------- /src/components/Provider.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/providers/injected/index.js: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import Web3DefaultLogo from "../logos/web3-default.svg"; 3 | // @ts-ignore 4 | import MetaMaskLogo from "../logos/metamask.svg"; 5 | // @ts-ignore 6 | import SafeLogo from "../logos/safe.svg"; 7 | // @ts-ignore 8 | import NiftyWalletLogo from "../logos/niftyWallet.png"; 9 | // @ts-ignore 10 | import TrustLogo from "../logos/trust.svg"; 11 | // @ts-ignore 12 | import DapperLogo from "../logos/dapper.png"; 13 | // @ts-ignore 14 | import CoinbaseLogo from "../logos/coinbase.svg"; 15 | // @ts-ignore 16 | import CipherLogo from "../logos/cipher.svg"; 17 | // @ts-ignore 18 | import imTokenLogo from "../logos/imtoken.svg"; 19 | // @ts-ignore 20 | import StatusLogo from "../logos/status.svg"; 21 | // @ts-ignore 22 | import TokenaryLogo from "../logos/tokenary.png"; 23 | // @ts-ignore 24 | import OperaLogo from "../logos/opera.svg"; 25 | // @ts-ignore 26 | import FrameLogo from "../logos/frame.svg"; 27 | // @ts-ignore 28 | import LiqualityLogo from "../logos/liquality.png"; 29 | 30 | export const FALLBACK = { 31 | id: "injected", 32 | name: "Web3", 33 | logo: Web3DefaultLogo, 34 | type: "injected", 35 | check: "isWeb3" 36 | }; 37 | 38 | export const METAMASK = { 39 | id: "injected", 40 | name: "MetaMask", 41 | logo: MetaMaskLogo, 42 | type: "injected", 43 | check: "isMetaMask" 44 | }; 45 | 46 | export const SAFE = { 47 | id: "injected", 48 | name: "Safe", 49 | logo: SafeLogo, 50 | type: "injected", 51 | check: "isSafe" 52 | }; 53 | 54 | export const NIFTY = { 55 | id: "injected", 56 | name: "Nifty", 57 | logo: NiftyWalletLogo, 58 | type: "injected", 59 | check: "isNiftyWallet" 60 | }; 61 | 62 | export const DAPPER = { 63 | id: "injected", 64 | name: "Dapper", 65 | logo: DapperLogo, 66 | type: "injected", 67 | check: "isDapper" 68 | }; 69 | 70 | export const OPERA = { 71 | id: "injected", 72 | name: "Opera", 73 | logo: OperaLogo, 74 | type: "injected", 75 | check: "isOpera" 76 | }; 77 | 78 | export const TRUST = { 79 | id: "injected", 80 | name: "Trust", 81 | logo: TrustLogo, 82 | type: "injected", 83 | check: "isTrust" 84 | }; 85 | 86 | export const COINBASE = { 87 | id: "injected", 88 | name: "Coinbase", 89 | logo: CoinbaseLogo, 90 | type: "injected", 91 | check: "isToshi" 92 | }; 93 | 94 | export const CIPHER = { 95 | id: "injected", 96 | name: "Cipher", 97 | logo: CipherLogo, 98 | type: "injected", 99 | check: "isCipher" 100 | }; 101 | 102 | export const IMTOKEN = { 103 | id: "injected", 104 | name: "imToken", 105 | logo: imTokenLogo, 106 | type: "injected", 107 | check: "isImToken" 108 | }; 109 | 110 | export const STATUS = { 111 | id: "injected", 112 | name: "Status", 113 | logo: StatusLogo, 114 | type: "injected", 115 | check: "isStatus" 116 | }; 117 | 118 | export const TOKENARY = { 119 | id: "injected", 120 | name: "Tokenary", 121 | logo: TokenaryLogo, 122 | type: "injected", 123 | check: "isTokenary" 124 | }; 125 | 126 | export const FRAMEINJECTED = { 127 | id: "injected", 128 | name: "Frame", 129 | logo: FrameLogo, 130 | type: "injected", 131 | check: "isFrame" 132 | }; 133 | 134 | export const LIQUALITY = { 135 | id: "injected", 136 | name: "Liquality", 137 | logo: LiqualityLogo, 138 | type: "injected", 139 | check: "isLiquality" 140 | }; 141 | -------------------------------------------------------------------------------- /docs/img/portis.7eb1b5b6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/portis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/config/abi/oracle.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "inputs": [], 4 | "stateMutability": "nonpayable", 5 | "type": "constructor" 6 | }, 7 | { 8 | "anonymous": false, 9 | "inputs": [ 10 | { 11 | "indexed": true, 12 | "internalType": "address", 13 | "name": "previousOwner", 14 | "type": "address" 15 | }, 16 | { 17 | "indexed": true, 18 | "internalType": "address", 19 | "name": "newOwner", 20 | "type": "address" 21 | } 22 | ], 23 | "name": "OwnershipTransferred", 24 | "type": "event" 25 | }, 26 | { 27 | "anonymous": false, 28 | "inputs": [ 29 | { 30 | "indexed": false, 31 | "internalType": "uint80", 32 | "name": "roundId", 33 | "type": "uint80" 34 | }, 35 | { 36 | "indexed": false, 37 | "internalType": "int256", 38 | "name": "price", 39 | "type": "int256" 40 | } 41 | ], 42 | "name": "SavePrice", 43 | "type": "event" 44 | }, 45 | { 46 | "inputs": [], 47 | "name": "owner", 48 | "outputs": [ 49 | { 50 | "internalType": "address", 51 | "name": "", 52 | "type": "address" 53 | } 54 | ], 55 | "stateMutability": "view", 56 | "type": "function", 57 | "constant": true 58 | }, 59 | { 60 | "inputs": [], 61 | "name": "price", 62 | "outputs": [ 63 | { 64 | "internalType": "int256", 65 | "name": "", 66 | "type": "int256" 67 | } 68 | ], 69 | "stateMutability": "view", 70 | "type": "function", 71 | "constant": true 72 | }, 73 | { 74 | "inputs": [], 75 | "name": "renounceOwnership", 76 | "outputs": [], 77 | "stateMutability": "nonpayable", 78 | "type": "function" 79 | }, 80 | { 81 | "inputs": [], 82 | "name": "roundId", 83 | "outputs": [ 84 | { 85 | "internalType": "uint80", 86 | "name": "", 87 | "type": "uint80" 88 | } 89 | ], 90 | "stateMutability": "view", 91 | "type": "function", 92 | "constant": true 93 | }, 94 | { 95 | "inputs": [ 96 | { 97 | "internalType": "address", 98 | "name": "newOwner", 99 | "type": "address" 100 | } 101 | ], 102 | "name": "transferOwnership", 103 | "outputs": [], 104 | "stateMutability": "nonpayable", 105 | "type": "function" 106 | }, 107 | { 108 | "inputs": [], 109 | "name": "latestRoundData", 110 | "outputs": [ 111 | { 112 | "internalType": "uint80", 113 | "name": "", 114 | "type": "uint80" 115 | }, 116 | { 117 | "internalType": "int256", 118 | "name": "", 119 | "type": "int256" 120 | }, 121 | { 122 | "internalType": "uint256", 123 | "name": "", 124 | "type": "uint256" 125 | }, 126 | { 127 | "internalType": "uint256", 128 | "name": "", 129 | "type": "uint256" 130 | }, 131 | { 132 | "internalType": "uint80", 133 | "name": "", 134 | "type": "uint80" 135 | } 136 | ], 137 | "stateMutability": "view", 138 | "type": "function", 139 | "constant": true 140 | }, 141 | { 142 | "inputs": [ 143 | { 144 | "internalType": "int256", 145 | "name": "_price", 146 | "type": "int256" 147 | } 148 | ], 149 | "name": "updatePrice", 150 | "outputs": [], 151 | "stateMutability": "nonpayable", 152 | "type": "function" 153 | } 154 | ] -------------------------------------------------------------------------------- /docs/img/metamask.925c6160.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/providers/logos/metamask.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/views/Predictions/Components/SoonRoundCard.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 89 | -------------------------------------------------------------------------------- /docs/img/bitski.90dd0e3d.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | bitski-icon 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/providers/logos/bitski.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | bitski-icon 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 147 | -------------------------------------------------------------------------------- /example/src/assets/images/prediction.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Web3ModalVue.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /src/constants/chains.js: -------------------------------------------------------------------------------- 1 | export const CHAIN_DATA_LIST = { 2 | 1: { 3 | chainId: 1, 4 | chain: "ETH", 5 | network: "mainnet", 6 | networkId: 1 7 | }, 8 | 2: { 9 | chainId: 2, 10 | chain: "EXP", 11 | network: "expanse", 12 | networkId: 1 13 | }, 14 | 3: { 15 | chainId: 3, 16 | chain: "ETH", 17 | network: "ropsten", 18 | networkId: 3 19 | }, 20 | 4: { 21 | chainId: 4, 22 | chain: "ETH", 23 | network: "rinkeby", 24 | networkId: 4 25 | }, 26 | 5: { 27 | chainId: 5, 28 | chain: "ETH", 29 | network: "goerli", 30 | networkId: 5 31 | }, 32 | 6: { 33 | chainId: 6, 34 | chain: "ETC", 35 | network: "kotti", 36 | networkId: 6 37 | }, 38 | 8: { 39 | chainId: 8, 40 | chain: "UBQ", 41 | network: "ubiq", 42 | networkId: 88 43 | }, 44 | 9: { 45 | chainId: 9, 46 | chain: "UBQ", 47 | network: "ubiq-testnet", 48 | networkId: 2 49 | }, 50 | 11: { 51 | chainId: 11, 52 | chain: "META", 53 | network: "metadium", 54 | networkId: 11 55 | }, 56 | 12: { 57 | chainId: 12, 58 | chain: "META", 59 | network: "metadium-testnet", 60 | networkId: 12 61 | }, 62 | 18: { 63 | chainId: 18, 64 | chain: "TST", 65 | network: "thundercore-testnet", 66 | networkId: 18 67 | }, 68 | 30: { 69 | chainId: 30, 70 | chain: "RSK", 71 | network: "rsk", 72 | networkId: 30 73 | }, 74 | 31: { 75 | chainId: 31, 76 | chain: "RSK", 77 | network: "rsk-testnet", 78 | networkId: 31 79 | }, 80 | 42: { 81 | chainId: 42, 82 | chain: "ETH", 83 | network: "kovan", 84 | networkId: 42 85 | }, 86 | 56: { 87 | chainId: 56, 88 | chain: "BSC", 89 | network: "binance", 90 | networkId: 56 91 | }, 92 | 60: { 93 | chainId: 60, 94 | chain: "GO", 95 | network: "gochain", 96 | networkId: 60 97 | }, 98 | 61: { 99 | chainId: 61, 100 | chain: "ETC", 101 | network: "etc", 102 | networkId: 1 103 | }, 104 | 62: { 105 | chainId: 62, 106 | chain: "ETC", 107 | network: "etc-morden", 108 | networkId: 2 109 | }, 110 | 63: { 111 | chainId: 63, 112 | chain: "ETC", 113 | network: "etc-testnet", 114 | networkId: 7 115 | }, 116 | 64: { 117 | chainId: 64, 118 | chain: "ELLA", 119 | network: "ellaism", 120 | networkId: 64 121 | }, 122 | 76: { 123 | chainId: 76, 124 | chain: "MIX", 125 | network: "mix", 126 | networkId: 76 127 | }, 128 | 77: { 129 | chainId: 77, 130 | chain: "POA", 131 | network: "poa-sokol", 132 | networkId: 77 133 | }, 134 | 88: { 135 | chainId: 88, 136 | chain: "TOMO", 137 | network: "tomochain", 138 | networkId: 88 139 | }, 140 | 99: { 141 | chainId: 99, 142 | chain: "POA", 143 | network: "poa-core", 144 | networkId: 99 145 | }, 146 | 100: { 147 | chainId: 100, 148 | chain: "XDAI", 149 | network: "xdai", 150 | networkId: 100 151 | }, 152 | 101: { 153 | chainId: 101, 154 | chain: "ETI", 155 | network: "etherinc", 156 | networkId: 1 157 | }, 158 | 108: { 159 | chainId: 108, 160 | chain: "TT", 161 | network: "thundercore", 162 | networkId: 108 163 | }, 164 | 162: { 165 | chainId: 162, 166 | chain: "PHT", 167 | network: "sirius", 168 | networkId: 162 169 | }, 170 | 163: { 171 | chainId: 163, 172 | chain: "PHT", 173 | network: "lightstreams", 174 | networkId: 163 175 | }, 176 | 211: { 177 | chainId: 211, 178 | chain: "FTN", 179 | network: "freight", 180 | networkId: 0 181 | }, 182 | 269: { 183 | chainId: 269, 184 | chain: "HPB", 185 | network: "hpb", 186 | networkId: 100 187 | }, 188 | 385: { 189 | chainId: 385, 190 | chain: "CRO", 191 | network: "lisinski", 192 | networkId: 385 193 | }, 194 | 820: { 195 | chainId: 820, 196 | chain: "CLO", 197 | network: "callisto", 198 | networkId: 1 199 | }, 200 | 821: { 201 | chainId: 821, 202 | chain: "CLO", 203 | network: "callisto-testnet", 204 | networkId: 2 205 | }, 206 | 137: { 207 | chainId: 137, 208 | chain: "MATIC", 209 | network: "matic", 210 | networkId: 137 211 | }, 212 | 80001: { 213 | chainId: 80001, 214 | chain: "MUMBAI", 215 | network: "mumbai", 216 | networkId: 80001 217 | }, 218 | 246529: { 219 | chainId: 246529, 220 | chain: "ARTIS sigma1", 221 | network: "artis-s1", 222 | networkId: 246529 223 | }, 224 | 246785: { 225 | chainId: 246785, 226 | chain: "ARTIS tau1", 227 | network: "artis-t1", 228 | networkId: 246785 229 | } 230 | }; 231 | -------------------------------------------------------------------------------- /example/src/assets/images/stall.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/assets/images/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/views/Predictions/Components/LiveRoundCard.vue: -------------------------------------------------------------------------------- 1 | 115 | 116 | 129 | -------------------------------------------------------------------------------- /example/src/views/Predictions/Components/ExpiredRoundCard.vue: -------------------------------------------------------------------------------- 1 | 105 | 106 | -------------------------------------------------------------------------------- /example/src/views/Predictions/Prediction.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 136 | 137 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web3ModalVue 2 | 3 | A single Web3 / Ethereum provider solution for all Wallets 4 | 5 | ## Introduction 6 | 7 | Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration. 8 | 9 | By default Web3Modal Library supports injected providers like (**Metamask**, **Dapper**, **Gnosis Safe**, **Frame**, Web3 Browsers, etc) and **WalletConnect**, You can also easily configure the library to support **Portis**, **Fortmatic**, **Squarelink**, **Torus**, **Authereum**, **D'CENT Wallet** and **Arkane**. 10 | 11 | ## React 12 | [web3modal](https://github.com/Web3Modal/web3modal) 13 | 14 | ## Usage 15 | 16 | 1. Install Web3Modal NPM package 17 | 18 | ```bash 19 | npm install --save web3modal-vue 20 | 21 | # OR 22 | 23 | yarn add web3modal-vue 24 | ``` 25 | 26 | 2. Install Provider packages 27 | 28 | ```js 29 | /* See Provider Options Section */ 30 | ``` 31 | 32 | 3. Then you can add Web3Modal to your Dapp as follows 33 | 34 | ```vue 35 | 45 | 95 | ``` 96 | 97 | ```js 98 | import {getLibrary} from "@/utils/web3"; 99 | import {ethers} from "ethers"; 100 | import {parseInt} from 'lodash' 101 | 102 | const web3ModalStore = { 103 | state: { 104 | web3Modal: null, 105 | 106 | library: getLibrary(), 107 | active: false, 108 | account: null, 109 | chainId: 0, 110 | }, 111 | mutations: { 112 | setWeb3Modal(state, web3Modal) { 113 | state.web3Modal = web3Modal 114 | }, 115 | setLibrary(state, library) { 116 | state.library = library 117 | }, 118 | setActive(state, active) { 119 | state.active = active 120 | }, 121 | setAccount(state, account) { 122 | state.account = account 123 | }, 124 | setChainId(state, chainId) { 125 | state.chainId = chainId 126 | } 127 | }, 128 | actions: { 129 | async connect({state, commit, dispatch}) { 130 | const provider = await state.web3Modal.connect(); 131 | 132 | const library = new ethers.providers.Web3Provider(provider) 133 | 134 | library.pollingInterval = 12000 135 | commit('setLibrary', library) 136 | 137 | const accounts = await library.listAccounts() 138 | if (accounts.length > 0) { 139 | commit('setAccount', accounts[0]) 140 | } 141 | const network = await library.getNetwork() 142 | commit('setChainId', network.chainId) 143 | commit('setActive', true) 144 | 145 | provider.on("connect", async (info) => { 146 | let chainId = parseInt(info.chainId) 147 | commit('setChainId', chainId) 148 | console.log("connect", info) 149 | }); 150 | 151 | provider.on("accountsChanged", async (accounts) => { 152 | if (accounts.length > 0) { 153 | commit('setAccount', accounts[0]) 154 | } else { 155 | await dispatch('resetApp') 156 | } 157 | console.log("accountsChanged") 158 | }); 159 | provider.on("chainChanged", async (chainId) => { 160 | chainId = parseInt(chainId) 161 | commit('setChainId', chainId) 162 | console.log("chainChanged", chainId) 163 | }); 164 | 165 | }, 166 | async resetApp({state, commit}) { 167 | try { 168 | await state.web3Modal.clearCachedProvider(); 169 | } catch (error) { 170 | console.error(error) 171 | } 172 | commit('setAccount', null) 173 | commit('setActive', false) 174 | commit('setLibrary', getLibrary()) 175 | }, 176 | } 177 | } 178 | export default web3ModalStore; 179 | ``` 180 | 181 | ## Provider Options 182 | 183 | These are all the providers available with Web3Modal and how to configure their provider options: 184 | 185 | - [WalletConnect](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/walletconnect.md) 186 | - [Fortmatic](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/fortmatic.md) 187 | - [Torus](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/torus.md) 188 | - [Portis](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/portis.md) 189 | - [Authereum](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/authereum.md) 190 | - [Frame](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/frame.md) 191 | - [Bitski](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/bitski.md) 192 | - [Arkane](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/arkane.md) 193 | - [DCent](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/dcent.md) 194 | - [BurnerConnect](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/burnerconnect.md) 195 | - [MEWConnect](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/mewconnect.md) 196 | 197 | ## Who using it 198 | 199 | [Submit my Dapp](https://github.com/SmallRuralDog/web3modal-vue/issues/1) 200 | 201 | ## Example 202 | [https://github.com/SmallRuralDog/web3modal-vue/tree/master/example](https://github.com/SmallRuralDog/web3modal-vue/tree/master/example) 203 | 204 | ## Demo 205 | [https://smallruraldog.github.io/web3modal-vue](https://smallruraldog.github.io/web3modal-vue/#/) 206 | 207 | ## License 208 | 209 | MIT -------------------------------------------------------------------------------- /docs/js/app.1d33e1f8.js: -------------------------------------------------------------------------------- 1 | (function(e){function n(n){for(var r,a,u=n[0],i=n[1],s=n[2],f=0,d=[];f0&&r("setAccount",i[0]),n.next=12,u.eth.getChainId();case 12:s=n.sent,r("setChainId",s),r("setActive",!0),c.on("connect",function(){var e=Object(a["a"])(regeneratorRuntime.mark((function e(n){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:console.log("connect",n);case 1:case"end":return e.stop()}}),e)})));return function(n){return e.apply(this,arguments)}}()),c.on("accountsChanged",function(){var e=Object(a["a"])(regeneratorRuntime.mark((function e(n){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:if(!(n.length>0)){e.next=4;break}r("setAccount",n[0]),e.next=7;break;case 4:return r("setAccount",null),e.next=7,o("resetApp");case 7:console.log("accountsChanged");case 8:case"end":return e.stop()}}),e)})));return function(n){return e.apply(this,arguments)}}()),c.on("chainChanged",function(){var e=Object(a["a"])(regeneratorRuntime.mark((function e(n){return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:r("setChainId",n),console.log("chainChanged");case 2:case"end":return e.stop()}}),e)})));return function(n){return e.apply(this,arguments)}}());case 18:case"end":return n.stop()}}),n)})))()},resetApp:function(e){return Object(a["a"])(regeneratorRuntime.mark((function n(){var t,r;return regeneratorRuntime.wrap((function(n){while(1)switch(n.prev=n.next){case 0:return t=e.state,r=e.commit,n.prev=1,n.next=4,t.web3Modal.web3Modal.clearCachedProvider();case 4:n.next=9;break;case 6:n.prev=6,n.t0=n["catch"](1),console.error(n.t0);case 9:r("setAccount",null),r("setActive",!1);case 11:case"end":return n.stop()}}),n,null,[[1,6]])})))()}}});r["a"].config.productionTip=!1,new r["a"]({router:R,store:$,render:function(e){return e(w)}}).$mount("#app")},6:function(e,n){},7:function(e,n){},8:function(e,n){},9:function(e,n){}}); 2 | //# sourceMappingURL=app.1d33e1f8.js.map -------------------------------------------------------------------------------- /example/src/views/Predictions/Components/OpenRoundCard.vue: -------------------------------------------------------------------------------- 1 | 124 | 125 | 159 | --------------------------------------------------------------------------------