explorer: "Launch Bridge" link
Change-Id: I9578ef73cb462ee7cb4837308a939c10d246fe2a
This commit is contained in:
justinschuldt
Justin Schuldt
parent
aff990487d
commit
14ba777cc1
|
|
@ -44,6 +44,7 @@
|
|||
"react-dom": "^16.12.0",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-time-ago": "^7.1.3",
|
||||
"styled-components": "5.3.3",
|
||||
"token_bridge": "file:./wasm/token"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -66,6 +67,7 @@
|
|||
"@types/react-helmet": "^5.0.15",
|
||||
"@types/react-intl": "2.3.18",
|
||||
"@types/storybook__react": "^5.2.1",
|
||||
"@types/styled-components": "5.1.15",
|
||||
"@typescript-eslint/eslint-plugin": "^2.34.0",
|
||||
"@typescript-eslint/parser": "^2.20.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
|
|
@ -1734,20 +1736,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@certusone/wormhole-sdk/node_modules/babel-plugin-styled-components": {
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
|
||||
"integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
|
||||
"dependencies": {
|
||||
"@babel/helper-annotate-as-pure": "^7.15.4",
|
||||
"@babel/helper-module-imports": "^7.15.4",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"lodash": "^4.17.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"styled-components": ">= 2"
|
||||
}
|
||||
},
|
||||
"node_modules/@certusone/wormhole-sdk/node_modules/bech32": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bech32/-/bech32-2.0.0.tgz",
|
||||
|
|
@ -1798,46 +1786,6 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@certusone/wormhole-sdk/node_modules/styled-components": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
|
||||
"integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/traverse": "^7.4.5",
|
||||
"@emotion/is-prop-valid": "^0.8.8",
|
||||
"@emotion/stylis": "^0.8.4",
|
||||
"@emotion/unitless": "^0.7.4",
|
||||
"babel-plugin-styled-components": ">= 1.12.0",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"shallowequal": "^1.1.0",
|
||||
"supports-color": "^5.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/styled-components"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0",
|
||||
"react-dom": ">= 16.8.0",
|
||||
"react-is": ">= 16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@certusone/wormhole-sdk/node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dependencies": {
|
||||
"has-flag": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/@certusone/wormhole-sdk/node_modules/tslib": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
|
||||
|
|
@ -5805,20 +5753,6 @@
|
|||
"react-dom": "^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@terra-dev/walletconnect/node_modules/babel-plugin-styled-components": {
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
|
||||
"integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
|
||||
"dependencies": {
|
||||
"@babel/helper-annotate-as-pure": "^7.15.4",
|
||||
"@babel/helper-module-imports": "^7.15.4",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"lodash": "^4.17.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"styled-components": ">= 2"
|
||||
}
|
||||
},
|
||||
"node_modules/@terra-dev/walletconnect/node_modules/qrcode.react": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-1.0.1.tgz",
|
||||
|
|
@ -5877,46 +5811,6 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@terra-dev/walletconnect/node_modules/styled-components": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
|
||||
"integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/traverse": "^7.4.5",
|
||||
"@emotion/is-prop-valid": "^0.8.8",
|
||||
"@emotion/stylis": "^0.8.4",
|
||||
"@emotion/unitless": "^0.7.4",
|
||||
"babel-plugin-styled-components": ">= 1.12.0",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"shallowequal": "^1.1.0",
|
||||
"supports-color": "^5.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/styled-components"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0",
|
||||
"react-dom": ">= 16.8.0",
|
||||
"react-is": ">= 16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@terra-dev/walletconnect/node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dependencies": {
|
||||
"has-flag": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/@terra-dev/walletconnect/node_modules/tslib": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
|
||||
|
|
@ -6510,6 +6404,17 @@
|
|||
"@storybook/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/styled-components": {
|
||||
"version": "5.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.15.tgz",
|
||||
"integrity": "sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/hoist-non-react-statics": "*",
|
||||
"@types/react": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/tapable": {
|
||||
"version": "1.0.7",
|
||||
"integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==",
|
||||
|
|
@ -27164,6 +27069,60 @@
|
|||
"inline-style-parser": "0.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
|
||||
"integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/traverse": "^7.4.5",
|
||||
"@emotion/is-prop-valid": "^0.8.8",
|
||||
"@emotion/stylis": "^0.8.4",
|
||||
"@emotion/unitless": "^0.7.4",
|
||||
"babel-plugin-styled-components": ">= 1.12.0",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"shallowequal": "^1.1.0",
|
||||
"supports-color": "^5.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/styled-components"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0",
|
||||
"react-dom": ">= 16.8.0",
|
||||
"react-is": ">= 16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components/node_modules/babel-plugin-styled-components": {
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
|
||||
"integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
|
||||
"dependencies": {
|
||||
"@babel/helper-annotate-as-pure": "^7.15.4",
|
||||
"@babel/helper-module-imports": "^7.15.4",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"lodash": "^4.17.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"styled-components": ">= 2"
|
||||
}
|
||||
},
|
||||
"node_modules/styled-components/node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dependencies": {
|
||||
"has-flag": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/stylehacks": {
|
||||
"version": "4.0.3",
|
||||
"integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==",
|
||||
|
|
@ -31639,17 +31598,6 @@
|
|||
"rxjs": "^7.3.0"
|
||||
}
|
||||
},
|
||||
"babel-plugin-styled-components": {
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
|
||||
"integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
|
||||
"requires": {
|
||||
"@babel/helper-annotate-as-pure": "^7.15.4",
|
||||
"@babel/helper-module-imports": "^7.15.4",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"lodash": "^4.17.11"
|
||||
}
|
||||
},
|
||||
"bech32": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bech32/-/bech32-2.0.0.tgz",
|
||||
|
|
@ -31694,31 +31642,6 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"styled-components": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
|
||||
"integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/traverse": "^7.4.5",
|
||||
"@emotion/is-prop-valid": "^0.8.8",
|
||||
"@emotion/stylis": "^0.8.4",
|
||||
"@emotion/unitless": "^0.7.4",
|
||||
"babel-plugin-styled-components": ">= 1.12.0",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"shallowequal": "^1.1.0",
|
||||
"supports-color": "^5.5.0"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
|
||||
|
|
@ -34590,17 +34513,6 @@
|
|||
"styled-components": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"babel-plugin-styled-components": {
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
|
||||
"integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
|
||||
"requires": {
|
||||
"@babel/helper-annotate-as-pure": "^7.15.4",
|
||||
"@babel/helper-module-imports": "^7.15.4",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"lodash": "^4.17.11"
|
||||
}
|
||||
},
|
||||
"qrcode.react": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-1.0.1.tgz",
|
||||
|
|
@ -34650,31 +34562,6 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"styled-components": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
|
||||
"integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/traverse": "^7.4.5",
|
||||
"@emotion/is-prop-valid": "^0.8.8",
|
||||
"@emotion/stylis": "^0.8.4",
|
||||
"@emotion/unitless": "^0.7.4",
|
||||
"babel-plugin-styled-components": ">= 1.12.0",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"shallowequal": "^1.1.0",
|
||||
"supports-color": "^5.5.0"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
|
||||
|
|
@ -35218,6 +35105,17 @@
|
|||
"@storybook/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/styled-components": {
|
||||
"version": "5.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.15.tgz",
|
||||
"integrity": "sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/hoist-non-react-statics": "*",
|
||||
"@types/react": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@types/tapable": {
|
||||
"version": "1.0.7",
|
||||
"integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==",
|
||||
|
|
@ -51384,6 +51282,44 @@
|
|||
"inline-style-parser": "0.1.1"
|
||||
}
|
||||
},
|
||||
"styled-components": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
|
||||
"integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/traverse": "^7.4.5",
|
||||
"@emotion/is-prop-valid": "^0.8.8",
|
||||
"@emotion/stylis": "^0.8.4",
|
||||
"@emotion/unitless": "^0.7.4",
|
||||
"babel-plugin-styled-components": ">= 1.12.0",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"shallowequal": "^1.1.0",
|
||||
"supports-color": "^5.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-plugin-styled-components": {
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz",
|
||||
"integrity": "sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==",
|
||||
"requires": {
|
||||
"@babel/helper-annotate-as-pure": "^7.15.4",
|
||||
"@babel/helper-module-imports": "^7.15.4",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"lodash": "^4.17.11"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"stylehacks": {
|
||||
"version": "4.0.3",
|
||||
"integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==",
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@
|
|||
"react-dom": "^16.12.0",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-time-ago": "^7.1.3",
|
||||
"styled-components": "5.3.3",
|
||||
"token_bridge": "file:./wasm/token"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -105,6 +106,7 @@
|
|||
"@types/react-helmet": "^5.0.15",
|
||||
"@types/react-intl": "2.3.18",
|
||||
"@types/storybook__react": "^5.2.1",
|
||||
"@types/styled-components": "5.1.15",
|
||||
"@typescript-eslint/eslint-plugin": "^2.34.0",
|
||||
"@typescript-eslint/parser": "^2.20.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
|
|
|
|||
|
|
@ -58,3 +58,37 @@ svg:hover.external-icon {
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Hamburger menu + popover
|
||||
.popover div.nav {
|
||||
/* mobile nav */
|
||||
flex-direction: column;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.affix {
|
||||
/* fixed position prevents scrolling while the mobile nav popover is open. */
|
||||
position: fixed !important;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 18px;
|
||||
}
|
||||
.nav a:hover{
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.site-nav-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.popover div.nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
/* eslint-disable react/jsx-props-no-spreading */
|
||||
import React from 'react';
|
||||
import { Layout, Menu, Grid } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Layout, Grid } from 'antd';
|
||||
const { Header, Content, Footer } = Layout;
|
||||
const { useBreakpoint } = Grid
|
||||
import { MenuOutlined } from '@ant-design/icons';
|
||||
import { SendOutlined } from '@ant-design/icons';
|
||||
import { useIntl, FormattedMessage } from 'gatsby-plugin-intl';
|
||||
import { OutboundLink } from "gatsby-plugin-google-gtag"
|
||||
import { useLocation } from '@reach/router';
|
||||
import { Link } from 'gatsby'
|
||||
import './DefaultLayout.less'
|
||||
import styled from "styled-components";
|
||||
|
||||
|
||||
import { externalLinks, linkToService, socialLinks, socialAnchorArray } from '~/utils/misc/socials';
|
||||
|
||||
|
|
@ -16,6 +17,64 @@ import { externalLinks, linkToService, socialLinks, socialAnchorArray } from '~/
|
|||
import { ReactComponent as AvatarAndName } from '~/icons/FullLogo_DarkBackground.svg';
|
||||
import { ReactComponent as Avatar } from '~/icons/Avatar_DarkBackground.svg';
|
||||
|
||||
|
||||
const Toggle = styled.div`
|
||||
display: none;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
padding: 0 4vw;
|
||||
@media (max-width: 992px) {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const Navbox = styled.div`
|
||||
align-items: center;
|
||||
@media (max-width: 992px) {
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding-top: 360px;
|
||||
background-color: #010114;
|
||||
transition: all 0.3s ease-in;
|
||||
left: ${(props: { open: boolean }) => (props.open ? "-100%" : "0")};
|
||||
}
|
||||
`;
|
||||
|
||||
const Hamburger = styled.div`
|
||||
background-color: #fff;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
transition: all 0.3s linear;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
transform: ${(props: { open: boolean }) => (props.open ? "rotate(-45deg)" : "inherit")};
|
||||
z-index: 1001;
|
||||
::before,
|
||||
::after {
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
content: "";
|
||||
position: absolute;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
::before {
|
||||
transform: ${(props) =>
|
||||
props.open
|
||||
? "rotate(-90deg) translate(-10px, 0px)"
|
||||
: "rotate(0deg)"};
|
||||
top: -10px;
|
||||
}
|
||||
::after {
|
||||
opacity: ${(props) => (props.open ? "0" : "1")};
|
||||
transform: ${(props) =>
|
||||
props.open ? "rotate(90deg) " : "rotate(0deg)"};
|
||||
top: 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
const externalLinkProps = { target: "_blank", rel: "noopener noreferrer", className: "no-external-icon" }
|
||||
|
||||
const DefaultLayout: React.FC<{}> = ({
|
||||
|
|
@ -23,10 +82,83 @@ const DefaultLayout: React.FC<{}> = ({
|
|||
...props
|
||||
}) => {
|
||||
const intl = useIntl()
|
||||
const location = useLocation()
|
||||
const screens = useBreakpoint();
|
||||
const [navbarOpen, setNavbarOpen] = useState(false);
|
||||
const menuItemProps: { style: { textAlign: CanvasTextAlign, padding: number } } = { style: { textAlign: 'center', padding: 0 } }
|
||||
|
||||
useEffect(() => {
|
||||
if (screens.lg === true) {
|
||||
setNavbarOpen(false)
|
||||
}
|
||||
}, [screens.lg])
|
||||
|
||||
const launchBridge = <div key="bridge" style={{ ...menuItemProps.style, zIndex: 1001 }}>
|
||||
<OutboundLink
|
||||
href={"https://wormholebridge.com"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="no-external-icon"
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
height: 40,
|
||||
fontSize: 16,
|
||||
border: "1.5px solid",
|
||||
paddingLeft: 20
|
||||
}}
|
||||
ghost
|
||||
type="primary"
|
||||
shape="round"
|
||||
size="large"
|
||||
>
|
||||
{intl.formatMessage({ id: "nav.bridgeLink" })}
|
||||
<SendOutlined style={{ fontSize: 16, marginRight: 0 }} />
|
||||
</Button>
|
||||
</OutboundLink>
|
||||
</div>
|
||||
|
||||
const menuItems = [
|
||||
<div key="about" {...menuItemProps}>
|
||||
<Link to={`/${intl.locale}/about`}>
|
||||
<FormattedMessage id="nav.aboutLink" />
|
||||
</Link>
|
||||
</div>,
|
||||
<div key="network" {...menuItemProps} >
|
||||
<Link to={`/${intl.locale}/network/`}>
|
||||
<FormattedMessage id="nav.networkLink" />
|
||||
</Link>
|
||||
</div>,
|
||||
<div key="explorer" {...menuItemProps} >
|
||||
<Link to={`/${intl.locale}/explorer`}>
|
||||
<FormattedMessage id="nav.explorerLink" />
|
||||
</Link>
|
||||
</div>,
|
||||
<div key="jobs" {...menuItemProps} >
|
||||
<OutboundLink
|
||||
href={"https://boards.greenhouse.io/wormhole"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{intl.formatMessage({ id: "nav.jobsLink" })}
|
||||
</OutboundLink>
|
||||
</div>,
|
||||
screens.sm === false || screens.lg === true ? launchBridge : null,
|
||||
screens.lg === false ? (<div key="socials" style={{ ...menuItemProps.style, height: '100%', padding: 0 }}>
|
||||
<div
|
||||
style={{ display: 'flex', justifyContent: 'space-evenly', borderStyle: 'none' }}
|
||||
>
|
||||
{Object.entries(externalLinks).map(([url, Icon]) => <div key={url} {...menuItemProps} style={{ margin: '12px 0' }} >
|
||||
<OutboundLink
|
||||
href={url}
|
||||
{...externalLinkProps}
|
||||
title={intl.formatMessage({ id: `nav.${linkToService[url]}AltText` })}
|
||||
>
|
||||
<Icon style={{ height: 26 }} className="external-icon" />
|
||||
</OutboundLink>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>) : null
|
||||
]
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Header style={{
|
||||
|
|
@ -34,86 +166,57 @@ const DefaultLayout: React.FC<{}> = ({
|
|||
height: 70
|
||||
}} >
|
||||
<div className="center-content">
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectedKeys={[location.pathname.split('/')[2]]}
|
||||
<nav
|
||||
className={`max-content-width ${navbarOpen ? " affix" : ""}`}
|
||||
style={{
|
||||
height: 70,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
padding: !screens.md ? 0 : '0 80px 0 148px'
|
||||
padding: !screens.lg ? 0 : '0 16px 0 0'
|
||||
}}
|
||||
overflowedIndicator={<MenuOutlined style={{ fontSize: '24px', verticalAlign: 'middle', marginRight: 0 }} />}
|
||||
className="max-content-width"
|
||||
>
|
||||
<Menu.Item key="" className="responsive-padding" >
|
||||
{/* wormhole logo, left side of nav */}
|
||||
<div className="responsive-padding" style={{ zIndex: 1001 }}>
|
||||
<Link to={`/${intl.locale}/`} style={{ height: 32 }} title={intl.formatMessage({ id: 'nav.homeLinkAltText' })}>
|
||||
<AvatarAndName style={{ height: 45, margin: 'auto', verticalAlign: 'middle', display: 'inline-block' }} />
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<div style={{ flexGrow: 1, minWidth: '20%' }}>
|
||||
{/* pushes the elements away on both sides */}
|
||||
</div>
|
||||
<Menu.Item key="about" {...menuItemProps}>
|
||||
<Link to={`/${intl.locale}/about`}>
|
||||
<FormattedMessage id="nav.aboutLink" />
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{String(process.env.ENABLE_NETWORK_PAGE) === 'true' ? (
|
||||
<Menu.Item key="network" {...menuItemProps}>
|
||||
<Link to={`/${intl.locale}/network/`}>
|
||||
<FormattedMessage id="nav.networkLink" />
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
) : null}
|
||||
{String(process.env.ENABLE_EXPLORER_PAGE) === 'true' ? (
|
||||
<Menu.Item key="explorer" {...menuItemProps}>
|
||||
<Link to={`/${intl.locale}/explorer`}>
|
||||
<FormattedMessage id="nav.explorerLink" />
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
) : null}
|
||||
<Menu.Item key="code" {...menuItemProps}>
|
||||
<OutboundLink
|
||||
href={socialLinks['github']}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{intl.formatMessage({ id: "nav.codeLink" })}
|
||||
</OutboundLink>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="jobs" {...menuItemProps}>
|
||||
<OutboundLink
|
||||
href={"https://boards.greenhouse.io/wormhole"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{intl.formatMessage({ id: "nav.jobsLink" })}
|
||||
</OutboundLink>
|
||||
</Menu.Item>
|
||||
|
||||
{screens.md === false ? (
|
||||
<Menu.Item style={{ height: '100%', padding: 0 }}>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
style={{ display: 'flex', justifyContent: 'space-between', width: '98vw', borderStyle: 'none' }}
|
||||
selectedKeys={[]} >
|
||||
{Object.entries(externalLinks).map(([url, Icon]) => <Menu.Item key={url} {...menuItemProps} style={{ margin: '12px 0' }} >
|
||||
<div style={{ display: 'flex', justifyContent: 'space-evenly', width: '100%' }}>
|
||||
<OutboundLink
|
||||
href={url}
|
||||
{...externalLinkProps}
|
||||
title={intl.formatMessage({ id: `nav.${linkToService[url]}AltText` })}
|
||||
>
|
||||
<Icon style={{ height: 26 }} className="external-icon" />
|
||||
</OutboundLink>
|
||||
</div>
|
||||
</Menu.Item>)}
|
||||
</Menu>
|
||||
</Menu.Item>
|
||||
{/* the list of menu items, right side of nav */}
|
||||
<div className="nav site-nav-right">
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 16 }} >
|
||||
{menuItems}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* show the "Launch Bridge" button next to the hamburger menu if the screen is large enough. */}
|
||||
{screens.lg === false && screens.sm === true ? <>
|
||||
<div style={{ flexGrow: 1 }} />
|
||||
{launchBridge}
|
||||
</> : null}
|
||||
|
||||
{/* hambuger button Toggle mobile popover menu*/}
|
||||
<Toggle onClick={() => setNavbarOpen(!navbarOpen)}>
|
||||
{navbarOpen ? <Hamburger open /> : <Hamburger open={false} />}
|
||||
</Toggle>
|
||||
|
||||
{/* nav drawer with links */}
|
||||
{navbarOpen ? (
|
||||
<Navbox open={!navbarOpen}>
|
||||
<div className="popover" style={{ marginTop: 100 }}>
|
||||
{/* <Navigation data={navigation} /> */}
|
||||
<div className="nav" style={{ display: 'flex' }}>
|
||||
{menuItems}
|
||||
</div>
|
||||
</div>
|
||||
</Navbox>
|
||||
) : null}
|
||||
</Menu>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="external-links-left"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
"partnersLink": "partners",
|
||||
"codeLink": "code",
|
||||
"jobsLink": "jobs",
|
||||
"bridgeLink": "Launch Bridge",
|
||||
"discordAltText": "Go to Wormhole's Discord",
|
||||
"githubAltText": "Go to Wormhole's Github",
|
||||
"mediumAltText": "Go to Wormhole's Medium",
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const OpenForBizSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smS
|
|||
height: '100%',
|
||||
maxWidth: 650,
|
||||
display: 'flex', flexDirection: 'column',
|
||||
justifyContent: 'center', zIndex: 2,
|
||||
justifyContent: 'center',
|
||||
marginRight: 'auto'
|
||||
}}>
|
||||
<Title level={1} style={{ ...titleStyles, fontSize: 64 }}>
|
||||
|
|
@ -92,7 +92,6 @@ const AboutUsSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smScre
|
|||
justifyContent: smScreen ? 'flex-start' : 'center',
|
||||
alignItems: 'flex-start',
|
||||
marginBlock: smScreen ? 0 : 200,
|
||||
zIndex: 2,
|
||||
}}>
|
||||
<div style={{ borderBottom: "0.5px solid #808088", width: 160, marginBottom: 60 }}>
|
||||
<Paragraph style={headingStyles} id={howAnchor}>
|
||||
|
|
@ -112,7 +111,7 @@ const AboutUsSection = ({ intl, smScreen, howAnchor }: { intl: IntlShape, smScre
|
|||
{/* background image, ternary for seperate mobile layout */}
|
||||
{smScreen ? (
|
||||
<div style={{ position: 'relative', marginTop: 60, height: 260, }}>
|
||||
<div style={{ position: 'absolute', right: 40, height: '100%', display: 'flex', alignItems: 'center', zIndex: 1 }}>
|
||||
<div style={{ position: 'absolute', right: 40, height: '100%', display: 'flex', alignItems: 'center', }}>
|
||||
<LayeredCircles style={{ height: 260 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,7 +152,6 @@ const NetworkSection = ({ intl, smScreen }: { intl: IntlShape, smScreen: boolean
|
|||
display: 'flex', flexDirection: 'column',
|
||||
justifyContent: smScreen ? 'flex-start' : 'center',
|
||||
paddingBlockStart: smScreen ? 100 : 0,
|
||||
zIndex: 2,
|
||||
}}>
|
||||
<div style={{ borderBottom: "0.5px solid #808088", width: 160, marginBottom: 90 }}>
|
||||
<Paragraph style={headingStyles} type="secondary">
|
||||
|
|
|
|||
Loading…
Reference in New Issue