feat: add Bridge transactions history for Coreum -> XRPL (#92)

* feat: add Tabs, TransactionsListBridge and TransactionsListBridgeDetails components, update types, update state of transactions hook

* fix: update tx views, add mocked array of bridge tx

* feat: add ability to get txs from coreum to xrpl

* feat: update ui for bridge history, add data packing and formatting

apps/web-coreum/package.json

@@ -15,6 +15,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.7",
+    "@cosmjs/amino": "^0.32.3",
+    "@cosmjs/cosmwasm-stargate": "^0.32.3",
+    "@cosmjs/encoding": "^0.32.3",
+    "@cosmjs/proto-signing": "^0.32.3",
+    "@cosmjs/stargate": "^0.32.3",
+    "@cosmjs/tendermint-rpc": "^0.32.3",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.5",
@@ -28,13 +34,15 @@
     "big.js": "^6.2.1",
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.3",
+    "cosmjs-types": "^0.9.0",
     "dayjs": "^1.11.7",
     "framer-motion": "^9.0.2",
     "graphql": "^16.6.0",
     "graphql-ws": "^5.11.3",
     "i18next": "^22.4.9",
     "jdenticon": "^3.2.0",
     "js-yaml": "^4.1.0",
+    "lottie-react": "^2.4.0",
     "markdown-to-jsx": "^7.1.9",
     "next": "^13.5.6",
     "next-i18next": "^13.1.5",

apps/web-coreum/public/locales/en/transactions.json

@@ -39,5 +39,11 @@
   "sender": "Sender",
   "receiver": "Receiver",
   "sender.receiver": "Sender / Receiver",
-  "more": "More"
+  "more": "More",
+  "chain_tx": "Chain Transactions",
+  "bridge_tx": "Bridge Transactions",
+  "route": "Route",
+  "txHash_1": "Tx hash 1",
+  "txHash_2": "Tx hash 2",
+  "destination": "Destination"
 }

package.json

@@ -63,9 +63,11 @@
     "*.{js,jsx,ts,tsx,mjs,cjs,css,md}": "npx prettier --write"
   },
   "dependencies": {
+    "@cosmjs/encoding": "^0.32.3",
     "axios": "^1.3.3",
     "dayjs": "^1.0.2",
     "dotenv": "^16.0.3",
-    "lightweight-charts": "^4.0.0"
+    "lightweight-charts": "^4.0.0",
+    "protobufjs": "^7.3.0"
   }
 }

packages/ui/package.json

@@ -12,6 +12,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.7",
+    "@cosmjs/amino": "^0.32.3",
+    "@cosmjs/cosmwasm-stargate": "^0.32.3",
+    "@cosmjs/encoding": "^0.32.3",
+    "@cosmjs/proto-signing": "^0.32.3",
+    "@cosmjs/stargate": "^0.32.3",
+    "@cosmjs/tendermint-rpc": "^0.32.3",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.5",
@@ -26,6 +32,7 @@
     "big.js": "^6.2.1",
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.3",
+    "cosmjs-types": "^0.9.0",
     "dayjs": "^1.11.7",
     "framer-motion": "^9.0.2",
     "graphql": "^16.6.0",
@@ -34,6 +41,7 @@
     "jdenticon": "^3.2.0",
     "js-yaml": "^4.1.0",
     "lightweight-charts": "^4.0.0",
+    "lottie-react": "^2.4.0",
     "markdown-to-jsx": "^7.1.9",
     "next": "^13.5.6",
     "next-i18next": "^13.1.5",

packages/ui/src/assets/arrows.json

@@ -0,0 +1 @@
+{"nm":"seat-1","ddd":0,"h":200,"w":200,"meta":{"a":"Inktwin","k":"down, scroll down, scroll, download, chevron down","d":"Down anim","g":"LottieFiles AE 0.1.20"},"layers":[{"ty":4,"nm":"Shape Layer 7","sr":1,"st":0,"op":840,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-2,77.25,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":1},"s":[50,50,100],"t":0},{"s":[50,50,100],"t":24}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100,-1,0],"t":0,"ti":[0,-31.667,0],"to":[0,31.667,0]},{"s":[100,94,0],"t":24}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":1},"s":[0],"t":0},{"s":[100],"t":24}],"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[104.5,-23.5],[-2,48.5],[-107,-22.5],[-107,49.5],[-2.25,120],[104.5,48.125]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"Shape Layer 6","sr":1,"st":0,"op":840,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-2,77.25,0],"ix":1},"s":{"a":0,"k":[50,50,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100,94,0],"t":0,"ti":[0,-15,0],"to":[0,15,0]},{"s":[100,139,0],"t":24}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[104.5,-23.5],[-2,48.5],[-107,-22.5],[-107,49.5],[-2.25,120],[104.5,48.125]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"Shape Layer 5","sr":1,"st":0,"op":840,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-2,77.25,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[50,50,100],"t":0},{"s":[25,25,100],"t":24}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100,139,0],"t":0,"ti":[0,-20.333,0],"to":[0,20.333,0]},{"s":[100,200,0],"t":24}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":0},{"s":[0],"t":24}],"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[104.5,-23.5],[-2,48.5],[-107,-22.5],[-107,49.5],[-2.25,120],[104.5,48.125]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.5294,0.5294,0.5294],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3}],"v":"5.5.7","fr":24,"op":24,"ip":0,"assets":[]}

packages/ui/src/components/ExtendedTimestamp/index.tsx

@@ -38,7 +38,10 @@ const ExtendedTimestamp: FC<ExtendedTimestampProps> = ({ timestamp, flexEnd = tr
   const interval = useRef<NodeJS.Timer>();
 
   const { classes, cx } = useStyles();
-  const inputDate = useMemo(() => new Date(`${timestamp}Z`), [timestamp]);
+  const inputDate = useMemo(
+    () => new Date(timestamp.endsWith('Z') ? timestamp : `${timestamp}Z`),
+    [timestamp]
+  );
   const currentDate = useMemo(() => new Date(), []);
   const timePassedMs = useMemo(
     () => currentDate.getTime() - inputDate.getTime(),