Add ERC20 widget

.storybook/src/3.components/erc20-widget.tsx

@@ -0,0 +1,63 @@
+import React, {useState} from "react";
+import {storiesOf} from "@storybook/react";
+
+import {AxisTheme} from "../../../packages/theme";
+import {Erc20Widget} from "../../../packages/erc20-widget/src";
+
+import {Box} from "grommet/es6";
+
+
+storiesOf("Components | ERC20 Widget", module)
+  .add("Default", () => {
+    const Comp = (props) => {
+      const tokens = {
+        '0x6b175474e89094c44da98b954eedeac495271d0f':{
+          symbol: "DAI",
+          logo: "https://raw.githubusercontent.com/atomiclabs/cryptocurrency-icons/master/32/color/dai.png",
+          address: "0x6b175474e89094c44da98b954eedeac495271d0f",
+          decimals: 12
+        },
+        '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48':{
+          symbol: "USDC",
+          logo: "https://raw.githubusercontent.com/atomiclabs/cryptocurrency-icons/master/32/color/usdc.png",
+          address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
+          decimals: 12
+        }
+      } 
+      const token = {
+        '0x6b175474e89094c44da98b954eedeac495271d0f':{
+          symbol: "DAI",
+          logo: "https://raw.githubusercontent.com/atomiclabs/cryptocurrency-icons/master/32/color/dai.png",
+          address: "0x6b175474e89094c44da98b954eedeac495271d0f",
+          decimals: 12
+        },}
+      return (
+        <AxisTheme>
+          <Box>
+            <Box gap={'medium'} pad={'medium'}>
+              <Erc20Widget fieldLabel="Enter amount" tokenData={token} />
+            </Box>   
+            <Box gap={'medium'} pad={'medium'}>
+              <Erc20Widget tokenData={token} balance="5000000"/>
+            </Box>   
+            <Box gap={'medium'} pad={'medium'}>
+              <Erc20Widget tokenData={token} limit="5000000"/>
+            </Box>   
+            <Box gap={'medium'} pad={'medium'}>
+              <Erc20Widget fieldLabel="Token Balance (select)" tokenData={tokens} />
+            </Box>          
+            <Box gap={'medium'} pad={'medium'}>
+              <Erc20Widget tokenData={tokens} search={true} />
+            </Box>          
+            <Box gap={'medium'} pad={'medium'}>
+              <Erc20Widget fieldLabel="Account Balance" value="5672345432830.28175721724" tokenData={token} precision={3} />
+            </Box>
+            <Box gap={'medium'} pad={'medium'}>
+              <Erc20Widget fieldLabel="Your Balance" value="567234541232432830.28175721724" tokenData={token} precision={3} account="0x79405dEc6e272eFe6510b5Da6F739bE294cc88B4"/>
+            </Box>
+          </Box>
+        </AxisTheme>
+      );
+    }
+    return <Comp/>;
+  })

packages/erc20-widget/.babelrc

@@ -0,0 +1,35 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+
+  ],
+  "plugins": [
+    "transform-class-properties",
+    "babel-plugin-styled-components"
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "useBuiltIns": "entry"
+          }
+        ],
+        "@babel/preset-typescript",
+        "@babel/preset-react"
+      ],
+      "plugins": [
+        "transform-class-properties",
+        "babel-plugin-styled-components"
+      ]
+    }
+  }
+}

packages/erc20-widget/README.md

@@ -0,0 +1,9 @@
+# `Sample Component`
+
+> TODO: description
+
+## Usage
+
+```
+// TODO: DEMONSTRATE API
+```

packages/erc20-widget/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@centrifuge/erc20-widget",
+  "version": "0.3.1",
+  "description": "ERC20 Widget",
+  "author": "razvan <[email protected]>",
+  "homepage": "https://github.com/centrifuge/axis/tree/master/packages/axis-sample-component#readme",
+  "license": "ISC",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/centrifuge/axis.git"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest --no-cache --coverage --verbose"
+  },
+  "bugs": {
+    "url": "https://github.com/centrifuge/axis/issues"
+  },
+  "peerDependencies": {
+    "grommet": "2.7.x",
+    "react": ">= 16.6.1",
+    "react-dom": ">= 16.6.1",
+    "styled-components": ">= 4.x"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-transform-typescript": "^7.5.2",
+    "@babel/preset-env": "^7.5.4",
+    "@babel/runtime": "^7.3.1",
+    "@types/react": "^16.8.23",
+    "@types/react-dom": "^16.8.4",
+    "@types/styled-components": "^4.1.18",
+    "babel-jest": "^24.1.0",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-styled-components": "^1.10.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-react-app": "^7.0.2",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.9.1",
+    "jest": "^24.1.0",
+    "prop-types": "^15.7.2",
+    "rollup": "^1.1.2",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-filesize": "^6.0.1",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-progress": "^1.0.0",
+    "rollup-plugin-url": "^2.2.0",
+    "typescript": "^3.5.2"
+  },
+  "gitHead": "ef53db97aa8cc0b402b3544a731dc10c9ff12641",
+  "dependencies": {
+    "@centrifuge/axis-search-select": "^0.3.2-develop.41",
+    "@centrifuge/axis-theme": "^0.3.1",
+    "@centrifuge/axis-utils": "^0.3.2-develop.49",
+    "bignumber.js": "^9.0.0"
+  }
+}

packages/erc20-widget/rollup.config.js

@@ -0,0 +1,53 @@
+import babel from "rollup-plugin-babel";
+import filesize from "rollup-plugin-filesize";
+import resolve from "rollup-plugin-node-resolve";
+import progress from "rollup-plugin-progress";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import url from "rollup-plugin-url";
+import { DEFAULT_EXTENSIONS } from '@babel/core';
+
+const extensions = [
+    ...DEFAULT_EXTENSIONS,
+    '.ts',
+    '.tsx'
+]
+
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      exports: "named",
+      file: "dist/index.cjs.js",
+      format: "cjs",
+      sourcemap: true
+    },
+    {
+      exports: "named",
+      file: "dist/index.esm.js",
+      format: "es",
+      sourcemap: true
+    }
+  ],
+  plugins: [
+
+    peerDepsExternal(),
+    progress(),
+    resolve({
+      extensions
+    }),
+    url({
+      include: ["**/*.woff", "**/*.woff2"],
+      // setting infinite limit will ensure that the files
+      // are always bundled with the code, not copied to /dist
+      limit: Infinity
+    }),
+    babel({
+      babelrc: true,
+      extensions
+
+    }),
+    filesize()
+  ]
+};
+
+

packages/erc20-widget/src/Erc20Widget.test.tsx

@@ -0,0 +1,3 @@
+describe("Sample Component test", () => {
+  it("needs tests", () => {});
+});