diff --git a/index.html b/index.html
index 319b4d7d4ee8..8ef76216e862 100644
--- a/index.html
+++ b/index.html
@@ -124,7 +124,7 @@
opacity: 0.15;
}
-
+
diff --git a/main.143ae20d2271c2da.js b/main.b6cd4679e9e7b4ba.js
similarity index 99%
rename from main.143ae20d2271c2da.js
rename to main.b6cd4679e9e7b4ba.js
index ae81df13209d..d36a2d1d2e5b 100644
--- a/main.143ae20d2271c2da.js
+++ b/main.b6cd4679e9e7b4ba.js
@@ -308,7 +308,7 @@
}
}
}
-`,Ut=g.memo((function({className:e="",isActive:n,name:t,routes:i}){return 1===i.length&&"settings"===i[0].group?(0,r.jsx)(St,{className:n?"isActive":"",classNameText:"smallHide",isToplevel:!0,route:i[0]}):(0,r.jsxs)($t,{className:`${e} ${n?"isActive":""}`,children:[(0,r.jsxs)("div",{className:"groupHdr "+(n?"":"highlight--color-contrast"),children:[(0,r.jsx)("span",{className:"smallHide",children:t}),(0,r.jsx)(j.JO,{className:"smallShow",icon:i[0].icon}),(0,r.jsx)(j.JO,{icon:"caret-down"})]}),(0,r.jsx)("ul",{className:"groupMenu",children:i.map((e=>(0,r.jsx)(St,{route:e},e.name)))})]})}));var qt=t(39082),Tt=t(52727);const zt=`apps v${"0.146.2-5-x".replace("-x","")}`,Et=j.zo.div`
+`,Ut=g.memo((function({className:e="",isActive:n,name:t,routes:i}){return 1===i.length&&"settings"===i[0].group?(0,r.jsx)(St,{className:n?"isActive":"",classNameText:"smallHide",isToplevel:!0,route:i[0]}):(0,r.jsxs)($t,{className:`${e} ${n?"isActive":""}`,children:[(0,r.jsxs)("div",{className:"groupHdr "+(n?"":"highlight--color-contrast"),children:[(0,r.jsx)("span",{className:"smallHide",children:t}),(0,r.jsx)(j.JO,{className:"smallShow",icon:i[0].icon}),(0,r.jsx)(j.JO,{icon:"caret-down"})]}),(0,r.jsx)("ul",{className:"groupMenu",children:i.map((e=>(0,r.jsx)(St,{route:e},e.name)))})]})}));var qt=t(39082),Tt=t(52727);const zt=`apps v${"0.146.2-6-x".replace("-x","")}`,Et=j.zo.div`
background: transparent;
font-size: var(--font-size-tiny);
line-height: 1.2;
diff --git a/page.0830c174e132f19d.js b/page.61ba319a0c5ec420.js
similarity index 95%
rename from page.0830c174e132f19d.js
rename to page.61ba319a0c5ec420.js
index 7bb2ee05829c..772fe590dfdf 100644
--- a/page.0830c174e132f19d.js
+++ b/page.61ba319a0c5ec420.js
@@ -1000,7 +1000,7 @@
justify-content: flex-end;
align-items: center;
}
-`,D=(e,s=6)=>e.length>2*s?`${e.substring(0,s)}...${e.substring(e.length-s)}`:e;function P(e){return`${e.UpEndpoint||"https://ipfs.io"}/ipfs/${e.Hash}?filename=${e.Name}`}const M=e=>()=>{window.open(P(e),"_blank")},z=()=>{},F=o.zo.main`
+`,D=(e,s=6)=>e.length>2*s?`${e.substring(0,s)}...${e.substring(e.length-s)}`:e;function P(e){return`https://cf-ipfs.com/ipfs/${e.Hash}?filename=${e.Name}`}const M=e=>()=>{window.open(P(e),"_blank")},z=()=>{},F=o.zo.main`
h1 {
text-transform: unset !important;
}
@@ -1040,7 +1040,7 @@
}
}
}
-`,L=n.memo((function({className:e}){const{t:s}=m(),{queueAction:t}=(0,l.L)(),[r,c]=(0,n.useState)(!1),h=function(){const[e,s]=(0,n.useState)(d),[t,a]=(0,n.useState)(!0);(0,n.useEffect)((()=>{try{const e=u().get("files",d);e!==d&&s(e),a(!1)}catch(e){a(!1),console.error(e)}}),[]);const o=(0,n.useCallback)((t=>{const a={...e,files:t};s(a),u().set("files",a)}),[e]);return(0,n.useMemo)((()=>({...e,isLoad:t,setFiles:o})),[e,o,t])}(),[p,x]=(0,n.useState)(void 0),g=(0,n.useRef)(null),b=(0,n.useCallback)(((e=!1)=>{g.current&&(g.current.webkitdirectory=e,g.current.multiple=e,g.current.click())}),[g]),f=(0,n.useCallback)((()=>b(!1)),[b]),j=(0,n.useCallback)((()=>b(!0)),[b]),v=(0,n.useCallback)((e=>{const a=e.target.files;if(a)if(a.length>2e3)t({action:"Upload Folder",message:s("Please do not upload more than 2000 files"),status:"error"});else if(0!==a.length){if(e.target.webkitdirectory){if(a.length>=1){const e=[];for(let s=0,t=a.length;s{t&&t({action:s("Import files"),message:e,status:a})}),[t,s]),C=(0,n.useRef)(null),w=(0,n.useCallback)((()=>{C.current&&C.current.click()}),[C]),k=(0,n.useCallback)((e=>{try{y(s("Importing"));const t=new FileReader,a=e.target.files;if(!a)return;if(t.readAsText(a[0],"UTF-8"),!/(.json)$/i.test(e.target.value))return y(s("file error"),"error");t.onload=e=>{const t=JSON.parse(e.target?.result);if(!Array.isArray(t))return y(s("file content error"),"error");const a=[],n={};for(const e of t)e.Hash&&e.Name&&e.UpEndpoint&&e.PinEndpoint&&(a.push(e),n[e.Hash]=!0);const o=h.files.filter((e=>!n[e.Hash]));h.setFiles([...a,...o]),y(s("Import Success"),"success")}}catch{y(s("file content error"),"error")}}),[h,y,s]),N=(0,n.useCallback)((()=>{c(!1)}),[]),S=(0,n.useCallback)((e=>{c(!1);const s=h.files.filter((s=>s.Hash!==e.Hash));h.setFiles([e,...s])}),[h]),A=(0,n.useCallback)((()=>{const e=new Blob([JSON.stringify(h.files)],{type:"application/json; charset=utf-8"});i().saveAs(e,"files.json")}),[h]);return(0,a.jsxs)(F,{className:e,children:[(0,a.jsx)("header",{}),(0,a.jsx)("input",{onChange:v,ref:g,style:{display:"none"},type:"file"}),(0,a.jsx)("input",{onChange:k,ref:C,style:{display:"none"},type:"file"}),p&&r&&(0,a.jsx)(E,{file:p,onClose:N,onSuccess:S}),(0,a.jsxs)("div",{style:{display:"flex",paddingBottom:"1.5rem"},children:[(0,a.jsxs)("div",{className:"uploadBtn",children:[(0,a.jsx)(o.zx,{icon:"upload",label:s("Upload"),onClick:z}),(0,a.jsxs)("div",{className:"uploadMenu",children:[(0,a.jsx)("div",{className:"menuItem",onClick:f,children:s("File")}),(0,a.jsx)("div",{className:"menuItem",onClick:j,children:s("Folder")})]})]}),(0,a.jsx)("div",{style:{flex:1}}),(0,a.jsx)(o.zx,{icon:"file-import",label:s("Import"),onClick:w}),(0,a.jsx)(o.zx,{icon:"file-export",label:s("Export"),onClick:A})]}),(0,a.jsx)(o.iA,{empty:s("No files"),emptySpinner:s("Loading"),header:[[s("files"),"start",2],[s("file cid"),"expand",2],[void 0,"start"],[s("file size"),"expand",2],[s("status"),"expand"],[s("action"),"expand"],[]],children:h.files.map(((e,t)=>(0,a.jsxs)(T,{children:[(0,a.jsxs)("td",{className:"",colSpan:2,children:[e.items&&(0,a.jsx)(o.JO,{className:"highlight--color",icon:"folder"}),D(e.Name)]}),(0,a.jsx)("td",{className:"end",colSpan:2,children:e.Hash}),(0,a.jsx)("td",{className:"",colSpan:1,children:(0,a.jsx)(I,{value:e.Hash,children:(0,a.jsx)(o.Ct,{color:"highlight",hover:s("Copy file cid"),icon:"copy"})})}),(0,a.jsx)("td",{className:"end",colSpan:2,children:`${e.Size} bytes`}),(0,a.jsx)("td",{className:"end",colSpan:1,children:(0,a.jsx)("a",{href:"https://apps.crust.network/?rpc=wss%3A%2F%2Frpc.crust.network#/storage_files",rel:"noreferrer",target:"_blank",children:s("View status in Crust")})}),(0,a.jsx)("td",{className:"end",colSpan:1,children:(0,a.jsxs)("div",{className:"actions",children:[!e.items&&(0,a.jsx)(o.Ct,{color:"highlight",hover:s("Download"),icon:"download",onClick:M(e)}),(0,a.jsx)(I,{value:P(e),children:(0,a.jsx)(o.Ct,{color:"highlight",hover:s("Copy link"),icon:"copy"})})]})}),(0,a.jsx)("td",{colSpan:1})]},`files_item-${t}`)))}),(0,a.jsx)("div",{children:s("Note: The file list is cached locally, switching browsers or devices will not keep displaying the original browser information.")})]})})),V=n.memo((function({basePath:e,className:s}){const{t}=m(),r=(0,n.useRef)([{isRoot:!0,name:"crust",text:t("Your Files")}]);return(0,a.jsxs)("main",{className:s,children:[(0,a.jsx)(o.mQ,{basePath:e,items:r.current}),(0,a.jsx)(L,{})]})}))},79865:(e,s,t)=>{t.d(s,{Z:()=>T});var a=t(52322),n=t(2784),o=t(73557),r=t(48630),i=t(90778),l=t(34814),c=t(74065),u=t(11677);const d=(0,u.e)("useProxies",(function(){const{api:e}=(0,i.h)(),{allAccounts:s}=(0,l.x)(),t=(0,c.X)(),[a,o]=(0,n.useState)({});return(0,n.useEffect)((()=>{s.length&&e.query.proxy.proxies.multi(s).then((e=>t.current&&o(e.map((([e],t)=>[s[t],e.map((({delegate:e})=>e.toString()))])).filter((([,e])=>e.length)).reduce(((e,[s,t])=>({...e,[s]:t})),{})))).catch(console.error)}),[s,e,t]),a}));var h=t(38894),m=t(67609),p=t(95292),x=t(61349);function g(){return(0,x.$G)("app-gilt")}const b=n.memo((function({className:e,isDisabled:s,proxies:t}){const{t:o}=g(),{api:l}=(0,i.h)(),[c,u]=(0,h.O)(),[d,x]=(0,n.useState)(null),[b,f]=(0,n.useState)(null),[j,v]=(0,n.useState)(),[y,C]=(0,n.useState)(),w=(0,n.useMemo)((()=>d&&j&&y?l.tx.proxy.proxy(d,null,l.tx.gilt.placeBid(j,y)):null),[l,d,j,y]),k=Object.keys(t),N=!j||j.isZero()||j.lt(l.consts.gilt.minFreeze),S=!y||!y.gte(p.If)||y.gt(l.consts.gilt.queueCount);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.zx,{icon:"plus",isDisabled:!k.length||s,label:o("Submit Bid"),onClick:u}),c&&(0,a.jsxs)(r.u_,{className:e,header:o("submit gilt bid"),onClose:u,size:"large",children:[(0,a.jsxs)(r.u_.Content,{children:[(0,a.jsxs)(r.u_.Columns,{hint:o("This account will make the bid for the gilt and pay all associated fees."),children:[(0,a.jsx)(r.rp,{filter:k,label:o("use proxied account"),labelExtra:(0,a.jsx)(m.Z,{label:(0,a.jsx)("span",{className:"label",children:o("transferable")}),params:d}),onChange:x,type:"account"}),d&&(0,a.jsx)(r.rp,{filter:t[d],label:o("send via proxy"),onChange:f,type:"account"})]}),(0,a.jsxs)(r.u_.Columns,{hint:o("The amount you wish to lock for the duration. It needs to be more than the gilt minimum."),children:[(0,a.jsx)(r.H,{autoFocus:!0,defaultValue:l.consts.gilt.minFreeze,isError:N,isZeroable:!1,label:o("bid amount"),onChange:v}),(0,a.jsx)(r.H,{defaultValue:l.consts.gilt.minFreeze,isDisabled:!0,label:o("minimum freeze amount")})]}),(0,a.jsxs)(r.u_.Columns,{hint:o("The number of periods this bid is to be freezed for, less than the maximum period"),children:[(0,a.jsx)(r.Rn,{defaultValue:p.If,isError:S,isZeroable:!1,label:o("lock periods"),onChange:C}),(0,a.jsx)(r.Rn,{defaultValue:l.consts.gilt.queueCount,isDisabled:!0,label:o("maximum lock periods")})]})]}),(0,a.jsx)(r.u_.Actions,{children:(0,a.jsx)(r.cA,{accountId:b,extrinsic:w,icon:"check",isDisabled:N||S||!d,label:o("Bid"),onStart:u})})]})]})}));var f=t(58607),j=t(14681);const v=n.memo((function({className:e,value:{balance:s,index:t,numItems:n}}){return(0,a.jsxs)("tr",{className:e,children:[(0,a.jsx)(r.iA.Column.Id,{value:t}),(0,a.jsx)("td",{className:"number all",children:(0,j.u)(n)}),(0,a.jsx)("td",{className:"all",children:(0,a.jsx)(f.Z,{value:s})})]})})),y=n.memo((function({className:e,queueTotals:s}){const{t}=g(),o=(0,n.useRef)([[t("queues"),"start"],[t("participants"),"number"],[t("balance"),"number"]]);return(0,a.jsx)(r.iA,{className:e,empty:s&&t("No active gilt queues found."),header:o.current,children:s?.map((e=>(0,a.jsx)(v,{value:e},e.index)))})}));var C=t(54383),w=t(48801);const k=new(t.n(w)())(1e4),N=n.memo((function({activeTotal:e,className:s,isDisabled:t}){const{t:n}=g(),{api:o}=(0,i.h)(),l=(0,C.C)();return(0,a.jsxs)(r.Ty,{className:s,children:[(0,a.jsxs)("section",{children:[(0,a.jsx)(r.Jy,{label:n("active"),children:n(t?"no":"yes")}),e&&(0,a.jsx)(r.Jy,{label:n("index"),children:(0,j.u)(e.index)})]}),e&&(0,a.jsxs)("section",{children:[(0,a.jsxs)(r.Jy,{label:n("proportion"),children:[(e.proportion.mul(k).imul(p.S8).div(p.Wi).toNumber()/1e4).toFixed(2),"%"]}),(0,a.jsxs)(r.Jy,{label:n("target"),children:[(e.target.mul(k).imul(p.S8).div(p.Wi).toNumber()/1e4).toFixed(2),"%"]})]}),(0,a.jsx)("section",{children:l&&(0,a.jsx)(r.Jy,{label:n("intake"),progress:{total:o.consts.gilt.intakePeriod,value:l.mod(o.consts.gilt.intakePeriod),withTime:!0}})})]})}));var S=t(54890);const A={defaultValue:{},transform:([e,s])=>({activeIndex:e.index.isZero()?null:e.index.sub(p.If),activeTotal:e,queueTotals:s.map((([e,s],t)=>({balance:s,index:t+1,numItems:e}))).filter((({balance:e})=>!e.isZero()))})},E=(0,u.e)("useInfo",(function(){const{api:e}=(0,i.h)(),s=(0,S.L)([e.query.gilt.activeTotal,e.query.gilt.queueTotals],A);return(0,n.useMemo)((()=>({info:s})),[s])})),I=n.memo((function({className:e}){const s=d(),{info:t}=E(),o=(0,n.useMemo)((()=>!t?.activeTotal||t.activeTotal.target.isZero()),[t]);return(0,a.jsxs)("div",{className:e,children:[(0,a.jsx)(N,{activeTotal:t?.activeTotal,isDisabled:o}),(0,a.jsx)(r.zx.Group,{children:(0,a.jsx)(b,{isDisabled:o,proxies:s})}),(0,a.jsx)(y,{queueTotals:t?.queueTotals})]})})),T=n.memo((function({basePath:e,className:s}){const{t}=g(),i=(0,n.useRef)([{isRoot:!0,name:"overview",text:t("Overview")}]);return(0,a.jsxs)("main",{className:s,children:[(0,a.jsx)(r.mQ,{basePath:e,items:i.current}),(0,a.jsx)(o.Z5,{children:(0,a.jsx)(o.AW,{path:e,children:(0,a.jsx)(o.AW,{element:(0,a.jsx)(I,{}),index:!0})})})]})}))},30145:(e,s,t)=>{t.d(s,{Z:()=>M});var a=t(52322),n=t(2784),o=t(48630),r=t(90778),i=t(38894),l=t(51024),c=t(64332),u=t(63436),d=t(86674);const h={children:"Storage",color:"blue",size:"tiny"},m=[{value:"rpcNetworkAuthoring",text:"Get authoring information",label:{color:"pink",children:"RPC",size:"tiny"},code:"// Returns all pending extrinsics, potentially grouped by sender\nconst unsub = await api.rpc.author.pendingExtrinsics((extrinsics) => {\n if(extrinsics.length === 0){\n console.log('No pending extrinsics');\n return;\n }\n console.log(extrinsics);\n});"},{value:"rpcListenToHead",text:"Listen to new Head",label:{color:"pink",children:"RPC",size:"tiny"},code:"// subscribe to new headers, printing the full info for 5 Blocks\nlet count = 0;\nconst unsub = await api.rpc.chain.subscribeNewHeads((header) => {\n console.log(`#${header.number}:`, header);\n\n if (++count === 5) {\n console.log('5 headers retrieved, unsubscribing');\n unsub();\n }\n});"},{value:"rpcQueryState",text:"Get state metadata",label:{color:"pink",children:"RPC",size:"tiny"},code:"// retrieve and log the complete metadata of your node\nconst metadata = await api.rpc.state.getMetadata();\n\nconsole.log('version: ' + metadata.version);\nconsole.log('formatted: ' + JSON.stringify(metadata.asLatest.toHuman(), null, 2));\n"},{value:"rpcSystemInfo",text:"Get system information",label:{color:"pink",children:"RPC",size:"tiny"},code:"// Retrieve the chain & node information information via rpc calls\nconst [chain, nodeName, nodeVersion, properties] = await Promise.all([\n api.rpc.system.chain(),\n api.rpc.system.name(),\n api.rpc.system.version(),\n api.rpc.system.properties()\n]);\nconsole.log('You are connected to chain ' + chain)\nconsole.log('You are using: ' + nodeName + ' v' + nodeVersion);\n\nif (properties.size > 0) {\n console.log('Node specific properties:');\n properties.forEach((value, key) => {\n console.log(key, value);\n });\n} else {\n console.log('No specific chain properties found.');\n}"},{code:"// Get chain state information\n// Make our basic chain state / storage queries, all in one go\n\nconst [now, minimumValidatorCount, validators] = await Promise.all([\n api.query.timestamp.now(),\n api.query.staking.minimumValidatorCount(),\n api.query.session.validators()\n]);\n\nconsole.log('The current date is: ' + now);\nconsole.log('The minimum validator count: ' + minimumValidatorCount);\n\nif (validators && validators.length > 0) {\n // Retrieve the balances for all validators\n console.log('Validators');\n\n const validatorBalances = await Promise.all(\n validators.map((authorityId) => api.query.system.account(authorityId))\n );\n\n validators.forEach((authorityId, index) => {\n console.log('Validator: ' + authorityId.toString() )\n console.log('AccountData: ' + validatorBalances[index].toHuman() );\n });\n}\n",label:h,text:"Get chain state information",value:"storageGetInfo"},{code:"// Subscribe to system events via storage\napi.query.system.events((events) => {\n console.log('----- Received ' + events.length + ' event(s): -----');\n // loop through the Vec\n events.forEach((record) => {\n // extract the phase, event and the event types\n const { event, phase } = record;\n const types = event.typeDef;\n // show what we are busy with\n console.log(event.section + ':' + event.method + '::' + 'phase=' + phase.toString());\n console.log(event.meta.docs.toString());\n // loop through each of the parameters, displaying the type and data\n event.data.forEach((data, index) => {\n console.log(types[index].type + ';' + data.toString());\n });\n });\n});",label:h,text:"Listen to system events",value:"storageSystemEvents"},{code:"// You may leave this example running and make a transfer\n// of any value from or to Alice address in the 'Transfer' App\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\n\n// Retrieve the initial data\nlet [, { free: previous }] = await api.query.system.account(ALICE);\n\nconsole.log('ALICE has a balance of ' + previous);\n\n// Subscribe and listen to balance changes\napi.query.system.account(ALICE, ([, { free }]) => {\n // Calculate the delta\n const change = free.sub(previous);\n // Only display positive value changes (Since we are pulling 'previous' above already,\n // the initial balance change will also be zero)\n if (!change.isZero()) {\n previous = free;\n console.log('New transaction of: '+ change);\n }\n});",label:h,text:"Listen to balance changes",value:"storageListenToBalanceChange"},{code:"// You may leave this example running and make a transfer\n// of any value from or to Alice/Bob address in the 'Transfer' App\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\nconst BOB = '5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty';\n\nconsole.log('Tracking balances for:', [ALICE, BOB])\n\n// Subscribe and listen to several balance changes\napi.query.system.account.multi([ALICE, BOB], (info) => {\n console.log('Change detected, new balances: ', info)\n});",label:h,text:"Listen to multiple balances changes",value:"storageListenToMultipleBalancesChange"},{code:"// This example set shows how to make queries at a point\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\n\n// retrieve the balance, once-off at the latest block\nconst { data: { free } } = await api.query.system.account(ALICE);\n\nconsole.log('Alice has a current balance of', free.toHuman());\n\n// retrieve balance updates with an optional value callback\nconst balanceUnsub = await api.query.system.account(ALICE, ({ data: { free } }) => {\n console.log('Alice has an updated balance of', free.toHuman());\n});\n\n// retrieve the balance at a block hash in the past\nconst header = await api.rpc.chain.getHeader();\nconst prevHash = await api.rpc.chain.getBlockHash(header.number.unwrap().subn(42));\nconst { data: { free: prev } } = await api.query.system.account.at(prevHash, ALICE);\n\nconsole.log('Alice had a balance of', prev.toHuman(), '(42 blocks ago)');\n\n// useful in some situations - the value hash and storage entry size\nconst currHash = await api.query.system.account.hash(ALICE);\nconst currSize = await api.query.system.account.size(ALICE);\n\nconsole.log('Alice account entry has a value hash of', currHash, 'with a size of', currSize);",label:h,text:"Retrieve historic query data",value:"storageRetrieveInfoOnQueryKeys"},{code:"// this example shows how to retrieve the hex representation of a storage key\n\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\n\n// show the key for an entry without arguments\nconsole.log(api.query.timestamp.now.key());\n\n// show the key for a map entry (single argument)\nconsole.log(api.query.system.account.key(ALICE));\n\n// show the key prefix for a map\nconsole.log(api.query.system.account.keyPrefix());\n\n// show the key for a double map\nconsole.log(api.query.staking.erasStakers.key(0, ALICE));\n\n// show the key prefix for a doublemap\nconsole.log(api.query.staking.erasStakers.keyPrefix());\n",label:h,text:"Get underlying storage key hex values",value:"storageKeys"},{value:"constsStakingParameters",text:"Get staking parameters",label:{color:"green",children:"Consts",size:"tiny"},code:"// Get SRML staking parameters as consts\n// 'parameter_types' were added to substrate with spec_version: 101.\n// This example will throw an error if used with versions before that.\n\nconst bondingDuration = api.consts.staking.bondingDuration;\nconst sessionsPerEra = api.consts.staking.sessionsPerEra;\n\nconsole.log('Staking bonding duration: ' + bondingDuration);\nconsole.log('Staking sessions per era: ' + sessionsPerEra);"},{value:"extrinsicMakeTransfer",text:"Make transfer and listen to events",label:{color:"grey",children:"Extrinsics",size:"tiny"},code:"// Make a transfer from Alice to Bob and listen to system events.\n// You need to be connected to a development chain for this example to work.\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\nconst BOB = '5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty';\n\n// Get a random number between 1 and 100000\nconst randomAmount = Math.floor((Math.random() * 100000) + 1);\n\n// Create a extrinsic, transferring randomAmount units to Bob.\nconst transfer = api.tx.balances.transferAllowDeath(BOB, randomAmount);\n\n// Sign and Send the transaction\nawait transfer.signAndSend(ALICE, ({ events = [], status }) => {\n if (status.isInBlock) {\n console.log('Successful transfer of ' + randomAmount + ' with hash ' + status.asInBlock.toHex());\n } else {\n console.log('Status of transfer: ' + status.type);\n }\n\n events.forEach(({ phase, event: { data, method, section } }) => {\n console.log(phase.toString() + ' : ' + section + '.' + method + ' ' + data.toString());\n });\n});"}];var p=t(61349);function x(){return(0,p.$G)("app-js")}const g=n.memo((function({className:e="",isCustomExample:s,isRunning:t,removeSnippet:r,runJs:i,saveSnippet:l,stopJs:c}){const{t:u}=x(),[d,h]=(0,n.useState)(""),m=(0,n.useCallback)((e=>h(e)),[]),p=(0,n.useCallback)((()=>{h("")}),[]),g=(0,n.useCallback)((()=>{l(d),p()}),[p,l,d]);return(0,a.jsxs)(o.zx.Group,{className:`${e} action-button`,children:[s?(0,a.jsx)(o.zx,{icon:"trash",onClick:r}):(0,a.jsx)(o.GI,{className:"popup-local",onCloseAction:p,value:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.II,{autoFocus:!0,maxLength:50,min:1,onChange:m,onEnter:g,placeholder:u("Name your example"),value:d,withLabel:!1}),(0,a.jsx)(o.zx,{icon:"save",isDisabled:!d.length,label:u("Save snippet to local storage"),onClick:g})]}),children:(0,a.jsx)(o.zx,{icon:"save",isReadOnly:!1})}),t?(0,a.jsx)(o.zx,{icon:"times",onClick:c}):(0,a.jsx)(o.zx,{className:"play-button",icon:"play",onClick:i})]})})),b="polkadot-app-js-examples",f="polkadot-app-js-selected",j={children:"Custom",color:"orange",size:"tiny"};var v=t(12909),y=t(1346),C=t(17751);const w=e=>(0,v.V)(e)?e.stack?e.stack:e.toString():(0,y.o)(e)?"undefined":(0,C.F)(e)?"null":Array.isArray(e)?`[${e.map(w).join(", ")}]`:e instanceof Map?`{${[...e.entries()].map((([e,s])=>`${e.toString()}: ${w(s)}`)).join(", ")}}`:e.toString(),k=({args:e,type:s},t)=>{try{return(0,a.jsx)("div",{className:`js--Log ${s}`,children:e.map(w).join(" ")},t)}catch(e){return(0,a.jsxs)("div",{className:`js--Log ${s} error`,children:["Internal error: ",e.stack||e.message]},t)}},N=o.zo.article`
+`,L=n.memo((function({className:e}){const{t:s}=m(),{queueAction:t}=(0,l.L)(),[r,c]=(0,n.useState)(!1),h=function(){const[e,s]=(0,n.useState)(d),[t,a]=(0,n.useState)(!0);(0,n.useEffect)((()=>{try{const e=u().get("files",d);e!==d&&s(e),a(!1)}catch(e){a(!1),console.error(e)}}),[]);const o=(0,n.useCallback)((t=>{const a={...e,files:t};s(a),u().set("files",a)}),[e]);return(0,n.useMemo)((()=>({...e,isLoad:t,setFiles:o})),[e,o,t])}(),[p,x]=(0,n.useState)(void 0),g=(0,n.useRef)(null),b=(0,n.useCallback)(((e=!1)=>{g.current&&(g.current.webkitdirectory=e,g.current.multiple=e,g.current.click())}),[g]),f=(0,n.useCallback)((()=>b(!1)),[b]),j=(0,n.useCallback)((()=>b(!0)),[b]),v=(0,n.useCallback)((e=>{const a=e.target.files;if(a)if(a.length>2e3)t({action:"Upload Folder",message:s("Please do not upload more than 2000 files"),status:"error"});else if(0!==a.length){if(e.target.webkitdirectory){if(a.length>=1){const e=[];for(let s=0,t=a.length;s{t&&t({action:s("Import files"),message:e,status:a})}),[t,s]),C=(0,n.useRef)(null),w=(0,n.useCallback)((()=>{C.current&&C.current.click()}),[C]),k=(0,n.useCallback)((e=>{try{y(s("Importing"));const t=new FileReader,a=e.target.files;if(!a)return;if(t.readAsText(a[0],"UTF-8"),!/(.json)$/i.test(e.target.value))return y(s("file error"),"error");t.onload=e=>{const t=JSON.parse(e.target?.result);if(!Array.isArray(t))return y(s("file content error"),"error");const a=[],n={};for(const e of t)e.Hash&&e.Name&&e.UpEndpoint&&e.PinEndpoint&&(a.push(e),n[e.Hash]=!0);const o=h.files.filter((e=>!n[e.Hash]));h.setFiles([...a,...o]),y(s("Import Success"),"success")}}catch{y(s("file content error"),"error")}}),[h,y,s]),N=(0,n.useCallback)((()=>{c(!1)}),[]),S=(0,n.useCallback)((e=>{c(!1);const s=h.files.filter((s=>s.Hash!==e.Hash));h.setFiles([e,...s])}),[h]),A=(0,n.useCallback)((()=>{const e=new Blob([JSON.stringify(h.files)],{type:"application/json; charset=utf-8"});i().saveAs(e,"files.json")}),[h]);return(0,a.jsxs)(F,{className:e,children:[(0,a.jsx)("header",{}),(0,a.jsx)("input",{onChange:v,ref:g,style:{display:"none"},type:"file"}),(0,a.jsx)("input",{onChange:k,ref:C,style:{display:"none"},type:"file"}),p&&r&&(0,a.jsx)(E,{file:p,onClose:N,onSuccess:S}),(0,a.jsxs)("div",{style:{display:"flex",paddingBottom:"1.5rem"},children:[(0,a.jsxs)("div",{className:"uploadBtn",children:[(0,a.jsx)(o.zx,{icon:"upload",label:s("Upload"),onClick:z}),(0,a.jsxs)("div",{className:"uploadMenu",children:[(0,a.jsx)("div",{className:"menuItem",onClick:f,children:s("File")}),(0,a.jsx)("div",{className:"menuItem",onClick:j,children:s("Folder")})]})]}),(0,a.jsx)("div",{style:{flex:1}}),(0,a.jsx)(o.zx,{icon:"file-import",label:s("Import"),onClick:w}),(0,a.jsx)(o.zx,{icon:"file-export",label:s("Export"),onClick:A})]}),(0,a.jsx)(o.iA,{empty:s("No files"),emptySpinner:s("Loading"),header:[[s("files"),"start",2],[s("file cid"),"expand",2],[void 0,"start"],[s("file size"),"expand",2],[s("status"),"expand"],[s("action"),"expand"],[]],children:h.files.map(((e,t)=>(0,a.jsxs)(T,{children:[(0,a.jsxs)("td",{className:"",colSpan:2,children:[e.items&&(0,a.jsx)(o.JO,{className:"highlight--color",icon:"folder"}),D(e.Name)]}),(0,a.jsx)("td",{className:"end",colSpan:2,children:e.Hash}),(0,a.jsx)("td",{className:"",colSpan:1,children:(0,a.jsx)(I,{value:e.Hash,children:(0,a.jsx)(o.Ct,{color:"highlight",hover:s("Copy file cid"),icon:"copy"})})}),(0,a.jsx)("td",{className:"end",colSpan:2,children:`${e.Size} bytes`}),(0,a.jsx)("td",{className:"end",colSpan:1,children:(0,a.jsx)("a",{href:"https://apps.crust.network/?rpc=wss%3A%2F%2Frpc.crust.network#/storage_files/status/"+e.Hash,rel:"noreferrer",target:"_blank",children:s("View status in Crust")})}),(0,a.jsx)("td",{className:"end",colSpan:1,children:(0,a.jsxs)("div",{className:"actions",children:[!e.items&&(0,a.jsx)(o.Ct,{color:"highlight",hover:s("Download"),icon:"download",onClick:M(e)}),(0,a.jsx)(I,{value:P(e),children:(0,a.jsx)(o.Ct,{color:"highlight",hover:s("Copy link"),icon:"copy"})})]})}),(0,a.jsx)("td",{colSpan:1})]},`files_item-${t}`)))}),(0,a.jsx)("div",{children:s("Note: The file list is cached locally, switching browsers or devices will not keep displaying the original browser information.")})]})})),V=n.memo((function({basePath:e,className:s}){const{t}=m(),r=(0,n.useRef)([{isRoot:!0,name:"crust",text:t("Your Files")}]);return(0,a.jsxs)("main",{className:s,children:[(0,a.jsx)(o.mQ,{basePath:e,items:r.current}),(0,a.jsx)(L,{})]})}))},79865:(e,s,t)=>{t.d(s,{Z:()=>T});var a=t(52322),n=t(2784),o=t(73557),r=t(48630),i=t(90778),l=t(34814),c=t(74065),u=t(11677);const d=(0,u.e)("useProxies",(function(){const{api:e}=(0,i.h)(),{allAccounts:s}=(0,l.x)(),t=(0,c.X)(),[a,o]=(0,n.useState)({});return(0,n.useEffect)((()=>{s.length&&e.query.proxy.proxies.multi(s).then((e=>t.current&&o(e.map((([e],t)=>[s[t],e.map((({delegate:e})=>e.toString()))])).filter((([,e])=>e.length)).reduce(((e,[s,t])=>({...e,[s]:t})),{})))).catch(console.error)}),[s,e,t]),a}));var h=t(38894),m=t(67609),p=t(95292),x=t(61349);function g(){return(0,x.$G)("app-gilt")}const b=n.memo((function({className:e,isDisabled:s,proxies:t}){const{t:o}=g(),{api:l}=(0,i.h)(),[c,u]=(0,h.O)(),[d,x]=(0,n.useState)(null),[b,f]=(0,n.useState)(null),[j,v]=(0,n.useState)(),[y,C]=(0,n.useState)(),w=(0,n.useMemo)((()=>d&&j&&y?l.tx.proxy.proxy(d,null,l.tx.gilt.placeBid(j,y)):null),[l,d,j,y]),k=Object.keys(t),N=!j||j.isZero()||j.lt(l.consts.gilt.minFreeze),S=!y||!y.gte(p.If)||y.gt(l.consts.gilt.queueCount);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.zx,{icon:"plus",isDisabled:!k.length||s,label:o("Submit Bid"),onClick:u}),c&&(0,a.jsxs)(r.u_,{className:e,header:o("submit gilt bid"),onClose:u,size:"large",children:[(0,a.jsxs)(r.u_.Content,{children:[(0,a.jsxs)(r.u_.Columns,{hint:o("This account will make the bid for the gilt and pay all associated fees."),children:[(0,a.jsx)(r.rp,{filter:k,label:o("use proxied account"),labelExtra:(0,a.jsx)(m.Z,{label:(0,a.jsx)("span",{className:"label",children:o("transferable")}),params:d}),onChange:x,type:"account"}),d&&(0,a.jsx)(r.rp,{filter:t[d],label:o("send via proxy"),onChange:f,type:"account"})]}),(0,a.jsxs)(r.u_.Columns,{hint:o("The amount you wish to lock for the duration. It needs to be more than the gilt minimum."),children:[(0,a.jsx)(r.H,{autoFocus:!0,defaultValue:l.consts.gilt.minFreeze,isError:N,isZeroable:!1,label:o("bid amount"),onChange:v}),(0,a.jsx)(r.H,{defaultValue:l.consts.gilt.minFreeze,isDisabled:!0,label:o("minimum freeze amount")})]}),(0,a.jsxs)(r.u_.Columns,{hint:o("The number of periods this bid is to be freezed for, less than the maximum period"),children:[(0,a.jsx)(r.Rn,{defaultValue:p.If,isError:S,isZeroable:!1,label:o("lock periods"),onChange:C}),(0,a.jsx)(r.Rn,{defaultValue:l.consts.gilt.queueCount,isDisabled:!0,label:o("maximum lock periods")})]})]}),(0,a.jsx)(r.u_.Actions,{children:(0,a.jsx)(r.cA,{accountId:b,extrinsic:w,icon:"check",isDisabled:N||S||!d,label:o("Bid"),onStart:u})})]})]})}));var f=t(58607),j=t(14681);const v=n.memo((function({className:e,value:{balance:s,index:t,numItems:n}}){return(0,a.jsxs)("tr",{className:e,children:[(0,a.jsx)(r.iA.Column.Id,{value:t}),(0,a.jsx)("td",{className:"number all",children:(0,j.u)(n)}),(0,a.jsx)("td",{className:"all",children:(0,a.jsx)(f.Z,{value:s})})]})})),y=n.memo((function({className:e,queueTotals:s}){const{t}=g(),o=(0,n.useRef)([[t("queues"),"start"],[t("participants"),"number"],[t("balance"),"number"]]);return(0,a.jsx)(r.iA,{className:e,empty:s&&t("No active gilt queues found."),header:o.current,children:s?.map((e=>(0,a.jsx)(v,{value:e},e.index)))})}));var C=t(54383),w=t(48801);const k=new(t.n(w)())(1e4),N=n.memo((function({activeTotal:e,className:s,isDisabled:t}){const{t:n}=g(),{api:o}=(0,i.h)(),l=(0,C.C)();return(0,a.jsxs)(r.Ty,{className:s,children:[(0,a.jsxs)("section",{children:[(0,a.jsx)(r.Jy,{label:n("active"),children:n(t?"no":"yes")}),e&&(0,a.jsx)(r.Jy,{label:n("index"),children:(0,j.u)(e.index)})]}),e&&(0,a.jsxs)("section",{children:[(0,a.jsxs)(r.Jy,{label:n("proportion"),children:[(e.proportion.mul(k).imul(p.S8).div(p.Wi).toNumber()/1e4).toFixed(2),"%"]}),(0,a.jsxs)(r.Jy,{label:n("target"),children:[(e.target.mul(k).imul(p.S8).div(p.Wi).toNumber()/1e4).toFixed(2),"%"]})]}),(0,a.jsx)("section",{children:l&&(0,a.jsx)(r.Jy,{label:n("intake"),progress:{total:o.consts.gilt.intakePeriod,value:l.mod(o.consts.gilt.intakePeriod),withTime:!0}})})]})}));var S=t(54890);const A={defaultValue:{},transform:([e,s])=>({activeIndex:e.index.isZero()?null:e.index.sub(p.If),activeTotal:e,queueTotals:s.map((([e,s],t)=>({balance:s,index:t+1,numItems:e}))).filter((({balance:e})=>!e.isZero()))})},E=(0,u.e)("useInfo",(function(){const{api:e}=(0,i.h)(),s=(0,S.L)([e.query.gilt.activeTotal,e.query.gilt.queueTotals],A);return(0,n.useMemo)((()=>({info:s})),[s])})),I=n.memo((function({className:e}){const s=d(),{info:t}=E(),o=(0,n.useMemo)((()=>!t?.activeTotal||t.activeTotal.target.isZero()),[t]);return(0,a.jsxs)("div",{className:e,children:[(0,a.jsx)(N,{activeTotal:t?.activeTotal,isDisabled:o}),(0,a.jsx)(r.zx.Group,{children:(0,a.jsx)(b,{isDisabled:o,proxies:s})}),(0,a.jsx)(y,{queueTotals:t?.queueTotals})]})})),T=n.memo((function({basePath:e,className:s}){const{t}=g(),i=(0,n.useRef)([{isRoot:!0,name:"overview",text:t("Overview")}]);return(0,a.jsxs)("main",{className:s,children:[(0,a.jsx)(r.mQ,{basePath:e,items:i.current}),(0,a.jsx)(o.Z5,{children:(0,a.jsx)(o.AW,{path:e,children:(0,a.jsx)(o.AW,{element:(0,a.jsx)(I,{}),index:!0})})})]})}))},30145:(e,s,t)=>{t.d(s,{Z:()=>M});var a=t(52322),n=t(2784),o=t(48630),r=t(90778),i=t(38894),l=t(51024),c=t(64332),u=t(63436),d=t(86674);const h={children:"Storage",color:"blue",size:"tiny"},m=[{value:"rpcNetworkAuthoring",text:"Get authoring information",label:{color:"pink",children:"RPC",size:"tiny"},code:"// Returns all pending extrinsics, potentially grouped by sender\nconst unsub = await api.rpc.author.pendingExtrinsics((extrinsics) => {\n if(extrinsics.length === 0){\n console.log('No pending extrinsics');\n return;\n }\n console.log(extrinsics);\n});"},{value:"rpcListenToHead",text:"Listen to new Head",label:{color:"pink",children:"RPC",size:"tiny"},code:"// subscribe to new headers, printing the full info for 5 Blocks\nlet count = 0;\nconst unsub = await api.rpc.chain.subscribeNewHeads((header) => {\n console.log(`#${header.number}:`, header);\n\n if (++count === 5) {\n console.log('5 headers retrieved, unsubscribing');\n unsub();\n }\n});"},{value:"rpcQueryState",text:"Get state metadata",label:{color:"pink",children:"RPC",size:"tiny"},code:"// retrieve and log the complete metadata of your node\nconst metadata = await api.rpc.state.getMetadata();\n\nconsole.log('version: ' + metadata.version);\nconsole.log('formatted: ' + JSON.stringify(metadata.asLatest.toHuman(), null, 2));\n"},{value:"rpcSystemInfo",text:"Get system information",label:{color:"pink",children:"RPC",size:"tiny"},code:"// Retrieve the chain & node information information via rpc calls\nconst [chain, nodeName, nodeVersion, properties] = await Promise.all([\n api.rpc.system.chain(),\n api.rpc.system.name(),\n api.rpc.system.version(),\n api.rpc.system.properties()\n]);\nconsole.log('You are connected to chain ' + chain)\nconsole.log('You are using: ' + nodeName + ' v' + nodeVersion);\n\nif (properties.size > 0) {\n console.log('Node specific properties:');\n properties.forEach((value, key) => {\n console.log(key, value);\n });\n} else {\n console.log('No specific chain properties found.');\n}"},{code:"// Get chain state information\n// Make our basic chain state / storage queries, all in one go\n\nconst [now, minimumValidatorCount, validators] = await Promise.all([\n api.query.timestamp.now(),\n api.query.staking.minimumValidatorCount(),\n api.query.session.validators()\n]);\n\nconsole.log('The current date is: ' + now);\nconsole.log('The minimum validator count: ' + minimumValidatorCount);\n\nif (validators && validators.length > 0) {\n // Retrieve the balances for all validators\n console.log('Validators');\n\n const validatorBalances = await Promise.all(\n validators.map((authorityId) => api.query.system.account(authorityId))\n );\n\n validators.forEach((authorityId, index) => {\n console.log('Validator: ' + authorityId.toString() )\n console.log('AccountData: ' + validatorBalances[index].toHuman() );\n });\n}\n",label:h,text:"Get chain state information",value:"storageGetInfo"},{code:"// Subscribe to system events via storage\napi.query.system.events((events) => {\n console.log('----- Received ' + events.length + ' event(s): -----');\n // loop through the Vec\n events.forEach((record) => {\n // extract the phase, event and the event types\n const { event, phase } = record;\n const types = event.typeDef;\n // show what we are busy with\n console.log(event.section + ':' + event.method + '::' + 'phase=' + phase.toString());\n console.log(event.meta.docs.toString());\n // loop through each of the parameters, displaying the type and data\n event.data.forEach((data, index) => {\n console.log(types[index].type + ';' + data.toString());\n });\n });\n});",label:h,text:"Listen to system events",value:"storageSystemEvents"},{code:"// You may leave this example running and make a transfer\n// of any value from or to Alice address in the 'Transfer' App\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\n\n// Retrieve the initial data\nlet [, { free: previous }] = await api.query.system.account(ALICE);\n\nconsole.log('ALICE has a balance of ' + previous);\n\n// Subscribe and listen to balance changes\napi.query.system.account(ALICE, ([, { free }]) => {\n // Calculate the delta\n const change = free.sub(previous);\n // Only display positive value changes (Since we are pulling 'previous' above already,\n // the initial balance change will also be zero)\n if (!change.isZero()) {\n previous = free;\n console.log('New transaction of: '+ change);\n }\n});",label:h,text:"Listen to balance changes",value:"storageListenToBalanceChange"},{code:"// You may leave this example running and make a transfer\n// of any value from or to Alice/Bob address in the 'Transfer' App\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\nconst BOB = '5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty';\n\nconsole.log('Tracking balances for:', [ALICE, BOB])\n\n// Subscribe and listen to several balance changes\napi.query.system.account.multi([ALICE, BOB], (info) => {\n console.log('Change detected, new balances: ', info)\n});",label:h,text:"Listen to multiple balances changes",value:"storageListenToMultipleBalancesChange"},{code:"// This example set shows how to make queries at a point\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\n\n// retrieve the balance, once-off at the latest block\nconst { data: { free } } = await api.query.system.account(ALICE);\n\nconsole.log('Alice has a current balance of', free.toHuman());\n\n// retrieve balance updates with an optional value callback\nconst balanceUnsub = await api.query.system.account(ALICE, ({ data: { free } }) => {\n console.log('Alice has an updated balance of', free.toHuman());\n});\n\n// retrieve the balance at a block hash in the past\nconst header = await api.rpc.chain.getHeader();\nconst prevHash = await api.rpc.chain.getBlockHash(header.number.unwrap().subn(42));\nconst { data: { free: prev } } = await api.query.system.account.at(prevHash, ALICE);\n\nconsole.log('Alice had a balance of', prev.toHuman(), '(42 blocks ago)');\n\n// useful in some situations - the value hash and storage entry size\nconst currHash = await api.query.system.account.hash(ALICE);\nconst currSize = await api.query.system.account.size(ALICE);\n\nconsole.log('Alice account entry has a value hash of', currHash, 'with a size of', currSize);",label:h,text:"Retrieve historic query data",value:"storageRetrieveInfoOnQueryKeys"},{code:"// this example shows how to retrieve the hex representation of a storage key\n\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\n\n// show the key for an entry without arguments\nconsole.log(api.query.timestamp.now.key());\n\n// show the key for a map entry (single argument)\nconsole.log(api.query.system.account.key(ALICE));\n\n// show the key prefix for a map\nconsole.log(api.query.system.account.keyPrefix());\n\n// show the key for a double map\nconsole.log(api.query.staking.erasStakers.key(0, ALICE));\n\n// show the key prefix for a doublemap\nconsole.log(api.query.staking.erasStakers.keyPrefix());\n",label:h,text:"Get underlying storage key hex values",value:"storageKeys"},{value:"constsStakingParameters",text:"Get staking parameters",label:{color:"green",children:"Consts",size:"tiny"},code:"// Get SRML staking parameters as consts\n// 'parameter_types' were added to substrate with spec_version: 101.\n// This example will throw an error if used with versions before that.\n\nconst bondingDuration = api.consts.staking.bondingDuration;\nconst sessionsPerEra = api.consts.staking.sessionsPerEra;\n\nconsole.log('Staking bonding duration: ' + bondingDuration);\nconsole.log('Staking sessions per era: ' + sessionsPerEra);"},{value:"extrinsicMakeTransfer",text:"Make transfer and listen to events",label:{color:"grey",children:"Extrinsics",size:"tiny"},code:"// Make a transfer from Alice to Bob and listen to system events.\n// You need to be connected to a development chain for this example to work.\nconst ALICE = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';\nconst BOB = '5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty';\n\n// Get a random number between 1 and 100000\nconst randomAmount = Math.floor((Math.random() * 100000) + 1);\n\n// Create a extrinsic, transferring randomAmount units to Bob.\nconst transfer = api.tx.balances.transferAllowDeath(BOB, randomAmount);\n\n// Sign and Send the transaction\nawait transfer.signAndSend(ALICE, ({ events = [], status }) => {\n if (status.isInBlock) {\n console.log('Successful transfer of ' + randomAmount + ' with hash ' + status.asInBlock.toHex());\n } else {\n console.log('Status of transfer: ' + status.type);\n }\n\n events.forEach(({ phase, event: { data, method, section } }) => {\n console.log(phase.toString() + ' : ' + section + '.' + method + ' ' + data.toString());\n });\n});"}];var p=t(61349);function x(){return(0,p.$G)("app-js")}const g=n.memo((function({className:e="",isCustomExample:s,isRunning:t,removeSnippet:r,runJs:i,saveSnippet:l,stopJs:c}){const{t:u}=x(),[d,h]=(0,n.useState)(""),m=(0,n.useCallback)((e=>h(e)),[]),p=(0,n.useCallback)((()=>{h("")}),[]),g=(0,n.useCallback)((()=>{l(d),p()}),[p,l,d]);return(0,a.jsxs)(o.zx.Group,{className:`${e} action-button`,children:[s?(0,a.jsx)(o.zx,{icon:"trash",onClick:r}):(0,a.jsx)(o.GI,{className:"popup-local",onCloseAction:p,value:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.II,{autoFocus:!0,maxLength:50,min:1,onChange:m,onEnter:g,placeholder:u("Name your example"),value:d,withLabel:!1}),(0,a.jsx)(o.zx,{icon:"save",isDisabled:!d.length,label:u("Save snippet to local storage"),onClick:g})]}),children:(0,a.jsx)(o.zx,{icon:"save",isReadOnly:!1})}),t?(0,a.jsx)(o.zx,{icon:"times",onClick:c}):(0,a.jsx)(o.zx,{className:"play-button",icon:"play",onClick:i})]})})),b="polkadot-app-js-examples",f="polkadot-app-js-selected",j={children:"Custom",color:"orange",size:"tiny"};var v=t(12909),y=t(1346),C=t(17751);const w=e=>(0,v.V)(e)?e.stack?e.stack:e.toString():(0,y.o)(e)?"undefined":(0,C.F)(e)?"null":Array.isArray(e)?`[${e.map(w).join(", ")}]`:e instanceof Map?`{${[...e.entries()].map((([e,s])=>`${e.toString()}: ${w(s)}`)).join(", ")}}`:e.toString(),k=({args:e,type:s},t)=>{try{return(0,a.jsx)("div",{className:`js--Log ${s}`,children:e.map(w).join(" ")},t)}catch(e){return(0,a.jsxs)("div",{className:`js--Log ${s} error`,children:["Internal error: ",e.stack||e.message]},t)}},N=o.zo.article`
background-color: #4e4e4e;
color: #ffffff;
display: flex;