Interchain extension (#52)

* Update .gitignore

* Move Wallet to the left of the page

* Add tokens to the assetList

* Style assets

* Close wallet button

* Fix main content size when wallet is closed

* Remove classic dependency, use Coingecko as price source

* Show 24h change

* Show assets on multiple chains

Still beta and the code needs an huge cleanup

* Update Wallet styles

* Calculate networth

* Add asset details page

* Add asset action buttons

* Add receive page

* Add send and receive page (#125)

* treat CW20 as native tokens

* add Send Page

* handle tx loading

* Show asset on amount input

* minor fix: atom key and ledger bluetooth

* Update close button styles

* Add interchain station governance (#128)

* Add interchain governance

* cleanup, change back button

* remove contract page

* Fix governance

* fix ts-errors

* apply new history design (#131)

* Replace station.js with feather.js

* Update design for the extension

* fix background color

* Fix send and receive page

* remove password input if simulation error

* Fix wallet modal styles

* Cleanup and fix ledger error

* Interchain connection

* Fix txContext for interchain station

* Show connected wallet even if it is a ledger

* Fix: asset list bugs and layout (#35)

* fix: various asset list bugs

* fix: design add tokens button and move

* fix: use react icon instead of + character

* Fix fee calculation if gas price is 0

* Feat: fix asset bug on send page (#140)

* fix: new asset selection estimation bug

* fix: chain selection on UI

* rem: eslint

* Fix "testnet" banner position

* Fix blank page on add/remove cw20 assets

* fix denom resolution inside max and fee form

* Fix ChainSelector

* Replace "Connect to Terra blockchain" with "Connect to Station"

* add interchain wallet info

* Update manifest.json (#37)

* upd: banner

* if wallet is multisig enable only Terra

* Support both coinType 118 and 330 (#41)

* Support multiple cointypes

* Support multiple ledger apps

* update ledger connection flow

* added the welcome modal to extension (#40)

* Better Ledger connection flow

Co-authored-by: Joshua Brigati <[email protected]>

* Fix bluetooth integration

* Better Ledger icons

* Update themes

* Change ledger icon on the header

* Fix extension layout

* changed colors for themes (#42)

* minor color fix

* Convert chain selector to dropdown

* Test networks and disable the non-available ones

* anti-phishing feature

* Network loading changes based on the theme

* fix blacklisted domain detection

* Update to manifest v3

* Fix initial loading

* Cleanup

* Add CoinGecko attribution

* Fix/interchain history (#183)

* Fetch multiple events for txhistory

* Show tx sign mode

* Remove test <p>

* Improve send page validation

* Implement address book

* Fix receive page width

* Fix: copy changes (#184)

* upd: copy changes

* Fix

Co-authored-by: Alessandro Candeago <[email protected]>

* Fix staking TxMessage

* Fix < 0.01$ balance

* Fix send page default chain

* currency symbol moved to front (#186)

* Update constants.ts

* added back button next to Page header (#187)

* Support classic (#189)

* Add classic

* Classic fix

* Decimal divider

* Fix classic implementation

* Fix classic prices

* Support LocalTerra

* Add preconfigured wallets

* Don't show offline page if connected to localterra

* Fix network errors

* Stake graph update (#190)

* changed stake page graph data to display amounts and values from delegations on chain filter

* added back button to some staking pages

* Feat/upd langs (#168)

* upd: copy

* upd: lang dicts

* misc bugs

* Fix Italian transaltion

* Update French translation

* Spanish transaltions (#177)

* Update de.json

* Update pl.json

* Fix translations

* Translate more words

* Minor fix

* Update polish translation

* Updated chinese translations

* disable untranslated languages

Co-authored-by: Alessandro Candeago <[email protected]>
Co-authored-by: emidev98 <[email protected]>
Co-authored-by: Terence Lim <[email protected]>

* upd: welcome modal (#49)

* upd welcome modal copy

* rem: build copy

* fix: copy

* upd: langs from station webapp (#50)

* upd: copy

* Fix firefox build

* Do not use dangerouslySetInnerHTML

* made chain filter overflow wrap (#191)

* Fix ESLint warning

* Support ICS transfers (#193)

* Fix ICS20 implementation

* Fix header on small screens

* hide wallet address button only on mobile

* Fix wallet bar layout on mobile

* Fix AddressBook button

* Fix LedgerIcon on manage wallets

Co-authored-by: plubber <[email protected]>
Co-authored-by: plubber <[email protected]>
Co-authored-by: Joshua Brigati <[email protected]>
Co-authored-by: Joshua Brigati <[email protected]>
Co-authored-by: emidev98 <[email protected]>
Co-authored-by: Terence Lim <[email protected]>

.gitignore

@@ -19,3 +19,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.prettierrc
+
+# build files
+*.tgz
+*.zip

config-overrides.js

@@ -1,3 +1,27 @@
 module.exports = function override(config, env) {
-  return config;
+  return { 
+    ...config,
+    optimization: {
+      splitChunks: {
+        minSize: 20000,
+        maxSize: 4000000,
+        minChunks: 1,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        enforceSizeThreshold: 50000,
+        cacheGroups: {
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: 'vendors',
+            chunks: 'all'
+          },
+          default: {
+            minChunks: 2,
+            priority: -20,
+            reuseExistingChunk: true,
+          },
+        },
+      },
+    },
+  };
 }

package.json

@@ -19,15 +19,18 @@
     "@ledgerhq/hw-transport-web-ble": "^6.27.1",
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.9.1",
-    "@terra-money/ledger-terra-js": "^1.3.0",
+    "@terra-money/feather.js": "^1.0.0-beta.7",
+    "@terra-money/ledger-station-js": "^1.3.7",
     "@terra-money/log-finder-ruleset": "^3.0.0",
     "@terra-money/msg-reader": "^3.0.1",
     "@terra-money/terra.js": "^3.1.7",
     "@terra-money/terra.proto": "^2.0.0",
-    "@terra-money/wallet-provider": "^3.11.0",
+    "@terra-money/use-wallet": "^4.0.0-beta.3",
+    "@terra-money/wallet-provider": "^4.0.0-beta.3",
     "@terra.kitchen/utils": "^1.0.7",
     "@tippyjs/react": "^4.2.6",
     "axios": "^0.27.2",
+    "bech32": "^2.0.0",
     "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
@@ -38,6 +41,7 @@
     "immutability-helper": "^3.1.1",
     "js-base64": "^3.7.2",
     "keccak256": "^1.0.6",
+    "lottie-react": "^2.3.1",
     "numeral": "^2.0.6",
     "prettier": "^2.6.2",
     "qrcode.react": "^3.0.2",

public/firefox.manifest.json

@@ -0,0 +1,31 @@
+{
+  "manifest_version": 2,
+  "name": "Station Wallet",
+  "version": "4.0.0",
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": true
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["contentScript.js"],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "browser_action": {
+    "default_popup": "index.html",
+    "default_icon": "icon-32.png"
+  },
+  "options_ui": {
+    "page": "index.html"
+  },
+  "web_accessible_resources": ["inpage.js", "index.html"],
+  "icons": {
+    "128": "icon-128.png",
+    "180": "icon-180.png"
+  },
+  "permissions": ["storage"],
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+}

public/index.html

@@ -3,11 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <meta name="terra-wallet" />
-    <meta name="description" content="Terra Station is a web application to interact with Terra Core." />
+    <meta name="description" content="Station is a web application to interact with Terra Core and other supported chains." />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.svg" />
-    <title>Terra Station</title>
+    <title>Station</title>
   </head>
   <body>
     <div id="station"></div>

public/manifest.json

@@ -1,10 +1,10 @@
 {
-  "manifest_version": 2,
-  "name": "Terra Station Wallet",
-  "version": "3.2.0",
+  "manifest_version": 3,
+  "name": "Station Wallet",
+  "version": "4.0.0",
   "background": {
-    "scripts": ["background.js"],
-    "persistent": true
+    "service_worker": "background.js",
+    "type": "module"
   },
   "content_scripts": [
     {
@@ -14,18 +14,22 @@
       "all_frames": true
     }
   ],
-  "browser_action": {
+  "action": {
     "default_popup": "index.html",
     "default_icon": "icon-32.png"
   },
   "options_ui": {
     "page": "index.html"
   },
-  "web_accessible_resources": ["inpage.js"],
+  "web_accessible_resources": [
+    {
+      "resources": ["inpage.js", "index.html"],
+      "matches": ["<all_urls>"]
+    }
+  ],
   "icons": {
     "128": "icon-128.png",
     "180": "icon-180.png"
   },
-  "permissions": ["storage"],
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+  "permissions": ["storage"]
 }

scripts/background.js

@@ -86,6 +86,13 @@ const connectRemote = (remotePort) => {
 
         break
 
+      case "interchain-info":
+        extension.storage.local.get(["networks"], ({ networks }) => {
+          sendResponse("onInterchainInfo", networks)
+        })
+
+        break
+
       case "connect":
         const handleChangeConnect = (changes, namespace) => {
           // It is recursive.

scripts/contentScript.js

@@ -3,10 +3,56 @@ import PortStream from "extension-port-stream"
 import LocalMessageDuplexStream from "post-message-stream"
 
 if (shouldInjectProvider()) {
+  checkWebpage()
   injectScript()
   start()
 }
 
+/**
+ * Check if the current webpage is a known scam
+ *
+ */
+function checkWebpage() {
+  extension.storage.local.get(["blacklist"], async ({ blacklist }) => {
+    const WARNING_PAGE = `https://scam-warning.terra.money/`
+
+    function checkAndRedirect(list) {
+      // if user is visiting a blacklisted domain or subdomain
+      if (
+        list.some(
+          (url) =>
+            window.location.hostname === url ||
+            window.location.hostname.endsWith(`.${url}`)
+        )
+      ) {
+        // and is not coming from the warning page
+        if (document.referrer.startsWith(WARNING_PAGE)) return
+        // redirect to warning page
+        window.location.href = WARNING_PAGE
+      }
+    }
+
+    if (blacklist && blacklist.list) {
+      checkAndRedirect(blacklist.list)
+    }
+
+    // update every 10min
+    if (
+      !blacklist ||
+      blacklist.updatedAt > Date.now() - 1000 * 60 * 10
+    ) {
+      const BLACKLIST_URL = "https://assets.terra.money/blacklist.json"
+      const response = await fetch(BLACKLIST_URL)
+      const list = await response.json()
+      checkAndRedirect(list)
+
+      extension.storage.local.set({
+        blacklist: { list, updatedAt: Date.now() },
+      })
+    }
+  })
+}
+
 /**
  * Injects a script tag into the current document
  *

scripts/inpage.js

@@ -1,10 +1,13 @@
+// legacy terra webapps
 window.isTerraExtensionAvailable = true
+// new inetchain webapps
+window.isStationExtensionAvailable = true
 
 // ---------------------------------------------
 // for multiple extension support
 // ---------------------------------------------
-const TERRA_STATION_INFO = {
-  name: "Terra Station Wallet",
+const STATION_INFO = {
+  name: "Station Wallet",
   identifier: "station",
   icon: "https://assets.terra.money/icon/station-extension/icon.png",
 }
@@ -13,7 +16,16 @@ if (
   typeof window.terraWallets !== "undefined" &&
   Array.isArray(window.terraWallets)
 ) {
-  window.terraWallets.push(TERRA_STATION_INFO)
+  window.terraWallets.push(STATION_INFO)
 } else {
-  window.terraWallets = [TERRA_STATION_INFO]
+  window.terraWallets = [STATION_INFO]
+}
+
+if (
+  typeof window.interchainWallets !== "undefined" &&
+  Array.isArray(window.interchainWallets)
+) {
+  window.interchainWallets.push(STATION_INFO)
+} else {
+  window.interchainWallets = [STATION_INFO]
 }

scripts/webpack.config.js

@@ -1,16 +1,22 @@
-const path = require("path");
+const path = require("path")
+const webpack = require("webpack")
 
 module.exports = {
-  mode: process.env.NODE_ENV || 'development',
+  mode: process.env.NODE_ENV || "development",
   devtool: "inline-source-map",
   bail: true,
   entry: {
     contentScript: path.join(__dirname, "contentScript.js"),
     background: path.join(__dirname, "background.js"),
-    inpage: path.join(__dirname, "inpage.js")
+    inpage: path.join(__dirname, "inpage.js"),
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      global: {},
+    }),
+  ],
   output: {
     path: path.join(__dirname, "..", "build"),
-    filename: "[name].js"
-  }
-};
+    filename: "[name].js",
+  },
+}

src/app/App.tsx

@@ -1,20 +1,20 @@
 import { getErrorMessage } from "utils/error"
-import Layout, { Page } from "components/layout"
+import Layout, { MainContainer, Page } from "components/layout"
 import { Banner, Content, Header, Actions, Sidebar } from "components/layout"
 import { ErrorBoundary, Wrong } from "components/feedback"
 
 /* routes */
 import { useNav } from "./routes"
 
 /* banner */
-import NetworkName from "./sections/NetworkName"
+import UpdateExtension from "./sections/UpdateExtension"
 
 /* sidebar */
 import Nav from "./sections/Nav"
 import Aside from "./sections/Aside"
 
 /* header */
-import IsClassicNetwork from "./sections/IsClassicNetwork"
+import NetworkHeader from "./sections/NetworkHeader"
 import Refresh from "./sections/Refresh"
 import Preferences from "./sections/Preferences"
 import SelectTheme from "./sections/SelectTheme"
@@ -27,14 +27,19 @@ import DevTools from "./sections/DevTools"
 
 /* init */
 import InitBankBalance from "./InitBankBalance"
+import Wallet from "pages/wallet/Wallet"
+import WelcomeModal from "./sections/WelcomeModal"
+import NavButton from "./sections/NavButton"
 
 const App = () => {
   const { element: routes } = useNav()
 
+  const showWelcomeModal = localStorage.getItem("welcomeModal") === null
+
   return (
     <Layout>
       <Banner>
-        <NetworkName />
+        <UpdateExtension />
       </Banner>
 
       <Sidebar>
@@ -43,7 +48,7 @@ const App = () => {
       </Sidebar>
 
       <Header>
-        <IsClassicNetwork />
+        <NetworkHeader />
 
         <Actions>
           <DevTools />
@@ -54,13 +59,20 @@ const App = () => {
           </section>
           <ValidatorButton />
           <ConnectWallet />
+          <NavButton />
         </Actions>
         <LatestTx />
       </Header>
 
       <Content>
         <ErrorBoundary fallback={fallback}>
-          <InitBankBalance>{routes}</InitBankBalance>
+          <InitBankBalance>
+            <MainContainer>
+              {routes}
+              <Wallet />
+              {showWelcomeModal && <WelcomeModal />}
+            </MainContainer>
+          </InitBankBalance>
         </ErrorBoundary>
       </Content>
     </Layout>

src/app/InitBankBalance.tsx

@@ -1,13 +1,20 @@
 import { PropsWithChildren } from "react"
-import { useInitialBankBalance } from "data/queries/bank"
+import {
+  useInitialBankBalance,
+  useInitialTokenBalance,
+} from "data/queries/bank"
 import { BankBalanceProvider } from "data/queries/bank"
+import NetworkLoading from "./NetworkLoading"
 
 const InitBankBalance = ({ children }: PropsWithChildren<{}>) => {
   const { data: bankBalance } = useInitialBankBalance()
+  const { data: tokenBalance } = useInitialTokenBalance()
   // If the balance doesn't exist, nothing is worth rendering.
-  if (!bankBalance) return null
+  if (!bankBalance) return <NetworkLoading title="Fetching balances..." />
   return (
-    <BankBalanceProvider value={bankBalance}>{children}</BankBalanceProvider>
+    <BankBalanceProvider value={[...bankBalance, ...(tokenBalance ?? [])]}>
+      {children}
+    </BankBalanceProvider>
   )
 }